riotjs-style-guide icon indicating copy to clipboard operation
riotjs-style-guide copied to clipboard

.tag.html extension for server-side rendered tags

Open tas12 opened this issue 8 years ago • 5 comments

Thank you for sharing this style guide

Is there a way to use the .tag.html extension when using the riot.render() method in the server?

Example from http://riotjs.com/guide/#server-side-rendering:

var riot = require('riot')
var timer = require('timer.tag')

var html = riot.render(timer, { start: 42 })

console.log(html) // <timer><p>Seconds Elapsed: 42</p></timer>

I would like to 'require' a riot tag with .tag.html ext but this causes an error when starting the server

tas12 avatar Dec 05 '16 23:12 tas12

Hi Tas12,

My solution was to let riot first compile the tag into a .js file, and require that .js file in your server side code. I made a (very basic) proof of concept here: riot-serverside-rendering

I don't know if this is the 'official' way to do it, but thats how I got it to work.

petergoes avatar Dec 06 '16 12:12 petergoes

@tas12 Could your issue be similar to this: https://github.com/voorhoede/riotjs-style-guide/pull/6#issuecomment-229688334? In that case, you probably should omit the .html extension!

phortuin avatar Dec 06 '16 13:12 phortuin

@petergoes @phortuin thanks for your helpful responses! I also thought of these solutions and went with omitting the .html extension for server-side rendered tags. I guess this would just have to be documented clearly in a readme. For me, pre-compiling would an extra step on top of bundling frontend js and compiling scss files. Is it worth adding a note in the style guide?

tas12 avatar Dec 07 '16 23:12 tas12

As long as riot does not support custom extensions in server side rendering, I do think it is worth adding it to the guide.

petergoes avatar Dec 08 '16 08:12 petergoes

@tas12 @petergoes @phortuin You can use require('timer.tag') after requiring riot as riot extends require to support .tag files:

require.extensions['.tag'] = function(module, filename) {
  loadAndCompile(filename, {}, module)
}

However, you can also simply use the require method exposed on riot itself:

// instead of
var riot = require('riot')
var timer = require('timer.tag')

// use
var riot = require('riot')
var timer = riot.require('timer.tag.html')

@petergoes maybe you can test this and change this in #59, to simply say that if you want to use riot server-side, use riot.require('filename.tag.html').

jbmoelker avatar Feb 05 '17 19:02 jbmoelker