Need help with o?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

zserge
161 Stars 11 Forks Apache License 2.0 41 Commits 0 Opened issues

Description

Tiny and simple React clone

Services available

!
?

Need anything else?

Contributors list

# 4,537
gtk
tcl
webkit
cgo
39 commits

O!

Build Status npm gzip size

O!

A very small (<1KB) library to explain how React-like libraries work. Never meant to be used in any of the serious projects. But, hey, it has a JSX-like language and even Hooks! How cool is that? It started as a quick morning experiment some cold autumn Friday. They joy of seeing a simple counter component finally working made it warmer. It's really an exercise in minimalism, and nothing more.


Features

  • Something around 1KB when minified and gzipped.
  • Has
    h()
    and
    render()
    API with the support of functional components.
  • Has
    useState
    ,
    useReducer
    and
    useEffect
    hooks, just like real React.
  • Has a custom template syntax sugar, very similar to normal HTML.
  • Supports SVG tags.
  • Zero dependencies, obviously.
  • No transpiler needed. Just import a single file as a module and start writing code.
  • Should be not so hard to understand and then move on to some more appropriate React clones.

Example to whet your appetite

import { h, x, render, useState } from 'o.mjs';

const Counter = ({ initialValue = 0 }) => { const [value, setValue] = useState(initialValue); return x <div classname="counter"> <div>${value}</div> <div classname="row"> <button onclick="${()"> setValue(value + 1)}&gt;+</button> <button onclick="${()"> setValue(value - 1)}&gt;-</button> </div> </div> ; };

render(h(Counter, { initialValue: 10 }), document.body);

See it live

API

Hey, it might be quicker to read the sources than this text. Anyway,

  • render(component, containerNode)
    - renders
    component
    into
    containerNode
    . In other words, it patches the
    containerNode
    to reflect the
    component
    virtual node. Beware, diffing algorithm is very dumb and inefficient. Does not return anything.
  • h(nodeName|Function, properties, ...children)
    - returns a virtual node.
    nodeName
    can be a HTML tag name (string) to a functional component (JS function). Properties must be an object. Property names closely reflect DOM Node properties, so use
    className
    instead of
    class
    , also
    style
    is a CSS string, not an object. The only artificial property is
    k
    which is a key used to keep component state between the updates if the position of the component in the DOM tree has changed. Finally,
    children
    is a variadic argument containing other
    h()
    nodes or raw JS strings if you want a text node.
  • x`
    ...
    `
    - syntax sugar to replace multiple
    h()
    calls. Accepts regular HTML code and converts it into virtual node tree. Template placeholders can only be used as tag names, attribute value or text between the tags. Constant attribute values must be double-quoted (even if they are numbers). Tags can be self-closing. Only one top-level tag is allowed. And yes, there must be at least one top-level tag.
  • useState(initialValue)
    - returns an array
    [value, setValue]
    of the current state and a setter for the state, that would also trigger an update for the current component.
  • useReducer(reducer, initialValue)
    - returns an array
    [state, dispatch]
    of the current state and a function to dispatch an action to the reducer.
    reducer
    is a
    (state, action) => newState
    function that returns a new state based on the current state and the given action. Use this as an alternative to
    useState
    is you need a more complex logic in your states.
  • useEffect(callback, deps)
    - tries to fire a callback when component is rendered, but only if the
    deps
    array has changed since the last call. An efficient way to add side effects to your functional components.

Finally, what is a functional component? In our case it is a regular JS function that takes two arguments - an object of component properties and a

forceUpdate
callback, that will trigger component update once called. Functional components must return a tree of virtual nodes constructed with
h()
calls or
x` `
syntax.

What a weird name for a project

The library is called "O!". It's a sound of realisation, once you understood how simple it is. Or despair, if you caught a fatal bug after you decided to use this in production. It also resembles a zero, which is a metaphor for both, library footprint and usefulness. More details on how this library originated at https://zserge.com/posts/worst-react-ever/

License

Code is distributed under Apache 2.0 license, feel free to use it in your proprietary projects as well.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.