feat: impl rax-compat shared

This commit is contained in:
ZeroLing 2022-06-06 17:08:35 +08:00
parent a74effe7b9
commit 3799d1e94a
34 changed files with 78 additions and 312 deletions

3
packages/rax-compat/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
es2017/
dist/
esm/

View File

@ -1,2 +0,0 @@
import { Children } from 'react';
export default Children;

View File

@ -1,4 +0,0 @@
import { Children } from 'react';
// See https://github.com/alibaba/rax/blob/master/packages/rax-children/src/index.js
// Imported by 'rax-compat/children'
export default Children;

View File

@ -1,2 +0,0 @@
import { Component, PureComponent, memo } from 'react';
export { Component, PureComponent, memo, };

View File

@ -1,2 +0,0 @@
import { Component, PureComponent, memo } from 'react';
export { Component, PureComponent, memo };

View File

@ -1,2 +0,0 @@
import { createContext } from 'react';
export { createContext, };

View File

@ -1,2 +0,0 @@
import { createContext } from 'react';
export { createContext };

View File

@ -1,12 +0,0 @@
import { cloneElement, isValidElement, createFactory } from 'react';
/**
* Compat createElement for rax export.
* Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
* @param type
* @param props
* @param children
* @param others
* @returns Element
*/
export declare function createElement(type: any, props: Object, children: any, ...others: any): any;
export { cloneElement, isValidElement, createFactory, };

View File

@ -1,13 +0,0 @@
import React, { cloneElement, isValidElement, createFactory } from 'react';
/**
* Compat createElement for rax export.
* Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
* @param type
* @param props
* @param children
* @param others
* @returns Element
*/ export function createElement(type, props, children, ...others) {
return React.createElement(type, props, children, ...others);
}
export { cloneElement, isValidElement, createFactory };

View File

@ -1,12 +0,0 @@
import { cloneElement, isValidElement, createFactory } from 'react';
/**
* Compat createElement for rax export.
* Reference: https://github.com/alibaba/rax/blob/master/packages/rax/src/createElement.js#L13
* @param type
* @param props
* @param children
* @param others
* @returns Element
*/
export declare function createElement(type: any, props: Object, children: any, ...others: any): any;
export { cloneElement, isValidElement, createFactory, };

View File

@ -1,2 +0,0 @@
import { Fragment } from 'react';
export default Fragment;

View File

@ -1,2 +0,0 @@
import { Fragment } from 'react';
export default Fragment;

View File

@ -1,75 +0,0 @@
import * as React from 'react';
/**
* Compat useState for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L39
* @param initialState
* @returns [ value, dispatch ]
*/
export declare function useState<S>(initialState: S | (() => S)): ReturnType<typeof React.useState>;
/**
* Compat useContext for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L93
* @param context
* @returns context
*/
export declare function useContext<T>(context: React.Context<T>): ReturnType<typeof React.useContext>;
/**
* Compat useEffect for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L98
* @param effect
* @param inputs
* @returns void
*/
export declare function useEffect(effect: React.EffectCallback, inputs: React.DependencyList): void;
/**
* Compat useLayoutEffect for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L102
* @param effect
* @param inputs
* @returns void
*/
export declare function useLayoutEffect(effect: React.EffectCallback, inputs: React.DependencyList): void;
/**
* Compat useImperativeHandle for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L190
* @param ref
* @param create
* @param inputs
* @returns void
*/
export declare function useImperativeHandle<T, R extends T>(ref: React.Ref<T> | undefined, create: () => R, inputs?: React.DependencyList): void;
/**
* Compat useRef for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L206
* @param initialValue
* @returns MutableRefObject
*/
export declare function useRef<T>(initialValue: T): React.MutableRefObject<T>;
/**
* Compat useCallback for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L220
* @param callback
* @param inputs
* @returns callback
*/
export declare function useCallback<T extends Function>(callback: T, inputs: React.DependencyList): T;
/**
* Compat useMemo for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
* @param create
* @param inputs
* @returns create
*/
export declare function useMemo<T>(create: () => T, inputs: React.DependencyList | undefined): T;
/**
* Compat useReducer for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
* @param reducer
* @param initialArg
* @param init
* @returns [ state, dispatch ]
*/
export declare function useReducer<R extends React.ReducerWithoutAction<any>, I>(reducer: R, initialArg: I, init: (arg: I) => React.ReducerStateWithoutAction<R>): [React.ReducerStateWithoutAction<R>, React.DispatchWithoutAction];
export declare function useDebugValue<T>(value: T, format?: (value: T) => any): void;
export declare function useInsertionEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
export declare function useSyncExternalStore<Snapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot): Snapshot;

