pixuireactcomponents 1.2.0 → 1.2.2

package/lib/preact/hooks/src/index.js

@@ -1,339 +0,0 @@
-import { options } from 'preact';
-
-/** @type {number} */
-let currentIndex;
-
-/** @type {import('./internal').Component} */
-let currentComponent;
-
-/** @type {Array<import('./internal').Component>} */
-let afterPaintEffects = [];
-
-let oldBeforeRender = options._render;
-let oldAfterDiff = options.diffed;
-let oldCommit = options._commit;
-let oldBeforeUnmount = options.unmount;
-
-const RAF_TIMEOUT = 100;
-let prevRaf;
-
-options._render = vnode => {
-	if (oldBeforeRender) oldBeforeRender(vnode);
-
-	currentComponent = vnode._component;
-	currentIndex = 0;
-
-	if (currentComponent.__hooks) {
-		currentComponent.__hooks._pendingEffects.forEach(invokeCleanup);
-		currentComponent.__hooks._pendingEffects.forEach(invokeEffect);
-		currentComponent.__hooks._pendingEffects = [];
-	}
-};
-
-options.diffed = vnode => {
-	if (oldAfterDiff) oldAfterDiff(vnode);
-
-	const c = vnode._component;
-	if (!c) return;
-
-	const hooks = c.__hooks;
-	if (hooks) {
-		if (hooks._pendingEffects.length) {
-			afterPaint(afterPaintEffects.push(c));
-		}
-	}
-};
-
-options._commit = (vnode, commitQueue) => {
-	commitQueue.some(component => {
-		try {
-			component._renderCallbacks.forEach(invokeCleanup);
-			component._renderCallbacks = component._renderCallbacks.filter(cb =>
-				cb._value ? invokeEffect(cb) : true
-			);
-		} catch (e) {
-			commitQueue.some(c => {
-				if (c._renderCallbacks) c._renderCallbacks = [];
-			});
-			commitQueue = [];
-			options._catchError(e, component._vnode);
-		}
-	});
-
-	if (oldCommit) oldCommit(vnode, commitQueue);
-};
-
-options.unmount = vnode => {
-	if (oldBeforeUnmount) oldBeforeUnmount(vnode);
-
-	const c = vnode._component;
-	if (!c) return;
-
-	const hooks = c.__hooks;
-	if (hooks) {
-		try {
-			hooks._list.forEach(hook => hook._cleanup && hook._cleanup());
-		} catch (e) {
-			options._catchError(e, c._vnode);
-		}
-	}
-};
-
-/**
- * Get a hook's state from the currentComponent
- * @param {number} index The index of the hook to get
- * @returns {import('./internal').HookState}
- */
-function getHookState(index) {
-	if (options._hook) options._hook(currentComponent);
-	// Largely inspired by:
-	// * https://github.com/michael-klein/funcy.js/blob/f6be73468e6ec46b0ff5aa3cc4c9baf72a29025a/src/hooks/core_hooks.mjs
-	// * https://github.com/michael-klein/funcy.js/blob/650beaa58c43c33a74820a3c98b3c7079cf2e333/src/renderer.mjs
-	// Other implementations to look at:
-	// * https://codesandbox.io/s/mnox05qp8
-	const hooks =
-		currentComponent.__hooks ||
-		(currentComponent.__hooks = { _list: [], _pendingEffects: [] });
-
-	if (index >= hooks._list.length) {
-		hooks._list.push({});
-	}
-	return hooks._list[index];
-}
-
-/**
- * @param {import('./index').StateUpdater<any>} initialState
- */
-export function useState(initialState) {
-	return useReducer(invokeOrReturn, initialState);
-}
-
-/**
- * @param {import('./index').Reducer<any, any>} reducer
- * @param {import('./index').StateUpdater<any>} initialState
- * @param {(initialState: any) => void} [init]
- * @returns {[ any, (state: any) => void ]}
- */
-export function useReducer(reducer, initialState, init) {
-	/** @type {import('./internal').ReducerHookState} */
-	const hookState = getHookState(currentIndex++);
-	if (!hookState._component) {
-		hookState._component = currentComponent;
-
-		hookState._value = [
-			!init ? invokeOrReturn(undefined, initialState) : init(initialState),
-
-			action => {
-				const nextValue = reducer(hookState._value[0], action);
-				if (hookState._value[0] !== nextValue) {
-					hookState._value[0] = nextValue;
-					hookState._component.setState({});
-				}
-			}
-		];
-	}
-
-	return hookState._value;
-}
-
-/**
- * @param {import('./internal').Effect} callback
- * @param {any[]} args
- */
-export function useEffect(callback, args) {
-	/** @type {import('./internal').EffectHookState} */
-	const state = getHookState(currentIndex++);
-	if (argsChanged(state._args, args)) {
-		state._value = callback;
-		state._args = args;
-
-		currentComponent.__hooks._pendingEffects.push(state);
-	}
-}
-
-/**
- * @param {import('./internal').Effect} callback
- * @param {any[]} args
- */
-export function useLayoutEffect(callback, args) {
-	/** @type {import('./internal').EffectHookState} */
-	const state = getHookState(currentIndex++);
-	if (argsChanged(state._args, args)) {
-		state._value = callback;
-		state._args = args;
-
-		currentComponent._renderCallbacks.push(state);
-	}
-}
-
-export function useRef(initialValue) {
-	return useMemo(() => ({ current: initialValue }), []);
-}
-
-/**
- * @param {object} ref
- * @param {() => object} createHandle
- * @param {any[]} args
- */
-export function useImperativeHandle(ref, createHandle, args) {
-	useLayoutEffect(
-		() => {
-			if (typeof ref == 'function') ref(createHandle());
-			else if (ref) ref.current = createHandle();
-		},
-		args == null ? args : args.concat(ref)
-	);
-}
-
-/**
- * @param {() => any} factory
- * @param {any[]} args
- */
-export function useMemo(factory, args) {
-	/** @type {import('./internal').MemoHookState} */
-	const state = getHookState(currentIndex++);
-	if (argsChanged(state._args, args)) {
-		state._args = args;
-		state._factory = factory;
-		return (state._value = factory());
-	}
-
-	return state._value;
-}
-
-/**
- * @param {() => void} callback
- * @param {any[]} args
- */
-export function useCallback(callback, args) {
-	return useMemo(() => callback, args);
-}
-
-/**
- * @param {import('./internal').PreactContext} context
- */
-export function useContext(context) {
-	const provider = currentComponent.context[context._id];
-	if (!provider) return context._defaultValue;
-	const state = getHookState(currentIndex++);
-	// This is probably not safe to convert to "!"
-	if (state._value == null) {
-		state._value = true;
-		provider.sub(currentComponent);
-	}
-	return provider.props.value;
-}
-
-/**
- * Display a custom label for a custom hook for the devtools panel
- * @type {<T>(value: T, cb?: (value: T) => string | number) => void}
- */
-export function useDebugValue(value, formatter) {
-	if (options.useDebugValue) {
-		options.useDebugValue(formatter ? formatter(value) : value);
-	}
-}
-
-export function useErrorBoundary(cb) {
-	const state = getHookState(currentIndex++);
-	const errState = useState();
-	state._value = cb;
-	if (!currentComponent.componentDidCatch) {
-		currentComponent.componentDidCatch = err => {
-			if (state._value) state._value(err);
-			errState[1](err);
-		};
-	}
-	return [
-		errState[0],
-		() => {
-			errState[1](undefined);
-		}
-	];
-}
-
-/**
- * After paint effects consumer.
- */
-function flushAfterPaintEffects() {
-	afterPaintEffects.some(component => {
-		if (component._parentDom) {
-			try {
-				component.__hooks._pendingEffects.forEach(invokeCleanup);
-				component.__hooks._pendingEffects.forEach(invokeEffect);
-				component.__hooks._pendingEffects = [];
-			} catch (e) {
-				component.__hooks._pendingEffects = [];
-				options._catchError(e, component._vnode);
-				return true;
-			}
-		}
-	});
-	afterPaintEffects = [];
-}
-
-/**
- * Schedule a callback to be invoked after the browser has a chance to paint a new frame.
- * Do this by combining requestAnimationFrame (rAF) + setTimeout to invoke a callback after
- * the next browser frame.
- *
- * Also, schedule a timeout in parallel to the the rAF to ensure the callback is invoked
- * even if RAF doesn't fire (for example if the browser tab is not visible)
- *
- * @param {() => void} callback
- */
-function afterNextFrame(callback) {
-	const done = () => {
-		clearTimeout(timeout);
-		cancelAnimationFrame(raf);
-		setTimeout(callback);
-	};
-	const timeout = setTimeout(done, RAF_TIMEOUT);
-
-	let raf;
-	if (typeof window != 'undefined') {
-		raf = requestAnimationFrame(done);
-	}
-}
-
-// Note: if someone used options.debounceRendering = requestAnimationFrame,
-// then effects will ALWAYS run on the NEXT frame instead of the current one, incurring a ~16ms delay.
-// Perhaps this is not such a big deal.
-/**
- * Schedule afterPaintEffects flush after the browser paints
- * @param {number} newQueueLength
- */
-function afterPaint(newQueueLength) {
-	if (newQueueLength === 1 || prevRaf !== options.requestAnimationFrame) {
-		prevRaf = options.requestAnimationFrame;
-		(prevRaf || afterNextFrame)(flushAfterPaintEffects);
-	}
-}
-
-/**
- * @param {import('./internal').EffectHookState} hook
- */
-function invokeCleanup(hook) {
-	if (hook._cleanup) hook._cleanup();
-}
-
-/**
- * Invoke a Hook's effect
- * @param {import('./internal').EffectHookState} hook
- */
-function invokeEffect(hook) {
-	const result = hook._value();
-	if (typeof result == 'function') hook._cleanup = result;
-}
-
-/**
- * @param {any[]} oldArgs
- * @param {any[]} newArgs
- */
-function argsChanged(oldArgs, newArgs) {
-	return !oldArgs || newArgs.some((arg, index) => arg !== oldArgs[index]);
-}
-
-function invokeOrReturn(arg, f) {
-	return typeof f == 'function' ? f(arg) : f;
-}

