@shuvi/platform-web 0.0.1-rc.34 → 1.0.0-rc.2

package/esm/shuvi-app/react/head/side-effect.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SideEffectProps, HeadState } from './types';
+declare const _default: () => {
+    new (props: any): {
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactNode;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<React.PropsWithChildren<SideEffectProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<React.PropsWithChildren<SideEffectProps>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<React.PropsWithChildren<SideEffectProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<React.PropsWithChildren<SideEffectProps>>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<React.PropsWithChildren<SideEffectProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<React.PropsWithChildren<SideEffectProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<React.PropsWithChildren<SideEffectProps>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<React.PropsWithChildren<SideEffectProps>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    rewind(): HeadState | undefined;
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/esm/shuvi-app/react/head/side-effect.jsx

@@ -0,0 +1,44 @@
+// Based on https://github.com/zeit/next.js
+// License: https://github.com/zeit/next.js/blob/977bf8d9ebd2845241b8689317f36e4e487f39d0/license.md
+import { Component } from 'react';
+const isServer = typeof window === 'undefined';
+export default () => {
+    const mountedInstances = new Set();
+    let state;
+    function emitChange(component) {
+        state = component.props.reduceComponentsToState([...mountedInstances], component.props);
+        if (component.props.handleStateChange) {
+            component.props.handleStateChange(state);
+        }
+    }
+    return class extends Component {
+        // Used when server rendering
+        static rewind() {
+            const recordedState = state;
+            state = undefined;
+            mountedInstances.clear();
+            return recordedState;
+        }
+        constructor(props) {
+            super(props);
+            if (isServer) {
+                mountedInstances.add(this);
+                emitChange(this);
+            }
+        }
+        componentDidMount() {
+            mountedInstances.add(this);
+            emitChange(this);
+        }
+        componentDidUpdate() {
+            emitChange(this);
+        }
+        componentWillUnmount() {
+            mountedInstances.delete(this);
+            emitChange(this);
+        }
+        render() {
+            return null;
+        }
+    };
+};

package/esm/shuvi-app/react/head/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IHtmlTag } from '../types';
+export declare type SideEffectProps = {
+    reduceComponentsToState: <T>(components: Array<React.ReactElement<any>>, props: T) => HeadState;
+    handleStateChange?: (state: HeadState) => void;
+};
+export interface HeadElement {
+    type: string;
+    props: {
+        [name: string]: any;
+        children?: string | string[];
+    };
+}
+export declare type HeadState = IHtmlTag[];
+export declare type HeadItem = IHtmlTag;

package/esm/shuvi-app/react/head/types.js

@@ -0,0 +1 @@
+export {};

package/esm/shuvi-app/react/index.d.ts

@@ -0,0 +1,4 @@
+import view from './view';
+import app from './AppComponent';
+import getRoutes from './getRoutes';
+export { view, app, getRoutes };

package/esm/shuvi-app/react/index.js

@@ -0,0 +1,4 @@
+import view from './view';
+import app from './AppComponent';
+import getRoutes from './getRoutes';
+export { view, app, getRoutes };

package/esm/shuvi-app/react/loadRouteComponent.d.ts

@@ -0,0 +1,4 @@
+/// <reference lib="dom" />
+import * as React from 'react';
+import { DynamicOptions } from './dynamic';
+export declare function loadRouteComponent(loader: () => Promise<any>, options?: DynamicOptions<any>): React.ComponentType;

package/esm/shuvi-app/react/loadRouteComponent.jsx

@@ -0,0 +1,9 @@
+/// <reference lib="dom" />
+import dynamic from './dynamic';
+export function loadRouteComponent(loader, options) {
+    const DynamicComp = dynamic(() => loader().then(mod => {
+        const comp = mod.default || mod;
+        return comp;
+    }), options);
+    return DynamicComp;
+}

package/esm/shuvi-app/react/loadable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './loadable';
+export { LoadableContext } from './loadable-context';

package/esm/shuvi-app/react/loadable/index.js

@@ -0,0 +1,2 @@
+export { default } from './loadable';
+export { LoadableContext } from './loadable-context';

package/esm/shuvi-app/react/loadable/loadable-context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare type CaptureFn = (moduleName: string) => void;
+export declare const LoadableContext: React.Context<CaptureFn | null>;
+export {};

package/esm/shuvi-app/react/loadable/loadable-context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+// @ts-ignore for some reason the React types don't like this, but it's correct.
+export const LoadableContext = React.createContext(null);

package/esm/shuvi-app/react/loadable/loadable.d.ts

@@ -0,0 +1,30 @@
+/**
+@copyright (c) 2017-present James Kyle <me@thejameskyle.com>
+ MIT License
+ Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+ The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
+*/
+import * as React from 'react';
+declare type Options = any;
+declare function Loadable<P>(opts: Options): React.ComponentType<P>;
+declare namespace Loadable {
+    var Map: typeof LoadableMap;
+    var preloadAll: () => Promise<void>;
+    var preloadReady: (ids?: (string | number)[]) => Promise<void>;
+}
+declare function LoadableMap<P>(opts: Options): React.ComponentType<P>;
+export default Loadable;

package/esm/shuvi-app/react/loadable/loadable.js

@@ -0,0 +1,277 @@
+// @ts-nocheck
+/**
+@copyright (c) 2017-present James Kyle <me@thejameskyle.com>
+ MIT License
+ Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+ The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
+*/
+// https://github.com/jamiebuilds/react-loadable/blob/v5.5.0/src/index.js
+// Modified to be compatible with webpack 4 / Next.js
+// Modified to be compatible with shuvi.js
+import * as React from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { LoadableContext } from './loadable-context';
+const ALL_INITIALIZERS = [];
+const READY_INITIALIZERS = [];
+let initialized = false;
+function load(loader) {
+    let promise = loader();
+    let state = {
+        loading: true,
+        loaded: null,
+        error: null
+    };
+    state.promise = promise
+        .then(loaded => {
+        state.loading = false;
+        state.loaded = loaded;
+        return loaded;
+    })
+        .catch(err => {
+        state.loading = false;
+        state.error = err;
+        throw err;
+    });
+    return state;
+}
+function loadMap(obj) {
+    let state = {
+        loading: false,
+        loaded: {},
+        error: null
+    };
+    let promises = [];
+    try {
+        Object.keys(obj).forEach(key => {
+            let result = load(obj[key]);
+            if (!result.loading) {
+                state.loaded[key] = result.loaded;
+                state.error = result.error;
+            }
+            else {
+                state.loading = true;
+            }
+            promises.push(result.promise);
+            result.promise
+                .then(res => {
+                state.loaded[key] = res;
+            })
+                .catch(err => {
+                state.error = err;
+            });
+        });
+    }
+    catch (err) {
+        state.error = err;
+    }
+    state.promise = Promise.all(promises)
+        .then(res => {
+        state.loading = false;
+        return res;
+    })
+        .catch(err => {
+        state.loading = false;
+        throw err;
+    });
+    return state;
+}
+function resolve(obj) {
+    return obj && obj.__esModule ? obj.default : obj;
+}
+function render(loaded, props) {
+    return React.createElement(resolve(loaded), props);
+}
+function createLoadableComponent(loadFn, options) {
+    let opts = Object.assign({
+        loader: null,
+        loading: null,
+        delay: 200,
+        timeout: null,
+        render: render,
+        webpack: null,
+        modules: null
+    }, options);
+    let subscription = null;
+    function init() {
+        if (!subscription) {
+            const sub = new LoadableSubscription(loadFn, opts);
+            subscription = {
+                getCurrentValue: sub.getCurrentValue.bind(sub),
+                subscribe: sub.subscribe.bind(sub),
+                retry: sub.retry.bind(sub),
+                promise: sub.promise.bind(sub)
+            };
+        }
+        return subscription.promise();
+    }
+    // Server only
+    if (typeof window === 'undefined') {
+        ALL_INITIALIZERS.push(init);
+    }
+    // Client only
+    if (!initialized &&
+        typeof window !== 'undefined' &&
+        typeof opts.webpack === 'function') {
+        const moduleIds = opts.webpack();
+        READY_INITIALIZERS.push(ids => {
+            for (const moduleId of moduleIds) {
+                if (ids.indexOf(moduleId) !== -1) {
+                    return init();
+                }
+            }
+        });
+    }
+    const LoadableComponent = React.forwardRef((props, ref) => {
+        init();
+        const context = React.useContext(LoadableContext);
+        const state = useSyncExternalStore(subscription.subscribe, subscription.getCurrentValue, subscription.getCurrentValue);
+        React.useImperativeHandle(ref, () => ({
+            retry: subscription.retry
+        }), []);
+        if (context && Array.isArray(opts.modules)) {
+            opts.modules.forEach(moduleName => {
+                context(moduleName);
+            });
+        }
+        return React.useMemo(() => {
+            if (state.loading || state.error) {
+                return React.createElement(opts.loading, {
+                    isLoading: state.loading,
+                    pastDelay: state.pastDelay,
+                    timedOut: state.timedOut,
+                    error: state.error,
+                    retry: subscription.retry
+                });
+            }
+            else if (state.loaded) {
+                return opts.render(state.loaded, props);
+            }
+            else {
+                return null;
+            }
+        }, [props, state]);
+    });
+    LoadableComponent.preload = () => init();
+    LoadableComponent.displayName = 'LoadableComponent';
+    return LoadableComponent;
+}
+class LoadableSubscription {
+    constructor(loadFn, opts) {
+        this._loadFn = loadFn;
+        this._opts = opts;
+        this._callbacks = new Set();
+        this._delay = null;
+        this._timeout = null;
+        this.retry();
+    }
+    promise() {
+        return this._res.promise;
+    }
+    retry() {
+        this._clearTimeouts();
+        this._res = this._loadFn(this._opts.loader);
+        this._state = {
+            pastDelay: false,
+            timedOut: false
+        };
+        const { _res: res, _opts: opts } = this;
+        if (res.loading) {
+            if (typeof opts.delay === 'number') {
+                if (opts.delay === 0) {
+                    this._state.pastDelay = true;
+                }
+                else {
+                    this._delay = setTimeout(() => {
+                        this._update({
+                            pastDelay: true
+                        });
+                    }, opts.delay);
+                }
+            }
+            if (typeof opts.timeout === 'number') {
+                this._timeout = setTimeout(() => {
+                    this._update({ timedOut: true });
+                }, opts.timeout);
+            }
+        }
+        this._res.promise
+            .then(() => {
+            this._update({});
+            this._clearTimeouts();
+        })
+            .catch(_err => {
+            this._update({});
+            this._clearTimeouts();
+        });
+        this._update({});
+    }
+    _update(partial) {
+        this._state = Object.assign(Object.assign(Object.assign({}, this._state), { error: this._res.error, loaded: this._res.loaded, loading: this._res.loading }), partial);
+        this._callbacks.forEach(callback => callback());
+    }
+    _clearTimeouts() {
+        clearTimeout(this._delay);
+        clearTimeout(this._timeout);
+    }
+    getCurrentValue() {
+        return this._state;
+    }
+    subscribe(callback) {
+        this._callbacks.add(callback);
+        return () => {
+            this._callbacks.delete(callback);
+        };
+    }
+}
+function Loadable(opts) {
+    return createLoadableComponent(load, opts);
+}
+function LoadableMap(opts) {
+    if (typeof opts.render !== 'function') {
+        throw new Error('LoadableMap requires a `render(loaded, props)` function');
+    }
+    return createLoadableComponent(loadMap, opts);
+}
+Loadable.Map = LoadableMap;
+function flushInitializers(initializers, ids) {
+    let promises = [];
+    while (initializers.length) {
+        let init = initializers.pop();
+        promises.push(init(ids));
+    }
+    return Promise.all(promises).then(() => {
+        if (initializers.length) {
+            return flushInitializers(initializers, ids);
+        }
+    });
+}
+Loadable.preloadAll = () => {
+    return new Promise((resolveInitializers, reject) => {
+        flushInitializers(ALL_INITIALIZERS).then(resolveInitializers, reject);
+    });
+};
+Loadable.preloadReady = (ids = []) => {
+    return new Promise(resolvePreload => {
+        const res = () => {
+            initialized = true;
+            return resolvePreload();
+        };
+        // We always will resolve, errors should be handled within loading UIs.
+        flushInitializers(READY_INITIALIZERS, ids).then(res, res);
+    });
+};
+export default Loadable;

package/esm/shuvi-app/react/redox-react/RedoxWrapper.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { IStoreManager } from '@shuvi/redox';
+export declare const RedoxWrapper: (App: any, appContext: {
+    storeManager: IStoreManager;
+}) => {
+    (appProps: any): JSX.Element;
+    displayName: string;
+};

package/esm/shuvi-app/react/redox-react/RedoxWrapper.jsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { RedoxRoot } from '@shuvi/redox-react';
+export const RedoxWrapper = (App, appContext) => {
+    function RedoxAppWrapper(appProps) {
+        return (<RedoxRoot storeManager={appContext.storeManager}>
+        <App {...appProps}/>
+      </RedoxRoot>);
+    }
+    RedoxAppWrapper.displayName = 'RedoxAppWrapper';
+    return RedoxAppWrapper;
+};

package/esm/shuvi-app/react/redox-react/runtime.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@shuvi/platform-shared/shared").IPluginInstance<import("@shuvi/platform-shared/shared").BuiltInRuntimePluginHooks & import("@shuvi/platform-shared/shared").CustomRuntimePluginHooks, void>;
+export default _default;

package/esm/shuvi-app/react/redox-react/runtime.js

@@ -0,0 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createRuntimePlugin } from '@shuvi/platform-shared/shared';
+import { RedoxWrapper } from './RedoxWrapper';
+export default createRuntimePlugin({
+    appComponent: (App, appContext) => __awaiter(void 0, void 0, void 0, function* () {
+        return RedoxWrapper(App, appContext);
+    })
+});

