SHP.js

This is a Javascript port of my HTML preprocessor that's to be used on the client side. It can be used to dynamically create complex DOM fragments, using SHP syntax.

For more information about SHP syntax check the SHP.py repository.

See ./demo for a functional example.

Package setup

Node setup

1. Install from the NPM npm install @jakub21/shp
2. Require the package to get the path to the bundled file require('@jakub21/shp').path
3. Use your server setup to serve the file
4. Add a <script> tag in your HTML document with your chosen path

No Node setup

If you do not use Node.js you can download prebuilt shp.js file from the releases tab. Add a <script> tag that points to this file instead.

Usage with Domi.js

The best way to use this package is through Domi.js.

See this section of readme for relevant information.

Standalone usage

The whole package is contained within a global shp object. You can use the compiler yourself for more control or utilize aliases for ease and code clarity.

Aliases

append(element, shp)

Compiles shp and appends created nodes to element.

shp.append(document.body, `
  $div[#Footer] {
    Footer content
  }
`);

prepend(element, shp)

Compiles shp and prepends created nodes to element.

shp.append(document.body, `
  $div[#Header] {
    Header content
  }
`);

Compiler

const compiler = new shp.Compiler();

Used to compile SHP code.

compile(shp)

Returns an array of DOM nodes.

var nodesArr = compiler.compile(`
  $div[#Content] {
    Hello world!
  }
`);

reset()

Resets internal state. Must be used between compile calls.

nodesArr = compiler.compile('$p[.red] { Line 1 } ');
compiler.reset();
nodesArr = compiler.compile('$p[.blue] { Line 2 } ');