Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage with Browserify #139

Closed
jeromegn opened this issue Jan 22, 2015 · 17 comments
Closed

Usage with Browserify #139

jeromegn opened this issue Jan 22, 2015 · 17 comments

Comments

@jeromegn
Copy link

@jeromegn jeromegn commented Jan 22, 2015

Probably related to #136 and #137, but it would be nice to be able to use this as a npm package with browserify.

npm install riot
var riot = require('riot')
riot.mount('todo')

Do .tag files have to be precompiled? This could be an issue. It could also be fine if the individual components (or tags) as npm packages did their own compiling.

@popomore
Copy link

@popomore popomore commented Jan 22, 2015

+1

Can source code be commonjs? Using browserify to build files.

@jeromegn
Copy link
Author

@jeromegn jeromegn commented Jan 22, 2015

Also, if the node.js API allowed or the CLI allowed for string input (stdin for the CLI and a string for the node.js API), it would be easy to create a riotify browserify transform to process the .tag files automatically.

@tipiirai
Copy link
Contributor

@tipiirai tipiirai commented Jan 23, 2015

Sounds like a great idea!

@jhthorsen
Copy link
Member

@jhthorsen jhthorsen commented Jan 23, 2015

+1

I just made a "riotify" transform package, but it has limited usage, because of this limitation.

https://www.npmjs.com/package/riotify

@aurri aurri self-assigned this Jan 23, 2015
@egeozcan
Copy link

@egeozcan egeozcan commented Jan 23, 2015

I'm trying to make it work with gulp & browserify.

gulp.task('riot', function (cb) {
  exec('riot ./src', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

Riot just puts the .js files next to the .tag files which I named like FooTag.tag, so I can have a */**/*Tag.js in my .hgignore. I tried adding that gulp task as a dependency to my browserify build task and required the outputted js files from normal files. I still can't do require('riot') because browserify can't convert it but it works if riot is already in the global scope.

@ariesjia
Copy link

@ariesjia ariesjia commented Jan 24, 2015

+1

@aurri
Copy link
Contributor

@aurri aurri commented Jan 24, 2015

Yup, this is high on our list.

@tipiirai tipiirai modified the milestone: 2.0.2 Jan 24, 2015
@aurri
Copy link
Contributor

@aurri aurri commented Jan 24, 2015

This will be possible in the next release (already implemented):

npm install riot
var riot = require('riot')
riot.mount('todo')

Transform is coming after that (likely in another release).

@aurri aurri modified the milestones: 2.0.2, 2.0.3 Jan 25, 2015
@jhthorsen
Copy link
Member

@jhthorsen jhthorsen commented Jan 25, 2015

@aurri: Could you tell me...

  1. How I can improve the tranform I wrote #139 (comment)
  2. Let me know how I can hand over the npm namespace to you (I'm new to node)
@aurri
Copy link
Contributor

@aurri aurri commented Jan 25, 2015

@jhthorsen: We're currently focused on wrapping things up for the next release. Browserify transform will follow soon after that. Will definitely look at riotify once we get to that. Thanks!

@jhthorsen
Copy link
Member

@jhthorsen jhthorsen commented Jan 26, 2015

Cool! Let me know if you add support for streaming, and I'll update my transform package accordingly.

@aurri
Copy link
Contributor

@aurri aurri commented Jan 26, 2015

Added riotify to the docs (pending update): 17379b1

Thanks @jhthorsen, good job!

Not sure about the disclaimer.

It's actually now possible to use riot with browserify:

npm install riot
var riot = require('riot')
riot.mount('todo')

And riotify examples seem to show it working exactly as it should:

require('./todo.tag')
riot.mount('todo')

There's no use for var todo = require('./todo.tag') in Riot if that's what you mean in the disclaimer.

@aurri aurri closed this Jan 26, 2015
@aurri
Copy link
Contributor

@aurri aurri commented Jan 26, 2015

Related: #207

@freeall
Copy link
Contributor

@freeall freeall commented Feb 9, 2015

@aurri Maybe I misunderstand, but how should riot.mount('todo') work when running through browserify? Does it look for ./todo.tag? I couldn't make it work.

@jhthorsen Nice work with riotify, using it now.

@cognitom
Copy link
Member

@cognitom cognitom commented Feb 9, 2015

@freeall Without riotify, pre-complie is needed before the process of Browserify.

var riot = require('riot');
require('./todo.tag.js'); // pre-compiled tag file

riot.mount('todo');

I prefer the way with riotify like below.

var riot = require('riot');
require('./todo.tag'); // no precompile needed

riot.mount('todo');
@jhthorsen
Copy link
Member

@jhthorsen jhthorsen commented Feb 9, 2015

I'm considering making require("./todo.tag") have a return value. Please comment if you have any input: riot/riotify#9

@aurri
Copy link
Contributor

@aurri aurri commented Feb 9, 2015

Thanks @cognitom, @jhthorsen!

I hope that answers your question @freeall.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.