package/esm/shuvi-app/react/shuvi-runtime-api.d.ts

@@ -0,0 +1,5 @@
+export { default as Head } from './head/head';
+export { default as dynamic } from './dynamic';
+export { useLoaderData } from './useLoaderData';
+export { Link } from './Link';
+export { useParams, useRouter, useCurrentRoute, RouterView } from '@shuvi/router-react';

package/esm/shuvi-app/react/shuvi-runtime-api.js

@@ -0,0 +1,5 @@
+export { default as Head } from './head/head';
+export { default as dynamic } from './dynamic';
+export { useLoaderData } from './useLoaderData';
+export { Link } from './Link';
+export { useParams, useRouter, useCurrentRoute, RouterView } from '@shuvi/router-react';

package/esm/shuvi-app/react/types.d.ts

@@ -0,0 +1,14 @@
+import { IAppState } from '@shuvi/platform-shared/shared';
+import { IHtmlTag, IViewClient, IViewServer } from '../../shared';
+export { IHtmlTag };
+export declare type IReactAppData = {
+    appProps?: Record<string, any>;
+    errorProps?: {
+        notFound: boolean;
+    };
+    dynamicIds?: Array<string | number>;
+    appState?: IAppState;
+    loadersData: any;
+};
+export declare type IReactServerView = IViewServer<IReactAppData>;
+export declare type IReactClientView = IViewClient<IReactAppData>;

