pl0x-suite

A way of building bundle-less, fine-grained, front-end web apps.

pl0x-suite is a collection:

• dist/pl0x.mjs - Reactive state management which replaces mobx.
• dist/history-pl0x.mjs - Reactive history to be used with pl0x.
• dist/routing-pl0x.mjs - Reactive routing using pl0x.
• dist/hyperpl0x.mjs - A custom implementation of hyperscript with support for es modules, and it supports these props: onmount, unmount, disabled, checked, class.
• dist/jsx-tag.mjs - Exposes the html template tag literal by combining hyperpl0x with htm.

If you would like to use JSX instead of html template tag literals, you can do so using the jsx-convert package which is not part of the suite.

Each tool in the suite is a file in the dist folder which can be imported individually using one of these commands:

import {reactive} from "pl0x-suite/dist/pl0x.mjs";
import {history} from 'pl0x-suite/dist/history-pl0x.mjs'
import {registerRoute} from 'pl0x-suite/dist/routing-pl0x.mjs'
import hyperscript from "pl0x-suite/dist/hyperpl0x.mjs";
import html from 'pl0x-suite/dist/jsx-tag.mjs'

Recommended Web App Structure

This is the recommended way to use pl0x-suite:

1. Your frontend codebase should have these folders: node_modules, build
2. Use absolute-import-paths --glob "build/**/*.{js,mjs}" in your build step to convert bare import paths into absolute ones by prepending them with /node_modules/. This will cause the browser to make requests to /node_modules on the same origin.
3. Expose /node_modules from your origin server.

Read More

• pl0x readme
• history-pl0x readme
• routing-pl0x readme