+ * Inula写法：
+ *
+ *
+ *
+ * @param props 组件属性
+ */
+
+interface DirectiveBinding {
+ value?: any;
+ oldValue?: any;
+ arg?: string;
+ modifiers?: Record;
+}
+
+export interface Directive {
+ bind?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ inserted?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ update?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ componentUpdated?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ unbind?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ beforeMount?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ mounted?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ updated?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ beforeUnmount?: (el: HTMLElement, binding: DirectiveBinding) => void;
+ unmounted?: (el: HTMLElement, binding: DirectiveBinding) => void;
+}
+
+interface DirectiveComponentProps {
+ children?: any;
+ componentName: string | ComponentType;
+ directives: {
+ name: string;
+ value?: any;
+ oldValue?: any;
+ arg?: string;
+ modifiers?: Record;
+ }[];
+ registerDirectives?: Record;
+
+ [key: string]: any;
+}
+
+export function DirectiveComponent(props: DirectiveComponentProps) {
+ const { children, componentName, directives, registerDirectives, ...rest } = props;
+ const appDirectives = useDirectives();
+ const instance = useInstance();
+
+ useLayoutEffect(() => {
+ applyDirectives('beforeMount', directives);
+ applyDirectives('mounted', directives);
+ applyDirectives('bind', directives);
+ return () => {
+ applyDirectives('beforeUnmount', directives);
+ applyDirectives('unmounted', directives);
+ applyDirectives('unbind', directives);
+ };
+ }, []);
+
+ useEffect(() => {
+ applyDirectives('updated', directives);
+ applyDirectives('update', directives);
+ applyDirectives('componentUpdated', directives);
+ });
+
+ const prevDirectiveValues: Record = useMemo(() => ({}), []);
+ const applyDirectives = useCallback((hook: keyof Directive, directives) => {
+ directives.forEach(directive => {
+ const { name, value, arg, modifiers } = directive;
+ const oldValue = prevDirectiveValues[name];
+ prevDirectiveValues[name] = value;
+
+ let directiveObj: Directive = {};
+ if (registerDirectives && registerDirectives[name]) {
+ directiveObj = registerDirectives[name];
+ } else {
+ directiveObj = appDirectives[name];
+ }
+
+ if (directiveObj && directiveObj[hook]) {
+ directiveObj[hook]!(instance['$el']!, { value, oldValue, arg, modifiers });
+ }
+ });
+ }, []);
+
+ return createElement(
+ componentName,
+ {
+ ...rest,
+ },
+ children
+ );
+}
+
+DirectiveComponent.__internal_comp_tag = 'DirectiveComponent';
diff --git a/packages/inula-adapter/src/vue/dynamicComponent.tsx b/packages/inula-adapter/src/vue/dynamicComponent.tsx
new file mode 100644
index 000000000..14b803adc
--- /dev/null
+++ b/packages/inula-adapter/src/vue/dynamicComponent.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+import Inula, { ComponentType, InulaElement } from 'openinula';
+import { getCurrentInstance } from './globalAPI';
+
+// 定义组件映射类型
+interface ComponentsMap {
+ [key: string]: ComponentType;
+}
+
+// DynamicComponent 的 props 类型
+interface DynamicComponentProps {
+ is: string | ComponentType;
+ components?: ComponentsMap;
+
+ [key: string]: any; // 允许任意其他属性
+}
+
+/**
+ * 对标Vue的动态组件，如：;
+ directives: Record;
+ provides: Record;
+}
+
+export interface AppConfig {
+ globalProperties: Record;
+}
+
+export function createAppContext(): AppContext {
+ return {
+ app: null as any,
+ config: {
+ globalProperties: {},
+ },
+ components: {},
+ directives: {},
+ provides: Object.create(null),
+ };
+}
+
+export interface App {
+ _container: HostElement | null;
+ _context: AppContext;
+
+ rootComponent: any;
+ version: string;
+ config: AppConfig;
+
+ use(plugin: Plugin, ...options: Options): this;
+
+ use(plugin: Plugin, options: Options): this;
+
+ mixin(mixin: any): this;
+
+ component(name: string, component: any): this;
+
+ directive(name: string, directive: any): this;
+
+ mount(rootContainer: HostElement | string): any;
+
+ unmount(): void;
+
+ provide(key: string, value: T): this;
+
+ runWithContext(fn: () => T): T;
+}
+
+type PluginInstallFunction = Options extends unknown[]
+ ? (app: App, ...options: Options) => any
+ : (app: App, options: Options) => any;
+
+export type ObjectPlugin = {
+ install: PluginInstallFunction;
+};
+export type FunctionPlugin = PluginInstallFunction & Partial>;
+
+export type Plugin = FunctionPlugin | ObjectPlugin;
+
+function AppWrapper(props) {
+ const AppContext = props.appContext;
+
+ return {props.root} ;
+}
+
+const DEFAULT_APP_KEY = 'DEFAULT_APP_KEY';
+const appMap = new Map();
+const AppContext = createContext(null);
+
+export function createApp(rootComponent, id: string = DEFAULT_APP_KEY) {
+ const context = createAppContext();
+ const installedPlugins = new WeakSet();
+ let isMounted = false;
+
+ if (typeof rootComponent === 'function') {
+ rootComponent = Inula.createElement(rootComponent, {});
+ }
+
+ const app: App = (context.app = {
+ _container: null,
+ _context: context,
+
+ rootComponent,
+ version: '1.0.0',
+
+ get config() {
+ return context.config;
+ },
+
+ set config(v) {},
+
+ use(plugin: Plugin, ...options: any[]) {
+ if (installedPlugins.has(plugin)) {
+ // 已经安装过了
+ } else if (plugin && typeof plugin.install === 'function') {
+ installedPlugins.add(plugin);
+ plugin.install(app, ...options);
+ } else if (typeof plugin === 'function') {
+ installedPlugins.add(plugin);
+ plugin(app, ...options);
+ }
+
+ return app;
+ },
+
+ mixin(mixin) {
+ // 不支持
+ console.log('Inula中暂时不支持mixin，请用Hook方式进行改造代码。');
+ return app;
+ },
+
+ component(name, component) {
+ const ccName = kebabToCamelCase(name);
+ if (!component) {
+ return context.components[ccName];
+ }
+
+ context.components[ccName] = component;
+ return app;
+ },
+
+ directive(name, directive) {
+ if (!directive) {
+ return context.directives[name];
+ }
+
+ context.directives[name] = directive;
+ return app;
+ },
+
+ mount(rootContainer) {
+ if (!isMounted) {
+ if (typeof rootContainer === 'string') {
+ rootContainer = document.querySelector(rootContainer);
+ }
+
+ Inula.render(;
+export function useGlobalProperties(name: string): any;
+export function useGlobalProperties(name?: string): any {
+ const app = useContext(AppContext);
+
+ if (name) {
+ return app!.config.globalProperties[name];
+ } else {
+ return app!.config.globalProperties;
+ }
+}
+
+export function useProvide(name: string) {
+ const app = useContext(AppContext);
+ return app!._context.provides[name];
+}
+
+export function registerComponent(name: string, component: any) {
+ const app = appMap.get(DEFAULT_APP_KEY);
+ app!.component(name, component);
+}
+
+function kebabToCamelCase(str: string) {
+ return str
+ .split('-')
+ .map(sub => {
+ return sub.charAt(0).toUpperCase() + sub.substr(1);
+ })
+ .join('');
+}
+
+export function GlobalComponent({ componentName, ...otherProps }) {
+ const app = useContext(AppContext);
+ componentName = kebabToCamelCase(componentName);
+ const Comp = app!._context.components[componentName];
+
+ if (!Comp) {
+ throw new Error(`Component ${componentName} not found, please register it first.`);
+ }
+
+ return ) {
+ const LazyComponent = lazy(loader);
+
+ return props => (
+
+
+ );
+}
+
+export function emit>(props: T, eventName: keyof T, ...args: Parameters): void {
+ let fn = props[eventName];
+
+ if (typeof fn !== 'function' && typeof eventName === 'string' && !eventName.startsWith('on')) {
+ const capitalizedEventName = eventName.charAt(0).toUpperCase() + eventName.slice(1);
+ const onEventName = `on${capitalizedEventName}` as keyof T;
+ fn = props[onEventName];
+ }
+
+ if (typeof fn === 'function') {
+ fn(...args);
+ } else {
+ console.warn(`Attempted to emit event '${String(eventName)}' but no handler was defined.`);
+ }
+}
+
+export function getCurrentInstance(): any {
+ const instance = useInstance();
+ const app = useContext(AppContext);
+
+ return {
+ vnode: {
+ get el() {
+ return instance['$el'];
+ },
+ },
+ proxy: instance,
+ appContext: {
+ app,
+ },
+ };
+}
+
+export function useWindowSize(options = {}) {
+ const {
+ initialWidth = Number.POSITIVE_INFINITY,
+ initialHeight = Number.POSITIVE_INFINITY,
+ listenOrientation = true,
+ includeScrollbar = true,
+ } = options;
+
+ const width = vueReactive.useReference(initialWidth);
+ const height = vueReactive.useReference(initialHeight);
+
+ function update() {
+ if (window) {
+ if (includeScrollbar) {
+ width.value = window.innerWidth;
+ height.value = window.innerHeight;
+ } else {
+ width.value = window.document.documentElement.clientWidth;
+ height.value = window.document.documentElement.clientHeight;
+ }
+ }
+ }
+
+ update();
+
+ Inula.useEffect(() => {
+ window.addEventListener('resize', update);
+ if (listenOrientation) window.addEventListener('orientationchange', update);
+
+ return () => {
+ window.removeEventListener('resize', update);
+ if (listenOrientation) window.removeEventListener('orientationchange', update);
+ };
+ });
+
+ return { width: width.value, height: height.value };
+}
+
+export function createVNode(component, props) {
+ return Inula.createElement(component, props, props.children);
+}
+
+export function render(vnode, target) {
+ Inula.render(vnode, target);
+}
diff --git a/packages/inula-adapter/src/vue/helper.tsx b/packages/inula-adapter/src/vue/helper.tsx
new file mode 100644
index 000000000..52b336144
--- /dev/null
+++ b/packages/inula-adapter/src/vue/helper.tsx
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+/**
+ * 将函数和属性设置到指定实例上
+ * @param {Object} instance - 目标实例对象
+ * @param {Array|Object} items - 要设置的函数或 [key, value] 键值对数组，或者包含方法的对象
+ * @returns {Object} 返回修改后的实例（支持链式调用）
+ */
+export function setToInstance(instance, items) {
+ // 如果是对象类型，直接遍历对象的键值对
+ if (items && typeof items === 'object' && !Array.isArray(items)) {
+ Object.entries(items).forEach(([key, value]) => {
+ if (key) {
+ instance[key] = value;
+ } else {
+ console.warn('跳过没有键名的项:', value);
+ }
+ });
+ return instance;
+ }
+
+ // 处理数组类型的输入
+ if (Array.isArray(items)) {
+ items.forEach(item => {
+ // 处理数组类型的 [key, value] 键值对
+ if (Array.isArray(item)) {
+ const [key, value] = item;
+ if (key) {
+ instance[key] = value;
+ } else {
+ console.warn('跳过没有键名的数组项:', item);
+ }
+ return;
+ }
+
+ // 处理函数类型
+ if (typeof item === 'function') {
+ const methodName = item.name;
+ if (methodName) {
+ instance[methodName] = item;
+ } else {
+ console.warn('跳过未命名的函数');
+ }
+ return;
+ }
+
+ // 处理无效的输入类型
+ console.warn('跳过无效的项:', item);
+ });
+ } else {
+ console.warn('无效的 items 类型:', items);
+ }
+
+ // 返回实例以支持链式调用
+ return instance;
+}
+
+export function styles(...args) {
+ // 主处理逻辑：处理所有参数并合并结果
+ return args.reduce((acc, arg) => ({ ...acc, ...processArg(arg) }), {});
+}
+
+// 辅助函数：将破折号式命名转换为驼峰式命名
+const toCamelCase = str => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+
+// 辅助函数：处理单个样式字符串
+const processStyleString = styleString => {
+ const result = {};
+ styleString.split(';').forEach(item => {
+ const [key, value] = item.split(':').map(part => part.trim());
+ if (key && value) {
+ result[toCamelCase(key)] = value;
+ }
+ });
+ return result;
+};
+
+// 辅助函数：处理样式对象
+const processStyleObject = styleObject => {
+ const result = {};
+ for (let key in styleObject) {
+ const camelKey = toCamelCase(key);
+ let value = styleObject[key];
+ // 处理数字值
+ if (typeof value === 'number' && !isNaN(value)) {
+ // 某些属性不需要单位，如 zIndex, opacity 等
+ if (!['zIndex', 'opacity', 'fontWeight'].includes(camelKey)) {
+ value = `${value}px`;
+ }
+ }
+ result[camelKey] = value;
+ }
+ return result;
+};
+
+// 处理单个参数
+const processArg = arg => {
+ if (typeof arg === 'string') {
+ return processStyleString(arg);
+ } else if (Array.isArray(arg)) {
+ return arg.reduce((acc, item) => ({ ...acc, ...processArg(item) }), {});
+ } else if (typeof arg === 'object' && arg !== null) {
+ return processStyleObject(arg);
+ } else {
+ return {}; // 处理无效输入
+ }
+};
diff --git a/packages/inula-adapter/src/vue/index.ts b/packages/inula-adapter/src/vue/index.ts
new file mode 100644
index 000000000..a0ce7c4e1
--- /dev/null
+++ b/packages/inula-adapter/src/vue/index.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export * from './lifecycle';
+export * from './globalAPI';
+export * from './directive';
+export * from './condition';
+export * from './dynamicComponent';
+export * from './sfcAPI';
+export * from './props';
+export * from './helper';
+export * from './semiControlledComponent';
+export * from './injectProvide';
+export * from './keepAlivePro';
+export * from './keepAlive/index';
+export * from './Teleport';
diff --git a/packages/inula-adapter/src/vue/injectProvide.tsx b/packages/inula-adapter/src/vue/injectProvide.tsx
new file mode 100644
index 000000000..9ebffe63e
--- /dev/null
+++ b/packages/inula-adapter/src/vue/injectProvide.tsx
@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'openinula';
+
+// Allows holding multiple variables and accessing them implicitly
+const contextMap = new Map();
+
+// Stores context variable for current branch
+export function provide(name, value) {
+ // If variable already exists, it stores its local value
+ if (contextMap.has(name)) {
+ const ctx = contextMap.get(name);
+ ctx.value = value;
+ // If variable does not exist yet, it creates new context in map
+ } else {
+ contextMap.set(name, createContext(value));
+ }
+}
+
+export function inject(name, defaultValue?) {
+ // If variable exists, local value is returned
+ if (contextMap.has(name)) {
+ const ctx = contextMap.get(name);
+ return ctx.value;
+ }
+ // If there is no fallback value, error is thrown
+ if (!defaultValue) {
+ throw Error('Injected value is not provided. Make sure to provide it before use or add default value');
+ }
+ return defaultValue;
+}
diff --git a/packages/inula-adapter/src/vue/keepAlive/context.ts b/packages/inula-adapter/src/vue/keepAlive/context.ts
new file mode 100644
index 000000000..92e562b53
--- /dev/null
+++ b/packages/inula-adapter/src/vue/keepAlive/context.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'openinula';
+import { LifeCycleListener } from './lifeCycleHooks';
+export const NodeKeeperLifeCycleContext = createContext(null);
diff --git a/packages/inula-adapter/src/vue/keepAlive/index.ts b/packages/inula-adapter/src/vue/keepAlive/index.ts
new file mode 100644
index 000000000..e1a4c15b0
--- /dev/null
+++ b/packages/inula-adapter/src/vue/keepAlive/index.ts
@@ -0,0 +1,4 @@
+import KeepAlive from './keepAlive';
+import { useActivatePro, useUnActivatePro } from './lifeCycleHooks';
+
+export { KeepAlive, useActivatePro, useUnActivatePro };
diff --git a/packages/inula-adapter/src/vue/keepAlive/keepAlive.tsx b/packages/inula-adapter/src/vue/keepAlive/keepAlive.tsx
new file mode 100644
index 000000000..da90fc421
--- /dev/null
+++ b/packages/inula-adapter/src/vue/keepAlive/keepAlive.tsx
@@ -0,0 +1,112 @@
+import React, { useRef, useEffect, useState, useMemo } from 'openinula';
+import Keeper from './keeper';
+
+type StringRegexList = string | RegExp | (string | RegExp)[];
+interface KeepAliveProps {
+ include?: StringRegexList;
+ max?: number;
+ exclude?: StringRegexList;
+ children?: any;
+}
+
+// 更新缓存的children节点key数组
+// 当缓存的实例超过max时，移除最久没有使用的组件缓存, 并把最新的key插到尾部
+function updateCachedChildrenKeys(allKeys: string[], lastestKey: string, max: number) {
+ const index = allKeys.indexOf(lastestKey);
+ let needDeletedKey: string = '';
+ if (index >= 0) {
+ // 如果已经缓存过了，则刷新位置
+ allKeys.splice(index, 1);
+ } else if (allKeys.length >= max) {
+ // 如果没有缓存过，且已经达到最大缓存数量，则先把老的删了
+ needDeletedKey = allKeys.shift() as string;
+ }
+ allKeys.push(lastestKey);
+ return needDeletedKey;
+}
+
+function isKeyMatched(key: string, limit: StringRegexList) {
+ if (Array.isArray(limit)) {
+ return limit.find(limitItem => isKeyMatched(key, limitItem));
+ }
+ if (typeof limit === 'string') {
+ return limit.split(',').includes(key);
+ }
+ // instanceof 检查的是对象在当前执行环境下的原型链上是否存在该构造函数。
+ // 如果在不同的执行环境（例如不同的 iframe 或 window）中创建了正则表达式对象，instanceof 可能不会返回 true
+ if (Object.prototype.toString.call(limit) === '[object RegExp]') {
+ return limit.test(key);
+ }
+ return false;
+}
+
+// 获取组件的key
+function getComponentKey(children) {
+ const { ref, is } = children.props;
+
+ if (ref) return ref;
+
+ // 处理is属性
+ if (is) {
+ // 如果is是函数,获取函数名
+ if (typeof is === 'function') {
+ return is.name || is.displayName;
+ }
+ return is;
+ }
+
+ // fallback到组件名
+ return children?.type?.name;
+}
+
+export default function KeepAlive({ children, exclude, include, max = Number.MAX_SAFE_INTEGER }: KeepAliveProps) {
+ const childrenMap = useRef(new Map()); // 缓存所有的组件节点
+ const cachedChildrenKeys = useRef([]); // 已经缓存的所有children节点的key的数组，按照激活事件由老到新排序。主要用于处理max场景下，有些移除最久没用的组件缓存
+ const [currentChildrenKey, updateCurrentChildrenKey] = useState(null);
+
+ const needCache = useMemo(() => {
+ const key = getComponentKey(children);
+ const isInInclude = !include || isKeyMatched(key, include);
+ const isNotInExclude = !exclude || !isKeyMatched(key, exclude);
+ return isInInclude && isNotInExclude && max !== 0;
+ }, [children, include, exclude, max]);
+
+ useEffect(() => {
+ if (!children) {
+ updateCurrentChildrenKey(null);
+ return;
+ }
+
+ const key = getComponentKey(children);
+
+ if (needCache) {
+ if (key === currentChildrenKey) {
+ return;
+ }
+
+ childrenMap.current.set(key, {
+ key,
+ children: children,
+ });
+
+ const needDeletedKey = updateCachedChildrenKeys(cachedChildrenKeys.current, key, max);
+ if (needDeletedKey) {
+ childrenMap.current.delete(needDeletedKey);
+ }
+ } else {
+ childrenMap.current.delete(key);
+ }
+
+ updateCurrentChildrenKey(key);
+ }, [children]);
+
+ return (
+ <>
+ {Array.from(childrenMap.current.values()).map(({ children, key }) => {
+ return (null);
+ const childrenNode = useRef([]);
+ const nodeKeeperLifeCycleValue = useRef({
+ [KEEP_ALIVE_LIFECYCLE.ACTIVATE]: [] as LifeCycleFunc[],
+ [KEEP_ALIVE_LIFECYCLE.UNACTIVATE]: [] as LifeCycleFunc[],
+ });
+
+ useEffect(() => {
+ return () => {
+ childrenNode.current.forEach(child => {
+ child.remove();
+ });
+ nodeKeeperLifeCycleValue.current[KEEP_ALIVE_LIFECYCLE.UNACTIVATE].forEach(callback => {
+ callback();
+ });
+ };
+ }, []);
+
+ useEffect(() => {
+ if (active) {
+ childrenNode.current = Array.from(wrapper.current?.children || []);
+ childrenNode.current.forEach(child => {
+ wrapper.current?.parentElement?.insertBefore(child, wrapper.current);
+ });
+ nodeKeeperLifeCycleValue.current[KEEP_ALIVE_LIFECYCLE.ACTIVATE].forEach(callback => {
+ callback();
+ });
+ } else {
+ childrenNode.current.forEach(child => {
+ wrapper.current?.appendChild(child);
+ });
+ nodeKeeperLifeCycleValue.current[KEEP_ALIVE_LIFECYCLE.UNACTIVATE].forEach(callback => {
+ callback();
+ });
+ }
+ }, [active]);
+
+ return (
+
+ {
+
+ );
+};
+
+export default Keeper;
diff --git a/packages/inula-adapter/src/vue/keepAlive/lifeCycleHooks.ts b/packages/inula-adapter/src/vue/keepAlive/lifeCycleHooks.ts
new file mode 100644
index 000000000..652a07869
--- /dev/null
+++ b/packages/inula-adapter/src/vue/keepAlive/lifeCycleHooks.ts
@@ -0,0 +1,34 @@
+import { useContext, useRef, useEffect } from 'openinula';
+import { NodeKeeperLifeCycleContext } from './context';
+
+export enum KEEP_ALIVE_LIFECYCLE {
+ ACTIVATE = 'componentDidActivate',
+ UNACTIVATE = 'componentWillUnactivate',
+}
+
+export type LifeCycleFunc = () => unknown;
+const useActivation = (lifeCycleName: KEEP_ALIVE_LIFECYCLE, func: LifeCycleFunc) => {
+ const keeperCtx = useContext(NodeKeeperLifeCycleContext);
+
+ // 未处于 KeepAlive 中
+ if (!keeperCtx) {
+ return;
+ }
+
+ const preCallback = useRef(func);
+ useEffect(() => {
+ const preIndex = keeperCtx[lifeCycleName].indexOf(preCallback.current);
+ if (preIndex >= 0) {
+ keeperCtx[lifeCycleName].splice(preIndex, 1, func);
+ } else {
+ keeperCtx[lifeCycleName].push(func);
+ }
+ preCallback.current = func;
+ }, [func]);
+};
+
+export const useActivatePro = useActivation.bind(null, KEEP_ALIVE_LIFECYCLE.ACTIVATE);
+
+export const useUnActivatePro = useActivation.bind(null, KEEP_ALIVE_LIFECYCLE.UNACTIVATE);
+
+export type LifeCycleListener = Record>;
diff --git a/packages/inula-adapter/src/vue/keepAlivePro.tsx b/packages/inula-adapter/src/vue/keepAlivePro.tsx
new file mode 100644
index 000000000..613325b6e
--- /dev/null
+++ b/packages/inula-adapter/src/vue/keepAlivePro.tsx
@@ -0,0 +1,166 @@
+import { ChildrenType, Component, Memo, useEffect, useRef } from 'openinula';
+import { inject, provide } from './injectProvide';
+
+type StringRegexList = String | RegExp | (String | RegExp)[];
+
+interface KeepAliveProps {
+ children?: ChildrenType;
+ max?: number;
+ include?: StringRegexList;
+ exclude?: StringRegexList;
+}
+
+interface ComponentData {
+ component: () => Component;
+ timestamp: number;
+}
+
+export function onActivated(listener: () => void): () => void {
+ const listeners = inject('onActivatedListeners');
+ const key = inject('keep-alive-key');
+
+ if (!listeners.has(key)) {
+ listeners.set(key, new Set());
+ }
+
+ listeners.get(key).add(listener);
+
+ return () => {
+ const listeners = inject('onActivatedListeners');
+ const key = inject('keep-alive-key');
+
+ listeners.get(key).delete(listener);
+ };
+}
+
+export function onDeactivated(listener: () => void): () => void {
+ const listeners = inject('onDeactivatedListeners');
+ const key = inject('keep-alive-key');
+
+ if (!listeners.has(key)) {
+ listeners.set(key, new Set());
+ }
+
+ listeners.get(key).add(listener);
+
+ return () => {
+ const listeners = inject('onDeactivatedListeners');
+ const key = inject('keep-alive-key');
+
+ listeners.get(key).delete(listener);
+ };
+}
+
+function checkInclude(name: string, whitelist?: StringRegexList, blacklist?: StringRegexList): boolean {
+ if (blacklist) {
+ if (!Array.isArray(blacklist)) {
+ blacklist = [blacklist];
+ }
+ for (let i = 0; i < blacklist.length; i++) {
+ if (typeof blacklist[i] === 'string') {
+ const keys = (blacklist[i] as string).split(/,\s*/g);
+ for (let j = 0; j < keys.length; j++) {
+ if (name === keys[j]) return false;
+ }
+ } else if (blacklist[i] instanceof RegExp) {
+ if ((blacklist[i] as RegExp).exec(name)) return false;
+ }
+ }
+ }
+
+ if (whitelist) {
+ if (!Array.isArray(whitelist)) {
+ whitelist = [whitelist];
+ }
+ for (let i = 0; i < whitelist.length; i++) {
+ if (typeof whitelist[i] === 'string') {
+ const keys = (whitelist[i] as string).split(/,\s*/g);
+ for (let j = 0; j < keys.length; j++) {
+ if (name === keys[j]) return true;
+ }
+ } else if (whitelist[i] instanceof RegExp) {
+ if ((whitelist[i] as RegExp).exec(name)) return true;
+ }
+ }
+ return false;
+ }
+
+ return true;
+}
+
+export const KeepAlivePro = ({ children, max = Infinity, include, exclude }: KeepAliveProps) => {
+ let componentData, activeComponent;
+ const componentCache = useRef(new Map());
+ let searchComponent = Array.isArray(children) ? children[0] : children;
+ const componentName = searchComponent.props.ref || searchComponent.props.is?.name;
+ const onActivatedListeners = useRef(new Map());
+ const onDeactivatedListeners = useRef(new Map {}>());
+ provide('onActivatedListeners', onActivatedListeners.current);
+ provide('onDeactivatedListeners', onDeactivatedListeners.current);
+
+ useEffect(() => {
+ // deactivate active components
+ return () => {
+ Array.from(componentCache.current.entries()).forEach(([name, data]) => {
+ provide('keep-alive-key', name);
+ if (componentName === name) {
+ const listeners: Set<() => {}> = inject('onDeactivatedListeners').get(name);
+ if (!listeners) return;
+ Array.from(listeners).forEach(listener => {
+ listener();
+ });
+ }
+ });
+ };
+ });
+
+ const shouldInclude = checkInclude(componentName, include, exclude);
+
+ if (shouldInclude) {
+ if (componentCache.current.has(componentName)) {
+ componentData = componentCache.current.get(componentName);
+ activeComponent = componentData.component;
+ componentData.timestamp = Date.now();
+ } else {
+ if (componentCache.current.size >= max) {
+ let minKey = '';
+ let minTimestamp = Infinity;
+
+ for (let [key, value] of componentCache.current) {
+ if (value.timestamp < minTimestamp) {
+ minTimestamp = value.timestamp;
+ minKey = key;
+ }
+ }
+
+ if (minKey !== null) {
+ componentCache.current.delete(minKey);
+ }
+ }
+
+ componentCache.current.set(componentName, {
+ timestamp: Date.now(),
+ component: searchComponent,
+ });
+ activeComponent = componentCache.current.get(componentName);
+ }
+ }
+ return (
+ <>
+ {Array.from(componentCache.current.entries()).map(([name, data]) => {
+ provide('keep-alive-key', name);
+ if (componentName === name) {
+ setTimeout(() => {
+ const listeners: Set<() => {}> = inject('onActivatedListeners').get(name);
+ if (!listeners) return;
+ Array.from(listeners).forEach(listener => {
+ listener();
+ });
+ }, 1);
+ }
+ return >(null);
+
+ if (objRef.current === null) {
+ // 首次渲染时初始化属性
+ objRef.current = initProps(rawProps, options);
+ } else {
+ // 后续更新时更新属性
+ updateProps(objRef.current, rawProps, options);
+ }
+
+ useScoped();
+
+ return objRef.current;
+}
+
+/**
+ * 初始化属性对象
+ * @param rawProps 原始属性对象或 null
+ * @param options 配置对象，包含默认值
+ * @returns 响应式处理后的属性对象
+ */
+export function initProps(rawProps: Data | null, options: Options): ReactiveRet {
+ const props: Data = {};
+
+ // 设置完整的属性
+ setFullProps(rawProps, props, options);
+
+ return shallowReactive(props) as ReactiveRet;
+}
+
+/**
+ * 设置完整的属性
+ * @param rawProps 原始属性对象或 null
+ * @param props 目标属性对象
+ * @param options 属性配置对象，包含默认值等信息
+ */
+function setFullProps(rawProps: Data | null, props: Data, options: Options): void {
+ if (rawProps) {
+ for (const key in rawProps) {
+ const value = rawProps[key];
+ props[key] = resolvePropValue(options, key, value);
+ }
+ }
+
+ // 设置默认值
+ for (const key in options) {
+ if (
+ Object.prototype.hasOwnProperty.call(options, key) &&
+ (!Object.prototype.hasOwnProperty.call(props, key) || props[key] === undefined)
+ ) {
+ props[key] = resolvePropValue(options, key, props[key]);
+ }
+ }
+}
+
+/**
+ * 更新属性对象
+ * @param props 待更新的属性对象
+ * @param rawProps 包含新值的原始属性对象或 null
+ * @param options 属性配置对象，包含默认值等信息
+ */
+export function updateProps(props: Data, rawProps: Data | null, options: Options): void {
+ for (const key in rawProps) {
+ const value = rawProps![key];
+ props[key] = resolvePropValue(options, key, value);
+ }
+}
+
+/**
+ * 解析属性值，考虑默认值
+ * @param options 配置对象，包含默认值
+ * @param key 属性键
+ * @param value 当前属性值
+ * @returns 解析后的属性值
+ */
+function resolvePropValue(options: Options, key: string, value: unknown): unknown {
+ const opt = options[key];
+ if (opt != null) {
+ // 设置默认值
+ if (opt.default != null && value === undefined) {
+ const defaultValue = opt.default;
+ if (typeof defaultValue === 'function' && !(opt.type && opt.type === Function)) {
+ value = defaultValue();
+ } else {
+ value = defaultValue;
+ }
+ }
+ }
+ return value;
+}
diff --git a/packages/inula-adapter/src/vue/semiControlledComponent.tsx b/packages/inula-adapter/src/vue/semiControlledComponent.tsx
new file mode 100644
index 000000000..51542c27f
--- /dev/null
+++ b/packages/inula-adapter/src/vue/semiControlledComponent.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula, { useState, useEffect, useRef, ChangeEvent, FC } from 'openinula';
+
+// 定义组件的属性接口
+interface SemiControlledInputProps {
+ value?: { value: string }; // 值对象，包含一个 value 属性
+ onChange?: (event: ChangeEvent) => void; // 变更事件处理函数
+ [key: string]: any; // 允许传入任意其他属性
+}
+
+/**
+ * SemiControlledInput 组件
+ *
+ * 这是一个半受控的输入框组件，结合了受控和非受控组件的特性。
+ * 它允许直接操作 DOM 来设置输入值，同时也响应 props 的变化。
+ *
+ * @param {Object} props - 组件属性
+ * @param {Object} props.valueObj - 包含输入值的对象，格式为 { value: string }，为了保证SemiControlledInput每次都刷新
+ * @param {function} props.onChange - 输入值变化时的回调函数
+ * @param {Object} props.[...otherProps] - 其他传递给 input 元素的属性
+ *
+ * @returns {JSX.Element} 返回一个 input 元素
+ *
+ * @example
+ * console.log('New value:', e.target.value)}
+ * placeholder="Enter text"
+ * />
+ */
+export const SemiControlledInput: FC = ({ value = { value: '' }, onChange, ...props }) => {
+ // 使用内部状态管理输入值，初始值为传入的 valueObj.value
+ const [internalValue, setInternalValue] = useState(value.value);
+
+ // 创建一个引用，用于直接访问 input 元素
+ const inputRef = useRef(null);
+
+ // 当传入的 valueObj 变化时，同步更新内部状态
+ useEffect(() => {
+ if (value.value !== internalValue) {
+ setInternalValue(value.value);
+ }
+ }, [value]);
+
+ // 处理输入框值的直接修改（如通过 JavaScript 设置 value 属性）
+ useEffect(() => {
+ const input = inputRef.current;
+ if (!input) return;
+
+ const handlePropertyChange = () => {
+ const newValue = input.value;
+ if (newValue !== internalValue) {
+ setInternalValue(newValue);
+ if (onChange) {
+ // 触发 onChange 事件，模拟原生 input 事件
+ onChange({ target: { value: newValue } } as ChangeEvent);
+ }
+ }
+ };
+
+ // 获取 input 元素 'value' 属性的原始描述符
+ const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+ if (!descriptor) return;
+
+ const originalSetter = descriptor.set;
+
+ // 重写 'value' 属性的 setter，以捕获直接对 value 的赋值操作
+ Object.defineProperty(input, 'value', {
+ get: descriptor.get,
+ set: function (val) {
+ originalSetter?.call(this, val);
+ handlePropertyChange();
+ },
+ configurable: true,
+ });
+
+ // 清理函数：组件卸载时恢复原始的 'value' 属性描述符
+ return () => {
+ Object.defineProperty(input, 'value', descriptor);
+ };
+ }, [onChange, internalValue]);
+
+ // 处理输入框的 onChange 事件
+ const handleChange = (e: ChangeEvent) => {
+ const newValue = e.target.value;
+ setInternalValue(newValue);
+ if (onChange) {
+ onChange(e);
+ }
+ };
+
+ // 渲染 input 元素
+ return (
+
+ );
+};
diff --git a/packages/inula-adapter/src/vue/sfcAPI.tsx b/packages/inula-adapter/src/vue/sfcAPI.tsx
new file mode 100644
index 000000000..219fb634b
--- /dev/null
+++ b/packages/inula-adapter/src/vue/sfcAPI.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { InulaNode, vueReactive } from 'openinula';
+import { emit } from './globalAPI';
+
+const { useInstance } = vueReactive;
+
+type AnyProps = Record;
+
+/**
+ * Custom Hook to simulate Vue's fallthrough attributes functionality
+ * @param props Component props
+ * @param excludeList Parameters declared as props do not fallthrough
+ * @returns fallthrough attributes
+ */
+export function useAttrs(props: T, excludeList: (keyof T)[] = []): Omit {
+ const attrs = { ...props } as T;
+ excludeList.forEach(key => delete attrs[key]);
+ const instance = useInstance();
+ instance.$attrs = attrs;
+ return attrs;
+}
+
+type Slots = {
+ [key: string]: SlotFunction | InulaNode;
+ default?: InulaNode;
+};
+type SlotFunction = (props: any) => InulaNode;
+
+/**
+ * Custom Hook to simulate Vue's useSlots functionality in React
+ * @param props Component props
+ * @returns An object containing all slots, including the default slot
+ */
+export function useSlots(props: AnyProps): Slots {
+ const slots: Slots = {};
+
+ // Extract template slots from props
+ Object.entries(props).forEach(([key, value]) => {
+ if (key.startsWith('template_')) {
+ const slotName = key.replace('template_', '');
+ slots[slotName] = value;
+ }
+ });
+
+ // Add default slot if children are provided
+ if (props.children) {
+ slots.default = props.children;
+ }
+
+ return slots;
+}
+
+export function defineExpose = Record>(exposed?: Exposed) {
+ const instance = useInstance();
+
+ if (instance) {
+ // 检查 exposed 是否是一个对象
+ if (typeof exposed === 'object' && exposed !== null) {
+ // 遍历 exposed 对象的所有属性
+ Object.keys(exposed).forEach(key => {
+ // 将每个属性赋值给 instance
+ instance[key] = exposed[key];
+ });
+ } else {
+ console.warn('defineExpose: Argument should be an object');
+ }
+ } else {
+ console.warn('defineExpose: No instance found. Make sure this is called inside a component setup function.');
+ }
+}
+
+type ObjectEmitsOptions = Record any) | null>;
+type EmitsOptions = ObjectEmitsOptions | string[];
+
+// 新的 defineEmits 函数实现
+export function defineEmits(emits: T, props: AnyProps) {
+ return function (eventName: K, ...args: Parameters) {
+ emit(props, eventName as string, ...args);
+ };
+}
diff --git a/packages/inula-adapter/src/vue/types.ts b/packages/inula-adapter/src/vue/types.ts
new file mode 100644
index 000000000..faa7f014f
--- /dev/null
+++ b/packages/inula-adapter/src/vue/types.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export type FN = () => void;
diff --git a/packages/inula-adapter/src/vue/useScoped.ts b/packages/inula-adapter/src/vue/useScoped.ts
new file mode 100644
index 000000000..721b7c31d
--- /dev/null
+++ b/packages/inula-adapter/src/vue/useScoped.ts
@@ -0,0 +1,195 @@
+import { vueReactive, useEffect, useLayoutEffect, useRef, useCallback } from 'openinula';
+import type { VNode, Instance } from 'openinula';
+import { styles } from './helper';
+import { shallowCompare } from './compare';
+
+const { useInstance } = vueReactive;
+
+/**
+ * 从当前节点开始，沿着节点树往下找第一个tag === 'DomComponent'的vNode，
+ * 中途一旦遇到某个节点的next不为空，则返回null
+ *
+ * 例如 中途遇到如下节点，则返回null
+ * <>
+
+ child
+
+ (instance.$props.className);
+
+ // 这里是为了监听最底层vDomNode自身的style发生变化时，执行style的合并逻辑
+ // 场景举例：vDomNode为：，其中width是组件状态且会更新
+ const vDomNode = getFirstSingleDomVnode(instance?.$vnode);
+
+ // 由于vDomNode的style，每次在组件刷新时，都会创建新对象，所以useEffect监听函数每次都会刷新，
+ // 这里通过ref保持上次刷新后的style，然后手动比较style是否变化，再决定是否走更新逻辑
+ const preNodeStyle = useRef(null);
+
+ // 处理 className
+ useEffect(() => {
+ if (shouldSkipSetAttrToEl(instance.$vnode)) {
+ return;
+ }
+
+ const el = instance.$el as HTMLElement;
+ const currentClassName = instance.$props.className || '';
+
+ // 确保元素有初始的 className
+ if (!el.className) {
+ el.className = '';
+ }
+
+ // 如果存在之前的类名，则替换
+ if (preClass.current && el.className.includes(preClass.current)) {
+ el.className = el.className.replace(preClass.current, currentClassName).trim();
+ } else if (currentClassName) {
+ // 如果有新的类名要添加，且没有找到之前的类名，则追加
+ el.className = el.className ? `${el.className} ${currentClassName}`.trim() : currentClassName;
+ }
+
+ // 更新引用的类名
+ preClass.current = currentClassName;
+ }, [instance.$props.className]);
+
+ // 处理 id
+ useEffect(() => {
+ if (shouldSkipSetAttrToEl(instance.$vnode)) {
+ return;
+ }
+
+ const el = instance.$el as HTMLElement;
+ // 父组件传了id属性会强制赋给子组件第一个子节点DOM
+ if (instance.$props.id) {
+ el.id = instance.$props.id;
+ }
+ }, [instance.$props.id]);
+
+ // 合并生成style，并应用到el上
+ // 对于Parent=>Child=>GrandChild组合关系，优先级始终保持Parent>Child>GrandChid
+ // 所以，这里从vDomNode开始找，找到路径上的Parent，Child，GrandChid对应vNode，并取出props中的style进行合并
+ const mergeStyle = useCallback(() => {
+ const el = instance.$el as HTMLElement;
+ const currentVDomNode = getFirstSingleDomVnode(instance?.$vnode);
+ if (currentVDomNode) {
+ // currentVDomNode优先级最低，先入队
+ const treePath = [currentVDomNode];
+
+ // 从currentVDomNode开始往上找，直到找到有兄弟节点的vNode或者DomComponent类型的vNode
+ let parentVNode = currentVDomNode.parent;
+ while (parentVNode && !parentVNode.next && parentVNode.tag !== 'DomComponent') {
+ treePath.push(parentVNode);
+ parentVNode = parentVNode.parent;
+ }
+ // 退出循环的parentVNode，其有兄弟节点，但其自身style是需要合并的
+ // 这里不需要合并DomComponent类型的vNode
+ if (parentVNode && parentVNode.tag !== 'DomComponent' && parentVNode.props?.style) {
+ treePath.push(parentVNode);
+ }
+
+ // 取出路径上的style列表
+ const styleList = treePath.map((node: VNode) => node.props?.style || {});
+ const styleToApply = styles(...styleList);
+
+ // 应用style到el上
+ Object.entries(styleToApply).forEach(([key, value]) => {
+ if (!key) return;
+ el.style[key.trim()] = typeof value === 'string' ? value.trim() : value;
+ });
+ }
+ }, []);
+
+ // 处理 props的style
+ useEffect(() => {
+ if (shouldSkipSetAttrToEl(instance.$vnode)) {
+ return;
+ }
+ mergeStyle();
+ }, [instance.$props.style]);
+
+ // 处理 vNode的style
+ // 1、useEffect执行时，vDomNode的style。已经在el生效渲染成功，再执行刷新后，dom元素样式前后不一致，会抖动
+ // 所以这里用useLayoutEffect，在渲染之前，就把el的style刷新成合并后的style
+ // 2、由于vDomNode的style，每次在组件刷新时，都会创建新对象，所以useEffect监听函数每次都会刷新，
+ // 这里通过ref保持上次刷新后的style，然后手动比较style是否变化，再决定是否走更新逻辑
+ useLayoutEffect(() => {
+ if (shouldSkipSetAttrToEl(instance.$vnode) || shallowCompare(preNodeStyle.current, vDomNode?.props.style)) {
+ return;
+ }
+ preNodeStyle.current = vDomNode?.props.style;
+ mergeStyle();
+ }, [vDomNode?.props.style]);
+
+ // 处理 data-v-hash
+ useEffect(() => {
+ if (shouldSkipSetAttrToEl(instance.$vnode)) {
+ return;
+ }
+
+ const el = instance.$el as HTMLElement;
+ const hashKeyLength = 15;
+ const key = Object.keys(instance.$props).find(key => key.startsWith('data-v-') && key.length === hashKeyLength);
+
+ if (key) {
+ el.setAttribute(key, instance.$props[key]);
+ }
+ }, []);
+}
+
+export default useScoped;
diff --git a/packages/inula-adapter/src/vue/vShow.ts b/packages/inula-adapter/src/vue/vShow.ts
new file mode 100644
index 000000000..402621d54
--- /dev/null
+++ b/packages/inula-adapter/src/vue/vShow.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { Directive } from './directive';
+
+const vShowOriginalDisplay = Symbol('_v_show_original_display');
+
+export const vShow: Directive = {
+ beforeMount(el, { value }) {
+ el[vShowOriginalDisplay] = el.style.display === 'none' ? '' : el.style.display;
+
+ setDisplay(el, value);
+ },
+ updated(el, { value, oldValue }) {
+ if (!value === !oldValue) return;
+
+ setDisplay(el, value);
+ },
+ beforeUnmount(el, { value }) {
+ setDisplay(el, value);
+ },
+};
+
+function setDisplay(el: HTMLElement, value: unknown): void {
+ el.style.display = value ? el[vShowOriginalDisplay] : 'none';
+}
diff --git a/packages/inula-adapter/src/vuex/index.ts b/packages/inula-adapter/src/vuex/index.ts
new file mode 100644
index 000000000..a38448951
--- /dev/null
+++ b/packages/inula-adapter/src/vuex/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+export * from './vuex';
+export * from './maps';
diff --git a/packages/inula-adapter/src/vuex/maps.ts b/packages/inula-adapter/src/vuex/maps.ts
new file mode 100644
index 000000000..a053b6b3e
--- /dev/null
+++ b/packages/inula-adapter/src/vuex/maps.ts
@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { moduleGettersProxy, useStore } from './vuex';
+import { vueReactive, useRef, ComputedImpl } from 'openinula';
+
+const { computed } = vueReactive;
+
+export const useMapState = (moduleName, states) => {
+ const store = useStore();
+ const objRef = useRef(null);
+ if (objRef.current === null) {
+ if (typeof moduleName !== 'string') {
+ states = moduleName;
+ moduleName = '';
+ }
+
+ objRef.current = {};
+
+ toArray(states).forEach(({ key, val }) => {
+ let state = store.state;
+ let getters = store.getters;
+ if (moduleName) {
+ const storeX = store.getModule(moduleName);
+ if (!storeX) {
+ return;
+ }
+ state = storeX.$state;
+ getters = moduleGettersProxy(storeX);
+ }
+
+ if (typeof val === 'function') {
+ objRef.current![key] = computed(function () {
+ return val(state, getters);
+ });
+ } else {
+ objRef.current![key] = computed(function () {
+ return state[val];
+ });
+ }
+ });
+ }
+
+ return objRef.current;
+};
+
+export const useMapGetters = (moduleName, getters) => {
+ const store = useStore();
+ const objRef = useRef(null);
+ if (objRef.current === null) {
+ if (typeof moduleName !== 'string') {
+ getters = moduleName;
+ moduleName = '';
+ }
+
+ objRef.current = {};
+
+ toArray(getters).forEach(({ key, val }) => {
+ if (moduleName) {
+ val = `${moduleName}/${val}`;
+ }
+
+ objRef.current![key] = computed(function () {
+ return store.getters[val];
+ });
+ });
+ }
+
+ return objRef.current;
+};
+
+export const useMapMutations = (moduleName, mutations) => {
+ const store = useStore();
+ const objRef = useRef any }>(null);
+ if (objRef.current === null) {
+ if (typeof moduleName !== 'string') {
+ mutations = moduleName;
+ moduleName = '';
+ }
+
+ objRef.current = {};
+
+ toArray(mutations).forEach(({ key, val }) => {
+ let commit = store.commit;
+
+ if (moduleName) {
+ commit = (...args) => {
+ store.commit(args[0], args[1], args[2], moduleName);
+ };
+ }
+
+ if (typeof val === 'function') {
+ objRef.current![key] = function (...args) {
+ return val.apply(this, [commit].concat(args));
+ };
+ } else {
+ objRef.current![key] = function (...args) {
+ return commit.apply(store, [val].concat(args));
+ };
+ }
+ });
+ }
+
+ return objRef.current;
+};
+
+export const useMapActions = (moduleName, actions) => {
+ const store = useStore();
+ const objRef = useRef any }>(null);
+ if (objRef.current === null) {
+ if (typeof moduleName !== 'string') {
+ actions = moduleName;
+ moduleName = '';
+ }
+
+ objRef.current = {};
+
+ toArray(actions).forEach(({ key, val }) => {
+ let dispatch = store.dispatch;
+
+ if (moduleName) {
+ dispatch = (...args) => {
+ store.dispatch(args[0], args[1], args[2], moduleName);
+ };
+ }
+
+ if (typeof val === 'function') {
+ objRef.current![key] = function (...args) {
+ return val.apply(this, [dispatch].concat(args));
+ };
+ } else {
+ objRef.current![key] = function (...args) {
+ return dispatch.apply(store, [val].concat(args));
+ };
+ }
+ });
+ }
+
+ return objRef.current;
+};
+
+function toArray(map) {
+ if (!(Array.isArray(map) || (map !== null && typeof map === 'object'))) {
+ return [];
+ }
+ return Array.isArray(map)
+ ? map.map(key => ({ key, val: key }))
+ : Object.keys(map).map(key => ({ key, val: map[key] }));
+}
diff --git a/packages/inula-adapter/src/vuex/types.ts b/packages/inula-adapter/src/vuex/types.ts
new file mode 100644
index 000000000..3af6ca8b0
--- /dev/null
+++ b/packages/inula-adapter/src/vuex/types.ts
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { StoreObj } from 'openinula';
+
+export type AnyFunction = (...args: any[]) => any;
+
+export interface VuexStoreOptions<
+ State extends Record = Record,
+ Mutations extends Record = Record,
+ Actions extends Record = Record,
+ Getters extends Record = Record,
+ RootState extends Record = Record,
+ RootGetters extends Record = Record,
+ Modules extends Record> = Record>,
+> {
+ namespaced?: boolean;
+ state?: State | (() => State);
+ mutations?: MutationsType;
+ actions?: ActionsType;
+ getters?: GettersType;
+ modules?: {
+ [k in keyof Modules]: VuexStoreOptions;
+ };
+}
+
+type MutationsType = {
+ [K in keyof Mutations]: AddFirstArg;
+};
+
+type ActionsType = {
+ [K in keyof Actions]: AddFirstArg<
+ Actions[K],
+ {
+ commit: CommitType;
+ dispatch: DispatchType;
+ state: State;
+ getters: Getters;
+ rootState: RootState;
+ rootGetters: RootGetters;
+ }
+ >;
+};
+
+type AddFirstArg = T extends (arg1: any, ...args: infer A) => infer R
+ ? (state: S, ...args: A) => R
+ : T extends () => infer R
+ ? (state: S) => R
+ : T;
+
+type GettersType = {
+ [K in keyof Getters]: AddArgs;
+};
+
+type AddArgs = T extends (...args: infer A) => infer R
+ ? (...args: [...Args, ...A]) => R
+ : T extends () => infer R
+ ? (...args: Args) => R
+ : T;
+
+export type CommitType = (
+ type: string | (Record & { type: string }),
+ payload?: any,
+ options?: Record,
+ moduleName?: string
+) => void;
+
+export type DispatchType = (
+ type: string | (Record & { type: string }),
+ payload?: any,
+ options?: Record,
+ moduleName?: string
+) => any;
+
+export type VuexStore<
+ State extends Record = Record,
+ Getters extends Record = Record,
+ Modules extends Record> = Record>,
+> = {
+ state: State & {
+ [K in keyof Modules]: Modules[K] extends { state: infer ModuleState } ? ModuleState : Modules[K];
+ };
+ getters: {
+ [K in keyof Getters]: ReturnType;
+ };
+ commit: CommitType;
+ dispatch: DispatchType;
+ subscribe: AnyFunction;
+ subscribeAction: AnyFunction;
+ watch: (fn: (state: State, getters: Getters) => void, cb: AnyFunction) => void;
+ registerModule: (moduleName: string, module: VuexStoreOptions) => void;
+ unregisterModule: (moduleName: string) => void;
+ hasModule: (moduleName: string) => boolean;
+ getModule: (moduleName: string) => StoreObj;
+ install: (app: any, injectKey?: string) => void;
+};
diff --git a/packages/inula-adapter/src/vuex/vuex.ts b/packages/inula-adapter/src/vuex/vuex.ts
new file mode 100644
index 000000000..7cdc2e00e
--- /dev/null
+++ b/packages/inula-adapter/src/vuex/vuex.ts
@@ -0,0 +1,346 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { createStore as createStoreX, StoreObj, vueReactive } from 'openinula';
+import { VuexStore, VuexStoreOptions } from './types';
+import { AnyFunction } from '../vuex/types';
+
+const { watch, useComputed, computed } = vueReactive;
+
+export const MUTATION_PREFIX = 'm_';
+export const GETTER_PREFIX = 'g_';
+
+const storeMap = new Map();
+
+// 用于保存storeX对象的getStoreX方法，主要是为了调用registerDestroyFunction
+let getStoreXCache: null | (() => StoreObj) = null;
+
+type GettersMap = {
+ [K in keyof T['$c']]: ReturnType;
+};
+
+export function createStore<
+ State extends Record = Record,
+ Mutations extends Record = Record,
+ Actions extends Record = Record,
+ Getters extends Record = Record,
+ RootState extends Record = Record,
+ RootGetters extends Record = Record,
+ Modules extends Record> = Record>,
+>(
+ options: VuexStoreOptions
+): VuexStore {
+ const modules = options.modules || {};
+
+ const _modules: Record = {};
+
+ const _getters: GettersMap = {};
+
+ const vuexStore: VuexStore = {
+ state: new Proxy(
+ {},
+ {
+ get: (_, key) => {
+ if (key in _modules) {
+ const storeX = _modules[key as string].storeX;
+ return storeX;
+ } else {
+ return rootStoreX[key as string];
+ }
+ },
+ }
+ ),
+ getters: new Proxy(
+ {},
+ {
+ get: (_, key) => {
+ if (typeof key === 'string') {
+ // 如果key包含/，说明是访问模块的getters，进行split
+ if (key.includes('/')) {
+ const [moduleName, getterKey] = key.split('/');
+ const storeX = _modules[moduleName].storeX;
+ return storeX[`${GETTER_PREFIX}${getterKey}`];
+ } else {
+ return _getters[`${GETTER_PREFIX}${key}`];
+ }
+ }
+ },
+ }
+ ),
+ commit: (_type, _payload, _options, moduleName) => {
+ const { type, payload, options } = prepareTypeParams(_type, _payload, _options);
+ // 如果options.root为true，调用根store的action
+ if (options?.root) {
+ return rootStoreX[`${MUTATION_PREFIX}${type}`](payload);
+ }
+
+ // 包含/，说明是访问模块的mutation
+ if (type.includes('/')) {
+ const [moduleName, key] = type.split('/');
+ return _modules[moduleName].storeX[`${MUTATION_PREFIX}${key}`](payload);
+ }
+
+ if (moduleName != undefined) {
+ // dispatch到指定的module
+ return _modules[moduleName].storeX[`${MUTATION_PREFIX}${type}`](payload);
+ }
+
+ // 调用所有非namespaced的modules的mutation
+ Object.values(_modules).forEach(module => {
+ if (!module.namespaced) {
+ const mutation = module.storeX[`${MUTATION_PREFIX}${type}`];
+ if (typeof mutation === 'function') {
+ mutation(payload);
+ }
+ }
+ });
+
+ // 调用storeX对象上的方法
+ if (rootStoreX[`${MUTATION_PREFIX}${type}`]) {
+ rootStoreX[`${MUTATION_PREFIX}${type}`](payload);
+ }
+ },
+ dispatch: (_type, _payload, _options, moduleName) => {
+ const { type, payload, options } = prepareTypeParams(_type, _payload, _options);
+ // 如果options.root为true，调用根store的action
+ if (options?.root) {
+ return rootStoreX[type](payload);
+ }
+
+ // 包含/，说明是访问模块的action
+ if (type.includes('/')) {
+ const [moduleName, key] = type.split('/');
+ return _modules[moduleName].storeX[key](payload);
+ }
+
+ if (moduleName != undefined) {
+ // dispatch到指定的module
+ return _modules[moduleName].storeX[type](payload);
+ }
+
+ // 把每个action的返回值合并起来，支持then链式调用
+ const results: any[] = [];
+
+ // 调用所有非namespaced的modules的action
+ Object.values(_modules).forEach(module => {
+ if (!module.namespaced) {
+ const action = module.storeX[type];
+ if (typeof action === 'function') {
+ results.push(action(payload));
+ }
+ }
+ });
+
+ // 调用storeX对象上的方法
+ if (typeof rootStoreX[type] === 'function') {
+ results.push(rootStoreX[type](payload));
+ }
+
+ // 返回一个Promise，内容是results，支持then链式调用
+ return Promise.all(results);
+ },
+ subscribe(fn) {
+ return rootStoreX.$subscribe(fn);
+ },
+ subscribeAction(fn) {
+ return rootStoreX.$subscribe(fn);
+ },
+ watch(fn, cb) {
+ watch(() => fn(vuexStore.state, vuexStore.getters), cb);
+ },
+ // 动态注册模块
+ registerModule(key, module) {
+ _modules[key] = { storeX: _createStoreX(key, module, vuexStore, rootStoreX), namespaced: !!module.namespaced };
+ collectGetters(_modules[key].storeX, _getters);
+ },
+ // 动态注销模块
+ unregisterModule(moduleName) {
+ deleteGetters(_modules[moduleName].storeX, _getters);
+ delete _modules[moduleName];
+ },
+ hasModule(moduleName) {
+ return moduleName in _modules;
+ },
+ getModule(moduleName) {
+ return _modules[moduleName]?.storeX;
+ },
+ install(app, key) {
+ registerStore(this, key || storeKey);
+ },
+ };
+
+ const rootStoreX = _createStoreX(undefined, options as VuexStoreOptions, vuexStore);
+ collectGetters(rootStoreX, _getters);
+
+ // 递归创建子模块
+ for (const [moduleName, moduleOptions] of Object.entries(modules)) {
+ _modules[moduleName] = {
+ storeX: _createStoreX(moduleName, moduleOptions as VuexStoreOptions, vuexStore, rootStoreX),
+ namespaced: !!(moduleOptions as VuexStoreOptions).namespaced,
+ };
+ collectGetters(_modules[moduleName].storeX, _getters);
+ }
+
+ return vuexStore as VuexStore;
+}
+
+export function prepareTypeParams(
+ type: string | (Record & { type: string }),
+ payload?: any,
+ options?: Record
+) {
+ if (typeof type === 'object' && type.type) {
+ options = payload;
+ payload = type;
+ type = type.type;
+ }
+
+ return { type, payload, options } as {
+ type: string;
+ payload: any;
+ options: Record;
+ };
+}
+
+function _createStoreX(
+ moduleName: string | undefined,
+ options: VuexStoreOptions,
+ store: VuexStore,
+ rootStoreX?: any
+): StoreObj {
+ const { mutations = {}, actions = {}, getters = {} } = options;
+ const state = typeof options.state === 'function' ? options.state() : options.state;
+
+ const getStoreX: () => StoreObj = createStoreX({
+ id: moduleName,
+ state: state,
+ actions: {
+ // 给mutations的key增加一个前缀，避免和actions的key冲突
+ ...Object.fromEntries(
+ Object.entries(mutations).map(([key, mutation]) => {
+ return [`${MUTATION_PREFIX}${key}`, mutation];
+ })
+ ),
+ // 重新定义action的方法，绑定this，修改第一参数
+ ...Object.fromEntries(
+ Object.entries(actions).map(([key, action]) => [
+ key,
+ function (this: StoreObj, state: Record, payload) {
+ rootStoreX = rootStoreX || storeX;
+ const argFirst = {
+ ...store,
+ // 覆盖commit方法，多传一个参数moduleName
+ commit: (
+ type: string | (Record & { type: string }),
+ payload?: any,
+ options?: Record
+ ) => {
+ store.commit(type, payload, options, moduleName);
+ },
+ // 覆盖dispatch方法，多传一个参数moduleName
+ dispatch: (
+ type: string | (Record & { type: string }),
+ payload?: any,
+ options?: Record
+ ) => {
+ return store.dispatch(type, payload, options, moduleName);
+ },
+ state: storeX.$state,
+ rootState: store.state,
+ getter: store.getters,
+ rootGetters: moduleGettersProxy(rootStoreX),
+ };
+
+ return action.call(storeX, argFirst, payload);
+ },
+ ])
+ ),
+ },
+ computed: {
+ ...Object.fromEntries(
+ Object.entries(getters).map(([key, getter]) => {
+ return [
+ // 给getters的key增加一个前缀，避免和actions, mutations的key冲突
+ `${GETTER_PREFIX}${key}`,
+ // 重新定义getter的方法，绑定this，修改参数: state, getters, rootState, rootGetters
+ function (state: Record) {
+ rootStoreX = rootStoreX || storeX;
+ return getter.call(
+ storeX,
+ storeX.$state,
+ store.getters,
+ rootStoreX.$state,
+ moduleGettersProxy(rootStoreX)
+ );
+ },
+ ];
+ })
+ ),
+ },
+ });
+
+ const storeX = getStoreX();
+ if (getStoreXCache === null) {
+ getStoreXCache = getStoreX;
+ }
+
+ return storeX;
+}
+
+function collectGetters(storeX: StoreObj, gettersMap: GettersMap): void {
+ Object.keys(storeX.$config.computed).forEach(type => {
+ Object.defineProperty(gettersMap, type, {
+ get: () => {
+ return storeX.$c[type];
+ },
+ configurable: true,
+ });
+ });
+}
+
+function deleteGetters(storeX: StoreObj, gettersMap: GettersMap): void {
+ Object.keys(storeX.$config.computed).forEach(type => {
+ // 删除Object.defineProperty定义的属性
+ Object.defineProperty(gettersMap, type, {
+ value: undefined,
+ writable: true,
+ enumerable: true,
+ configurable: true,
+ });
+ delete gettersMap[type];
+ });
+}
+
+export function moduleGettersProxy(storeX: StoreObj) {
+ return new Proxy(
+ {},
+ {
+ get: (_, key) => {
+ return storeX[`${GETTER_PREFIX}${key as string}`];
+ },
+ }
+ );
+}
+
+export const storeKey = 'DEFAULT_VUEX_STORE';
+
+export function useStore(key = storeKey) {
+ getStoreXCache!();
+ return storeMap.get(key);
+}
+
+export function registerStore(store: VuexStore, key = storeKey) {
+ storeMap.set(key, store);
+}
diff --git a/packages/inula-adapter/tests/pinia/pinia.actions.test.ts b/packages/inula-adapter/tests/pinia/pinia.actions.test.ts
new file mode 100644
index 000000000..a7982cc18
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.actions.test.ts
@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, it, vi, expect, beforeEach } from 'vitest';
+import { defineStore } from '../../src/pinia/pinia';
+
+let id = 0;
+function createStore() {
+ return defineStore({
+ id: String(id++),
+ state: () => ({
+ a: true,
+ nested: {
+ foo: 'foo',
+ a: { b: 'string' },
+ },
+ }),
+ getters: {
+ nonA(): boolean {
+ return !this.a;
+ },
+ otherComputed() {
+ return this.nonA;
+ },
+ },
+ actions: {
+ async getNonA() {
+ return this.nonA;
+ },
+ simple() {
+ this.toggle();
+ return 'simple';
+ },
+
+ toggle() {
+ return (this.a = !this.a);
+ },
+
+ setFoo(foo: string) {
+ this.nested.foo = foo;
+ },
+
+ combined() {
+ this.toggle();
+ this.setFoo('bar');
+ },
+
+ throws() {
+ throw new Error('fail');
+ },
+
+ async rejects() {
+ throw 'fail';
+ },
+ },
+ });
+}
+describe('pinia state', () => {
+ let useStore = createStore();
+
+ beforeEach(() => {
+ useStore = createStore();
+ });
+
+ it('can use the store as this', () => {
+ const store = useStore();
+ expect(store.$state.a).toBe(true);
+ store.toggle();
+ expect(store.$state.a).toBe(false);
+ });
+
+ it('store is forced as the context', () => {
+ const store = useStore();
+ expect(store.$state.a).toBe(true);
+ expect(() => {
+ store.toggle.call(null);
+ }).not.toThrow();
+ expect(store.$state.a).toBe(false);
+ });
+
+ it('can call other actions', () => {
+ const store = useStore();
+ expect(store.$state.a).toBe(true);
+ expect(store.$state.nested.foo).toBe('foo');
+ store.combined();
+ expect(store.$state.a).toBe(false);
+ expect(store.$state.nested.foo).toBe('bar');
+ });
+
+ it('throws errors', () => {
+ const store = useStore();
+ expect(() => store.throws()).toThrowError('fail');
+ });
+
+ it('throws async errors', async () => {
+ const store = useStore();
+ expect.assertions(1);
+ await expect(store.rejects()).rejects.toBe('fail');
+ });
+
+ it('can catch async errors', async () => {
+ const store = useStore();
+ expect.assertions(3);
+ const spy = vi.fn();
+ await expect(store.rejects().catch(spy)).resolves.toBe(undefined);
+ expect(spy).toHaveBeenCalledTimes(1);
+ expect(spy).toHaveBeenCalledWith('fail');
+ });
+
+ it('can destructure actions', () => {
+ const store = useStore();
+ const { simple } = store;
+ expect(simple()).toBe('simple');
+ // works with the wrong this
+ expect({ simple }.simple()).toBe('simple');
+ // special this check
+ expect({ $id: 'o', simple }.simple()).toBe('simple');
+ // override the function like devtools do
+ expect(
+ {
+ simple,
+ // otherwise it would fail
+ toggle() {},
+ }.simple()
+ ).toBe('simple');
+ });
+});
diff --git a/packages/inula-adapter/tests/pinia/pinia.getters.test.ts b/packages/inula-adapter/tests/pinia/pinia.getters.test.ts
new file mode 100644
index 000000000..1fc6db615
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.getters.test.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { defineStore } from '../../src/pinia/pinia';
+
+let id = 0;
+function createStore() {
+ return defineStore({
+ id: String(id++),
+ state: () => ({
+ name: 'Eduardo',
+ }),
+ getters: {
+ upperCaseName(store) {
+ return store.name.toUpperCase();
+ },
+ doubleName(): string {
+ return this.upperCaseName;
+ },
+ composed(): string {
+ return this.upperCaseName + ': ok';
+ },
+ arrowUpper: state => {
+ // @ts-expect-error
+ state.nope;
+ return state.name.toUpperCase();
+ },
+ },
+ actions: {
+ o() {
+ this.arrowUpper.toUpperCase();
+ this.o().toUpperCase();
+ return 'a string';
+ },
+ },
+ });
+}
+
+describe('pinia getters', () => {
+ let useStore = createStore();
+ let useB;
+ let useA;
+ beforeEach(() => {
+ useStore = createStore();
+
+ useB = defineStore({
+ id: 'B',
+ state: () => ({ b: 'b' }),
+ });
+ });
+
+ it('adds getters to the store', () => {
+ const store = useStore();
+ expect(store.upperCaseName).toBe('EDUARDO');
+
+ // @ts-expect-error
+ store.nope;
+
+ store.name = 'Ed';
+ expect(store.upperCaseName).toBe('ED');
+ });
+
+ it('updates the value', () => {
+ const store = useStore();
+ store.name = 'Ed';
+ expect(store.upperCaseName).toBe('ED');
+ });
+
+ it('can use other getters', () => {
+ const store = useStore();
+ expect(store.composed).toBe('EDUARDO: ok');
+ store.name = 'Ed';
+ expect(store.composed).toBe('ED: ok');
+ });
+
+ it('keeps getters reactive when hydrating', () => {
+ const store = useStore();
+ store.name = 'Jack';
+ expect(store.name).toBe('Jack');
+ expect(store.upperCaseName).toBe('JACK');
+ store.name = 'Ed';
+ expect(store.upperCaseName).toBe('ED');
+ });
+});
diff --git a/packages/inula-adapter/tests/pinia/pinia.state.test.ts b/packages/inula-adapter/tests/pinia/pinia.state.test.ts
new file mode 100644
index 000000000..8e8a64b59
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.state.test.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { beforeEach, describe, it, vi, expect } from 'vitest';
+import { createPinia, defineStore } from '../../src/pinia/pinia';
+import { vueReactive } from 'openinula';
+
+const { watch, computed, ref, reactive, nextTick } = vueReactive;
+
+let id = 0;
+
+function createStore() {
+ return defineStore(String(id++), {
+ state: () => ({
+ name: 'Eduardo',
+ counter: 0,
+ nested: { n: 0 },
+ }),
+ actions: {
+ increment(state, amount) {
+ this.counter += amount;
+ },
+ },
+ getters: {
+ upperCased() {
+ return this.name.toUpperCase();
+ },
+ },
+ });
+}
+
+describe('pinia state', () => {
+ let useStore = createStore();
+
+ beforeEach(() => {
+ useStore = createStore();
+ });
+
+ it('can directly access state at the store level', () => {
+ const store = useStore();
+ expect(store.name).toBe('Eduardo');
+ store.name = 'Ed';
+ expect(store.name).toBe('Ed');
+ });
+
+ it('state is reactive', () => {
+ const store = useStore();
+ const upperCased = computed(() => store.name.toUpperCase());
+ expect(upperCased.value).toBe('EDUARDO');
+ store.name = 'Ed';
+ expect(upperCased.value).toBe('ED');
+ });
+
+ it('can be set on store', () => {
+ const pinia = createPinia();
+ const store = useStore(pinia);
+
+ store.name = 'a';
+
+ expect(store.name).toBe('a');
+ expect(store.$state.name).toBe('a');
+ });
+
+ it('can be set on store.$state', () => {
+ const pinia = createPinia();
+ const store = useStore(pinia);
+
+ store.$state.name = 'a';
+
+ expect(store.name).toBe('a');
+ expect(store.$state.name).toBe('a');
+ });
+
+ it('can be nested set on store', () => {
+ const pinia = createPinia();
+ const store = useStore(pinia);
+
+ store.nested.n = 3;
+
+ expect(store.nested.n).toBe(3);
+ expect(store.$state.nested.n).toBe(3);
+ });
+
+ it('can be nested set on store.$state', () => {
+ const pinia = createPinia();
+ const store = useStore(pinia);
+
+ store.$state.nested.n = 3;
+
+ expect(store.nested.n).toBe(3);
+ expect(store.$state.nested.n).toBe(3);
+ });
+
+ it('state can be watched', async () => {
+ const store = useStore();
+ const spy = vi.fn();
+ watch(() => store.name, spy);
+ expect(spy).not.toHaveBeenCalled();
+ store.name = 'Ed';
+ await nextTick();
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('state can be watched when a ref is given', async () => {
+ const store = useStore();
+ const spy = vi.fn();
+ watch(() => store.name, spy);
+ expect(spy).not.toHaveBeenCalled();
+ const nameRef = ref('Ed');
+ // @ts-expect-error
+ store.$state.name = nameRef;
+ await nextTick();
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('can be given a ref', () => {
+ const pinia = createPinia();
+ const store = useStore(pinia);
+
+ // @ts-expect-error
+ store.$state.name = ref('Ed');
+
+ expect(store.name).toBe('Ed');
+ expect(store.$state.name).toBe('Ed');
+
+ store.name = 'Other';
+ expect(store.name).toBe('Other');
+ expect(store.$state.name).toBe('Other');
+ });
+});
diff --git a/packages/inula-adapter/tests/pinia/pinia.store.test.ts b/packages/inula-adapter/tests/pinia/pinia.store.test.ts
new file mode 100644
index 000000000..cf936c186
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.store.test.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { beforeEach, describe, it, vi, expect } from 'vitest';
+import { defineStore } from '../../src/pinia/pinia';
+import { vueReactive } from 'openinula';
+
+const { watch, nextTick } = vueReactive;
+
+let id = 0;
+function createStore() {
+ return defineStore({
+ id: String(id++),
+ state: () => ({
+ a: true,
+ nested: {
+ foo: 'foo',
+ a: { b: 'string' },
+ },
+ }),
+ });
+}
+
+describe('pinia state', () => {
+ let useStore = createStore();
+
+ beforeEach(() => {
+ useStore = createStore();
+ });
+
+ it('reuses a store', () => {
+ const useStore = defineStore({ id: String(id++) });
+ expect(useStore()).toBe(useStore());
+ });
+
+ it('works with id as first argument', () => {
+ const useStore = defineStore(String(id++), {
+ state: () => ({
+ a: true,
+ nested: {
+ foo: 'foo',
+ a: { b: 'string' },
+ },
+ }),
+ });
+ expect(useStore()).toBe(useStore());
+ const useStoreEmpty = defineStore(String(id++), {});
+ expect(useStoreEmpty()).toBe(useStoreEmpty());
+ });
+
+ it('sets the initial state', () => {
+ const store = useStore();
+ expect(store.$state).toEqual({
+ a: true,
+ nested: {
+ foo: 'foo',
+ a: { b: 'string' },
+ },
+ });
+ });
+
+ it.skip('can replace its state', () => {
+ const store = useStore();
+ const spy = vi.fn();
+ watch(() => store.a, spy);
+ expect(store.a).toBe(true);
+
+ expect(spy).toHaveBeenCalledTimes(0);
+ store.$state = {
+ a: false,
+ nested: {
+ foo: 'bar',
+ a: {
+ b: 'hey',
+ },
+ },
+ };
+ expect(spy).toHaveBeenCalledTimes(1);
+
+ expect(store.$state).toEqual({
+ a: false,
+ nested: {
+ foo: 'bar',
+ a: { b: 'hey' },
+ },
+ });
+ });
+
+ it('can be $unsubscribe', async () => {
+ const useStore = defineStore({
+ id: 'main',
+ state: () => ({ n: 0 }),
+ });
+
+ const store = useStore();
+ const spy = vi.fn();
+
+ store.$subscribe(spy);
+ store.$state.n++;
+ await nextTick();
+ expect(spy).toHaveBeenCalledTimes(1);
+
+ expect(useStore()).toBe(store);
+ store.$unsubscribe(spy);
+ store.$state.n++;
+ await nextTick();
+
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/packages/inula-adapter/tests/pinia/pinia.storeSetup.test.ts b/packages/inula-adapter/tests/pinia/pinia.storeSetup.test.ts
new file mode 100644
index 000000000..319dc2b0d
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.storeSetup.test.ts
@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { beforeEach, describe, it, vi, expect } from 'vitest';
+import { defineStore } from '../../src/pinia/pinia';
+import { vueReactive } from 'openinula';
+
+const { ref, watch, computed, nextTick } = vueReactive;
+
+function expectType(_value: T): void {}
+
+describe('store with setup syntax', () => {
+ function mainFn() {
+ const name = ref('Eduardo');
+ const counter = ref(0);
+
+ function increment(amount = 1) {
+ counter.value += amount;
+ }
+
+ const double = computed(() => counter.value * 2);
+
+ return { name, counter, increment, double };
+ }
+
+ let id = 0;
+
+ function createStore() {
+ return defineStore(String(id++), mainFn);
+ }
+
+ let useStore = createStore();
+
+ beforeEach(() => {
+ useStore = createStore();
+ });
+
+ it('should extract the $state', () => {
+ const store = useStore();
+ expectType<{ name: string; counter: number }>(store.$state);
+ expect(store.$state).toEqual({ name: 'Eduardo', counter: 0 });
+ expect(store.name).toBe('Eduardo');
+ expect(store.counter).toBe(0);
+ expect(store.double).toBe(0);
+ store.increment();
+ expect(store.counter).toBe(1);
+ expect(store.double).toBe(2);
+ expect(store.$state).toEqual({ name: 'Eduardo', counter: 1 });
+ expect(store.$state).not.toHaveProperty('double');
+ expect(store.$state).not.toHaveProperty('increment');
+ });
+
+ it('can store a function', () => {
+ const store = defineStore(String(id++), () => {
+ const fn = ref(() => {});
+
+ function action() {}
+
+ return { fn, action };
+ })();
+ expectType<{ fn: () => void }>(store.$state);
+ expect(store.$state).toEqual({ fn: expect.any(Function) });
+ expect(store.fn).toEqual(expect.any(Function));
+ store.action();
+ });
+
+ it('can directly access state at the store level', () => {
+ const store = useStore();
+
+ expect(store.name).toBe('Eduardo');
+ store.name = 'Ed';
+ expect(store.name).toBe('Ed');
+ });
+
+ it('state is reactive', () => {
+ const store = useStore();
+ const upperCased = computed(() => store.name.toUpperCase());
+ expect(upperCased.value).toBe('EDUARDO');
+ store.name = 'Ed';
+ expect(upperCased.value).toBe('ED');
+ });
+
+ it('state can be watched', async () => {
+ const store = useStore();
+ const spy = vi.fn();
+ watch(() => store.name, spy);
+ expect(spy).not.toHaveBeenCalled();
+ store.name = 'Ed';
+ await nextTick();
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('state refs can be watched', async () => {
+ const store = useStore();
+ const spy = vi.fn();
+ watch(() => store.name, spy);
+ expect(spy).not.toHaveBeenCalled();
+ const nameRef = ref('Ed');
+ store.name = nameRef;
+ await nextTick();
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('unwraps refs', () => {
+ const name = ref('Eduardo');
+ const counter = ref(0);
+ const double = computed(() => {
+ return counter.value * 2;
+ });
+
+ // const pinia = createPinia();
+ // setActivePinia(pinia);
+ const useStore = defineStore({
+ id: String(id++),
+ state: () => ({
+ name,
+ counter,
+ double,
+ }),
+ });
+
+ const store = useStore();
+
+ expect(store.name).toBe('Eduardo');
+ expect(store.$state.name).toBe('Eduardo');
+ expect(store.$state).toEqual({
+ name: 'Eduardo',
+ counter: 0,
+ double: 0,
+ });
+
+ name.value = 'Ed';
+ expect(store.name).toBe('Ed');
+ expect(store.$state.name).toBe('Ed');
+
+ store.$state.name = 'Edu';
+ expect(store.name).toBe('Edu');
+
+ // store.$patch({ counter: 2 });
+ store.counter = 2;
+ expect(store.counter).toBe(2);
+ expect(counter.value).toBe(2);
+ });
+});
diff --git a/packages/inula-adapter/tests/pinia/pinia.storeToRefs.test.ts b/packages/inula-adapter/tests/pinia/pinia.storeToRefs.test.ts
new file mode 100644
index 000000000..e2c450c39
--- /dev/null
+++ b/packages/inula-adapter/tests/pinia/pinia.storeToRefs.test.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { beforeEach, describe, it, vi, expect } from 'vitest';
+import { defineStore, storeToRefs } from '../../src/pinia/pinia';
+import { vueReactive } from 'openinula';
+
+const { ref, computed, reactive } = vueReactive;
+
+let id = 0;
+describe('storeToRefs', () => {
+ beforeEach(() => {});
+
+ function objectOfRefs>(o: O) {
+ return Object.keys(o).reduce((newO, key) => {
+ // @ts-expect-error: we only need to match
+ newO[key] = expect.objectContaining({ value: o[key] });
+ return newO;
+ }, {});
+ }
+
+ it('empty state', () => {
+ expect(storeToRefs(defineStore(String(id++), {})())).toEqual({});
+ expect(storeToRefs(defineStore({ id: String(id++) })())).toEqual({});
+ });
+
+ it('plain values', () => {
+ const store = defineStore(String(id++), {
+ state: () => ({ a: null as null | undefined, b: false, c: 1, d: 'd' }),
+ })();
+
+ const { a, b, c, d } = storeToRefs(store);
+
+ expect(a.value).toBe(null);
+ expect(b.value).toBe(false);
+ expect(c.value).toBe(1);
+ expect(d.value).toBe('d');
+
+ a.value = undefined;
+ expect(a.value).toBe(undefined);
+
+ b.value = true;
+ expect(b.value).toBe(true);
+
+ c.value = 2;
+ expect(c.value).toBe(2);
+
+ d.value = 'e';
+ expect(d.value).toBe('e');
+ });
+
+ it('setup store', () => {
+ const store = defineStore(String(id++), () => {
+ return {
+ a: ref(null),
+ b: ref(false),
+ c: ref(1),
+ d: ref('d'),
+ r: reactive({ n: 1 }),
+ };
+ })();
+
+ const { a, b, c, d, r } = storeToRefs(store);
+
+ expect(a.value).toBe(null);
+ expect(b.value).toBe(false);
+ expect(c.value).toBe(1);
+ expect(d.value).toBe('d');
+ expect(r.value).toEqual({ n: 1 });
+
+ a.value = undefined;
+ expect(a.value).toBe(undefined);
+
+ b.value = true;
+ expect(b.value).toBe(true);
+
+ c.value = 2;
+ expect(c.value).toBe(2);
+
+ d.value = 'e';
+ expect(d.value).toBe('e');
+
+ r.value.n++;
+ expect(r.value).toEqual({ n: 2 });
+ expect(store.r).toEqual({ n: 2 });
+ store.r.n++;
+ expect(r.value).toEqual({ n: 3 });
+ expect(store.r).toEqual({ n: 3 });
+ });
+
+ it('empty getters', () => {
+ expect(
+ storeToRefs(
+ defineStore(String(id++), {
+ state: () => ({ n: 0 }),
+ })()
+ )
+ ).toEqual(objectOfRefs({ n: 0 }));
+ expect(
+ storeToRefs(
+ defineStore(String(id++), () => {
+ return { n: ref(0) };
+ })()
+ )
+ ).toEqual(objectOfRefs({ n: 0 }));
+ });
+
+ it('contains getters', () => {
+ const refs = storeToRefs(
+ defineStore(String(id++), {
+ state: () => ({ n: 1 }),
+ getters: {
+ double: state => state.n * 2,
+ },
+ })()
+ );
+ expect(refs).toEqual(objectOfRefs({ n: 1, double: 2 }));
+
+ const setupRefs = storeToRefs(
+ defineStore(String(id++), () => {
+ const n = ref(1);
+ const double = computed(() => n.value * 2);
+ return { n, double };
+ })()
+ );
+
+ expect(setupRefs).toEqual(objectOfRefs({ n: 1, double: 2 }));
+ });
+});
diff --git a/packages/inula-adapter/tests/utils/globalSetup.js b/packages/inula-adapter/tests/utils/globalSetup.js
new file mode 100644
index 000000000..090ca6d83
--- /dev/null
+++ b/packages/inula-adapter/tests/utils/globalSetup.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { beforeEach, afterEach } from 'vitest';
+
+beforeEach(() => {
+ // 创建一个 DOM 元素作为渲染目标
+ global.container = document.createElement('div');
+ document.body.appendChild(global.container);
+});
+
+afterEach(() => {
+ global.container.remove();
+ global.container = null;
+});
diff --git a/packages/inula-adapter/tests/utils/testingLibrary.js b/packages/inula-adapter/tests/utils/testingLibrary.js
new file mode 100644
index 000000000..ad4d99619
--- /dev/null
+++ b/packages/inula-adapter/tests/utils/testingLibrary.js
@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import { expect } from 'vitest';
+import { createApp } from '../../src/vue';
+
+// 简单的 render 函数
+export function render(component) {
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+
+ const app = createApp(component);
+ app.mount(container);
+
+ return { container, app };
+}
+
+// 简单的 screen 对象
+export const screen = {
+ getByText: text => {
+ const elements = Array.from(document.body.getElementsByTagName('*'));
+ for (const element of elements) {
+ if (element.textContent.includes(text)) {
+ return element;
+ }
+ }
+ throw new Error(`Unable to find an element with the text: ${text}`);
+ },
+ getByTestId: testId => {
+ const element = document.querySelector(`[data-testid="${testId}"]`);
+ if (!element) {
+ throw new Error(`Unable to find an element with the data-testid: ${testId}`);
+ }
+ return element;
+ },
+};
+
+// 添加自定义断言方法
+expect.extend({
+ toBeInTheDocument(received) {
+ const pass = received && document.body.contains(received);
+ if (pass) {
+ return {
+ message: () => `expected ${received} not to be in the document`,
+ pass: true,
+ };
+ } else {
+ return {
+ message: () => `expected ${received} to be in the document`,
+ pass: false,
+ };
+ }
+ },
+ toHaveTextContent(received, expected) {
+ const pass = received && received.textContent.includes(expected);
+ if (pass) {
+ return {
+ message: () => `expected ${received} not to have text content "${expected}"`,
+ pass: true,
+ };
+ } else {
+ return {
+ message: () => `expected ${received} to have text content "${expected}"`,
+ pass: false,
+ };
+ }
+ },
+});
diff --git a/packages/inula-adapter/tests/vue/attrs.test.tsx b/packages/inula-adapter/tests/vue/attrs.test.tsx
new file mode 100644
index 000000000..07bb063a3
--- /dev/null
+++ b/packages/inula-adapter/tests/vue/attrs.test.tsx
@@ -0,0 +1,370 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, it, vi, expect } from 'vitest';
+import { render, act, vueReactive, useState, Component, memo, forwardRef } from 'openinula';
+import '../utils/globalSetup';
+import { createApp, useReactiveProps } from '../../src/vue';
+
+describe('$attrs: style and css inheritance', () => {
+ it('Should inherit css', () => {
+ const Parent = rawProps => {
+ useReactiveProps(rawProps, {});
+ return ;
+ };
+
+ const App = () => {
+ return 
SynchronizedData'
+ );
+
+ act(() => {
+ _options.uploadStatus = 'FAILURE';
+ });
+
+ expect(_ref.current.innerHTML).toBe(
+ '
child
+ *
+ {children}
+
+ }
+ {data.component}
;
+ })}
+ {shouldInclude ? [] : {searchComponent}
}
+
+ );
+};
diff --git a/packages/inula-adapter/src/vue/lifecycle.ts b/packages/inula-adapter/src/vue/lifecycle.ts
new file mode 100644
index 000000000..6e226cf30
--- /dev/null
+++ b/packages/inula-adapter/src/vue/lifecycle.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+import { useEffect, useLayoutEffect, useRef } from 'openinula';
+import { FN } from './types';
+
+// 用于存储组件是否已挂载的状态
+export const useIsMounted = () => {
+ const isMounted = useRef(false);
+ useEffect(() => {
+ isMounted.current = true;
+ return () => {
+ isMounted.current = false;
+ };
+ }, []);
+ return isMounted.current;
+};
+
+export const onBeforeMount = (fn: FN) => {
+ const isMounted = useIsMounted();
+ if (!isMounted) {
+ fn?.();
+ }
+};
+
+export function onMounted(fn: FN) {
+ useEffect(() => {
+ fn?.();
+ }, []);
+}
+
+export function onBeforeUpdate(fn: FN) {
+ useEffect(() => {
+ fn?.();
+ });
+}
+
+export function onUpdated(fn: FN) {
+ useEffect(() => {
+ fn?.();
+ });
+}
+
+export const onBeforeUnmount = (fn: FN) => {
+ useLayoutEffect(() => {
+ return () => {
+ fn?.();
+ };
+ }, []);
+};
+
+export function onUnmounted(fn: FN) {
+ useEffect(() => {
+ return () => {
+ fn?.();
+ };
+ }, []);
+}
diff --git a/packages/inula-adapter/src/vue/props.tsx b/packages/inula-adapter/src/vue/props.tsx
new file mode 100644
index 000000000..2ef0103eb
--- /dev/null
+++ b/packages/inula-adapter/src/vue/props.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2020 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+import Inula, { vueReactive, useRef, ReactiveRet } from 'openinula';
+import useScoped from './useScoped';
+
+const { shallowReactive } = vueReactive;
+
+interface Data {
+ [key: string]: any;
+}
+
+interface Option {
+ default?: any | (() => any);
+ type?: any;
+}
+
+interface Options {
+ [key: string]: Option;
+}
+
+/**
+ * 自定义 Hook，用于处理响应式属性
+ * @param rawProps 原始属性对象或 null
+ * @param options 可选的配置对象，用于设置默认值
+ * @returns 响应式处理后的属性对象
+ */
+export function useReactiveProps(rawProps: Data | null, options: Options = {}): ReactiveRet {
+ // 使用 useRef 来存储响应式对象，确保在重渲染时保持引用
+ const objRef = useRef
+ child2
+
+
+ * 例如 最底层节点内容如下，也返回null
+ * <>
+
+ grandchild
+
+
+ grandchild2
+
+
+ * 例如 找到最底层节点内容如下，返回xxxx对应的vNode
+ * <>
+
+ grandchild
+
+
+ * @param vNode - 虚拟节点
+ * @returns 找到的第一个没有兄弟节点的DomComponent，如果找到最底层或者中途遇到有兄弟节点的vNode，则返回null
+ */
+function getFirstSingleDomVnode(vnode: VNode): VNode | null {
+ let node = vnode;
+ while (node.child) {
+ // 遇到了有兄弟节点的child，则返回null
+ if (node.child.next) {
+ return null;
+ }
+
+ // 找到了DomComponent，则把它返回
+ if (node.child.tag === 'DomComponent') {
+ return node.child;
+ }
+ node = node.child;
+ }
+ return null;
+}
+
+/**
+ * 判断是否应该跳过为元素设置class、style、hash、id属性
+ *
+ * 通过调用getFirstSingleDomVnode，找最底层的vNode，如果能找不到或者中途遇到next不为空的节点，
+ * 则getFirstSingleDomVnode结果为null，
+ * 则说明当前节点props中的属性不应该在下层dom上生效
+ *
+ * @param vNode - 虚拟节点
+ * @returns 如果应该跳过则返回 true，否则返回 false
+ */
+function shouldSkipSetAttrToEl(vNode: VNode): boolean {
+ return getFirstSingleDomVnode(vNode) === null;
+}
+
+function useScoped(): void {
+ const instance: Instance = useInstance();
+ const preClass = useRef
+ grandchild2
+
+
+
+ );
+ };
+
+ const Child = rawProps => {
+ useReactiveProps(rawProps, {});
+ return + Inner element +
+
+
+ );
+ }
+
+ const app = createApp(
+
+ {type === 'A' &&
+ {type === 'B' &&
+ {type === 'C' &&
+
+
+
+
+ A
}B
}C
}Not A/B/C
+ A
');
+
+ act(() => {
+ _updateType('B');
+ });
+
+ expect(_ref.current.innerHTML).toBe('B
');
+
+ act(() => {
+ _updateType('XX');
+ });
+
+ expect(_ref.current.innerHTML).toBe('Not A/B/C
');
+ });
+
+ it('Should ConditionalRenderer work with reactive data', () => {
+ let _options;
+ let _ref;
+
+ function Comp() {
+ const ref = useRef();
+ _ref = ref;
+
+ const options = useReactive({
+ fileName: '',
+ fileNames: [],
+ uploadStatus: '',
+ progress: 0,
+ });
+ _options = options;
+
+ const $t = val => {
+ return val;
+ };
+
+ return (
+
+
+
+ {!options.fileName && !options.fileNames && }
+
+
+ {options.uploadStatus === 'COMPLETED' && options.progress === 100 && (
+
+ = 0}>
+ {options.uploadStatus === 'UPLOADING' && options.progress < 100 && options.progress >= 0 && (
+
+
+ {options.progress === 100 && options.uploadStatus === 'FAILURE' && (
+
+
+
+
+
+ );
+ }
+
+ const app = createApp(
+
+ {$t('SynchronizedData')}
+
+ )}
+
+ {$t('SynchronizedData')}
+
+
+ )}
+
+
+ {options.progress + '%'}
+
+
+
+
+ {$t('Fail')}
+
+ {$t('viewDetails')}
+
+
+
+ )}
+ Other
+ Other
');
+
+ act(() => {
+ _options.uploadStatus = 'COMPLETED';
+ _options.progress = 100;
+ });
+
+ expect(_ref.current.innerHTML).toBe(
+ 'SynchronizedDataFailviewDetails
'
+ );
+
+ act(() => {
+ _options.uploadStatus = 'XXX';
+ });
+
+ expect(_ref.current.innerHTML).toBe('Other
');
+ });
+
+ it('Should ConditionalRenderer work with ref array', () => {
+ let _ref;
+
+ function Comp() {
+ const ref = useRef();
+ _ref = ref;
+
+ const item = useReactive({
+ value: 40,
+ label: 'AGG',
+ disabled: true,
+ tips: true,
+ });
+
+ return (
+
+
+
+ {/*即使condition中有了”item.formater“，还是必须增加"item.formater &&"，因为JSX会被直接执行了，可能导致错误。*/}
+ {item.formater &&
+
+ {item.label &&
+
+
+
+
+ );
+ }
+
+ const app = createApp({item.formater(item)}
}
+ {item.label}
}
+ {item.value}
+
+ {showPopup && (
+ // Vue写法：(null);
+
+ const handleClick = () => {
+ if (childRef.value) {
+ childRef.value.increment();
+ }
+ };
+
+ return (
+ (null);
+
+ const handleUpdate = () => {
+ if (childRef.value) {
+ childRef.value.updateName();
+ childRef.value.count.value++;
+ }
+ };
+
+ return (
+
+
+
+ )}
+
+ );
+ }
+
+ const app = createApp(child
+ 点击外部关闭弹窗
+ 弹窗
;
+ }
+
+ function Comp() {
+ const [showPopup, setShowPopup] = useState(true);
+ const [directiveValue, setDirectiveValue] = useState(1);
+
+ const registerDirectives = {
+ 'click-outside': {
+ mounted(el, binding) {
+ fnMount();
+ },
+ updated(el, binding) {
+ if (binding.value !== binding.oldValue) {
+ expect(binding.oldValue).toBe(1);
+ expect(binding.value).toBe(2);
+ }
+
+ fnUpdated();
+ },
+ unmounted(el) {
+ fnUnmounted();
+ },
+ },
+ focus: {
+ bind(el, binding) {
+ fnBind();
+ },
+ },
+ };
+ const closePopup = () => {
+ setShowPopup(false);
+ fnClose();
+ };
+
+ const updateValue = () => {
+ setDirectiveValue(2);
+ };
+
+ return (
+
+ {showPopup && (
+ // Vue写法：
+
+ Hello, DOM elements!
+
+
+ );
+
+ const divElement = screen.getByTestId('dynamic-div');
+ expect(divElement.tagName).toBe('DIV');
+
+ const spanElement = screen.getByTestId('dynamic-span');
+ expect(spanElement.tagName).toBe('SPAN');
+
+ // @ts-ignore
+ expect(spanElement).toHaveTextContent('Hello, DOM elements!');
+ });
+});
diff --git a/packages/inula-adapter/tests/vue/globalAPI.test.tsx b/packages/inula-adapter/tests/vue/globalAPI.test.tsx
new file mode 100644
index 000000000..90b6a869e
--- /dev/null
+++ b/packages/inula-adapter/tests/vue/globalAPI.test.tsx
@@ -0,0 +1,368 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import {
+ createApp,
+ defineAsyncComponent,
+ GlobalComponent,
+ Plugin,
+ registerComponent,
+ useGlobalProperties,
+ useProvide,
+} from '../../src/vue/globalAPI';
+import { createStore, registerStore, useStore } from '../../src/vuex';
+import { act, lazy, Suspense } from 'openinula';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import '../utils/globalSetup';
+
+describe('api: createApp', () => {
+ beforeEach(() => {
+ const store = createStore({
+ modules: {
+ foo: {
+ state: { counter: 1 },
+ mutations: {
+ inc: state => {
+ state.counter++;
+ },
+ },
+ actions: { inc: ({ commit }) => commit('inc') },
+ getters: { double: state => state.counter * 2 },
+ },
+ },
+ });
+ registerStore(store);
+ });
+
+ it('mount', () => {
+ const Comp = () => {
+ const store = useStore();
+
+ return (
+ <>
+
+ );
+ };
+
+ const app = createApp(
+
+
+ )}
+
+
+
+ );
+ }
+
+ const app = createApp(child
+
+ 弹窗
+
+ );
+ }
+
+ function Comp() {
+ const [showPopup, setShowPopup] = useState(true);
+
+ const closePopup = () => {
+ setShowPopup(!showPopup);
+ };
+
+ return (
+
+ {/* Vue写法：*/}
+
+
+
+
+
+ );
+ }
+
+ const app = createApp(child
+ 弹窗
'
+ );
+
+ act(() => {
+ global.container.querySelector('#close')!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ });
+
+ expect(document.querySelector('#popup-div')!.outerHTML).toBe(
+ ''
+ );
+ });
+});
diff --git a/packages/inula-adapter/tests/vue/dynamicComponent.test.tsx b/packages/inula-adapter/tests/vue/dynamicComponent.test.tsx
new file mode 100644
index 000000000..024460729
--- /dev/null
+++ b/packages/inula-adapter/tests/vue/dynamicComponent.test.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { DynamicComponent } from '../../src/vue/dynamicComponent';
+import { render, screen } from '../utils/testingLibrary';
+import { createApp } from '../../src/vue';
+
+describe('Dynamic Component', () => {
+ it('Should work with Custom Component', () => {
+ const CustomComponent = ({ text }) => {text}
;
+ const components = {
+ CustomComponent,
+ };
+
+ render({text}
;
+
+ const app = createApp(
+ counter: {store.state.foo.counter}
+
+
+ double: {store.getters.double}
+
+
+
+ );
+ };
+
+ const app = createApp(Comp);
+ app.mount(global.container);
+
+ expect(document.querySelector('#counter')!.innerHTML).toBe('1');
+ expect(document.querySelector('#double')!.innerHTML).toBe('2');
+
+ act(() => {
+ global.container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+ });
+
+ expect(document.querySelector('#counter')!.innerHTML).toBe('2');
+ expect(document.querySelector('#double')!.innerHTML).toBe('4');
+ });
+
+ it('unmount', () => {
+ const Comp = () => {
+ const store = useStore();
+
+ return (
+ <>
+
+ counter: {store.state.foo.counter}
+
+
+ double: {store.getters.double}
+
+
+
+ );
+ };
+
+ const app = createApp(
+
+ {foo},{bar},{baz}
+
+
+ );
+ };
+
+ const app = createApp(
+
+ {foo},{bar}
+
+
+ );
+ };
+
+ const app = createApp(
+
+ {foo}, {bar}
+
+
+ );
+ };
+
+ const app = createApp(child
;
+ };
+ const Child2 = () => {
+ return child2
;
+ };
+
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp(child
;
+ };
+ const Child2 = () => {
+ return child2
;
+ };
+
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp(
+ {foo}
+
+ );
+ };
+
+ const Comp2 = () => {
+ const foo = useGlobalProperties('foo');
+ return (
+
+ {foo}
+
+ );
+ };
+
+ const div1 = document.createElement('div');
+ document.body.appendChild(div1);
+ const app1 = createApp({props.text}
;
+ }
+
+ const Comp = () => {
+ return (
+
+ Loading...
}>
+ {props.text}
;
+ }
+
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp(
+
+ );
+ };
+ const ProvB = () => {
+ provide('val', 'B');
+ return (
+
+
+ );
+ };
+ // inj compoenent injects provided context value defined in ancestor element
+ const Inj = () => {
+ const val = inject('val');
+ return {val}
;
+ };
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp({val}
;
+ };
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp(
+
+ );
+ };
+ const Inj = () => {
+ const val = inject(contextKey);
+ return {val}
;
+ };
+ const Comp = () => {
+ return (
+
+
+ );
+ };
+
+ const app = createApp({count}
;
+ };
+
+ const CompA = () => {
+ return A
;
+ };
+
+ const CompB = () => {
+ return B
;
+ };
+
+ const CompC = () => {
+ return C
;
+ };
+
+ it('basic usage', async () => {
+ const Comp = () => {
+ const [display, setDisplay] = useState(true);
+ toggle = () => setDisplay(!display);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(0
');
+ increment();
+ increment();
+ increment();
+ expect(document.querySelector('#app')?.innerHTML).toBe('3
');
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'B
'
+ );
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ '3
'
+ );
+ });
+
+ it('limits max instances', async () => {
+ const Comp = () => {
+ const componentLookup = [CompCount, CompB, CompC];
+
+ const [display, setDisplay] = useState(0);
+ toggle = () => setDisplay((display + 1) % 3);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(0
');
+ increment();
+ increment();
+ increment();
+ expect(document.querySelector('#app')?.innerHTML).toBe('3
');
+
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'B
'
+ );
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'C
'
+ );
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ '0
'
+ );
+ });
+
+ it('include ', async () => {
+ const Comp = () => {
+ const componentLookup = [CompA, CompB, CompC];
+
+ const [display, setDisplay] = useState(0);
+ toggle = () => setDisplay((display + 1) % 3);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(A
');
+
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'B
'
+ );
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'C
'
+ );
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'A
'
+ );
+ });
+
+ it('exclude ', async () => {
+ const Comp = () => {
+ const componentLookup = [CompA, CompB, CompC];
+
+ const [display, setDisplay] = useState(0);
+ toggle = () => setDisplay((display + 1) % 3);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(A
');
+
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe('B
');
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe('C
');
+ act(() => {
+ toggle();
+ });
+ expect(document.querySelector('#app')?.innerHTML).toBe(
+ 'A
'
+ );
+ });
+
+ it('activated/deactivated ', async () => {
+ let activationCounter = 0;
+ let deactivationCounter = 0;
+ const CompActivate = () => {
+ onActivated(() => {
+ activationCounter++;
+ });
+ onDeactivated(() => {
+ deactivationCounter++;
+ });
+ return {activationCounter}
;
+ };
+
+ const Comp = () => {
+ const [display, setDisplay] = useState(false);
+ toggle = () => setDisplay(!display);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp({count}
;
+ };
+
+ const CompA = () => {
+ return A
;
+ };
+
+ const CompB = () => {
+ return B
;
+ };
+
+ const CompC = () => {
+ return C
;
+ };
+
+ it('basic usage', async () => {
+ const Comp = () => {
+ const [display, setDisplay] = useState(true);
+ toggle = () => setDisplay(!display);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(0
3
B
3
+
+
+
+ );
+ };
+
+ const app = createApp(0
3
B
C
0
+
+
+
+ );
+ };
+
+ const app = createApp(A
B
C
A
+
+
+
+ );
+ };
+
+ const app = createApp(A
B
C
A
{activationCounter}
;
+ };
+
+ const Comp = () => {
+ const [display, setDisplay] = useState(false);
+ toggle = () => setDisplay(!display);
+
+ return (
+
+
+
+
+ );
+ };
+
+ const app = createApp(
+
+
+ );
+ };
+
+ const Child = rawProps => {
+ const props = useReactiveProps(rawProps);
+ const countComputed = useComputed(() => {
+ return props.count;
+ });
+
+ return (
+ Parent Component
+ +
+
+ );
+ };
+
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ render(Child Component
+{countComputed.value}
+
+
+
+ );
+ };
+
+ const Child = rawProps => {
+ const props = useReactiveProps(rawProps, {
+ name: { default: () => 'child1' },
+ fn: {
+ type: Function,
+ default: () => {
+ return false;
+ },
+ },
+ });
+ const data = useReactive({
+ items: [],
+ });
+
+ useWatch(
+ () => props.items,
+ () => {
+ data.items = props.items;
+ },
+ { deep: true }
+ );
+
+ useEffect(() => {
+ data.items = props.items;
+ }, []);
+
+ return (
+ Parent Component
+ + +
+
+ );
+ };
+
+ const container = document.createElement('div');
+ document.body.appendChild(container);
+ act(() => {
+ render({props.name}
+-
+ {data.items.map(item => (
+
- {item} + ))} +
+
+ );
+ }
+
+ const Child = rawProps => {
+ const props = useReactiveProps(rawProps);
+
+ const len = props.pagination.length;
+ return (
+
+
+ );
+ };
+
+ const container = document.createElement('div');
+ act(() => {
+ render({len}
+ Count: {count.value}
;
+ };
+
+ const App = () => {
+ const childRef = useReference
+ {
+ childRef.value = useInstance(val);
+ }}
+ />
+
+
+ );
+ };
+
+ document.body.appendChild(global.container);
+ render(
+ Count: {count.value} - Name: {name.value}
+
+ );
+ };
+
+ const App = () => {
+ const childRef = useReference
+ {
+ childRef.value = useInstance(val);
+ }}
+ />
+
+
+ );
+ };
+
+ document.body.appendChild(global.container);
+ render(
+ counter: {store.state.foo.counter}
+
+
+ double: {store.getters.double}
+
+
+
+ );
+ };
+
+ render(
+ counter: {counter.value}
+
+
+ double: {double.value}
+
+
+
+ );
+ };
+
+ render(