package/lib/preact/hooks/src/internal.d.ts

@@ -1,55 +0,0 @@
-import { Component as PreactComponent } from '../../src/internal';
-
-export { PreactContext } from '../../src/internal';
-
-/**
- * The type of arguments passed to a Hook function. While this type is not
- * strictly necessary, they are given a type name to make it easier to read
- * the following types and trace the flow of data.
- */
-export type HookArgs = any;
-
-/**
- * The return type of a Hook function. While this type is not
- * strictly necessary, they are given a type name to make it easier to read
- * the following types and trace the flow of data.
- */
-export type HookReturnValue = any;
-
-/** The public function a user invokes to use a Hook */
-export type Hook = (...args: HookArgs[]) => HookReturnValue;
-
-// Hook tracking
-
-export interface ComponentHooks {
-	/** The list of hooks a component uses */
-	_list: HookState[];
-	/** List of Effects to be invoked after the next frame is rendered */
-	_pendingEffects: EffectHookState[];
-}
-
-export interface Component extends PreactComponent<any, any> {
-	__hooks?: ComponentHooks;
-}
-
-export type HookState = EffectHookState | MemoHookState | ReducerHookState;
-
-export type Effect = () => void | Cleanup;
-export type Cleanup = () => void;
-
-export interface EffectHookState {
-	_value?: Effect;
-	_args?: any[];
-	_cleanup?: Cleanup;
-}
-
-export interface MemoHookState {
-	_value?: any;
-	_args?: any[];
-	_factory?: () => any;
-}
-
-export interface ReducerHookState {
-	_value?: any;
-	_component?: Component;
-}

