❤
npm
Sign UpSign In

fwa

1.1.4 • Public • Published

Fwa

License Build Status Coverage Status Known Vulnerabilities

Fwa is component view on JavaScript Template literals (Template strings). Make progressive server-side rendering. Server Side Rendering, also called SSR, is the ability of a JavaScript application to render on the server rather than in the browser.

Why would we ever want to do so?

  • It allows your site to have a faster first page load time, which is the key to a good user experience.
  • It is essential for SEO.

Fwa components can be reused and embedded into each other.

How is works?

Templates, as defined in the .fwarc (or .fwarc.js) configuration file, the fwa sends to nebbia. Nebbia returns a function and waits for a call with a props.

Getting Started

Installation

To use fwa in your project, run:

npm i fwa

Node.js® module, implemented by following the ECMAScript® 2018 Language Specification standard.

API docs

fwa(callback)

Implements a higher-order function interface.

  • callback <Function> A function that is passed with the arguments tmpls and props. Template literals (Template strings) are cached in tmpls object when they are required. props can used be any type of data.
  • returns: <Function> The renderer function which proxy the function callback with the argument props from its own parameter.

The simplest example of run a component:

const fwa = require('fwa');
 
const render = fwa((tmpls, props) => {
  return tmpls['index.htm'](props);
});
 
const html = render('Hello World'); // <!DOCTYPE html><html><head...

NOTE callback can return be any type of data

File-relative configuration

Module fwa loads .fwarc (or .fwarc.js) files by searching up the directory root starting from the filename being compiled. This can be powerful because it allows you to create independent configurations for subsections of a component. The presence of a configuration .fwarc file is optional.

  • copy <Array> Copies static file from this component to directory for static production. The source file and destination directory must be separated by the symbol :. Destination relative paths will be resolved relative to the current working directory as specified by process.cwd().

  • templates <Array> List the file names that will be transferred to JavaScript Template literals (Template strings). Each template is parsed using the nebbia npm module.

File structure of component

Local fwa components can be imported using a relative path (e.g. ../components, ../pages)

components/form

.
├── index.js
├── ui
│   ├── index.html
│   └── style.css
└── .fwarc

.fwarc

{
  copy: [
    './ui/style.css : ./bind/form'
  ],
  templates: [
    'ui/index.html'
  ]
}

index.js

const fwa = require('fwa');
 
module.exports = fwa((tmpls, props) => {
  const html = tmpls['ui/index.html'](props);
 
  return {
    html,
    style: './bind/form/style.css'
  };
});

The fwa component reduces the document size, allows you to collect and use only the necessary js-scripts and css-styles. Don’t repeat yourself DRY and keep it simple stupid KISS in actions.

Readme

Keywords

Package Sidebar

Install

npm i fwa

Repository

github.com/woodger/fwa

Homepage

github.com/woodger/fwa#readme

Weekly Downloads

0

Version

1.1.4

License

MIT

Unpacked Size

8.47 kB

Total Files

5

Last publish

Collaborators

  • woodger
Try on RunKit
Report malware