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:
Be sure you place it below your Sinuous CDN, like this:
This places a sinuousFrame
property on the window
object.
Examples
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
Node
| DocumentFragment
html ⇒ 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 = ;
Example (Multiple top-level elements.)
let view = ;
Example (Components with children.)
let ;let view = ;
Node
| DocumentFragment
svg ⇒ 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 = ;
Contributing, Issues, and Bugs
Feel free to raise any issues or bugs!
Acknowledgments and Thanks
- Author of Sinuous