npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

fwa

v1.1.4

Published

Component view on JavaScript Template literals (Template strings)

Downloads

3

Readme

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.