Ability to pipe into/out of nativejsx

Question

Ability to pipe into/out of nativejsx

asunar opened this issue 8 years ago · comments

Alper commented 8 years ago

Hello,
Is it possible to transpile multiple jsx files and concat them without an intermediate save?

Say there are 3 jsx files inside the components folder

components/c1.jsx
components/c2.jsx
components/c3.jsx

How can I transpile and concat?
nativejsx components/*.jsx > cat > allComponentsTranspiled.js //pseudo code

OR

How can I concat and transpile?
cat components/*.jsx > nativejsx --output dist/allComponentsTranspiled.js //pseudo code

Thanks.

Trey Cordova · Answer 1 · Tue May 03 2016 12:13:24 GMT+0800 (China Standard Time)

Hey again, @asunar. Mind trying out 7c80621?

The acceptable syntax is:

cat some/**/*.jsx | bin/nativejsx > compiled.js

Things like

cat some/**/*.jsx | bin/nativejsx --output here.js

and

bin/nativejsx some/**/*.jsx > compiled.js

are a bit odd to handle, so I'm probably not going to support them.

Either you're piping and redirecting, or you're using the provided command line interface. That way we don't have to worry about too many branching trees in bin/nativejsx.

Let me know how it goes!

Alper · Answer 2 · Tue May 03 2016 15:23:49 GMT+0800 (China Standard Time)

Hi @treycordova,

I simply copied the contents of the updated bin/nativejsx file and pasted into my local bin/nativejsx file. Hopefully, that is all I needed to try out this version.

This works
node ./node_modules/nativejsx/bin/nativejsx components/*.js --output compiled && cat compiled/*.js > dist/allComponents.js

Getting an error with the following command:
cat components/*.js | node ./node_modules/nativejsx/bin/nativejsx > dist/allComponents.js

c:\code\mynativejsx
λ node ./node_modules/nativejsx/bin/nativejsx components/*.js --output compiled && cat compiled/*.js > dist/allComponents.js

c:\code\mynativejsx
λ cat components/*.js | node ./node_modules/nativejsx/bin/nativejsx > dist/allComponents.js
c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:945
  throw err;
  ^

SyntaxError: Unexpected token (179:11)
    at Parser.pp.raise (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:943:13)
    at Parser.pp.unexpected (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:1503:8)
    at Parser.pp.parseExprAtom (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:327:12)
    at Parser.parseExprAtom (c:\code\mynativejsx\node_modules\acorn-jsx\inject.js:367:24)
    at Parser.pp.parseExprSubscripts (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:216:19)
    at Parser.pp.parseMaybeUnary (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:197:19)
    at Parser.pp.parseExprOps (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExpression (c:\code\mynativejsx\node_modules\acorn\dist\acorn.js:86:19)

c:\code\mynativejsx
λ

Thanks for looking into this issue.

Trey Cordova · Answer 3 · Tue May 03 2016 23:10:21 GMT+0800 (China Standard Time)

Are you certain that the cat'd files are still valid JavaScript/JSX? Might want to poke around in the resulting cat to see what's in there.

Alper · Answer 4 · Sun May 08 2016 13:01:11 GMT+0800 (China Standard Time)

Not much of a JSX expert but it looks valid to me.

c:\code\mynativejsx
λ cat components/*.js
function template() {
        var name = '';
  return (
                <div>{ name }</div>
  );
}
function template2() {
        var name = '';
  return (
                <div>{ name }</div>
  );
}

c:\code\mynativejsx
λ cat components/*.js | node ./node_modules/nativejsx/bin/nativejsx > dist/allComponents.js
events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: shutdown EPIPE
    at exports._errnoException (util.js:856:11)
    at Socket.onSocketFinish (net.js:217:26)
    at emitNone (events.js:85:20)
    at Socket.emit (events.js:179:7)
    at finishMaybe (_stream_writable.js:478:14)
    at endWritable (_stream_writable.js:488:3)
    at Socket.Writable.end (_stream_writable.js:453:5)
    at Socket.end (net.js:406:31)
    at c:\code\mynativejsx\node_modules\nativejsx\bin\nativejsx:78:21
    at _combinedTickCallback (node.js:370:9)

c:\code\mynativejsx
λ

Trey Cordova · Answer 5 · Mon May 09 2016 07:42:39 GMT+0800 (China Standard Time)

I can't seem to reproduce this error. I ran everything as you did, but it's all good on my end. Also, the first and second stack traces are very different. It seems the first one is an acorn parse error, which is why I asked about the syntax output by the cat.

The second stack trace is around this piece of code:

    process.nextTick(function() {
      process.stdin.end();
    });

and is making your processing unhappy. Try commenting it out – I do have to note that bin/nativejsx won't actually finish processing because those lines were telling the script that we are done with stdin processing, without them you'll probably have to use control + c to kill the process. Regardless, if it doesn't error like you've provided above, then we have something to focus on and try to fix.

Alper · Answer 6 · Mon May 09 2016 13:53:52 GMT+0800 (China Standard Time)

Yes, the first stack trace was for the initial error I got. I tried to repro the issue with a simpler case.
When I comment out process.stdin.end(); I do not get an error but the output file is empty.

c:\code\mynativejsx
λ cat components/*.js
function template() {
        var name = '';
  return (
                <div>{ name }</div>
  );
}
function template2() {
        var name = '';
  return (
                <div>{ name }</div>
  );
}

c:\code\mynativejsx
λ cat components/*.js | node ./node_modules/nativejsx/bin/nativejsx > dist/allComponents.js

c:\code\mynativejsx
λ cat dist\allComponents.js

c:\code\mynativejsx
λ

I also realized that the output file is generated correctly even when there is an error.

c:\code\mynativejsx
λ cat components/*.js | node ./node_modules/nativejsx/bin/nativejsx > dist/allComponents.js
events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: shutdown EPIPE
    at exports._errnoException (util.js:856:11)
    at Socket.onSocketFinish (net.js:217:26)
    at emitNone (events.js:85:20)
    at Socket.emit (events.js:179:7)
    at finishMaybe (_stream_writable.js:478:14)
    at endWritable (_stream_writable.js:488:3)
    at Socket.Writable.end (_stream_writable.js:453:5)
    at Socket.end (net.js:406:31)
    at c:\code\mynativejsx\node_modules\nativejsx\bin\nativejsx:80:21
    at _combinedTickCallback (node.js:370:9)

c:\code\mynativejsx
λ cat dist\allComponents.js
function template() {
    var name = '';
    return function () {
        var $$a = document.createElement('div');
        $$a.appendChildren(name);
        return $$a;
    }();
}
function template2() {
    var name = '';
    return function () {
        var $$c = document.createElement('div');
        $$c.appendChildren(name);
        return $$c;
    }();
}
c:\code\mynativejsx

Finally, I added an event handler for the stream end event

process.stdin.on('end', function() {
   console.log('stream ended.');
});

Looks like process.stdin.end(); inside process.nextTick never gets called.

Here are the version number on my Windows 8.1 machine.

c:\code\mynativejsx
λ node --version   
v5.7.1             

c:\code\mynativejsx
λ npm --version    
3.8.1

Trey Cordova · Answer 7 · Sun May 22 2016 08:32:45 GMT+0800 (China Standard Time)

I wonder if the process concludes before process.nextTick's callback is invoked. If nextTick never gets called, we can't finish the stream appropriately. I wish I had a reproduction!

Trey Cordova · Answer 8 · Mon Feb 27 2017 13:23:25 GMT+0800 (China Standard Time)

Wasn't able to come up with a reproduction so I'm going to close this for now.