View File

@ -1,90 +0,0 @@
import * as React from 'react';
/**
* Compat useState for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L39
* @param initialState
* @returns [ value, dispatch ]
*/ export function useState(initialState) {
return React.useState(initialState);
}
/**
* Compat useContext for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L93
* @param context
* @returns context
*/ export function useContext(context) {
return React.useContext(context);
}
/**
* Compat useEffect for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L98
* @param effect
* @param inputs
* @returns void
*/ export function useEffect(effect, inputs) {
return React.useEffect(effect, inputs);
}
/**
* Compat useLayoutEffect for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L102
* @param effect
* @param inputs
* @returns void
*/ export function useLayoutEffect(effect, inputs) {
return React.useLayoutEffect(effect, inputs);
}
/**
* Compat useImperativeHandle for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L190
* @param ref
* @param create
* @param inputs
* @returns void
*/ export function useImperativeHandle(ref, create, inputs) {
return React.useImperativeHandle(ref, create, inputs);
}
/**
* Compat useRef for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L206
* @param initialValue
* @returns MutableRefObject
*/ export function useRef(initialValue) {
return React.useRef(initialValue);
}
/**
* Compat useCallback for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L220
* @param callback
* @param inputs
* @returns callback
*/ export function useCallback(callback, inputs) {
return React.useCallback(callback, inputs);
}
/**
* Compat useMemo for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
* @param create
* @param inputs
* @returns create
*/ export function useMemo(create, inputs) {
return React.useMemo(create, inputs);
}
/**
* Compat useReducer for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/hooks.js#L224
* @param reducer
* @param initialArg
* @param init
* @returns [ state, dispatch ]
*/ export function useReducer(reducer, initialArg, init) {
return React.useReducer(reducer, initialArg, init);
}
export function useDebugValue(value, format) {
return React.useDebugValue(value, format);
}
export function useInsertionEffect(effect, deps) {
return React.useInsertionEffect(effect, deps);
}
export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

View File

@ -1,9 +0,0 @@
import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
import render from './render';
import { useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore } from './hooks';
import Fragment from './fragment';
import { forwardRef, createRef } from './ref';
import { Component, PureComponent, memo } from './component';
import { createContext } from './context';
import { lazy, Suspense } from './suspense';
export { render, createElement, cloneElement, isValidElement, createFactory, Component, PureComponent, memo, Fragment, forwardRef, createRef, createContext, lazy, Suspense, useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore, };

View File

@ -1,9 +0,0 @@
import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
import render from './render';
import { useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore } from './hooks';
import Fragment from './fragment';
import { forwardRef, createRef } from './ref';
import { Component, PureComponent, memo } from './component';
import { createContext } from './context';
import { lazy, Suspense } from './suspense';
export { render, createElement, cloneElement, isValidElement, createFactory, Component, PureComponent, memo, Fragment, forwardRef, createRef, createContext, lazy, Suspense, useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, useDebugValue, useInsertionEffect, useSyncExternalStore };

View File

@ -1,2 +0,0 @@
import { forwardRef, createRef } from 'react';
export { forwardRef, createRef };

View File

@ -1,2 +0,0 @@
import { forwardRef, createRef } from 'react';
export { forwardRef, createRef };

View File

