snabbdom-pragma

'NotReact.createElement' pragma although for snabbdom

Snabbdom-pragma
Well tested NotReact.createElementpragma although for Snabbdom !


Snabbdom-pragma is the favorite way to use the Facebook JSXsyntax with the virtual DOM library Snabbdom. Based on many principles, Snabbdom-pragma, aim to handle the same API as React.createElementto take all benefits from the most used transpilers proven by the wider React community.

Snabbdom-pragma draws its strength thanks to the Snabbdom, Facebook JSX, and React.createElementspecs with some grounded tests.

Table of Contents

Table of Contents

Getting started

  • 1.To use Snabbdom-pragma you need to download it thanks to your favorite JavaScript Package Manager.

    yarn add snabbdom-pragma
    npm install --save snabbdom-pragma
  • 2.The pragma option tells to your transpiler to use Snabbdom.createElementfunction instead of the default React.createElement.

    buble.transform(input, {
      jsx: 'Snabbdom.createElement'
    })
  • 3.You will need to import the Snabbdom.createElementfunction into your code.

    import Snabbdom from 'snabbdom-pragma'
  • 4.Your JSX source code will now be transpiled to use Snabbdom.

    const vnode = <div>Hello World</div>
    
    patch(document.body, vnode)

Usage

Snabbdom-pragma is compiler/transpiler independent ! At least your transpiler allow custom JSX pragma. (If you know a well used transpiler not in this list, feel free to open an issue)

Bublé

Snabbdom-pragma works fine and is fully tested for Bublé.

buble.transform(input, {
  jsx: 'Snabbdom.createElement'
})

Typescript

Snabbdom-pragma works fine and is fully tested and typed for Typescript.

typescript.transpileModule(input, {
  compilerOptions: {
    jsx: 'react',
    jsxFactory: 'Snabbdom.createElement'
  }
})

Babel

Snabbdom-pragma works fine and is fully tested for Babelwith the transform-react-jsxplugin enabled.

babel.transform(input, {
  plugins: ['transform-react-jsx', {
    pragma: 'Snabbdom.createElement'
  }]
})

Traceur

Snabbdom-pragma works fine and is fully tested for Traceur.

traceur.compile(input, {
  jsx: 'Snabbdom.createElement'
})

JSX Features

Thanks to your transpiler, JSX tags will be transpiled into NotReact.createElementfunction following the React.creatElementspecifications.

Elements

As Snabbdom.createElementis like a straightforward mapping to Snabbdom/h, HTML elements will work out of the box.

/* written */
const vnode = <div>Hello World</div>

/* Once Transpiled */
const vnode = Snabbdom.createElement('div', null, 'Hello World')

/* Similar to */
const vnode = h('div', {}, 'Hello World')

Attributes

By default, attributes will be entrust to the propsmodule. (see Modules Features)

/* written */
const vnode = <input type="text"/>

/* Once Transpiled */
const vnode = Snabbdom.createElement('input', { type: 'text' })

/* Similar to */
const vnode = h('input', { props: { type: 'text' } }, [])

SVG

SVG tags work without any configuration, but attributes will only work with the attrsmodule.

/* written */
const vnode = <circle cx="43.5" cy="23" r="5"/>

/* Once Transpiled */
const vnode = Snabbdom.createElement('circle', { cx: 43.5, cy: 23, r: 5 })

/* Similar to */
const vnode = h('circle', { attrs: { cx: 43.5, cy: 23, r: 5 } }, [])

Snabbdom Features

In Snabbdom, functionalities is delegated to separate modules. Like hook(lifecycle), on(events), style, props, etc... Snabbdom-pragma give you two ways to use these modules.

Modules object

You can deal with modules properties with an object.

/* written */
const vnode = <div style={{ color: 'red', fontWeight: 'bold' }}></div>

/* Once Transpiled */
const vnode = Snabbdom.createElement('div', { style: { color: 'red', fontWeight: 'bold' } })

/* Similar to */
const vnode = h('div', { style: { color: 'red', fontWeight: 'bold' } }, [])

Modules attribute

Or by using the MODULE-PROPERTYattribute.

/* written */
const vnode = <button on-click={ callback }/>

