Stop script tags from being evaluated with serverside riot.render

[hatched]

I have a component that needs to include third party scripts but when rendering server side it tries to fetch the file instead of just passing it through. Is there a flag I can put on the tag to tell the riot compiler to not fetch?

// pseudo code
<support>
  <div class="chat-body"></div>
  <script src="/assets/js/support.js"></script>
</support>

riot.render(support, {});

Error: ENOENT: no such file or directory, open '/assets/js/support.js'

[ghost]

Have you tried creating an empty script block below the one you want to pass?

E. g.:

// pseudo code
<support>
  <div class="chat-body"></div>
  <script src="/assets/js/support.js"></script>
  <script></script>
</support>

[ghost]

+1

[GianlucaGuarini]

In theory you should not load third party script in a riot tag. The <script> tags should be used either directly on your page or you can just compiler your components using webpack or rollup

<my-tag>
  <p>{ secretCode }</p>
 <script>
    import generator from 'path/to/generator'

    this.secretCode = generator()
  </script>
</my-tag>

[ghost]

Sure, but it was being used as the main page, no .html files.

[hatched]

As a workaround I created a basic html template where I did a simple string replace to add the components (tags). Works well enough and doesn't require any additional dependencies but it would be nice if we could create an 'index' tag which supported all of the tags one would find in an html file.

[ghost]

That's my current approach. On SSR (Server Side Rendering), the getElementByTagName is not available, so this.root.firstChild works for get the head node reference:

this.on("mount", function () {
    var head = this.root.firstChild;

    var addScript = function (src){
      var script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src', src);
      head.appendChild(script);
    }

    addScript('/packages/www/public/legacy.js');

}

[ghost]

As well for adding components on a SSR basis on 'index.tag':

var body = this.root.lastChild;

div = document.createElement("div");
div.tagName = opts.content;
body.appendChild(div);
riot.mount(div);

[aMarCruz]

Well, riot-compiler v2.3.22 could use "defer" to ignore <script> tags, and remove "defer" from the output.
Currently, "defer" is useless, but can be useful here.

<script src="file.js" defer></script>

thoughts?

[GianlucaGuarini]

@aMarCruz we need to add this info in our doc, can you pull request please when you have time?

[ghost]

Hey @GianlucaGuarini , I can do that. By 'our doc' you mean: any markdown file in this repository that reference this subject that must be updated or the riotjs.com site content?

[aMarCruz]

@GianlucaGuarini yes it is needed but...
@rodrigorodriguez , if you can update the docs it will be great!!, @cognitom can tell you how do that.

In this doc there's more info about <script src> (in "spanglish" 😃).
Thanks in advance.

[GianlucaGuarini]

fixed in riot 2.3.15, the doc must be updated

[ghost]

I did not get the Spanglish, sorry. @cognitom, where is the instructions, please?

[cognitom]

Hi, @rodrigorodriguez. Feel free to send PR to riot/compiler ;-)
As @aMarCruz said, this doc seems the good point to start.

After your update, we'll update riotjs.org, too.

[ghost]

Docs updated but I am getting 403 while pushing to dev. Tried used a new PR with no success (now closed), waiting for instructions on how to send these updated lines in guide.md to you guys. Is there any docs out there about this?
Should I have been granted to be able to create a brand new specific branch to push updates, one per subject, like this one: riot/compiler@fc48412 ?

If so I can do that.

[ghost]

Created the PR at: riot/compiler#54, would you please take a look?

[aMarCruz]

@rodrigorodriguez done! thanks for your contribution.

The use of defer is documented in doc/guide.md of the riot-compiler. I hope to integrate these changes into the main documentation soon.