voorhoede / riotjs-style-guide

Opinionated RiotJS Style Guide for teams.
Creative Commons Zero v1.0 Universal
287 stars 22 forks source link

.tag.html extension for server-side rendered tags #57

Open tas12 opened 7 years ago

tas12 commented 7 years ago

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

petergoes commented 7 years ago

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.

phortuin commented 7 years ago

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

tas12 commented 7 years ago

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

petergoes commented 7 years ago

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

jbmoelker commented 7 years ago

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