These are chat archives for ractivejs/ractive

26th
Jan 2018
Paul Maly
@PaulMaly_twitter
Jan 26 2018 12:51
Hm, looks like a variant, thanks!
Joseph
@fskreuz
Jan 26 2018 15:32
Random question of the day: How are you using Ractive to render on the server? Specifically
  • Are you writing vanilla+template files? or vanilla+embedded templates (template literals/backtick strings)? or component files?
  • Are you compiling components before you run it? or load-and-compile on the fly?
  • Is it beneficial to have loading/compiling asynchronous? or is it fine synchronous because powerful server/parallelism/you're precompiling?
Paul Maly
@PaulMaly_twitter
Jan 26 2018 16:33
I write fully isomorphic web apps (browsers/nodejs/cordova/electron) with more than 95% of shared code, using CommonJS as modular system and Webpack for packaging.
1) For my templates I use separated .html files with Ractive's mustaches syntax.
Paul Maly
@PaulMaly_twitter
Jan 26 2018 16:43
./templates/*.html
./templates/partials/*.html
./templates/parsed/*.js
2) In runtime, I use already parsed/compiled templates (AST) via CommonJS require(), parsing them before webpack using my own simple script based on Ractive.parse() with single command npm run build
3) I do it simple:
module.exports = Ractive.extend({
     template: require('./templates/parsed/component'),
    ....
})
Juan C. Andreu
@andreujuanc
Jan 26 2018 22:51
@fskreuz i just finished configuring a project with SSR
Just trying out things
  • Are you writing vanilla+template files? or vanilla+embedded templates (template literals/backtick strings)? or component files?
    trying Typescript + embeded from import
  • Are you compiling components before you run it? or load-and-compile on the fly?
    loading html , using Ractive.parse and then embedded in the file.
  • Is it beneficial to have loading/compiling asynchronous? or is it fine synchronous because powerful server/parallelism/you're precompiling?
    I dont think its so benefiial
i wanted to use parcel, but couldnt get it to work with NodeServices in dotnetcore
Juan C. Andreu
@andreujuanc
Jan 26 2018 23:02
For html first i used html load
so it gets transpiled like this module.exports = "<h1>Home from template</h1>";
after using ractive-loader i get module.exports={"v":4,"t":[{"t":7,"e":"h1","f":["Home from template"]}]};
this is a simple page:
import { default as Ractive, NewOptions }  from 'ractive'
import template from './home.html'

export default class Page extends Ractive {
     constructor(options: NewOptions) {
        options.template = template;
        super(options);
     }

}
Juan C. Andreu
@andreujuanc
Jan 26 2018 23:07
now im working on getting HMR
but probably will have to finish v2 of my router so i can hook it up
Juan C. Andreu
@andreujuanc
Jan 26 2018 23:32
Found one issue with my TS implementation. Is that when I extend ractive, some stuff wont work. Like setting css
cos it has to be done via Ractive.extend
anyways xD ill go sleep C:
Juan C. Andreu
@andreujuanc
Jan 26 2018 23:38
i think ill give up TS XD
Chris Reeves
@evs-chris
Jan 26 2018 23:40
we can theoretically set css after extend, but there's not a method to do so
you could use a style function that pulls the css from a property that has a dummy reference to be able to force an update