Feature request: <script src="">

[xatgithub]

<!-- current inline logic code  -->
<script>
  this.items = []
</script>

I need a "src" attribute like this:

<!--  use an external logic file  -->
<script src="logic.js"></script>

[GianlucaGuarini]

Can you explain a bit better what you are trying to achieve please?

[marcoms]

I.e. use an external script file instead of having an inline one

On Sun, 15 Mar 2015 19:25 Gianluca Guarini notifications@github.com wrote:

Can you explain a bit better what you are trying to achieve please?

—
Reply to this email directly or view it on GitHub
#507 (comment).

[pomutemu]

E.g.

example.tag:

<example>
  <p>This is { sample }</p>

  <script src="example.js"></script>
</example>

example.js:

this.sample = "example"

dest/example.js:

riot.tag('example', '<p>This is { sample }</p>', function(opts) {

  this.sample = "example"

});

[samuelmesq]

👍

[bchavez]

👍 for this too.

I currently have TypeScript .ts files that get compiled to .js files independently of Riot (via Visual Studio). Being able to pull in these .js files that were compiled without Riot and use them as inline logic would be great.

I might explore how to do this with a custom parser. I'm guessing all you'd need to do to is create a custom parser that 1) identifies a <script src=""> tag, 2) makes an AJAX request for the .js file, and 3) calls the built-in Riot parser.

[joepie91]

Seconding this one. I'm currently working with a sample tag that looks something like this:

sample-button
    button(onclick="{ sampleTrigger }") Sample

    style(scoped).
        button {
            background-color: red;
        }

    script(type="coffee").
        sampleTrigger = ->
            alert("Sample!")

Unfortunately, my editor is unable to recognize the contents of the script tag as being CoffeeScript, and thus fails to syntax-highlight it (much like GitHub does):

As you might imagine, this makes development pretty tricky - pending an update to the syntax highlighting logic (which is probably non-trivial), it would be useful to be able to keep the code in a separate file.

This would also be useful for other preprocessed languages that might not be supported explicitly by the Jade or HTML syntax highlighter in an editor.

[joepie91]

I have resolved the syntax highlighting issue in my own stack (Brackets + Jade, see ForbesLindesay/jade-brackets#20), but I'm still +1 on allowing this feature - both as a workaround for other (possibly less fixable) editors, and for cases where separating the script and markup actually makes sense.

EDIT: @bchavez Riot supports TypeScript natively, and you can fairly trivially write your own hook as well.

[r4j4h]

I also +1 this idea, for all the reasons @joepie91 mentions and since it is already encouraged to pull in stylesheets in a similar manner.

[bchavez]

@joepie91 Visual Studio won't let you write TypeScript inside an HTML file this is why I found it necessary to write TypeScript inside a stand-alone file.

Actually found a decent work-around using a gulp plugin called gulp-inline-source that lets you write RiotJS like the following:

app.tag.html

<app>
    <h2>My App</h2>
    <script inline src="app.tag.js"></script>
</app>

gulpfile.js

var gulp = require("gulp");
var $ = require("gulp-load-plugins")({ lazy: true, rename: { 'gulp-inline-source': 'inlinesource' } });
var project = require("./gulpfile.project.js")();

gulp.task("tags", function() {
    log("Compiling RiotJS *.tag.html -> tags.js");
    var riotOpts = {
        //Pass-thru parser. Tell the RiotJS compiler
        //to stop processing stuff and just use the JS it found.
        parser: function (js, options) {
            return source;
        }
    };

    var tags = gulp.src(project.riotHtml);
    var dest = gulp.dest("./");
    var inlineOpts = { compress: false };

    tags
        .pipe($.plumber())
        .pipe($.print())
        .pipe($.inlinesource(inlineOpts))
        .pipe($.riot(riotOpts))
        .pipe($.concat(project.riotOutput))
        .pipe(dest);
});

//Helper Methods
function log(msg) {
    $.util.log($.util.colors.bgCyan(msg));
};

The riotOpts its optional. If you're using TypeScript compiled from tsc the RiotJS compiler adds unnecessary .bind(this) to class/functions that are not indented correctly. Having a pass-through parser that avoids riot.compileJS() adding unnecessary and syntactically incorrect .bind() calls.

[Mouvedia]

The #915 dupe made me realize that we should support the charset attribute as well.

[aMarCruz]

This is a feature I wish there, but I did some tests and there's too many cases to consider when implementing this functionality that can not be met, so it would not be cost effective to implement.
Detection of files, the import function, error handling, and support for online compilation would grow the code too much.

In addition, we would be reinventing the wheel, there are many, mature and excelent free tools that address this need, in adition to @bchavez recommendation: brfs with or without browserify, jspreproc, Preprocessor.js, etc.

In my tests, let <script src="file"... in place for evaluation by riot.tag() does not work on the server side nor in the browser (the file is not loaded), so there is no reason to leave it.

I'm closing this issue, sorry.

EDIT:
I'm thinking of writing a tool to provide this feature outside the riot code. When I have something I will reopen this issue to report it.

[aMarCruz]

@wenbob , @pomutemu , @marcoms , @samuelmesq , @bchavez , @joepie91 , @r4j4h , @Mouvedia ,
the riot-compiler 2.3.2 will include basic support for the src and charset attributes in <script> tags through the riot cli, but only for reading from the file system in synchronous mode and without error detection. I will post a link to docs here.

[avimar]

Is this only in the pre-compiler to include the source?
Or is this even in the uncompiled tags, and e.g. I can include stripe's javascript, from their server, on load time? (they don't allow you to cache it for security reasons).

[aMarCruz]

It is only for precompiled tags, i.e the node.js version.
Please read this guide.
Loading js files is at the end.

EDIT:
this is an experimental feature. I forgot to mention in the guide that is necessary to pass an additional parameter to the compile function (of riot-compile) with the filename being compiled.

var compiler = require("riot-compile")
compiler.compile(source_string, options, full_filename)

I'll update the guide, the cli will support this feature soon.