package/esm/shuvi-app/react/types.js

@@ -0,0 +1 @@
+export {};

package/esm/shuvi-app/react/useLoaderData.d.ts

@@ -0,0 +1,2 @@
+export declare const noLoaderMessage = "Warning: no loader found. Please make sure the page component where `useLoaderData` is called has a `loader` export.";
+export declare const useLoaderData: <T = any>() => T;

package/esm/shuvi-app/react/useLoaderData.js

@@ -0,0 +1,27 @@
+import { useMatchedRoute } from '@shuvi/router-react';
+import { getLoaderManager } from '@shuvi/platform-shared/shared';
+import { useRef, useEffect, useReducer } from 'react';
+export const noLoaderMessage = 'Warning: no loader found. Please make sure the page component where `useLoaderData` is called has a `loader` export.';
+export const useLoaderData = () => {
+    var _a;
+    const currentMatch = useMatchedRoute();
+    const loaderManager = getLoaderManager();
+    const id = (_a = currentMatch.route) === null || _a === void 0 ? void 0 : _a.id;
+    const data = loaderManager.getData(id);
+    if (data === null) {
+        throw Error(noLoaderMessage);
+    }
+    const dataRef = useRef(data);
+    const [_, forceUpdate] = useReducer(state => state * -1, 1);
+    useEffect(() => {
+        const cancel = loaderManager.subscribe(() => {
+            const newData = loaderManager.getData(id);
+            if (newData !== data) {
+                dataRef.current = newData;
+                forceUpdate();
+            }
+        });
+        return cancel;
+    }, []);
+    return dataRef.current;
+};

