README.md

@redneckz/uni-jsx

Unification layer between React, Preact and Vue3. Write React-like unified components and use everywhere without recompilation.

React as well as Vue3 comes with Virtual DOM and JSX approaches. There are a few differences at the low level.

This nano-library negates the differences between them on JSX level. Making it possible to implement universal components that work without recompiling in both React and Vue3.

Also the following React-like core hooks are available for Vue3:

• useState
• useEffect
• useLayoutEffect
• useCallback
• useMemo
• useRef

Additional reusable hooks:

const [value, { setValue, setTrue, setFalse, toggle }] = useBool(false);
const [list, { setList, push, pop, remove, clear }] = useList([]);
const [dict, { setDict, setItem, removeItem, assign, unassign, clear }] = useDict({});

// See useSWR
const { data, error } = useAsyncData(key, fetcher, { fallback, cache });

useEventListener(target, 'eventType', handler);

// Useful for popups
const targetRef = useOutsideClick(handleOutsideClick);

const globalLibrary = useScript('globalName', 'https://some/script.js');

Workspaces

• uni-jsx/ Unified JSX core library
• demo/ui-kit package with an example of unified components
• demo/vue-demo Vue3 app which uses components from demo/ui-kit
• demo/react-demo React app which uses components from demo/ui-kit
• demo/nuxt-demo Nuxt 3 app which uses components from demo/ui-kit
• demo/next-demo Next.js app which uses components from demo/ui-kit
• demo/preact-demo Preact app which uses components from demo/ui-kit

How-to start demo

Install and build:

$ npm i # install deps
$ npm run build

React demo:

$ npm run start:react # http://localhost:8080

Vue demo:

$ npm run start:vue # http://localhost:8090

Next demo:

$ npm run start:next # http://localhost:8070

Nuxt demo:

$ npm run start:nuxt # http://localhost:8060

Preact demo:

$ npm run start:preact

How to use

Documentation

Limitations

Common limitations:

• Events are streamed up as-is (avoid usage of normalized Event fields specific to React or Vue)

React specific limitations:

• NO refs forwarding

License

MIT