Stop script tags from being evaluated with serverside riot.render #1492

Closed
hatched opened this Issue Dec 29, 2015 · 17 comments

Projects

None yet

6 participants

@hatched
hatched commented Dec 29, 2015

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'
@whatda
whatda commented Dec 30, 2015

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>
@GianlucaGuarini GianlucaGuarini added the bug label Dec 30, 2015
@GianlucaGuarini
Member

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

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

@hatched
hatched commented Jan 15, 2016

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.

@rodrigorodriguez

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

}
@rodrigorodriguez

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 aMarCruz self-assigned this Jan 20, 2016
@aMarCruz
Member

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
Member

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

@rodrigorodriguez

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
Member

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

fixed in riot 2.3.15, the doc must be updated

@rodrigorodriguez

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

@cognitom
Member
cognitom commented Feb 1, 2016

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.

@rodrigorodriguez

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.

@rodrigorodriguez rodrigorodriguez referenced this issue in riot/compiler Feb 4, 2016
Open

CONTRIBUTING.md #53

@rodrigorodriguez

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

@aMarCruz
Member
aMarCruz commented Feb 9, 2016

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

@aMarCruz aMarCruz added a commit to riot/compiler that referenced this issue Mar 8, 2016
@aMarCruz aMarCruz v2.3.23
- Fix [riot#1325](riot/riot#1325) : Gulp + Browserify + Babelify + type="es6" error.
- Fix [riot#1342](riot/riot#1342), [riot#1636](riot/riot#1636) and request from [dwyl/learn-riot#8](dwyl/learn-riot#8) : Server-Side Rendered Page Fails W3C Check. The new `data-is` attribute is used for scoped styles in addition to `riot-tag` (the later will be removed in compiler v3.x)
- The keyword `defer` in `<script src=file>` avoids that the compiler loads the file, preserving the tag - Requested by [riot#1492](riot/riot#1492) : Stop script tags from being evaluated with serverside `riot.render`. It is removed in client-side compilation because browsers will not load scripts through innerHTML.
- It has changed the character used to hide expressions during the compilation, maybe this fix [riot#1588](riot/riot#1588) : Syntax Error: Invalid character `\0129` (riot+compiler.min).
- Removed the unused parameter with the compiled-time brackets from the call to `riot.tag2`.
- Removed support for raw expressions. It is unlikely this feature will be implemented in v2.3.x
- Update devDependencies.
ba1f912
@aMarCruz aMarCruz referenced this issue in riot/compiler Mar 9, 2016
Merged

v2.3.23 #59

@aMarCruz aMarCruz added a commit to riot/compiler that referenced this issue Mar 10, 2016
@aMarCruz aMarCruz v2.3.23
- The parsers are moved to its own directory in the node version. The load is on first use.
- Fix [riot#1325](riot/riot#1325) : Gulp + Browserify + Babelify + type="es6" error.
- Fix [riot#1342](riot/riot#1342), [riot#1636](riot/riot#1636) and request from [dwyl/learn-riot#8](dwyl/learn-riot#8) : Server-Side Rendered Page Fails W3C Check. The new `data-is` attribute is used for scoped styles in addition to `riot-tag` (the later will be removed in compiler v3.x)
- The keyword `defer` in `<script src=file>` avoids that the compiler loads the file, preserving the tag - Requested by [riot#1492](riot/riot#1492) : Stop script tags from being evaluated with serverside `riot.render`. It is removed in client-side compilation because browsers will not load scripts through innerHTML.
- It has changed the character used to hide expressions during the compilation, maybe this fix [riot#1588](riot/riot#1588) : Syntax Error: Invalid character `\0129` (riot+compiler.min).
- The option `debug` inserts newlines between the `riot.tag2` parameters and the call is prefixed with the source filename - Requested by [riot#1646](riot/riot#1646) : Split portions of generated html with newline instead of space
- Removed the unused parameter with the compiled-time brackets from the call to `riot.tag2`.
- Removed support for raw expressions. It is unlikely this feature will be implemented in v2.3.x
- Updated the regex that is used to match tag names, more closer to the HTML5 specs.
- Update devDependencies.
f455dfd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment