riot / compiler Goto Github PK

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.

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})  

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.

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+"]");

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...

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.

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

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'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)

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.

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.

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

1. Describe your issue:
   When I place { opening bracket of method on new line in <script> tag, Riot compiler don't build my method correctly.

2. 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';
    }
}));

• Riot compiler behavior on compiling method

3. On which browser/OS does the issue appear?
   Ubuntu 16.04

4. Which version of Riot does it affect?
   Riot 2.6.7 compiled with grunt-riot

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

Moved from riot/riot/issues/2065

I'm using riot 3.0.0alpha10，but the compiler will still output __ for bool attributes, so which version will fix this?

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 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.

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;
});

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?

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.

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?

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"]
        }
    }
})

Example:

<riot-tag>
  let foo = {
    bar() {  }
  }
  buzz() { }
</riot-tag>

compiles to

let foo = {
  this.bar = function() {}
}
this.buzz = function() {}

When using v2.3.21, all pre-processors fail to be found and cause an infinite hang (no EXIT code broadcasted).

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;

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?

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

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

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.

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="{&quot;presets&quot;: [&quot;es2015-riot&quot;]}">

... 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 :)

@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.

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!

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).

In [email protected] all the css attributes will be always scoped by default

Should #we create a CONTRIBUTING.md file as seen in riot/riot?

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("");
})

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 .

Hello,

In the description you wrote about installation through the Bower. But this package isn't in Bower.

bower ENOTFOUND     Package riot-compiler not found

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>

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.

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!

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.

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"

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!

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.

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

@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).

Points of interest:

• almost free indentation and style.
• better support/detection of expressions (there's no solution for > in unquoted attributes in html markup).
• multiple script tags (different "type" attribute) combined with one untagged script block.
• experimental support for script inclusion (with the "src" sttribute) from the file system at compile-time.
• multiple style blocks of various types. scoped convertion is applied after the preprocessing with external tools.
• changed logic to scoped styles, now :scoped is replaced with the tagname and the riot-tag attribute, there's no reordenation.
• support for full iso-8859-1 charset in attribute names.
• precompiled expressions.
• evaluation errors are logged (with console.error, optional feature).
• source filename is writted in the generated code (optional).

Precompiled expressions

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.

@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:

• pull the riot repo
• run npm install riot-compiler
• run make riot

could you please fix this issue? I made a patch 2.5.1 but there are still javascript errors coming from the compiler.

please see riot/rollup-plugin-riot#62

if import statement starts with \t or contains \t before import, it can't be extracted