@lynx-js/react 0.106.4 → 0.107.0

package/testing-library/dist/pure.js.LICENSE.txt

@@ -0,0 +1,17 @@
+/** @license React v17.0.2
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/testing-library/dist/vitest-global-setup.js

@@ -0,0 +1,115 @@
+import * as __WEBPACK_EXTERNAL_MODULE_preact__ from "preact";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__ from "../../runtime/lib/snapshot.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_backgroundSnapshot_js_d70e0888__ from "../../runtime/lib/backgroundSnapshot.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_lynx_calledByNative_js_f689039d__ from "../../runtime/lib/lynx/calledByNative.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_updateMainThread_js_dca3a751__ from "../../runtime/lib/lifecycle/patch/updateMainThread.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_commit_js_9adc7328__ from "../../runtime/lib/lifecycle/patch/commit.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_lynx_tt_js_37d9bcb1__ from "../../runtime/lib/lynx/tt.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_root_js_27522aef__ from "../../runtime/lib/root.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_snapshotPatch_js_c1ebb33c__ from "../../runtime/lib/lifecycle/patch/snapshotPatch.js";
+import * as __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_api_lynxApi_js_c6dc2d67__ from "../../worklet-runtime/lib/api/lynxApi.js";
+import * as __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_listeners_js_9f7cd330__ from "../../worklet-runtime/lib/listeners.js";
+import * as __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_workletRuntime_js_e9debbe1__ from "../../worklet-runtime/lib/workletRuntime.js";
+import * as __WEBPACK_EXTERNAL_MODULE__runtime_lib_worklet_destroy_js_8a273fd1__ from "../../runtime/lib/worklet/destroy.js";
+const { onInjectMainThreadGlobals, onInjectBackgroundThreadGlobals, onResetLynxEnv, onSwitchedToMainThread, onSwitchedToBackgroundThread, onInitWorkletRuntime } = globalThis;
+(0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lynx_calledByNative_js_f689039d__.injectCalledByNative)();
+(0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_updateMainThread_js_dca3a751__.injectUpdateMainThread)();
+(0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_commit_js_9adc7328__.replaceCommitHook)();
+globalThis.onInitWorkletRuntime = ()=>{
+    if (onInitWorkletRuntime) onInitWorkletRuntime();
+    if (process.env.DEBUG) console.log('initWorkletRuntime');
+    lynx.setTimeout = setTimeout;
+    lynx.setInterval = setInterval;
+    lynx.clearTimeout = clearTimeout;
+    lynx.clearInterval = clearInterval;
+    (0, __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_workletRuntime_js_e9debbe1__.initWorklet)();
+    (0, __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_api_lynxApi_js_c6dc2d67__.initApiEnv)();
+    (0, __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_listeners_js_9f7cd330__.initEventListeners)();
+    return true;
+};
+globalThis.onInjectMainThreadGlobals = (target)=>{
+    if (onInjectMainThreadGlobals) onInjectMainThreadGlobals();
+    if (process.env.DEBUG) console.log('onInjectMainThreadGlobals');
+    __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.snapshotInstanceManager.clear();
+    __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.snapshotInstanceManager.nextId = 0;
+    target.__root = new __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.SnapshotInstance('root');
+    function setupDocument(document) {
+        document.createElement = function(type) {
+            return new __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.SnapshotInstance(type);
+        };
+        document.createElementNS = function(_ns, type) {
+            return new __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.SnapshotInstance(type);
+        };
+        document.createTextNode = function(text) {
+            const i = new __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.SnapshotInstance(null);
+            i.setAttribute(0, text);
+            Object.defineProperty(i, 'data', {
+                set (v) {
+                    i.setAttribute(0, v);
+                }
+            });
+            return i;
+        };
+        return document;
+    }
+    target._document = setupDocument({});
+    target.globalPipelineOptions = void 0;
+};
+globalThis.onInjectBackgroundThreadGlobals = (target)=>{
+    if (onInjectBackgroundThreadGlobals) onInjectBackgroundThreadGlobals();
+    if (process.env.DEBUG) console.log('onInjectBackgroundThreadGlobals');
+    __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.backgroundSnapshotInstanceManager.clear();
+    __WEBPACK_EXTERNAL_MODULE__runtime_lib_snapshot_js_675dfde4__.backgroundSnapshotInstanceManager.nextId = 0;
+    target.__root = new __WEBPACK_EXTERNAL_MODULE__runtime_lib_backgroundSnapshot_js_d70e0888__.BackgroundSnapshotInstance('root');
+    function setupBackgroundDocument(document) {
+        document.createElement = function(type) {
+            return new __WEBPACK_EXTERNAL_MODULE__runtime_lib_backgroundSnapshot_js_d70e0888__.BackgroundSnapshotInstance(type);
+        };
+        document.createElementNS = function(_ns, type) {
+            return new __WEBPACK_EXTERNAL_MODULE__runtime_lib_backgroundSnapshot_js_d70e0888__.BackgroundSnapshotInstance(type);
+        };
+        document.createTextNode = function(text) {
+            const i = new __WEBPACK_EXTERNAL_MODULE__runtime_lib_backgroundSnapshot_js_d70e0888__.BackgroundSnapshotInstance(null);
+            i.setAttribute(0, text);
+            Object.defineProperty(i, 'data', {
+                set (v) {
+                    i.setAttribute(0, v);
+                }
+            });
+            return i;
+        };
+        return document;
+    }
+    target._document = setupBackgroundDocument({});
+    target.globalPipelineOptions = void 0;
+    const oldLynxCoreInject = globalThis.lynxCoreInject;
+    globalThis.lynxCoreInject = target.lynxCoreInject;
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lynx_tt_js_37d9bcb1__.injectTt)();
+    globalThis.lynxCoreInject = oldLynxCoreInject;
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_snapshotPatch_js_c1ebb33c__.deinitGlobalSnapshotPatch)();
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_commit_js_9adc7328__.clearPatchesToCommit)();
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lifecycle_patch_commit_js_9adc7328__.clearCommitTaskId)();
+};
+globalThis.onResetLynxEnv = ()=>{
+    if (onResetLynxEnv) onResetLynxEnv();
+    if (process.env.DEBUG) console.log('onResetLynxEnv');
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_lynx_tt_js_37d9bcb1__.flushDelayedLifecycleEvents)();
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_worklet_destroy_js_8a273fd1__.destroyWorklet)();
+    lynxEnv.switchToMainThread();
+    (0, __WEBPACK_EXTERNAL_MODULE__worklet_runtime_lib_listeners_js_9f7cd330__.initEventListeners)();
+    lynxEnv.switchToBackgroundThread();
+};
+globalThis.onSwitchedToMainThread = ()=>{
+    if (onSwitchedToMainThread) onSwitchedToMainThread();
+    if (process.env.DEBUG) console.log('onSwitchedToMainThread');
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_root_js_27522aef__.setRoot)(globalThis.__root);
+    __WEBPACK_EXTERNAL_MODULE_preact__.options.document = globalThis._document;
+};
+globalThis.onSwitchedToBackgroundThread = ()=>{
+    if (onSwitchedToBackgroundThread) onSwitchedToBackgroundThread();
+    if (process.env.DEBUG) console.log('onSwitchedToBackgroundThread');
+    (0, __WEBPACK_EXTERNAL_MODULE__runtime_lib_root_js_27522aef__.setRoot)(globalThis.__root);
+    __WEBPACK_EXTERNAL_MODULE_preact__.options.document = globalThis._document;
+};
+globalThis.onInjectMainThreadGlobals(globalThis.lynxEnv.mainThread.globalThis);
+globalThis.onInjectBackgroundThreadGlobals(globalThis.lynxEnv.backgroundThread.globalThis);

package/testing-library/dist/vitest.config.js

@@ -0,0 +1,90 @@
+import * as __WEBPACK_EXTERNAL_MODULE_vitest_config_02c5e5a4__ from "vitest/config";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest_node_ace4f808__ from "vitest/node";
+import * as __WEBPACK_EXTERNAL_MODULE_path__ from "path";
+import * as __WEBPACK_EXTERNAL_MODULE_url__ from "url";
+import * as __WEBPACK_EXTERNAL_MODULE_module__ from "module";
+const vitest_config_filename = (0, __WEBPACK_EXTERNAL_MODULE_url__.fileURLToPath)(import.meta.url);
+const vitest_config_dirname = __WEBPACK_EXTERNAL_MODULE_path__["default"].dirname(vitest_config_filename);
+const vitest_config_require = (0, __WEBPACK_EXTERNAL_MODULE_module__.createRequire)(import.meta.url);
+async function ensurePackagesInstalled() {
+    const installer = new __WEBPACK_EXTERNAL_MODULE_vitest_node_ace4f808__.VitestPackageInstaller();
+    const installed = await installer.ensureInstalled('jsdom', process.cwd());
+    if (!installed) {
+        console.log('ReactLynx Testing Library requires jsdom to be installed.');
+        process.exit(1);
+    }
+}
+const createVitestConfig = async (options)=>{
+    await ensurePackagesInstalled();
+    const runtimePkgName = options?.runtimePkgName ?? '@lynx-js/react';
+    function transformReactLynxPlugin() {
+        return {
+            name: 'transformReactLynxPlugin',
+            enforce: 'pre',
+            transform (sourceText, sourcePath) {
+                const id = sourcePath;
+                if (id.endsWith('.css') || id.endsWith('.less') || id.endsWith('.scss')) {
+                    if (process.env['DEBUG']) console.log('ignoring css file', id);
+                    return '';
+                }
+                const { transformReactLynxSync } = vitest_config_require('@lynx-js/react/transform');
+                const relativePath = __WEBPACK_EXTERNAL_MODULE_path__["default"].relative(vitest_config_dirname, sourcePath);
+                const basename = __WEBPACK_EXTERNAL_MODULE_path__["default"].basename(sourcePath);
+                const result = transformReactLynxSync(sourceText, {
+                    mode: 'test',
+                    pluginName: '',
+                    filename: basename,
+                    sourcemap: true,
+                    snapshot: {
+                        preserveJsx: false,
+                        runtimePkg: `${runtimePkgName}/internal`,
+                        jsxImportSource: runtimePkgName,
+                        filename: relativePath,
+                        target: 'MIXED'
+                    },
+                    directiveDCE: false,
+                    defineDCE: false,
+                    shake: false,
+                    compat: false,
+                    worklet: {
+                        filename: relativePath,
+                        runtimePkg: `${runtimePkgName}/internal`,
+                        target: 'MIXED'
+                    },
+                    refresh: false,
+                    cssScope: false
+                });
+                if (result.errors.length > 0) result.errors.forEach((error)=>{
+                    this.error(error.text, error.location);
+                });
+                if (result.warnings.length > 0) result.warnings.forEach((warning)=>{
+                    this.warn(warning.text, warning.location);
+                });
+                return {
+                    code: result.code,
+                    map: result.map
+                };
+            }
+        };
+    }
+    return (0, __WEBPACK_EXTERNAL_MODULE_vitest_config_02c5e5a4__.defineConfig)({
+        server: {
+            fs: {
+                allow: [
+                    __WEBPACK_EXTERNAL_MODULE_path__["default"].join(vitest_config_dirname, '..')
+                ]
+            }
+        },
+        plugins: [
+            transformReactLynxPlugin()
+        ],
+        test: {
+            environment: vitest_config_require.resolve('./env/vitest'),
+            globals: true,
+            setupFiles: [
+                __WEBPACK_EXTERNAL_MODULE_path__["default"].join(vitest_config_dirname, 'vitest-global-setup')
+            ]
+        }
+    });
+};
+export { createVitestConfig };

package/testing-library/types/entry.d.ts

@@ -0,0 +1,257 @@
+/**
+ * @packageDocumentation
+ *
+ * ReactLynx Testing Library is a simple and complete ReactLynx
+ * unit testing library that encourages good testing practices.
+ *
+ * Inspired by {@link https://testing-library.com/docs/react-testing-library/intro | React Testing Library} and {@link https://github.com/jsdom/jsdom | jsdom}.
+ */
+
+import { queries, Queries, BoundFunction } from '@testing-library/dom';
+import { LynxElement, type ElementTree, type LynxEnv } from '@lynx-js/test-environment';
+import { ComponentChild, ComponentType } from 'preact';
+export * from '@testing-library/dom';
+export { ElementTree, LynxEnv };
+
+/**
+ * The options for {@link render}.
+ *
+ * @public
+ */
+export interface RenderOptions<Q extends Queries = typeof queries> {
+  /**
+   * Queries to bind. Overrides the default set from DOM Testing Library unless merged.
+   *
+   * @example
+   *
+   * ```ts
+   * // Example, a function to traverse table contents
+   * import * as tableQueries from 'my-table-query-library'
+   * import { queries } from '@lynx-js/react/testing-library'
+   *
+   * const { getByRowColumn, getByText } = render(<MyTable />, {
+   *   queries: {...queries, ...tableQueries},
+   * })
+   *
+   * ```
+   */
+  queries?: Q;
+  /**
+   * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
+   *  reusable custom render functions for common data providers. See setup for examples.
+   *
+   * @example
+   *
+   * ```ts
+   * import { render } from '@lynx-js/react/testing-library'
+   * import { ThemeProvider } from 'my-ui-lib'
+   * import { TranslationProvider } from 'my-i18n-lib'
+   * import defaultStrings from 'i18n/en-x-default'
+   *
+   * const AllTheProviders = ({children}) => {
+   *   return (
+   *     <ThemeProvider theme="light">
+   *       <TranslationProvider messages={defaultStrings}>
+   *         {children}
+   *       </TranslationProvider>
+   *     </ThemeProvider>
+   *   )
+   * }
+   *
+   * const customRender = (ui, options) =>
+   *   render(ui, { wrapper: AllTheProviders, ...options })
+   *
+   * // re-export everything
+   * export * from '@lynx-js/react/testing-library'
+   *
+   * // override render method
+   * export { customRender as render }
+   * ```
+   */
+  wrapper?: ComponentChild;
+  /**
+   * Render your component in the main thread or not.
+   *
+   * It is recommended to use this option only when you need to test the {@link https://lynxjs.org/zh/guide/interaction/ifr.html | IFR} behavior.
+   *
+   * @defaultValue false
+   */
+  enableMainThread?: boolean;
+  /**
+   * Render your component in the background thread or not.
+   *
+   * Note that all user code in the top level will be executed in the background thread by default. (eg. `__BACKGROUND__` is `true` in the top level)
+   *
+   * @defaultValue true
+   */
+  enableBackgroundThread?: boolean;
+}
+
+/**
+ * The result of {@link render}
+ *
+ * @public
+ */
+export type RenderResult<Q extends Queries = typeof queries> = {
+  container: LynxElement;
+  rerender: (ui: ComponentChild) => void;
+  unmount: () => boolean;
+} & { [P in keyof Q]: BoundFunction<Q[P]> };
+
+/**
+ * Render into the page. It should be used with cleanup.
+ *
+ * @example
+ *
+ * ```ts
+ * import { render} from '@lynx-js/react/testing-library'
+ *
+ * const WrapperComponent = ({ children }) => (
+ *     <view data-testid='wrapper'>{children}</view>
+ * );
+ * const Comp = () => {
+ *   return <view data-testid='inner' style="background-color: yellow;" />;
+ * };
+ * const { container, getByTestId } = render(<Comp />, {
+ *   wrapper: WrapperComponent,
+ * });
+ * expect(getByTestId('wrapper')).toBeInTheDocument();
+ * expect(container.firstChild).toMatchInlineSnapshot(`
+ *   <view
+ *     data-testid="wrapper"
+ *   >
+ *     <view
+ *       data-testid="inner"
+ *       style="background-color: yellow;"
+ *     />
+ *   </view>
+ * `);
+ * ```
+ *
+ * @public
+ */
+export function render<Q extends Queries>(
+  ui: ComponentChild,
+  options?: RenderOptions<Q>,
+): RenderResult<Q>;
+/**
+ * Cleanup elements rendered to the page and Preact trees that were mounted with render.
+ *
+ * @public
+ */
+export function cleanup(): void;
+
+/**
+ * The result of {@link renderHook}
+ *
+ * @public
+ */
+
+export interface RenderHookResult<Result, Props> {
+  /**
+   * Triggers a re-render. The props will be passed to your renderHook callback.
+   */
+  rerender: (props?: Props) => void;
+  /**
+   * This is a stable reference to the latest value returned by your renderHook
+   * callback
+   */
+  result: {
+    /**
+     * The value returned by your renderHook callback
+     */
+    current: Result;
+  };
+  /**
+   * Unmounts the test component. This is useful for when you need to test
+   * any cleanup your useEffects have.
+   */
+  unmount: () => void;
+}
+
+/**
+ * The options for {@link renderHook}
+ *
+ * @public
+ */
+export interface RenderHookOptions<Props> {
+  /**
+   * The argument passed to the renderHook callback. Can be useful if you plan
+   * to use the rerender utility to change the values passed to your hook.
+   */
+  initialProps?: Props;
+  /**
+   * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
+   *  reusable custom render functions for common data providers. See setup for examples.
+   *
+   * @example
+   *
+   * ```ts
+   * import { renderHook } from '@lynx-js/react/testing-library'
+   * import { ThemeProvider } from 'my-ui-lib'
+   * import { TranslationProvider } from 'my-i18n-lib'
+   * import defaultStrings from 'i18n/en-x-default'
+   *
+   * const AllTheProviders = ({children}) => {
+   *   return (
+   *     <ThemeProvider theme="light">
+   *       <TranslationProvider messages={defaultStrings}>
+   *         {children}
+   *       </TranslationProvider>
+   *     </ThemeProvider>
+   *   )
+   * }
+   *
+   * const customRenderHook = (ui, options) =>
+   *   renderHook(ui, { wrapper: AllTheProviders, ...options })
+   *
+   * // re-export everything
+   * export * from '@lynx-js/react/testing-library'
+   *
+   * // override renderHook method
+   * export { customRender as renderHook }
+   * ```
+   */
+  wrapper?: ComponentType<{ children: LynxElement }>;
+}
+
+/**
+ * Allows you to render a hook within a test React component without having to
+ * create that component yourself.
+ *
+ * @example
+ *
+ * ```ts
+ * import { renderHook } from '@lynx-js/react/testing-library'
+ *
+ * const Context = createContext('default');
+ * function Wrapper({ children }) {
+ *   return <Context.Provider value='provided'>{children}</Context.Provider>;
+ * }
+ * const { result } = renderHook(
+ *   () => {
+ *     return useContext(Context);
+ *   },
+ *   {
+ *     wrapper: Wrapper,
+ *   },
+ * );
+ *
+ * expect(result.current).toEqual('provided');
+ * ```
+ *
+ * @public
+ */
+export function renderHook<Result, Props>(
+  render: (initialProps: Props) => Result,
+  options?: RenderHookOptions<Props>,
+): RenderHookResult<Result, Props>;
+
+/**
+ * Wait for the next event loop.
+ *
+ * It will be useful when you want to wait for the next event loop to finish.
+ *
+ * @public
+ */
+export function waitSchedule(): Promise<void>;

package/testing-library/types/index.d.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+export * from '../dist/index.d.ts';
+import { ElementTree, LynxEnv } from '../dist/index.d.ts';
+
+declare global {
+  var lynxEnv: LynxEnv;
+  var elementTree: ElementTree;
+
+  function onInjectBackgroundThreadGlobals(globals: any): void;
+  function onInjectMainThreadGlobals(globals: any): void;
+  function onSwitchedToBackgroundThread(): void;
+  function onSwitchedToMainThread(): void;
+  function onResetLynxEnv(): void;
+  function onInitWorkletRuntime(): void;
+}

package/testing-library/types/pure.d.ts

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export * from './index.d.ts';

package/testing-library/types/vitest-config.d.ts

@@ -0,0 +1,12 @@
+import type { ViteUserConfig } from 'vitest/config.js';
+
+export interface CreateVitestConfigOptions {
+  /**
+   * The package name of the ReactLynx runtime package.
+   *
+   * @default `@lynx-js/react`
+   */
+  runtimePkgName?: string;
+}
+
+export function createVitestConfig(options?: CreateVitestConfigOptions): Promise<ViteUserConfig>;