package/esm/shuvi-app/react/utils/getDisplayName.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function getDisplayName(WrappedComponent: React.ComponentType): string;

package/esm/shuvi-app/react/utils/getDisplayName.js

@@ -0,0 +1,3 @@
+export function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}

package/esm/shuvi-app/react/utils/requestIdleCallback.d.ts

@@ -0,0 +1,2 @@
+export declare const requestIdleCallback: ((callback: IdleRequestCallback, options?: IdleRequestOptions | undefined) => number) & typeof globalThis.requestIdleCallback;
+export declare const cancelIdleCallback: ((handle: number) => void) & typeof globalThis.cancelIdleCallback;

package/esm/shuvi-app/react/utils/requestIdleCallback.js

@@ -0,0 +1,20 @@
+export const requestIdleCallback = (typeof self !== 'undefined' &&
+    self.requestIdleCallback &&
+    self.requestIdleCallback.bind(window)) ||
+    function (cb) {
+        let start = Date.now();
+        return setTimeout(function () {
+            cb({
+                didTimeout: false,
+                timeRemaining: function () {
+                    return Math.max(0, 50 - (Date.now() - start));
+                }
+            });
+        }, 1);
+    };
+export const cancelIdleCallback = (typeof self !== 'undefined' &&
+    self.cancelIdleCallback &&
+    self.cancelIdleCallback.bind(window)) ||
+    function (id) {
+        return clearTimeout(id);
+    };

package/esm/shuvi-app/react/utils/useIntersection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type UseIntersection = {
+    rootRef?: React.RefObject<HTMLElement>;
+    rootMargin?: string;
+    disabled?: boolean;
+};
+export default function useIntersection<T extends Element>({ rootRef, rootMargin, disabled }: UseIntersection): [(element: T | null) => void, boolean, () => void];
+export {};