oops(hooks library)

oops has built-in jsx parsing function, but you can also compile jsx with babel.

Hooks

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useLayoutEffect
• useImperativeHandle
• useTransition
• useDeferredValue

API

• h
• jsx
• memo
• render
• createContext
• createRef
• forwardRef
• isValidElement
• createPortal
• lazy
• Children
  • map
  • forEach
  • count
  • toArray
  • only

Built-in components

• <Fragment/>
• <Suspense/>
• <Context.Provider/>
• <Context.Consumer/>

Caveats

1. The observedBits function of context is not implemented yet.

2. The functional components also supports defaultProps.

3. Beacase the React event system is customized, so, the dom created by the createPortal methods allow event bubbling to parent node in vitualDOM tree. But oops uses native event system. our event bubbling behaviors exist in real dom tree that result we can't achieve the same behavior with the React, But our bubbling behavior can still be performed according to the structure of the vitualDOM tree.

demo

  import { render, useState, useEffect, createPortal } from '@rustle/oops'

  const el = document.createElement('div')
  const appRoot = document.getElementById('app-root')
  const modalRoot = document.getElementById('modal-root')

  // Listening to the bubbling behavior of the native event system 
  el.onclick = e => {
    console.log(e.target)
  }

  function Modal(props) {
    useEffect(() => {
      modalRoot.appendChild(el)
      return () => modalRoot.removeChild(el)
    })
    return createPortal(props.children, el)
  }

  const modalStyles = {
      position: 'fixed',
      top: 0,
      left: 0,
      height: '100%',
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'rgba(0,0,0,0.5)',
  }

  function Child() {
    // The click event on this button will bubble up to parent,
    // because there is no 'onClick' attribute defined
    return (
      <div style={ modalStyles }>
        <button>Click</button>
      </div>
    )
  }

  function Parent(props) {
    const [clicks, handleClick] = useState(0)
    return (
      <div onClick={e => {
        console.log(e.target, e.currentTarget, e.nativeEvent)
        handleClick(clicks + 1)
      }}>
        <p>Number of clicks: { clicks }</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child />
        </Modal>
      </div>
    )
  }

  render(<Parent />, appRoot)