/* Once Transpiled */
const vnode = Snabbdom.createElement('button', { 'on-click': callback })

/* Similar to */
const vnode = h('button', { on: { click: callback } }, [])

Both

/* written */
const vnode = <div style-color="red" style={{ background: 'blue' }}></div>

/* Once Transpiled */
const vnode = Snabbdom.createElement('div', { 'style-color': 'red', style: { background: 'blue' } })

/* Similar to */
const vnode = h('div', { style: { color: 'red', background: 'blue' } }, [])

Custom Modules

Custom modules are supported through the createElementWithModulesmethod. You will need to register this method as pragma instead of the createElement.

pragma: 'Snabbdom.createElementWithModules("ALIAS_1": "MODULE_1", "ALIAS_2": "MODULE_2", ...)'

Then use

/* written */
const vnode = <div style-color="red"></div>

/* Once Transpiled */
const vnode = Snabbdom.createElementWithModules({ 'style': '' })('div', { style: { 'color': 'red' } })

/* Similar to */
const vnode = h('div', { style: { color: 'red' } }, [])

'NotReact' Features

In React you can create components and use them inside other components, using the React.createClassfunction.

Components

Snabbdom-pragma use simple functions as component of type (attributes, children) => vnode.

/* written */
const Component = ({ name }, children) =>
  <div>
    Hello { name }

    <div>
      { children }
    </div>
  </div>

const vnode = <Component name="world">
    <p>It works !</p>
  </Component>

/* Once Transpiled */
const Component = ({ name }, children) =>
  Snabbdom.createElement('div', null, 'Hello ', name,
    Snabbdom.createElement('div', null, children)
  )

const vnode = Snabbdom.createElement(Component, { name: 'world' },
  Snabbdom.createElement('p', null, 'It works !')
)

/* Similar to */
const Component = ({ name }, children) =>
  h('div', {}, ['Hello ', name,
    h('div', {}, children)
  ])

const vnode = Component({ name: 'world' }, [
  h('p', {}, 'It works !')
])

As in React, components function need to start with a capital letter, while regular HTML tags start with lower case letters. This is the common way to tell to your transpiler to give the function to the Snabbdom.createElementinstead of a string.

Misc

Repository

https@github.com:Swizz/snabbdom-pragma


上一篇:url-polyfill
下一篇:cycle-scripts-one-fits-all

相关推荐

  • 基于虚拟DOM(Snabbdom)的迷你React

    原文链接(https://medium.com/@yelouafi/reactlessvirtualdomwithsnabbdomfunctionseverywhere53b672cb2fe3) ...

    1 年前
  • yox-snabbdom

    virtual dom for Yox.js yoxsnabbdom 魔改 snabbdom HomePage https://github.com/yoxjs/yoxsnabbdomre...

    1 年前
  • snabbdom源码粗读

    本文的snabbdom源码分析采用的是0.54版本(即未用ts重写前的最后一版) 前期了解 snabbdom被用作vue的虚拟dom。本文的一个目的就是对于进入vue源码预备。

    2 年前
  • snabbdom-selector

    Snabbdom CSSSelector Snabbdom Selector ComVer(https://img.shields.io/badge/ComVercompliantbrightgr...

    5 天前
  • snabbdom-looks-like

    Makes it easy to assert if two virtual DOM trees look similar snabbdomlookslike Makes it easy to ...

    6 天前
  • snabbdom-jsx

    Write snabbdom views using JSX and Babel npm version(https://img.shields.io/npm/v/snabbdomjsx.svg...

    1 年前
  • snabbdom

    A virtual DOM library with focus on simplicity, modularity, powerful features and performance. A ...

    2 年前
  • rollup-plugin-strip-pragma

    A Rollup plugin to strip requirejs build pragmas from your code. A Rollup(https://rollupjs.org) plu...

    17 天前
  • react-dom-pragma

    Prepend the JSX React DOM pragma to a string if doesn't already contain a pragma reactdompragma Bu...

    3 个月前
  • pragmatist

    A collection of tasks to standardize builds. pragmatist CDN by jsDelivr A free, fast, ...

    2 年前

官方社区

扫码加入 JavaScript 社区