package/lib/preact/src/clone-element.js

@@ -1,27 +0,0 @@
-import { assign } from './util';
-import { EMPTY_ARR } from './constants';
-import { createVNode } from './create-element';
-
-/**
- * Clones the given VNode, optionally adding attributes/props and replacing its children.
- * @param {import('./internal').VNode} vnode The virtual DOM element to clone
- * @param {object} props Attributes/props to add when cloning
- * @param {Array<import('./index').ComponentChildren>} rest Any additional arguments will be used as replacement children.
- * @returns {import('./internal').VNode}
- */
-export function cloneElement(vnode, props) {
-	props = assign(assign({}, vnode.props), props);
-	if (arguments.length > 2) props.children = EMPTY_ARR.slice.call(arguments, 2);
-	let normalizedProps = {};
-	for (const i in props) {
-		if (i !== 'key' && i !== 'ref') normalizedProps[i] = props[i];
-	}
-
-	return createVNode(
-		vnode.type,
-		normalizedProps,
-		props.key || vnode.key,
-		props.ref || vnode.ref,
-		null
-	);
-}

package/lib/preact/src/component.js

@@ -1,219 +0,0 @@
-import { assign } from './util';
-import { diff, commitRoot } from './diff/index';
-import options from './options';
-import { Fragment } from './create-element';
-
-/**
- * Base Component class. Provides `setState()` and `forceUpdate()`, which
- * trigger rendering
- * @param {object} props The initial component props
- * @param {object} context The initial context from parent components'
- * getChildContext
- */
-export function Component(props, context) {
-	this.props = props;
-	this.context = context;
-}
-
-/**
- * Update component state and schedule a re-render.
- * @param {object | ((s: object, p: object) => object)} update A hash of state
- * properties to update with new values or a function that given the current
- * state and props returns a new partial state
- * @param {() => void} [callback] A function to be called once component state is
- * updated
- */
-Component.prototype.setState = function (update, callback) {
-	// only clone state when copying to nextState the first time.
-	let s;
-	if (this._nextState !== this.state) {
-		s = this._nextState;
-	} else {
-		s = this._nextState = assign({}, this.state);
-	}
-
-	if (typeof update == 'function') {
-		update = update(s, this.props);
-	}
-
-	if (update) {
-		assign(s, update);
-	}
-
-	// Skip update if updater function returned null
-	if (update == null) return;
-
-	if (this._vnode) {
-		if (callback) this._renderCallbacks.push(callback);
-		enqueueRender(this);
-	}
-};
-
-/**
- * Immediately perform a synchronous re-render of the component
- * @param {() => void} [callback] A function to be called after component is
- * re-rendered
- */
-Component.prototype.forceUpdate = function (callback) {
-	if (this._vnode) {
-		// Set render mode so that we can differentiate where the render request
-		// is coming from. We need this because forceUpdate should never call
-		// shouldComponentUpdate
-		this._force = true;
-		if (callback) this._renderCallbacks.push(callback);
-		enqueueRender(this);
-	}
-};
-
-/**
- * Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
- * Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
- * @param {object} props Props (eg: JSX attributes) received from parent
- * element/component
- * @param {object} state The component's current state
- * @param {object} context Context object, as returned by the nearest
- * ancestor's `getChildContext()`
- * @returns {import('./index').ComponentChildren | void}
- */
-Component.prototype.render = Fragment;
-
-/**
- * @param {import('./internal').VNode} vnode
- * @param {number | null} [childIndex]
- */
-export function getDomSibling(vnode, childIndex) {
-	if (childIndex == null) {
-		// Use childIndex==null as a signal to resume the search from the vnode's sibling
-		return vnode._parent
-			? getDomSibling(vnode._parent, vnode._parent._children.indexOf(vnode) + 1)
-			: null;
-	}
-
-	let sibling;
-	for (; childIndex < vnode._children.length; childIndex++) {
-		sibling = vnode._children[childIndex];
-
-		if (sibling != null && sibling._dom != null) {
-			// Since updateParentDomPointers keeps _dom pointer correct,
-			// we can rely on _dom to tell us if this subtree contains a
-			// rendered DOM node, and what the first rendered DOM node is
-			return sibling._dom;
-		}
-	}
-
-	// If we get here, we have not found a DOM node in this vnode's children.
-	// We must resume from this vnode's sibling (in it's parent _children array)
-	// Only climb up and search the parent if we aren't searching through a DOM
-	// VNode (meaning we reached the DOM parent of the original vnode that began
-	// the search)
-	return typeof vnode.type == 'function' ? getDomSibling(vnode) : null;
-}
-
-/**
- * Trigger in-place re-rendering of a component.
- * @param {import('./internal').Component} component The component to rerender
- */
-function renderComponent(component) {
-	let vnode = component._vnode,
-		oldDom = vnode._dom,
-		parentDom = component._parentDom;
-
-	if (parentDom) {
-		let commitQueue = [];
-		const oldVNode = assign({}, vnode);
-		oldVNode._original = oldVNode;
-
-		window.clearOP();
-
-		let newDom = diff(
-			parentDom,
-			vnode,
-			oldVNode,
-			component._globalContext,
-			parentDom.ownerSVGElement !== undefined,
-			null,
-			commitQueue,
-			oldDom == null ? getDomSibling(vnode) : oldDom
-		);
-		commitRoot(commitQueue, vnode);
-
-		window.dumpOP('renderComponent');
-
-		if (newDom != oldDom) {
-			updateParentDomPointers(vnode);
-		}
-	}
-}
-
-/**
- * @param {import('./internal').VNode} vnode
- */
-function updateParentDomPointers(vnode) {
-	if ((vnode = vnode._parent) != null && vnode._component != null) {
-		vnode._dom = vnode._component.base = null;
-		for (let i = 0; i < vnode._children.length; i++) {
-			let child = vnode._children[i];
-			if (child != null && child._dom != null) {
-				vnode._dom = vnode._component.base = child._dom;
-				break;
-			}
-		}
-
-		return updateParentDomPointers(vnode);
-	}
-}
-
-/**
- * The render queue
- * @type {Array<import('./internal').Component>}
- */
-let rerenderQueue = [];
-let rerenderCount = 0;
-
-/**
- * Asynchronously schedule a callback
- * @type {(cb: () => void) => void}
- */
-/* istanbul ignore next */
-// Note the following line isn't tree-shaken by rollup cuz of rollup/rollup#2566
-const defer =
-	typeof Promise == 'function' ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout;
-
-/*
- * The value of `Component.debounce` must asynchronously invoke the passed in callback. It is
- * important that contributors to Preact can consistently reason about what calls to `setState`, etc.
- * do, and when their effects will be applied. See the links below for some further reading on designing
- * asynchronous APIs.
- * * [Designing APIs for Asynchrony](https://blog.izs.me/2013/08/designing-apis-for-asynchrony)
- * * [Callbacks synchronous and asynchronous](https://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/)
- */
-
-let prevDebounce;
-
-/**
- * Enqueue a rerender of a component
- * @param {import('./internal').Component} c The component to rerender
- */
-export function enqueueRender(c) {
-	if (
-		(!c._dirty && (c._dirty = true) && rerenderQueue.push(c) && !rerenderCount++) ||
-		prevDebounce !== options.debounceRendering
-	) {
-		prevDebounce = options.debounceRendering;
-		(prevDebounce || defer)(process);
-	}
-}
-
-/** Flush the render queue by rerendering all queued components */
-function process() {
-	let queue;
-	while ((rerenderCount = rerenderQueue.length)) {
-		queue = rerenderQueue.sort((a, b) => a._vnode._depth - b._vnode._depth);
-		rerenderQueue = [];
-		// Don't update `renderCount` yet. Keep its value non-zero to prevent unnecessary
-		// process() calls from getting scheduled while `queue` is still being consumed.
-		queue.some((c) => {
-			if (c._dirty) renderComponent(c);
-		});
-	}
-}

