use-frontend

Transform React.js Hooks to Vue.js Composition Api

const [counter, setCounter] = useState(0); // React Hooks

// Transforms into

const counter = reactive(0); // Vue Composition Api

Local installation

Clone the respository and run npm i.

To run dev server execute npm run dev command.

Todo

useEffect

• remove cleanup callback from onMounted
• create watch if contains dependencies
• create onMounted if dependencies are empty
• create onUpdated if there are no dependencies
• if contains cleanup callback
  • create onMounted hook
  • remove return cleanup callback from original callback
  • create additional onUnmounted lifecycle cleanup hook

useRef

• replace useRef with ref
• replace .current with .value

useState

• replace useState with ref or reactive
• transform setState call with raw expression
• if was transformed to ref
  • replace every value access with .value member property access
• transform initial state function provider to ref or reactive IIFE
• unwrap callback's body from setState call
  • rename argument to used in state declaration
  • rename argument in complex function body

useCallback

• replace useCallback with wrapped callback in computed
• replace useCallback with raw callback

useMemo

• replace useMemo with computed

useContext

• replace useContext with inject

useLayoutEffect

• replace useLayoutEffect with onBeforeMount
• if has cleanup callback
  • create additional onUnmounted lifecycle hook

License

MIT