riot / compiler Goto Github PK
View Code? Open in Web Editor NEWRiot.js compiler
License: MIT License
Riot.js compiler
License: MIT License
riot-compiler v2.3.21 has an issue in a regex (Catastrophic Backtracking) thats make it unusable under certain conditions, so it is unpublished now.
please see riot/rollup-plugin-riot#62
When I compile a tag with 2.3.18, this
within a tag becomes undefined, downgrading to 2.3.13 seems to resolve the issue. Quickly tested with just a console.log(this) within a tag.
I am using webpack with riotjs-loader and babel 6, I have tags with <script type="babel">
in them, but it doesn't seem to really make a difference.
The compiled tags come out looking like this, for example:
var parent = undefined.parent;
@aMarCruz with the latest compiler version 2.5.* it seems that the riot.compiler.js bundle does not work properly in riot. Steps to reproduce the issue:
could you please fix this issue? I made a patch 2.5.1 but there are still javascript errors coming from the compiler.
When using the babel compiler (babel 6), babel adds a "use strict" to the code, which is removed by the riot-compiler. My babel version however, outputs 'use strict' with single quotes, which is not caught by the regex.
I've created a patch and also added a test case for the babel this issue (#15). It passes, but comes awfully close to the 2000ms cutoff on my machine.
Riot supports "smart ES6 like method syntax" for custom tags per http://riotjs.com/guide/#tag-syntax and this holds true for normal compiles. However when compiled with the babel preprocessor a SyntaxError is generated.
I've created a simple test case here: https://github.com/talee/riot-preset-babel-test
Embedded below for ease of reading (simplified):
<component>
....HTML tags etc.
<script type="babel">
// This doesn't work
sadMethod() {
return 'T _ T'
}
// This works
this.verboseMethod = function() {
return '- _ -'
}
</script>
</component>
Running ./build.sh or riot --type babel component.tag
generates:
SyntaxError: .../riot-preset-babel-test/component.tag: Unexpected token (9:16)
The line numbers are inaccurate (bug?) since they start from the JS source code instead of the top of the file. 9:16 points to the space after the parentheses:
sadMethod() {
^points to here
Global riot and babel settings:
riot-cli: 2.3.14 - https://github.com/riot/cli
riot-compiler: 2.3.22 - https://github.com/riot/compiler
6.5.1 (babel-core 6.5.1)
Let me know if there is any additional info you need to help repro this. Thanks!
Error: Unrecognised input
This is the only message thrown when LESS parser fails, which is not descriptive.
Even worse is when using Riot with other runners like Webpack, this error message does not even mention it was about LESS. I would suggest when throwing / relaying exceptions from parsers, wrap it with a new exception that belongs to Riot, and indicate the source of error.
@riot/owners ,
with the recent additions, we have inconsitent interfaces for the compiler functions html
, style
, and js
, of the node version.
Even now, I have problems remember the correct order. This is:
compile (source, compilerOptions, url*)
html (source, compilerOptions, expressions*, url*)
style (source, tagName, parserName, scopedFlag*, parserOptions*, url*)
js (source, compilerOptions, parserName, parserOptions*, url*)
My proposal is to change the API to this:
compile (source, compilerOptions, url)
html (source, compilerOptions, url, expressions)
style (source, compilerOptions, url, parserName, parserOptions, tagName, scopedFlag)
js (source, compilerOptions, url, parserName, parserOptions)
...or we can use a plain object for additional parameters:
function (source, compilerOptions, url, additionalOptions)
//e.g.
var css = compiler.style(src, opts, url, { tagName: 'my-tag', scoped: true })
which has the advantage that you can add more parameters as needed, without disturbing a previous API.
I know this _can be_ a breaking change, but these function are not documented yet, and the parameters marked with *
are new to v2.3.x (I can remove an internalFlag of html
).
The main change is in the style
function, note "tagName" and "scopedFlag" is used internally to call scopedCSS.
The parsers API:
html (source, options, url)
css (tagName, source, options, url)
js (source, options, url)
again, the parameter "tagName" of parsers.css
is not used by any riot parser, it is used when "scopedFlag=true" by the internal scopedCSS function, so I think is better change this to (source, options, url, tagName)
or even remove the "tagName" parameter.
In [email protected] all the css attributes will be always scoped by default
Hello,
In riot-compiler's source code, you pass option 'resolveModuleSource' to babel as a string:
https://github.com/riot/compiler/blob/master/lib/parsers/es6.js#L25
If you check Babel's documentation it must be a function:
https://babeljs.io/docs/usage/options/
You can see in their source code that they indeed use this option as a function:
https://github.com/babel/babel/blob/master/packages/babel-core/src/transformation/file/index.js#L248
And that's the reason why I'm getting an error:
`TypeError: unknown: resolveModuleSource is not a function
at File.resolveModuleSource (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/transformation/file/index.js:343:39)
at NodePath.enter (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/transformation/modules/lib/metadata.js:29:42)
at NodePath.call (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/path/context.js:56:28)
at NodePath.visit (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/path/context.js:90:8)
at TraversalContext.visitMultiple (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/context.js:108:16)
at TraversalContext.visit (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/context.js:146:19)
at Function.traverse.node (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/index.js:76:17)
at Object.traverse [as default] (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/index.js:55:14)
at NodePath.traverse (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/traversal/path/index.js:163:23)
at CommonJSFormatter.getMetadata (/mnt/data/home/laurent/riotjs/riot-test/node_modules/babel/node_modules/babel-core/lib/transformation/modules/_default.js:129:22)
`
I have installed babel 5.8.38 (because your comment in the source code suggest you don't support newer versions of babel).
Am I mistaken? Thank you
When using v2.3.21
, all pre-processors fail to be found and cause an infinite hang (no EXIT
code broadcasted).
ES 2015 "import" is not usable at the moment with riot .
Taken from this issue
<tag>
<script>
import baz from './baz'
this.foo = 'bar'
</script>
</tag>
riot.tag2('tag','', function(opts) {
import baz from './baz' // import here is not allowed
this.foo = 'bar'
})
I think the compiler needs to translate the import statement into a regular "import" .
import baz from './baz' // Will work this way
riot.tag2('tag','', function(opts) {
this.foo = 'bar'
})
I will try to make thoses changes to the compiler .
I am working in the branch custom-parsers-options
but the method getAttr
seems to be buggy because it does not allow to get attributes like <style type="sass" options="{ 'val': true }">
. @aMarCruz any help?
see riot/riot#1234
When I call compiler.compile within node, the compile fails.
[TypeError: cleanSource(...).replace is not a function]
The same tag compiles fine in the browser.
node v4.4.7
riot-compiler: v2.5.2
Describe your issue:
When I place {
opening bracket of method on new line in <script>
tag, Riot compiler don't build my method correctly.
Can you reproduce the issue?
<my-tag>
<h1>{ message }</h1>
<button onclick={ handleClick }>Button 1</button>
<button onclick={ handleClickBad }>Button 2</button>
<script>
this.message = 'hello there'
handleClick(e) {
this.message = 'Click';
}
handleClickBad(e)
{
this.message = 'Click bad';
}
</script>
</my-tag>
becomes this
riot.tag('my-tag', '<h1>{ message }</h1><button onclick={ handleClick }>Button 1</button><button onclick={ handleClickBad }>Button 2</button>', function(opts){
this.message = 'hello there'
this.handleClick = function(e) {
this.message = 'Click';
}.bind(this);
handleClickBad(e)
{
this.message = 'Click bad';
}
}));
On which browser/OS does the issue appear?
Ubuntu 16.04
Which version of Riot does it affect?
Riot 2.6.7 compiled with grunt-riot
How would you tag this issue?
Moved from riot/riot/issues/2065
The recent regex change on version 2.5.6 in this line:
https://github.com/riot/compiler/blob/master/src/core.js#L133
Matches text incorrectly. It matches from the word "import" to the last single or double quote on the entire tag, not to the end of the import.
Example:
https://regex101.com/r/Isww62/1
Previous regex behavior:
https://regex101.com/r/Isww62/2
This problem breaks any tag with ES6 imports inside.
Should #we create a CONTRIBUTING.md file as seen in riot/riot?
I don't know if it's intended to be so, but I noticed a minor difference between compiler in the browser and in the server:
// on the server
var arr = compiler.compile(template, {entities: true})
// on the browser it needs an extra parameter
var arr = compiler.compile(template, true, {entities: true})
I often find myself writing code like this:
<my-tag>
this.updateResult()
updateResult() {
// some expensive calculation
}
</my-tag>
This would work if it was normal JS, but because riot rewrites function declarations, it throws an updateResult is not a function
. What if the above code was translated to this:
this.updateResult = (function() {...}).bind(this)
// == user's constructor code goes here
this.updateResult()
This lets users keep all their constructor code at the top, which makes things more readable (especially if you have lots of functions).
When using a SASS style tag inside a Pug template (formally Jade) I receive the following error:
Error: Invalid CSS after " ": expected 1 selector or at-rule, was "{ h1 {"
SASS failing example tag
//- Filename: sass-inside-pug.tag
sass-inside-pug
h1 SASS
h2 Inside Nug
style(type="sass").
h1
color: red
h2
color: orange
CLI arguments
riot --template pug --style sass -w src/tags build/js/tags.js
If you look closely at the error message you'll see that the h1
tag itself is enclosed inside a {
curly bracket block. Looking at the error message if seems that because the entire CSS is automatically wrapped inside a { }
block, that that might be the issue here. Notice that the SASS itself is rendered correctly.
Now if we would add the option indentedSyntax: false
and add the correct curly brackets, then the result is compiled correctly.
Note that using indentedSyntax: false
is only an example to indicate that the problem is probably caused by the default indentedSyntax: true
. Of course we don't want to use curly brackets at all with SASS, so the indentedSyntax: true
should just work.
SASS with indentedSyntax: false
working example tag
//- Filename: sass-inside-pug-without-indented-syntax.tag
sass-inside-pug-without-indented-syntax
h1 SASS
h2 Inside Nug
style(type="sass", options="{"indentedSyntax": false }").
h1{
color: red
}
h2{
color: orange
}
Used versions
riot-cli: 2.5.0
riot-compiler: 2.4.1
node-sass: 3.7.0
libsass: 3.3.6
Any help is really appreciated, would ❤️ to see this fixed!
While trying to specify Babel options to Riot without using a .babelrc
(I'll be opening a separate ticket about this), I discovered that you can specify options
on a <script>
tag, to have the options in question passed along to the parser. This doesn't seem to be documented, but it also doesn't work - for example, the following Jade-generated code:
<script options="{"presets": ["es2015-riot"]}">
... will result in the following error:
Error: ./development/components/app.tag
Module build failed: SyntaxError: Unexpected token &
at Object.parse (native)
[...]
... failing here due to not un-escaping the "
s in the attribute value (which is unsurprising, given that it uses regular expressions to parse it out, rather than a real HTML parser). This should probably be fixed :)
After searching a quite a bit, the only way I found to pass custom CSS parsers was to use riot.parsers.css.myCustomCSSParser
which is fine if you have access to the riot
's instance.
However, I'm in a situation where we use esnunes/riotjs-loader and I have no way to modify riot's instance. The only thing I can pass through with webpack is the options
for the compiler.compile
function (done through the query
object in webpack).
Do you think you could make supplying new custom parsers definitions through the opts?
Something like:
{
parsers: {
css: {
myCustomCSSParser: function (tagName, css) {
...
},
...
},
js: {
myCustomJSParser: function (tagName, css) {
...
},
...
},
}
}
There may be other useful use cases (I'm new to Riot).
@GianlucaGuarini @aMarCruz Thanks for considering !
Edit: the need for this is to add postcss
autoprefixer
to SCSS styles defined in the tags. All of that with webpack!
When a tag is compiled, attrs
are stored as a plain string and later at runtime they are processed with the walkAttributes
function (during the mount
event).
I suggest to move attribute parsing into compiler, outputting attributes as a plain javascript object (key-value pairs) so it's easier and faster to process them at runtime.
While the _compileJS
method accepts parserOpts
as a fourth argument, there's no way to specify these when using riot.compile()
(as opposed to riot.js()
, where it is possible to do so).
The specific usecase where I'm finding this to be an issue: I'm currently working on a project that uses Webpack + Riot + Babel, but the Babel settings for Riot (via riotjs-loader
) have to be different from those for babel-node
when running the server application. Namely, babel-node
uses the es2015-node
preset, whereas Riot needs the es2015-riot
preset.
Right now, there's no way for me to specify a custom preset in the Riot parser options on a project-wide basis, only for each component individually via an options
tag (which is also broken, per #63). This means that it uses the .babelrc
, which tries to use es2015-node
and consequently fails on top-level this
.
My use of riotjs-loader
means that I also have no control over which Riot compiler method is being called, and so I'm stuck with riot.compile()
and can't eg. patch in something with riot.js()
. Essentially, it's impossible for me at this stage to successfully compile my code.
This would only be an API addition (and corresponding documentation fixes), something along the lines of:
riot.compile(source, {
parserOptions: {
js: {
presets: ["es2015-riot"]
}
}
})
Consider this tag file (test.tag):
<test>
<script>
this.x = 1;
</script>
</test>
I am compiling stuff using gulp, browserify, babelify and riotify to a single bundle, using babel-core > 6.0.2. I am using the "type: babel" compiler. When looking at the output, the tag is compiled to:
module.exports = riot.tag2('test', '', '', '', function(opts) {
undefined.x = 1;
});
Somehow all references to this are replaced by undefined. It has to do something with the es2015 preset used. When I change the preset in the compiler from es2015 to stage-0, the correct output is generated:
module.exports = riot.tag2('test', '', '', '', function(opts) {
this.x = 1;
});
if import
statement starts with \t
or contains \t
before import, it can't be extracted
Consider following 2 examples.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Riot test</title>
</head>
<body>
<test/>
<template id="test">
<test>
<h3>Hi, {name}!</h3>
<script>
this.name = "Mike";
</script>
</test>
</template>
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<script>
riot.compile(test.innerHTML);
riot.mount("*");
</script>
</body>
<html>
Output is: Hi, Mike!
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Riot test</title>
</head>
<body>
<test/>
<template id="test">
<test><h3>Hi, {name}!</h3><script>this.name = "Mike";</script></test>
</template>
<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>
<script>
riot.compile(test.innerHTML);
riot.mount("*");
</script>
</body>
<html>
Output is: Hi, !
This is an issue especially when one uses pug, as, by default, it produces non-prettified HTML.
Basically jade == pug
so I would just add this key here https://github.com/riot/compiler/blob/dev/src/parsers_br.js#L104-L105
The original issue was posted here
I've been fighting for some hours now to make riot use es6 js..
<script type="babel">
console.log(this)
</script>
this is undefined which is kind of covered here #41
basically using es2015-riot instead of the normal es2015 preset, and that actually works.
..btw, they are very simular except the riot version has a bunch of extra {'loose': true}
options, weird.
However, I also have some normal .js files I would just like to use the normal es2015 preset.
So I removed the preset from .babelrc and moved them into webpack.config.js like this
...
{
test: /\.js$/,
loader: 'babel',
query: { presets: ['es2015'] }
},
{
test: /\.tag$/,
loader: 'riotjs',
query: { presets: ['es2015-riot'] }
},
...
...but that just don't work, now the .tag script dont get transpiled at all.
Anyone had simular problems?
Upgrading to 2.3.15 has given me some problems, not sure if it's a bug or if I need to change something.
running this code
const riot = require('riot');
const output = riot.compile(`
<my-menu>
<button onclick="{ dostuff }"></button>
<script type="text/babel">
const tjo = "tjim";
this.dostuff = e => {
console.log(e);
};
</script>
</my-menu>`);
console.log(output);
under 2.3.13 I got this
riot.tag2('my-menu', '<button onclick="{dostuff}"></button>', '', '', function(opts) {
var tjo = "tjim";
this.dostuff = function (e) {
console.log(e);
};
}, '{ }');
under 2.3.15 I get this
riot.tag2('my-menu', '<button onclick="{dostuff}"></button>', '', '', function(opts) {
const tjo = "tjim";
this.dostuff = e => {
console.log(e);
};
}, '{ }');
doesn't seem like it's transforming at all. What to do?
here is the template html:
<onboarding-new>
<yield/>
</onboarding-new>
here is the yielded html
<form novalidate="" data-parsley-validate="" action="/application" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="x7LlLKnR/gN0WI//lE5RCidplKI4OWPU97A9f1UI8qAPv5ufcbpNLVh4G0Ai5a5UwvmDO6Iv4kz+Rm2GqywLNw=="> <fieldset>
<section>
<label>
Password
<input placeholder="**********" required="required" id="password" data-parsley-pattern=".{8,}$" data-parsley-trigger="focusin" data-parsley-pattern-message="Your password must be at least 8 characters and contain at least one upper case letter, one lower case letter, and one number." data-parsley-required-message="Your password must be at least 8 characters and contain at least one upper case letter, one lower case letter, and one number." type="password" name="application[password]" data-parsley-id="4">
</label>
<label>
Confirm Password
<input placeholder="**********" required="required" data-parsley-equalto="#password" data-parsley-equalto-message="Your passwords do not match." data-parsley-required-message="Your passwords do not match." type="password" name="application[password_confirmation]" id="application_password_confirmation" data-parsley-id="6">
</label>
</section>
</fieldset>
</form>
here is the anonymous function with the error
(function(E
/**/) {
return [".",function(v){v=(8,);return v||v===0?v:""}.call(this),"$"].join("");
})
Since d2843fe81e2a9bb5ac2d5baba2831340accbc254
the compiler doesn't work as well as in the first v2.3.22 commit. In fact, it doesn't work at all in the browser.
I played around with the examples (examples/live-editor
being specific) using the latest compiled riot+compiler.js
.
The following output was thrown (similar in other riot examples):
Error: You must #include brackets before this code!
compile<()
riot+compiler.js:2851
<anonym>
riot+compiler.js:2766
<anonym>
riot+compiler.js:3
riot+compiler.js:2851:1
ReferenceError: riot is not defined
<anonym>
index.html:19
index.html:19:2
I'm using riot 3.0.0alpha10,but the compiler will still output __
for bool attributes, so which version will fix this?
I would like to merge the compiler in one single script removing the circular riot
dependency exporting all the methods we want to use in riot
and also in riot-cli
@tipiirai , @GianlucaGuarini , @cognitom , @rsbondi ,
@riot/owners ,
please see the preview of the compiler in the 230-alpha1 branch.
I think about 60% is done (the heavy parts).
>
in unquoted attributes in html markup).script
tags (different "type" attribute) combined with one untagged script block.:scoped
is replaced with the tagname and the riot-tag attribute, there's no reordenation.The compiler replaces the expressions with a hash inside fix delimiters #@
and #
(invalid in js, but valid in html markup) and append an object to register the functions at creation-time, in a new riot.tag2 function. With this, there's no need to call the Function() ctor and there's no problem with Google security restrictions.
Modified tmpl/brackets functions supports these new form and can compile the expressions at runtime with custom brackets, too (we can have mixed mode expr in source).
e.g.
riot.tag2('my-box', '<h1>#@091103179#</h1>', '', '', function(opts) {
this.box = {
title: "Hello",
}
}, {"@091103179":function(G){return ("box"in this?this:G).box.title}});
riot.tag2 implementation:
riot.tag2 = function (name, html, css, attrs, fn, pce) {
if (css) injectStyle(css)
if (pce) tmpl.insert(pce) // <-- register precompiled expressions with tmpl module
tagImpl[name] = { name: name, tmpl: html, attrs: attrs, fn: fn }
return name
}
This compiler does more than the older one, but the performance and code size is almost the same. At run-time there are gains in speed, and the generated functions are lighter and (I hope) memory-friendly.
With pure precompiled expressions there's no need to include the full tmpl/brackets, only the evaluation part (~30% of the full code).
I'm including a simple test of performance in test/perf.js
Please let me know what do you think.
We just did an npm install
and are experiencing a hang in our build process now.
We tracked the hang down to a change in versions from [email protected]
to [email protected]
.
We then went into the tag causing the hang and deleted some code until the problem went away. It turned out that our svg content is causing a problem with the riot-compiler
to surface.
Here is an example of the offending tag.
<icon-heart>
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454
C30,20.335,16,28.261,16,28.261z"/>
</svg>
</icon-heart>
hey - i've spent about an hour messing about with whitespace issues in .tag files. I know it's in the docs, but it's kinda unexpected. Are you planning to improve this for 2.3 ? I worry that this kind of thing will hurt adoption.
i'd like to add ecmascript-6
to _modnames
& point it to babel
.
my editor (rubymine/webstorm) seems to require
<script type="text/ecmascript-6">
to recognize es6 in script tags
when i add the type
, i get a build error:
Module build failed: Error: JS parser not found: "ecmascript-6"
Example:
<riot-tag>
let foo = {
bar() { }
}
buzz() { }
</riot-tag>
compiles to
let foo = {
this.bar = function() {}
}
this.buzz = function() {}
Is it possible with the new compiler to parse the riot tags in runtime directly in the browser?
In this file I see many require calls that are only available in a node environment
It was discussed here and also here.
In brief, there is need for a riot.compile()
function that compiles HTML-only templates (no code) and that returns the result of the compilation in a manageable format.
This is to support the scenario of template files separated from code (opposed to .tag files) as some of us are doing for ES6 / TypeScript (see RiotTS).
Currently we use an hack to extract the results from riot.compile(tag,true)
, but it would be nice if there was a specific compiler API method.
The current hack is this:
var compiled = riot.compile(template,true);
var r = compiled.indexOf("riot.tag(");
var stripped = compiled.substr(r+9);
var x = stripped.lastIndexOf(", function(opts) {");
stripped = stripped.substr(0,x);
var compiledResultArray = eval("["+stripped+"]");
i'm attempting to use import
in the script tag.
<test-tag>
<p>Test Tag</p>
<script>
import {log} from "../log";
</script>
</test-tag>
got the following:
events.js:142
throw er; // Unhandled 'error' event
^
SyntaxError: 'import' and 'export' may only appear at the top level (3:4) while parsing file: /test-project/test-tag.tag
at Parser.pp.raise (/test-project/node_modules/acorn/dist/acorn.js:1745:13)
at Parser.pp.parseStatement (/test-project/node_modules/acorn/dist/acorn.js:2449:29)
at Parser.pp.parseBlock (/test-project/node_modules/acorn/dist/acorn.js:2692:21)
at Parser.pp.parseFunctionBody (/test-project/node_modules/acorn/dist/acorn.js:1413:22)
at Parser.pp.parseFunction (/test-project/node_modules/acorn/dist/acorn.js:2770:8)
at Parser.pp.parseExprAtom (/test-project/node_modules/acorn/dist/acorn.js:1129:19)
at Parser.pp.parseExprSubscripts (/test-project/node_modules/acorn/dist/acorn.js:1023:19)
at Parser.pp.parseMaybeUnary (/test-project/node_modules/acorn/dist/acorn.js:1004:19)
at Parser.pp.parseExprOps (/test-project/node_modules/acorn/dist/acorn.js:948:19)
at Parser.pp.parseMaybeConditional (/test-project/node_modules/acorn/dist/acorn.js:930:19)
Assume riot --type coffee --expr kids.tag
, if you don't have coffeescript installed you would get TypeError: Cannot read property 'compile' of null
.
It would appear this is because it's trying to require something that ends up being null/undefined because if cannot be resolved.
Adding a small detection on this requires would probably enable more precise error reporting without much complication.
Moved here as per @GianlucaGuarini request.
If you want test the compiler v2.3.16 you need install riot-tmpl v2.3.16 from its dev branch, as they have not been published in npm. Tests in Travis are failing because this.
Is anyone working on source maps for riot tags?
These would be really useful for code coverage, I currently do my code coverage on the compiled files but see the original source would be useful. Also debugging when all I have is large bundles.
If no one is, I may have a go. Not that I know anything about source maps...
Possibly related to #17, but not quite the same.
In my Gulp + Webpack + RiotJS setup, I forgot to install the jade
module, and as a result I got the following error:
Error: ./src/components/app.tag
Module build failed: TypeError: (intermediate value)(intermediate value) is not a function
at _loadParser (/home/sven/projects/riot-todo/node_modules/riot-compiler/lib/parsers.js:55:39)
at compileTemplate (/home/sven/projects/riot-todo/node_modules/riot-compiler/lib/compiler.js:812:10)
at Object.compile (/home/sven/projects/riot-todo/node_modules/riot-compiler/lib/compiler.js:881:11)
at Object.module.exports (/home/sven/projects/riot-todo/node_modules/riotjs-loader/index.js:30:17)
@ ./src/index.js 3:0-31
The responsible configuration was:
gulp.task('webpack', function(){
return gulp.src("./src/index.js")
// ...
.pipe(webpackStream({
watch: true,
module: {
preLoaders: [{ test: /\.tag$/, loader: "riotjs-loader", exclude: /node_modules/, query: { type: "babel", template: "jade" } }],
loaders: [
// ...
]
},
plugins: [ new webpack.ProvidePlugin({riot: "riot"}) ],
resolve: {
// ...
},
debug: true
}))
// ...
});
Installing jade
resolved the issue. Now, this probably should have thrown a human-readable error, due to this statement - but presumably due to the addition of the _loadParser
wrapper function, this statement will never trigger (since parser
is never falsy), and you end up with the above cryptic error instead.
I use Webstorm, and it deals nice with es6 syntax when I set the type as "text/ecmascript-6" or "text/babel", but these types are not recognized by Riot compiler and it crashes. Then I have to remove the type attribute before compiling. When the tags are compiled, then I can easily transpile them using the latest version of Babel.
The script parser option could be defined in specific attribute like "parser" instead of "type", OR the compiler could just ignore "unknown" types and work like it was vanilla js.
environment: riot 2.3.1, webpack latest, babel v6.
tag example:
<mytag>
<script type="babel">
import foo from './bar'
// some other fancy code
</script>
</mytag>
This will get error when running babel: error 'import' and 'export' may only appear at the top level
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.