Valyrian.js 5.0.8

Get started - Node plugin

What is Valyrian.js?InstallationHyperscript/JSXComponentsLifecycle methodsDirectivesServer side jsxPlugins

Node plugin


This plugin is available with the main valyrian.js package, so, you only need to add it with the v.usePlugin() method.
let NodePlugin = require('valyrian.js/plugins/node');

This plugin provides what is necessary to work on the server side without having to change the client code. As well as the tools for the inclusion of minified JS / CSS in HTML and the generation of the required files for a PWA.

Inline css and js

To improve PWA's performance, Valyrian.js provides a method to transpile, minimize and embed the client code in the server's HTML response.

Assume this client side app
// client.js
let Router = require('valyrian.js/plugins/router.js');

let Component = () => <div>Hello worlddiv>;
let router = v.Router();
router.get('/', () => Component);

// Main container component
let HtmlComponent = (null, ...children) => [
  <html lang="en">
      <title>My awesome apptitle>
      {v.inline.css().map(({raw, map}) => <style>{raw}{map}style>)}
      {v.inline.js().map(({raw, map}) => <script>{raw}{map}script>)}

// Export main container component
module.exports = HtmlComponent;
Create entry point for server side requiring Valyrian.js register hook
// index.js - server side entry point

// Register Valyrian.js in fly transpilation

// Require server file
Implement SSR with Express
// server.js with Express

// Require express
let express = require('express');

// Require valyrian and main html container
let HtmlComponent = require('./client.js');
let nodePlugin = require('valyrian.js/plugins/node');

// We make this an async function because top level await is still an experimental function in nodejs
let init = async () => {
  // Init express
  let app = express();

  // Compile and minimize client.js and bootstrap.css
  await v.inline('./client.js', './some-awesome.css');
  // Same as call await v.inline.js('./client.js') && await v.inline.css('./some-awesome.css');

  // Add home route
  app.get('/', (req, res) => v.routes.go(HtmlComponent, '/').then(res.send))

  // Init the server

The result to call our home route in the browser will be:
<html lang="en">
    <title>My awesome apptitle>
      // inline minified some awesome css minimized
      // some awesome css source map
    <div>Hello worlddiv>
      // Inline, bundled as iife, client js code
      // client js source map

v.inline method

The inline method takes any number of arguments and will perform the next steps:
  1. For each passed file path
  2. It will extract the extension of that passed file path
  3. If the inline method does not have a convenience method for this extension it will create it. (inlining a `txt` file will create a `v.inline.txt` getter/setter method)
  4. Then it will pass the file path to this method to get its contents
  5. The method will push the contents to an array to be used as the store for this extension
Take into account that the convenience method will be a getter setter. The setter method will always return a promise. The getter method will always return an array of the parsed files.
If you pass a file path it will get the contents of that file.
If you does not pass a file, then, it will return the contents of the stored files.

At the start the inline method will only have the v.inline.js and the v.inline.css methods.Will also have an v.inline.uncss method whose implementation is different from the previous ones, keep reading to know more about this method.

v.inline.js method

The v.inline.js inline method not only will get the contents of the file, but also compile and minimize the code by passing it to a customizedRollup configuration. The result will be an object like:
  raw, // Bundled and minimized code
  map, // Generated source map for this code
  file // The name of the entry file
This will allow us to embed the client side source code directly in the html response without the need of a transpilation/build step and reduce the need of a js file request for the client. Also, this method will receive an options object as a second parameter that will be passed to rollup.

This object must have the next shape:
  inputOptions: {
    // Some custom options
  outputOptions: {
    // Some output options

v.inline.css method

The v.inline.css inline method not only will get the contents of the file, but also will minify the css by passing it to a default instance of the CleanCSS optimizer. The result will be an object like:
  raw, // Minimized styles
  map: null,
  file // The name of the entry file
Similar to the v.inline.js, this method will receive an options object as a second parameter that will be passed directly to CleanCSS.

v.inline.uncss method

Although the styles getted by the v.inline.css method will be minified, the result will be the whole styles, no matter if the styles are used or not by the site. This minimized styles allow us to develop faster, but for production we recommend to include only the styles that will be used by the site. For this task we have the v.inline.uncss method which works different from the other convenience methods.

You will need to use the v.inline.css method first for this to work. After minimize some css files with the v.inline.css method you can pass a set of html strings to the v.inline.uncss method to get only the used css styles.


Given this css file:
// style.css file
span.hello{display: inline-block}
// js file
let html = "Hello world";

await v.inline.css('./style.css');
let cleanCss = await v.inline.uncss([html]); // -> "span{display:block}"
This method will use PurgeCSS to do this cleaning of styles, and can also receive an options object as a second parameter that will be passed directly to the PurgeCSS.purge method.

Service worker generation

Icons and manifest.json generation