sinuous-frame

An alternative view syntax for Sinuous. Inspired by Hiccup.

Installation

There are two ways to consume sinuous-frame

ESM

Run the following inside your project directory:

npm install sinuous-frame

CDN

Put this into your HTML:

<script src="https://unpkg.com/sinuous-frame/dist/min.js"></script>

Be sure you place it below your Sinuous CDN, like this:

<script src="https://unpkg.com/sinuous/dist/all.js"></script>
<script src="https://unpkg.com/sinuous-frame/dist/min.js"></script>

This places a sinuousFrame property on the window object.

Examples

• Sinuous Counters
• Sinuous Simple Todo

Syntax

Every element is an array of the form [ <tag>, <attributes>, <children> ].

<tag> is a string referring to the kind of dom element you want to create, such as "div", and is required. <attributes> may be omitted, but if included should be a simple Javascript object of key-value pairs. There may be any number <children>, including 0, whether element arrays, strings, constants, observables, etc....

['p', { class: 'counter' }, 1, ' is greater than ', 0, '.'];

The syntax for components is similar to element syntax except that the component identifier takes the place of <tag>.

[
  Modal,
  { heading_text: 'Welcome' },
  ['p', 'Is this your first time visiting?'],
];

API

• html ⇒ Node | DocumentFragment
• svg ⇒ Node | DocumentFragment

html ⇒ Node | DocumentFragment

Kind: global constant
Returns: Node | DocumentFragment - A DOM node or fragment for injecting into the document.

| Param | Type | | ------- | ------------------------------------------------------------------ | | ...node | Array | String | function |

Example (Single top-level element.)

let view = html([
  'p',
  { class: 'class-1' },
  ['span', 'content'],
  ' more content',
  ['span', ' and more content'],
]);

Example (Multiple top-level elements.)

let view = html(
  ['p', { class: 'class-1' }, 'foo'],
  ['p', { class: 'class-2' }, 'bar']
);

Example (Components with children.)

let component = (props, ...children) => html(['p', 'some text'], ...children);
let view = html([
  'div',
  { class: 'container' },
  [component, ['span', 'some more text'], ['span', 'and more text']],
  ['p', 'more content'],
]);

svg ⇒ Node | DocumentFragment

svg works in much the same way html does.

Kind: global constant
Returns: Node | DocumentFragment - An SVG DOM node or fragment for injecting into the document.

| Param | Type | | ------- | ------------------------------------------------------------------ | | ...node | Array | String | function |

Example

let view = svg(['svg', { class: 'class-1' }, ['circle'], ['rect']]);

Contributing, Issues, and Bugs

Feel free to raise any issues or bugs!

Acknowledgments and Thanks

Wesley Luyten

• Author of Sinuous