Air-m2 NPM | npm.io

m2

Inline plugging

view plugin

the simplest plug-in has the form:

<unit>
    <view-source>

import { stream } from "m2"

export default ({ source/*, targets */}) => {
       return stream( (emt, { over }) => {
           over.add(source.on((evt, src) => {
               emt(evt, src);
           }));
       } );
   }

    </view-source>
</unit>

you can access nested nodes and modify them

<unit>
    <view-source>

import { stream } from "m2"

export default ({ source, targets: [ { node } ] }) => {
       const inner = node.querySelector("[custom-plugin-inner]");
       return stream( (emt, { over }) => {
           over.add(source.on(emt ));
           inner.textContent = 77;
       } );
   }

    </view-source>
  
    <div>
      <span custom-plugin-inner>custom-value</span>
    </div>

</unit>

stream plugin

you can also modify the data stream before use:

<unit>
    <stream-source>

import { stream } from "m2"

export default ({ obtain }) => 
	obtain().map( data => [data] )

    </stream-source>
</unit>

View engine

Simple

Templates definition

data transmission from events

<span>`${property}`</span>

the event source must have the form

[{property: 77}]

the data source can be an object with a nested structure

<span>`${somefield.nested}`</span>

[{somefield: {nested: 77} }]

formatting

if you provide number settings, you can use formatting:

<span>`${intl.formatter-resource-name(value)}`</span>

,where {formatter-resource-name} - data transmission template

the event source must have the form

[{property: 77}]

formatting resource file example:

[
  "formatters",
  ["currency", { "style": "currency", "splitter": ".", "currencyDisplay": "symbol" }],
  ["compact-currency", { "style": "currency", "splitter": ".", "currencyDisplay": "symbol",
    "minimumFractionDigits": 0
  }],
  ["number", { "style": "decimal", "splitter": "." }],
  ["percent", { "style": "percent" }]
]

localization

if you supply localization resources you can use automatic literal substitution:

<span>`${lang.localization-string-resource-name}`</span>

localization resource file example:

<?xml version="1.0" encoding="utf-8"?>
<languages>
    <en>
        <string name="example-literal-string">Example literal text content</string>
        <string name="example-literal-string-2">Example literal text content 2</string>
    </en>
    <ru>
        <string name="example-literal-string">Пример случайной строки</string>
        <string name="example-literal-string-2">Пример случайной строки 2</string>
    </ru>
</languages>

Actions definition

Animation

<keyframe [name = default] [prop = {easing:"linear",duration:5}] >
    <key [offset = 0] prop = {scale:0}></key>
    <key [offset = 1] prop = {scale:1}></key>
</keyframe>

inline fade-in fade-out supported

<keyframe name = fade-in [duration = 5]>
    <key [offset = 0] prop = {translateX:0}></key>
    <key [offset = 1] prop = {translateX:100}></key>
</keyframe>

binding data from stream

<keyframe name = fade-in [duration = 5]>
    <key prop = {scaleX:(x)}></key>
</keyframe>

[{x: 1.5}]

Inline (local) CSS styles & SASS

<unit>
   <style [type="text/scss"]> <!-- to enable SASS processing -->

    body { /* global selector */
        padding: 0;
        margin: 0;
    }
    
    :scope { /* local selector */
        width: 100%;
        background-color: #0026ff;
        height: 100%;
    }

   </style>
   <div></div>
</unit>

Class controllers

<keyframe>
    <key prop = {classList:{active:(isactive)}}></key>
</keyframe>

[{isactive: true}]

<keyframe>
    <key prop = {classList:{red|green|black:(selectedColor)}}></key>
</keyframe>

[{selectedColor: "red"}]

Sound controls

<keyframe name="animation-name">
    <key prop={sound:'sound-name'}></key>
</keyframe>

Sound will be played once

<keyframe name="animation-name" prop="{duration: 2}">
    <key offset="0.2" prop={sound:'sound-name'} ></key>
    <key offset="0.7" prop={sound:'sound-name'} ></key>
</keyframe>

Sounds will be played 2 times with certain offsets and will be stopped if duration of animation less than duration of sounds

, where

sound - name of resource declared in <sound> tag

Sound resource declaration

<sound name="sound-name" rel="sound-resource"></sound>

, where

name - name of resource
rel - file name without extension from the directory component/res/sounds/sound-resource

if you want to use the general sounds for components, you can go up the nesting levels

rel="../../sound-resource"

Reactions definition

<unit onclick = req("action-name",{/*args*/})></unit>

where environment variables:

req - stream fallback method
key - view-component name
options - current view-component options
event - system event data

List of supported events

"onclick"
"onclickoutside" (synthetic)
"onpointermove"
"onpointerenter"
"onpointerleave"
"onpointerup"
"onpointerdown"
"onmouseenter"
"onmouseleave"
"onmouseover"
"onmouseout"
"onchange"
"oninput"
"onglobalkeydown" (synthetic)
"onglobalkeyup" (synthetic)
"onkeydown"
"onkeyup"
"onwheel"
"onscroll"
also supported custom events
"on:custom-event"
Creating and triggering events in JavaScript

<view-source>

import { stream } from "m2"

        class MyEvent extends Event {
            constructor() {
                super("my-event");
                this.myData = 100;
            }
            log() {
                console.log("check", this);
            }
        }

        export default ({ source, targets }) => {
            return stream( (emt, { over }) => {

                over.add(source.on((evt, src) => {

                    setTimeout( () => {
                        targets[0].node.dispatchEvent(new MyEvent());
                    }, 1000);

                    emt(evt, src);

                }));
            } );
        }

</view-source>

Switcher

selects one view state available according to the model.

<unit tee = {a:10,b:-1}></unit>

rendered to the page if the condition when mapping data from the stream is fully met

[{a: 10, b: -1, ...other}]

or not rendered

[{a: 10, b: -2, ...other}]

allowed to use attachments and abbreviated forms

<unit tee = {obj:{prop}}></unit>

[{obj: {prop: 1}}]

functional form is also now supported

<unit tee() = "obj.prop > 0"></unit>

[{obj: {prop: 1}}]

you can even use a static form

<unit tee() = 1></unit>

however, the view component will still wait for the model stream

Common features

Coupling with model

you can link your view to the stream to get actions and process reactions

<unit stream = ./path>

any relative path will be calculated relative to the parent view, which is related to the model.

you can use the constant $name as a parameter to pass the current name of the view to the model

<unit stream = ./path/to/model[key=$name]>

Submodules

you can use the included submodules

<unit use = url(./path-to-src-module)></unit>

<unit use = ./path-to-registered-module></unit>

Model unit

each model is a function that returns a stream:

it is a new stream

import { stream } from "m2"

export default ( { /*...args*/ } ) => 
    stream(emt => {
        emt( "something" );
    })

, where

stream - "air-stream" object "stream"

or an existing converted stream

import { stream } from "m2"

export default ( { obtain, /*...args*/ } ) => 
    obtain("../some/existing-stream/path")
    .map( count => count + 1 )
    .controller( 
        obtain("../some/existing-stream-controller/path"),
        ({action}) => ({ action, data: "ok" })
    )

, where