package/lib/preact/src/constants.js

@@ -1,3 +0,0 @@
-export const EMPTY_OBJ = {};
-export const EMPTY_ARR = [];
-export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord/i;

package/lib/preact/src/create-context.js

@@ -1,55 +0,0 @@
-import { enqueueRender } from './component';
-
-export let i = 0;
-
-export function createContext(defaultValue) {
-	const ctx = {};
-
-	const context = {
-		_id: '__cC' + i++,
-		_defaultValue: defaultValue,
-		Consumer(props, context) {
-			return props.children(context);
-		},
-		Provider(props) {
-			if (!this.getChildContext) {
-				const subs = [];
-				this.getChildContext = () => {
-					ctx[context._id] = this;
-					return ctx;
-				};
-
-				this.shouldComponentUpdate = _props => {
-					if (this.props.value !== _props.value) {
-						subs.some(c => {
-							c.context = _props.value;
-							enqueueRender(c);
-						});
-					}
-				};
-
-				this.sub = c => {
-					subs.push(c);
-					let old = c.componentWillUnmount;
-					c.componentWillUnmount = () => {
-						subs.splice(subs.indexOf(c), 1);
-						old && old.call(c);
-					};
-				};
-			}
-
-			return props.children;
-		}
-	};
-
-	context.Consumer.contextType = context;
-
-	// Devtools needs access to the context object when it
-	// encounters a Provider. This is necessary to support
-	// setting `displayName` on the context object instead
-	// of on the component itself. See:
-	// https://reactjs.org/docs/context.html#contextdisplayname
-	context.Provider._contextRef = context;
-
-	return context;
-}