Nacho Portmanteau Meltdown

    locomotor

    0.1.13 • Public • Published

    locomotor v0.1.13

    npm package browser build

    A React like hook without lingo

    What's this

    A view library which using function hooks through

    • useReducer
    • useState
    • useEffect
    • useLayoutEffect

    See Michael Klein's hookuspocus for more info.

    Some added features include:-

    • createContext
    • useContext

    Working todoMVC sample is here

    Info

    • Reusable function hooks, you can import as many times elsewhere, and the library will isolate each hook.
    • Optional key property when handling list/array mapping.
    • May not need to import pragma on every js/jsx that need transpiling.
    • Currently, it's around 9kb gzip.

    Some concern includes:-

    • Event delegation, for faster lifecycle updates and better performance.
    • Plain callbacks/Promises to reduce file size and dependency on regenerator-runtime.
    • Improving render queue.
    • Removing redundant operations.
    • Test unit

    Quick Getting Start

    Install with npm

    npm i locomotor

    or

    clone repo https://github.com/syarul/getting-start-locomotor

    check into the cloned directory

    npm install && npm start

    JSX caveats

    If using Caleb's babel-plugin-transform-jsx:-

    • No Pragma
    • No * @jsx * comments
    • No createElement
    • No $$typeof, props, key, ref, or other specific React lingo
    • key is optional
    • You can still pass props as usual to function hooks but not necessary

    You don't need to add pragma import line to handle jsx transform on every file, ensure add module parameter to .babelrc plugins config

    {
      "plugins": [
        ["babel-plugin-transform-jsx", {
         "useVariables": true,
         "module": "locomotor"
        }]
      ]
    }

    Also support @babel/plugin-transform-react-jsx. Just add pragma to .babelrc plugin config

    {
      "plugins": [
        ["@babel/plugin-transform-react-jsx", {
          "pragma": "Locomotor"
        }]
      ]
    }

    then add import line to every *.js/*.jsx that needed tranformation.

    import Locomotor from 'locomotor'

    Without jsx transformer, you also can return your function hooks as a js object instead

    {
      elementName: 'div',
      attributes: {},
      children: ['hello locomotor!']
    }

    Read babel-plugin-transform-jsx for more info.

    Usage

    import { locoDOM, useState, useEffect } from 'locomotor'
     
    function App (props) {
     
      const { label } = props || {}
     
      const [state, setState] = useState('foo')
     
      const click = () => {
        setState((state === 'foo' && 'bar') || 'foo')
      }
     
      useEffect(() => {
        console.log(`current state is ${state}`)
      }, [state])
     
      return (
        <button onClick={click}>
          {label} {state}
        </button>
      )
    }
     
    const props = {
      label: 'click me!'
    }
     
    locoDOM.render(
      <App {...props} />, 
      document.body
    )
     

    Stole the original library name and move it elsewhere

    p/s: previous locomotor animation moved to branch locomotor-animate

    Install

    npm i locomotor

    DownloadsWeekly Downloads

    1

    Version

    0.1.13

    License

    MIT

    Unpacked Size

    162 kB

    Total Files

    39

    Last publish

    Collaborators

    • syarul