@ -1,10 +0,0 @@
/**
* Compat render for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/render.js#L5
* @param element
* @param container
* @param options
* @param callback
* @returns componentInstance
*/
export default function render(element: any, container: any, options: any, callback: Function): string;

View File

@ -1,21 +0,0 @@
import { createRoot } from 'react-dom/client';
import { isFunction } from './type';
/**
* Compat render for rax export.
* https://github.com/alibaba/rax/blob/master/packages/rax/src/render.js#L5
* @param element
* @param container
* @param options
* @param callback
* @returns componentInstance
*/ export default function render(element, container, options, callback) {
if (isFunction(options)) {
callback = options;
options = null;
}
const root = createRoot(container);
root.render(element);
const componentInstance = '?'; // TODO..
if (isFunction(callback)) callback.call(componentInstance);
return componentInstance;
};

View File

@ -1,2 +0,0 @@
import { startTransition } from 'react';
export { startTransition };

View File

@ -1,2 +0,0 @@
import { lazy, Suspense } from 'react';
export { lazy, Suspense, };

View File

@ -1,2 +0,0 @@
import { lazy, Suspense } from 'react';
export { lazy, Suspense };

View File

@ -1,2 +0,0 @@
export declare function isFunction(obj: any): obj is Function;
export declare function isNull(obj: any): obj is null;

View File

@ -1,6 +0,0 @@
export function isFunction(obj) {
return typeof obj === 'function';
}
export function isNull(obj) {
return obj === null;
}

View File

@ -1,2 +0,0 @@
export declare function isFunction(obj: any): obj is Function;
export declare function isNull(obj: any): obj is null;

View File

@ -1,4 +1,4 @@
import { createElement, cloneElement, isValidElement, createFactory } from './create-element';
import { createElement } from './create-element';
import render from './render';
import {
useState,
@ -10,41 +10,41 @@ import {
useMemo,
useReducer,
useImperativeHandle,
useDebugValue,
useInsertionEffect,
useSyncExternalStore,
} from './hooks';
import Fragment from './fragment';
import { forwardRef, createRef } from './ref';
import { Component, PureComponent, memo } from './component';
import { createContext } from './context';
import { lazy, Suspense } from './suspense';
import shared from './shared';
// Mocked version for rax.
const version = '1.2.2-compat';
export {
render,
createElement,
cloneElement,
isValidElement,
createFactory,
Component,
PureComponent,
memo,
Fragment,
forwardRef,
createRef,
PureComponent,
createContext,
lazy,
Suspense,
useState,
createElement,
createRef,
forwardRef,
memo,
render,
// This is mocked object for rax compatible.
shared,
useCallback,
useContext,
useEffect,
useImperativeHandle,
useLayoutEffect,
useRef,
useCallback,
useMemo,
useReducer,
useImperativeHandle,
useDebugValue,
useInsertionEffect,
useSyncExternalStore,
useRef,
useState,
version,
};

View File

@ -0,0 +1,52 @@
import { ReactElement } from 'react';
// Mocked `Rax.shared`.
const shared = {
get Element(): any {
warningCompat('shared.Element');
return null;
},
get Host(): any {
warningCompat('shared.Host');
return null;
},
get Instance(): any {
warningCompat('shared.Instance');
return null;
},
flattenChildren,
};
function warningCompat(message: string) {
let stack: string;
try {
throw new Error(`You are not allowed to use ${message}.`);
} catch (error) {
stack = error.stack;
}
console.error(`[RaxCompat] ${stack}`);
}
function flattenChildren(children: ReactElement) {
if (children == null) {
return children;
}
const result: ReactElement[] = [];
// If length equal 1, return the only one.
traverseChildren(children, result);
return result.length - 1 ? result : result[0];
}
function traverseChildren(children: ReactElement, result: ReactElement[]) {
if (Array.isArray(children)) {
for (let i = 0, l = children.length; i < l; i++) {
traverseChildren(children[i], result);
}
} else {
result.push(children);
}
}
export default shared;