Package Exports

@rustle/oops

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rustle/oops) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

oops(hooks library)

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

oops demo

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

The observedBits function of context is not implemented yet.
The functional components also supports defaultProps.
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.

  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)