passepartout

A Web Application Microframework with a size of only 11kb, with a React like architecture and default support for Promises. It has a centralized Model and doesn’t require a compile step for JSX.

All you need to know...

Bundler

Install it ...

npm i passepartout

then import it ...

import passepartout from 'passepartout';
// or common.js
const passepartout = require('passepartout');

Browser

Add CDN ...

<script src="https://unpkg.com/[email protected]"></script>

... and use it directly in the browser

View

Works like JSX but with the standard Javascript arrays and objects

const view = [
  [{ _: 'h1' }, 'This is a h1 heading text'],
  [{ _: 'a', href: 'https://passepartout.js.org' }, 'this is a link']
];

passepartout({ view });

Node

You can define the node on which the view gets added.

const node = document.getElementById('app');

passepartout({ view, node });

or just use a query

passepartout({ view, node: '#app' });

if nothing is specified the node defaults to document.body

Elements

| Simple Elements | Output | | :-------------------------- | :----------------------------- | | [] | <div></div> | | ['text'] | <div>text</div> | | ['text', 'text 2'] | <div>texttext2</div> | | [{id: 'content'}, 'text'] | <div id="content">text</div> | | [{_: 'h1'}, 'text'] | <h1>text</h1> | | [{_: '!'}, 'text'] | <!--text--> |

Styles

[
  { _: 'h1', style: { fontSize: '30px', color: 'red' } },
  'This is A styled heading'
];

Output

<h1 style="font-size: 30px">This is A styled heading</h1>

Nesting

Elements can be nested:

[
  { id: 'content' },
  [{ _: 'h1' }, 'this is a heading'],
  [{ _: 'a' }, 'this is a link']
];

Output

<div id="content">
  <h1>this is a heading</h1>
  <a>this is a link</a>
</div>

Promises

Promises work to

[
  { id: 'content' },
  fetch('https://example.com').then(response => response.text())
];

As the Promise resolves the view gets updated

Model

You can pass in a model

const model = { title: 'this title is defined in the model' };

passepartout({ model, view });

the model is now accessable via a function

const view = [
  ({ model }) => [{ _: 'h1' }, model.title],
  [{ _: 'a', href: 'https://passepartout.js.org' }, 'this is a link']
];

Output

<div>
  <h1>this title is defined in the model</h1>
  <a href="https://passepartout.js.org">this is a link</a>
</div>

Controller

If you want to make your site reactive you need a controller, which updates your model.

const model = { counter: 0 };

const controller = {
  countUp: ({ model }) => ({ counter: model.counter + 1 })
};

passepartout({ model, view, controller });

Then you can access the controller too through the model, now you can assign it for example to an onclick event

const view = [
  ({ model, controller }) => [
    { _: 'button', onclick: controller.countUp() },
    'clicked ',
    model.counter,
    ' times'
  ]
];

Output

<div><button>clicked 0 times</button></div>

...

<div><button>clicked n times</button></div>

The arguments and the event are accessable too on controller side:

const controller = {
  countUp: ({ model, args, event }) => ({ counter: model.counter + 1 })
};

Event & Arguments

args is an array of all arguments passed to the controller function

event is the dispatched event for example the click event

The return of the function in this example ({ counter: model.counter + 1 }) gets deepmerged to the current model, and the view gets automaticly updated.