From e8c30dd32b2c0ca86785390445f611bdee74fd5a Mon Sep 17 00:00:00 2001 From: c00872571 Date: Fri, 11 Jul 2025 11:22:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Einula-adapter?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E9=80=82=E9=85=8Dvue=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + packages/inula-adapter/.gitignore | 5 + packages/inula-adapter/.prettierrc.js | 32 + packages/inula-adapter/README.md | 7 + packages/inula-adapter/babel.config.js | 49 ++ .../inula-adapter/docs/README_global_api.md | 267 ++++++++ packages/inula-adapter/docs/README_pinia.md | 101 +++ packages/inula-adapter/docs/README_vue.md | 10 + packages/inula-adapter/docs/README_vuex.md | 188 +++++ .../examples/$children/FruitItem.jsx | 25 + .../examples/$children/FruitItem.vue | 14 + .../examples/$children/FruitList.jsx | 28 + .../examples/$children/FruitList.vue | 18 + .../examples/$el/TypewriterInput.jsx | 18 + .../examples/$el/TypewriterInput.vue | 19 + .../examples/$forceUpdate/clock.jsx | 15 + .../examples/$forceUpdate/clock.vue | 9 + .../examples/$nextTick/nextTick.jsx | 18 + .../examples/$nextTick/nextTick.vue | 12 + .../examples/$parent/list-item.jsx | 25 + .../examples/$parent/list-item.vue | 19 + .../inula-adapter/examples/$parent/list.jsx | 27 + .../inula-adapter/examples/$parent/list.vue | 27 + .../inula-adapter/examples/$refs/refresh.jsx | 24 + .../inula-adapter/examples/$refs/refresh.vue | 16 + .../inula-adapter/examples/$root/root.jsx | 13 + .../inula-adapter/examples/$root/root.vue | 14 + .../examples/$root/themeChanger.jsx | 19 + .../examples/$root/themeChanger.vue | 11 + .../inula-adapter/examples/$set/fruits.jsx | 60 ++ .../inula-adapter/examples/$set/fruits.vue | 29 + .../examples/$t - plugins/App.jsx | 7 + .../examples/$t - plugins/App.vue | 7 + .../examples/$t - plugins/i18n.js | 18 + .../examples/$t - plugins/main.js | 7 + .../examples/custom functions/main.js | 21 + .../examples/emitter/emitter.jsx | 16 + .../examples/emitter/emitter.vue | 9 + .../examples/emitter/listener.jsx | 5 + .../examples/emitter/listener.vue | 7 + packages/inula-adapter/npm/pinia/package.json | 5 + packages/inula-adapter/npm/vuex/package.json | 5 + packages/inula-adapter/package.json | 63 ++ packages/inula-adapter/scripts/build-types.js | 64 ++ .../inula-adapter/scripts/rollup.config.js | 113 ++++ packages/inula-adapter/src/pinia/index.ts | 16 + packages/inula-adapter/src/pinia/pinia.ts | 208 ++++++ packages/inula-adapter/src/pinia/types.ts | 103 +++ packages/inula-adapter/src/vue/Teleport.ts | 16 + packages/inula-adapter/src/vue/compare.ts | 54 ++ packages/inula-adapter/src/vue/condition.tsx | 52 ++ packages/inula-adapter/src/vue/directive.tsx | 116 ++++ .../src/vue/dynamicComponent.tsx | 81 +++ packages/inula-adapter/src/vue/globalAPI.tsx | 336 +++++++++ packages/inula-adapter/src/vue/helper.tsx | 120 ++++ packages/inula-adapter/src/vue/index.ts | 28 + .../inula-adapter/src/vue/injectProvide.tsx | 29 + .../src/vue/keepAlive/context.ts | 3 + .../inula-adapter/src/vue/keepAlive/index.ts | 4 + .../src/vue/keepAlive/keepAlive.tsx | 112 +++ .../src/vue/keepAlive/keeper.tsx | 59 ++ .../src/vue/keepAlive/lifeCycleHooks.ts | 34 + .../inula-adapter/src/vue/keepAlivePro.tsx | 166 +++++ packages/inula-adapter/src/vue/lifecycle.ts | 69 ++ packages/inula-adapter/src/vue/props.tsx | 130 ++++ .../src/vue/semiControlledComponent.tsx | 115 ++++ packages/inula-adapter/src/vue/sfcAPI.tsx | 94 +++ packages/inula-adapter/src/vue/types.ts | 16 + packages/inula-adapter/src/vue/useScoped.ts | 195 ++++++ packages/inula-adapter/src/vue/vShow.ts | 38 ++ packages/inula-adapter/src/vuex/index.ts | 17 + packages/inula-adapter/src/vuex/maps.ts | 161 +++++ packages/inula-adapter/src/vuex/types.ts | 108 +++ packages/inula-adapter/src/vuex/vuex.ts | 346 ++++++++++ .../tests/pinia/pinia.actions.test.ts | 139 ++++ .../tests/pinia/pinia.getters.test.ts | 97 +++ .../tests/pinia/pinia.state.test.ts | 142 ++++ .../tests/pinia/pinia.store.test.ts | 122 ++++ .../tests/pinia/pinia.storeSetup.test.ts | 156 +++++ .../tests/pinia/pinia.storeToRefs.test.ts | 141 ++++ .../inula-adapter/tests/utils/globalSetup.js | 27 + .../tests/utils/testingLibrary.js | 81 +++ .../inula-adapter/tests/vue/attrs.test.tsx | 370 ++++++++++ .../tests/vue/condition.test.tsx | 208 ++++++ .../tests/vue/directive.test.tsx | 262 +++++++ .../tests/vue/dynamicComponent.test.tsx | 68 ++ .../tests/vue/globalAPI.test.tsx | 368 ++++++++++ .../tests/vue/injectProvide.test.tsx | 111 +++ .../tests/vue/keepAlive.test.tsx | 271 ++++++++ .../tests/vue/keepAlivePro.test.tsx | 263 +++++++ .../tests/vue/liftcycle.test.tsx | 191 ++++++ .../inula-adapter/tests/vue/props.test.tsx | 194 ++++++ .../inula-adapter/tests/vue/sfcAPI.test.tsx | 129 ++++ .../tests/vuex/vuex.component.test.tsx | 116 ++++ .../tests/vuex/vuex.maps.test.tsx | 640 ++++++++++++++++++ .../tests/vuex/vuex.modules.test.ts | 480 +++++++++++++ .../tests/vuex/vuex.store.test.ts | 343 ++++++++++ packages/inula-adapter/tsconfig.json | 35 + packages/inula-adapter/tsconfig.pinia.json | 10 + packages/inula-adapter/tsconfig.vue.json | 10 + packages/inula-adapter/tsconfig.vuex.json | 10 + packages/inula-adapter/vitest.config.ts | 32 + 102 files changed, 9309 insertions(+) create mode 100644 packages/inula-adapter/.gitignore create mode 100644 packages/inula-adapter/.prettierrc.js create mode 100644 packages/inula-adapter/README.md create mode 100644 packages/inula-adapter/babel.config.js create mode 100644 packages/inula-adapter/docs/README_global_api.md create mode 100644 packages/inula-adapter/docs/README_pinia.md create mode 100644 packages/inula-adapter/docs/README_vue.md create mode 100644 packages/inula-adapter/docs/README_vuex.md create mode 100644 packages/inula-adapter/examples/$children/FruitItem.jsx create mode 100644 packages/inula-adapter/examples/$children/FruitItem.vue create mode 100644 packages/inula-adapter/examples/$children/FruitList.jsx create mode 100644 packages/inula-adapter/examples/$children/FruitList.vue create mode 100644 packages/inula-adapter/examples/$el/TypewriterInput.jsx create mode 100644 packages/inula-adapter/examples/$el/TypewriterInput.vue create mode 100644 packages/inula-adapter/examples/$forceUpdate/clock.jsx create mode 100644 packages/inula-adapter/examples/$forceUpdate/clock.vue create mode 100644 packages/inula-adapter/examples/$nextTick/nextTick.jsx create mode 100644 packages/inula-adapter/examples/$nextTick/nextTick.vue create mode 100644 packages/inula-adapter/examples/$parent/list-item.jsx create mode 100644 packages/inula-adapter/examples/$parent/list-item.vue create mode 100644 packages/inula-adapter/examples/$parent/list.jsx create mode 100644 packages/inula-adapter/examples/$parent/list.vue create mode 100644 packages/inula-adapter/examples/$refs/refresh.jsx create mode 100644 packages/inula-adapter/examples/$refs/refresh.vue create mode 100644 packages/inula-adapter/examples/$root/root.jsx create mode 100644 packages/inula-adapter/examples/$root/root.vue create mode 100644 packages/inula-adapter/examples/$root/themeChanger.jsx create mode 100644 packages/inula-adapter/examples/$root/themeChanger.vue create mode 100644 packages/inula-adapter/examples/$set/fruits.jsx create mode 100644 packages/inula-adapter/examples/$set/fruits.vue create mode 100644 packages/inula-adapter/examples/$t - plugins/App.jsx create mode 100644 packages/inula-adapter/examples/$t - plugins/App.vue create mode 100644 packages/inula-adapter/examples/$t - plugins/i18n.js create mode 100644 packages/inula-adapter/examples/$t - plugins/main.js create mode 100644 packages/inula-adapter/examples/custom functions/main.js create mode 100644 packages/inula-adapter/examples/emitter/emitter.jsx create mode 100644 packages/inula-adapter/examples/emitter/emitter.vue create mode 100644 packages/inula-adapter/examples/emitter/listener.jsx create mode 100644 packages/inula-adapter/examples/emitter/listener.vue create mode 100644 packages/inula-adapter/npm/pinia/package.json create mode 100644 packages/inula-adapter/npm/vuex/package.json create mode 100644 packages/inula-adapter/package.json create mode 100644 packages/inula-adapter/scripts/build-types.js create mode 100644 packages/inula-adapter/scripts/rollup.config.js create mode 100644 packages/inula-adapter/src/pinia/index.ts create mode 100644 packages/inula-adapter/src/pinia/pinia.ts create mode 100644 packages/inula-adapter/src/pinia/types.ts create mode 100644 packages/inula-adapter/src/vue/Teleport.ts create mode 100644 packages/inula-adapter/src/vue/compare.ts create mode 100644 packages/inula-adapter/src/vue/condition.tsx create mode 100644 packages/inula-adapter/src/vue/directive.tsx create mode 100644 packages/inula-adapter/src/vue/dynamicComponent.tsx create mode 100644 packages/inula-adapter/src/vue/globalAPI.tsx create mode 100644 packages/inula-adapter/src/vue/helper.tsx create mode 100644 packages/inula-adapter/src/vue/index.ts create mode 100644 packages/inula-adapter/src/vue/injectProvide.tsx create mode 100644 packages/inula-adapter/src/vue/keepAlive/context.ts create mode 100644 packages/inula-adapter/src/vue/keepAlive/index.ts create mode 100644 packages/inula-adapter/src/vue/keepAlive/keepAlive.tsx create mode 100644 packages/inula-adapter/src/vue/keepAlive/keeper.tsx create mode 100644 packages/inula-adapter/src/vue/keepAlive/lifeCycleHooks.ts create mode 100644 packages/inula-adapter/src/vue/keepAlivePro.tsx create mode 100644 packages/inula-adapter/src/vue/lifecycle.ts create mode 100644 packages/inula-adapter/src/vue/props.tsx create mode 100644 packages/inula-adapter/src/vue/semiControlledComponent.tsx create mode 100644 packages/inula-adapter/src/vue/sfcAPI.tsx create mode 100644 packages/inula-adapter/src/vue/types.ts create mode 100644 packages/inula-adapter/src/vue/useScoped.ts create mode 100644 packages/inula-adapter/src/vue/vShow.ts create mode 100644 packages/inula-adapter/src/vuex/index.ts create mode 100644 packages/inula-adapter/src/vuex/maps.ts create mode 100644 packages/inula-adapter/src/vuex/types.ts create mode 100644 packages/inula-adapter/src/vuex/vuex.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.actions.test.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.getters.test.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.state.test.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.store.test.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.storeSetup.test.ts create mode 100644 packages/inula-adapter/tests/pinia/pinia.storeToRefs.test.ts create mode 100644 packages/inula-adapter/tests/utils/globalSetup.js create mode 100644 packages/inula-adapter/tests/utils/testingLibrary.js create mode 100644 packages/inula-adapter/tests/vue/attrs.test.tsx create mode 100644 packages/inula-adapter/tests/vue/condition.test.tsx create mode 100644 packages/inula-adapter/tests/vue/directive.test.tsx create mode 100644 packages/inula-adapter/tests/vue/dynamicComponent.test.tsx create mode 100644 packages/inula-adapter/tests/vue/globalAPI.test.tsx create mode 100644 packages/inula-adapter/tests/vue/injectProvide.test.tsx create mode 100644 packages/inula-adapter/tests/vue/keepAlive.test.tsx create mode 100644 packages/inula-adapter/tests/vue/keepAlivePro.test.tsx create mode 100644 packages/inula-adapter/tests/vue/liftcycle.test.tsx create mode 100644 packages/inula-adapter/tests/vue/props.test.tsx create mode 100644 packages/inula-adapter/tests/vue/sfcAPI.test.tsx create mode 100644 packages/inula-adapter/tests/vuex/vuex.component.test.tsx create mode 100644 packages/inula-adapter/tests/vuex/vuex.maps.test.tsx create mode 100644 packages/inula-adapter/tests/vuex/vuex.modules.test.ts create mode 100644 packages/inula-adapter/tests/vuex/vuex.store.test.ts create mode 100644 packages/inula-adapter/tsconfig.json create mode 100644 packages/inula-adapter/tsconfig.pinia.json create mode 100644 packages/inula-adapter/tsconfig.vue.json create mode 100644 packages/inula-adapter/tsconfig.vuex.json create mode 100644 packages/inula-adapter/vitest.config.ts diff --git a/package.json b/package.json index 087ef97f9..7972054ce 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "build:inula-intl": "pnpm -F inula-intl build", "build:inula-request": "pnpm -F inula-request build", "build:inula-router": "pnpm -F inula-router build", + "build:inula-adapter": "pnpm -F inula-adapter build", "commitlint": "commitlint --config commitlint.config.js -e", "version": "pnpm exec changeset version && node packages/inula/scripts/sync-version.js", "postinstall": "husky install" diff --git a/packages/inula-adapter/.gitignore b/packages/inula-adapter/.gitignore new file mode 100644 index 000000000..3e75dddd8 --- /dev/null +++ b/packages/inula-adapter/.gitignore @@ -0,0 +1,5 @@ +/node_modules +.idea +.vscode +package-lock.json +/build diff --git a/packages/inula-adapter/.prettierrc.js b/packages/inula-adapter/.prettierrc.js new file mode 100644 index 000000000..c2622eaa5 --- /dev/null +++ b/packages/inula-adapter/.prettierrc.js @@ -0,0 +1,32 @@ +/* + * Copyright (c) 2023 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. + */ + +'use strict'; + +module.exports = { + printWidth: 120, // 一行120字符数，如果超过会进行换行 + tabWidth: 2, // tab等2个空格 + useTabs: false, // 用空格缩进行 + semi: true, // 行尾使用分号 + singleQuote: true, // 字符串使用单引号 + quoteProps: 'as-needed', // 仅在需要时在对象属性添加引号 + jsxSingleQuote: false, // 在JSX中使用双引号 + trailingComma: 'es5', // 使用尾逗号(对象、数组等) + bracketSpacing: true, // 对象的括号间增加空格 + bracketSameLine: false, // 将多行JSX元素的>放在最后一行的末尾 + arrowParens: 'avoid', // 在唯一的arrow函数参数周围省略括号 + vueIndentScriptAndStyle: false, // 不缩进Vue文件中的 \ No newline at end of file diff --git a/packages/inula-adapter/examples/$children/FruitList.jsx b/packages/inula-adapter/examples/$children/FruitList.jsx new file mode 100644 index 000000000..423a36631 --- /dev/null +++ b/packages/inula-adapter/examples/$children/FruitList.jsx @@ -0,0 +1,28 @@ +import FruitItem from './FruitItem.jsx'; + +export default function (props) { + const fruits = ['apple', 'pear', 'motorcycle']; + + function logFruit() { + console.log( + useInstance() + .$children.map(({ fruitName, isChecked }) => `${fruitName}:${isChecked ? '✓' : 'X'}`) + .join(', ') //returns string like "apple:✓, pear:X, motorcycle:✓" + ); + } + + return ( +
+ + +
+ ); +} diff --git a/packages/inula-adapter/examples/$children/FruitList.vue b/packages/inula-adapter/examples/$children/FruitList.vue new file mode 100644 index 000000000..4dfbc958e --- /dev/null +++ b/packages/inula-adapter/examples/$children/FruitList.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$el/TypewriterInput.jsx b/packages/inula-adapter/examples/$el/TypewriterInput.jsx new file mode 100644 index 000000000..e3ca65d9d --- /dev/null +++ b/packages/inula-adapter/examples/$el/TypewriterInput.jsx @@ -0,0 +1,18 @@ +import { playSound } from 'soundPlayer1'; +import { useInstance } from 'vue-inula'; + +export default function (props) { + const instance = useInstance(); + //use of $el must be delayed, because element representation is not available before render + setTimeout(() => { + instance.$el.addListener('keyDown', () => { + playSound('typewritterPush'); + }); + + instance.$el.addListener('keyUp', () => { + playSound('typewritterRelease'); + }); + }, 100); + + return ; +} diff --git a/packages/inula-adapter/examples/$el/TypewriterInput.vue b/packages/inula-adapter/examples/$el/TypewriterInput.vue new file mode 100644 index 000000000..e376968af --- /dev/null +++ b/packages/inula-adapter/examples/$el/TypewriterInput.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$forceUpdate/clock.jsx b/packages/inula-adapter/examples/$forceUpdate/clock.jsx new file mode 100644 index 000000000..5496849a8 --- /dev/null +++ b/packages/inula-adapter/examples/$forceUpdate/clock.jsx @@ -0,0 +1,15 @@ +export default function (props) { + // useeffect and clearInterval operation mas no sense, but this is necessary + // to prevent problems between persistent vue components and temporary inula function components + useEffect(() => { + const [b, r] = useState(false); // by toggling this state object, force update is triggered + const interval = setInterval(() => { + r(!b); + }, 1000); + + return () => { + clearInterval(interval); + }; + }); + return {Date.now()}; +} diff --git a/packages/inula-adapter/examples/$forceUpdate/clock.vue b/packages/inula-adapter/examples/$forceUpdate/clock.vue new file mode 100644 index 000000000..97a7c870d --- /dev/null +++ b/packages/inula-adapter/examples/$forceUpdate/clock.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$nextTick/nextTick.jsx b/packages/inula-adapter/examples/$nextTick/nextTick.jsx new file mode 100644 index 000000000..b7e781dde --- /dev/null +++ b/packages/inula-adapter/examples/$nextTick/nextTick.jsx @@ -0,0 +1,18 @@ +export default function (props) { + // inula rendering is synchronous, so this timeout appends this function at next asynchronous position to execute after render + useEffect(() => { + // this timeout should be wrapped as an adapter that way you can call only $nextClick( ... ) as usual + const timeout = setTimeout(() => { + // this must be wrapped, because at the time of render, this element does not exist yet + useInstance().$refs.inp.$el.attachEventListener('keyUp', e => { + console.log(e); + }); + }, 1); + + return () => { + clearTimeout(timeout); + }; + }); + + return ; +} diff --git a/packages/inula-adapter/examples/$nextTick/nextTick.vue b/packages/inula-adapter/examples/$nextTick/nextTick.vue new file mode 100644 index 000000000..13c348c00 --- /dev/null +++ b/packages/inula-adapter/examples/$nextTick/nextTick.vue @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$parent/list-item.jsx b/packages/inula-adapter/examples/$parent/list-item.jsx new file mode 100644 index 000000000..893ae9194 --- /dev/null +++ b/packages/inula-adapter/examples/$parent/list-item.jsx @@ -0,0 +1,25 @@ +import { useInstance } from 'vue-inula'; + +export default function (props) { + const { productId, productName, productType } = props; + + function filterType(type) { + useInstance().$parent.setFilterType(type); + } + + return ( + + {productId} + {productName} + + { + filterType(productType); + }} + > + {productType} + + + + ); +} diff --git a/packages/inula-adapter/examples/$parent/list-item.vue b/packages/inula-adapter/examples/$parent/list-item.vue new file mode 100644 index 000000000..5a415b888 --- /dev/null +++ b/packages/inula-adapter/examples/$parent/list-item.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$parent/list.jsx b/packages/inula-adapter/examples/$parent/list.jsx new file mode 100644 index 000000000..7ce7b6c6b --- /dev/null +++ b/packages/inula-adapter/examples/$parent/list.jsx @@ -0,0 +1,27 @@ +import TableItem from 'table-item'; +import { expose } from 'vue-inula'; + +export default function (props) { + const { items } = props; + + const filteredIdems = items; + + function setFilterType(type) { + filteredItems = items.filter(item => item.type === type); + } + + expose(setFilterType); + + return ( + + + + + + + {filteredIdems.map(item => ( + + ))} +
IDProduct nameProduct type
+ ); +} diff --git a/packages/inula-adapter/examples/$parent/list.vue b/packages/inula-adapter/examples/$parent/list.vue new file mode 100644 index 000000000..6d51694f5 --- /dev/null +++ b/packages/inula-adapter/examples/$parent/list.vue @@ -0,0 +1,27 @@ + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$refs/refresh.jsx b/packages/inula-adapter/examples/$refs/refresh.jsx new file mode 100644 index 000000000..f6fe4b1e5 --- /dev/null +++ b/packages/inula-adapter/examples/$refs/refresh.jsx @@ -0,0 +1,24 @@ +import { useInstance } from 'vue-inula'; + +export default function (props) { + function validateAndSubmit() { + if (!useInstance().$refs[0].value) { + useInstance().$refs[0].focus(); + } else { + submit(); + } + } + + return ( +
+ + +
+ ); +} diff --git a/packages/inula-adapter/examples/$refs/refresh.vue b/packages/inula-adapter/examples/$refs/refresh.vue new file mode 100644 index 000000000..07238684a --- /dev/null +++ b/packages/inula-adapter/examples/$refs/refresh.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$root/root.jsx b/packages/inula-adapter/examples/$root/root.jsx new file mode 100644 index 000000000..700753cf4 --- /dev/null +++ b/packages/inula-adapter/examples/$root/root.jsx @@ -0,0 +1,13 @@ +import { ref, defineExpose } from 'vue-inula'; + +export default function (props) { + const theme = ref('light'); + + function changeTheme(color) { + theme.value = color; + } + + defineExpose({ changeTheme }); + + return ; +} diff --git a/packages/inula-adapter/examples/$root/root.vue b/packages/inula-adapter/examples/$root/root.vue new file mode 100644 index 000000000..72a5ec176 --- /dev/null +++ b/packages/inula-adapter/examples/$root/root.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$root/themeChanger.jsx b/packages/inula-adapter/examples/$root/themeChanger.jsx new file mode 100644 index 000000000..89bf7d11a --- /dev/null +++ b/packages/inula-adapter/examples/$root/themeChanger.jsx @@ -0,0 +1,19 @@ +import { useInstance } from 'vue-inula'; + +export default function (props) { + const { theme } = props; + + function changeTheme() { + useInstance().$root.changeTheme(theme); + } + + return ( + + ); +} diff --git a/packages/inula-adapter/examples/$root/themeChanger.vue b/packages/inula-adapter/examples/$root/themeChanger.vue new file mode 100644 index 000000000..abdfcabf7 --- /dev/null +++ b/packages/inula-adapter/examples/$root/themeChanger.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$set/fruits.jsx b/packages/inula-adapter/examples/$set/fruits.jsx new file mode 100644 index 000000000..4b7bc20a4 --- /dev/null +++ b/packages/inula-adapter/examples/$set/fruits.jsx @@ -0,0 +1,60 @@ +import { reactive } from 'vue-inula'; + +export default function (props) { + const fruits = reactive([ + { name: 'apple', amount: 3 }, + { name: 'pear', amount: 0 }, + ]); + + function decrement(fruit) { + fruit.amount--; + } + function increment(fruit) { + fruit.amount++; + } + function addFruit() { + const fruitName = useInstance().$refs.newFruit.value; + this.$set(fruits, fruits.length, { name: fruitName, amount: 0 }); // how should we do this? Will use of reactive handle this case automaticaly? + useInstance().$refs.newFruit.value = ''; + } + + return ( +
+ +

+ + +

+
+ ); +} diff --git a/packages/inula-adapter/examples/$set/fruits.vue b/packages/inula-adapter/examples/$set/fruits.vue new file mode 100644 index 000000000..50488f709 --- /dev/null +++ b/packages/inula-adapter/examples/$set/fruits.vue @@ -0,0 +1,29 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$t - plugins/App.jsx b/packages/inula-adapter/examples/$t - plugins/App.jsx new file mode 100644 index 000000000..238c7fdab --- /dev/null +++ b/packages/inula-adapter/examples/$t - plugins/App.jsx @@ -0,0 +1,7 @@ +import { useInstance } from 'vue-inula'; + +export default function (props) { + const introduction = useInstance().$t('introduction'); + + return
{introduction}
; +} diff --git a/packages/inula-adapter/examples/$t - plugins/App.vue b/packages/inula-adapter/examples/$t - plugins/App.vue new file mode 100644 index 000000000..cbd15cfc8 --- /dev/null +++ b/packages/inula-adapter/examples/$t - plugins/App.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/$t - plugins/i18n.js b/packages/inula-adapter/examples/$t - plugins/i18n.js new file mode 100644 index 000000000..b138b0bce --- /dev/null +++ b/packages/inula-adapter/examples/$t - plugins/i18n.js @@ -0,0 +1,18 @@ +import { createI18n } from 'vue-i18n'; + +const messages = { + en: { + introduction: 'Hello, I am Dora.', + }, + es: { + introduction: 'Ola, yo soy Dora.', + }, +}; + +const i18n = createI18n({ + locale: 'en', + fallbackLocale: 'en', + messages, +}); + +export default i18n; diff --git a/packages/inula-adapter/examples/$t - plugins/main.js b/packages/inula-adapter/examples/$t - plugins/main.js new file mode 100644 index 000000000..127eb9cac --- /dev/null +++ b/packages/inula-adapter/examples/$t - plugins/main.js @@ -0,0 +1,7 @@ +import { createApp } from 'vue-inula'; //here original function is replaced with adapter! +import App from 'App.vue'; +import i18n from './i18n'; + +const app = createApp(App); //createst global object +app.use(i18n); //attaches plugin to global object +app.mount('#app'); //renders and mounts root diff --git a/packages/inula-adapter/examples/custom functions/main.js b/packages/inula-adapter/examples/custom functions/main.js new file mode 100644 index 000000000..aac8dc5ea --- /dev/null +++ b/packages/inula-adapter/examples/custom functions/main.js @@ -0,0 +1,21 @@ +import store from './index'; + +let installed = false; + +function hideLoading(oMsg) { + store.commit(removeLoadingMsg, oMsg); +} + +export default { + install(app) { + if (installed) { + return; + } + installed = true; + // We need to decide how this can be processed to implement custom global functions + app.config.globalProperties.$hideLoading = hideLoading; + // Should we do something like this? + import { registerGlobal } from 'inula-vue'; + registerGlobal('$hideLoading', hideLoading); + }, +}; diff --git a/packages/inula-adapter/examples/emitter/emitter.jsx b/packages/inula-adapter/examples/emitter/emitter.jsx new file mode 100644 index 000000000..5dd300bee --- /dev/null +++ b/packages/inula-adapter/examples/emitter/emitter.jsx @@ -0,0 +1,16 @@ +export default function (props) { + function clicked() { + useInstance().$refs.emitter.$emit('eventEmitterClicked'); + } + + return ( + + ); +} diff --git a/packages/inula-adapter/examples/emitter/emitter.vue b/packages/inula-adapter/examples/emitter/emitter.vue new file mode 100644 index 000000000..004b7fbbc --- /dev/null +++ b/packages/inula-adapter/examples/emitter/emitter.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/examples/emitter/listener.jsx b/packages/inula-adapter/examples/emitter/listener.jsx new file mode 100644 index 000000000..be6b52e29 --- /dev/null +++ b/packages/inula-adapter/examples/emitter/listener.jsx @@ -0,0 +1,5 @@ +export default function (props) { + useInstance().$refs.emitter.$on('eventEmitterClicked'); + + return emit event; +} diff --git a/packages/inula-adapter/examples/emitter/listener.vue b/packages/inula-adapter/examples/emitter/listener.vue new file mode 100644 index 000000000..d57c212d7 --- /dev/null +++ b/packages/inula-adapter/examples/emitter/listener.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/packages/inula-adapter/npm/pinia/package.json b/packages/inula-adapter/npm/pinia/package.json new file mode 100644 index 000000000..0888b15d6 --- /dev/null +++ b/packages/inula-adapter/npm/pinia/package.json @@ -0,0 +1,5 @@ +{ + "module": "./esm/pinia-adapter.js", + "main": "./cjs/pinia-adapter.js", + "types": "./@types/index.d.ts" +} diff --git a/packages/inula-adapter/npm/vuex/package.json b/packages/inula-adapter/npm/vuex/package.json new file mode 100644 index 000000000..bf4972656 --- /dev/null +++ b/packages/inula-adapter/npm/vuex/package.json @@ -0,0 +1,5 @@ +{ + "module": "./esm/vuex-adapter.js", + "main": "./cjs/vuex-adapter.js", + "types": "./@types/index.d.ts" +} diff --git a/packages/inula-adapter/package.json b/packages/inula-adapter/package.json new file mode 100644 index 000000000..09bdb70dc --- /dev/null +++ b/packages/inula-adapter/package.json @@ -0,0 +1,63 @@ +{ + "name": "inula-adapter", + "version": "0.0.1", + "description": "vue adapter", + "main": "./vue/cjs/vue-adapter.js", + "module": "./vue/esm/vue-adapter.js", + "types": "./vue/@types/index.d.ts", + "files": [ + "/vue", + "/pinia", + "/vuex", + "README.md" + ], + "scripts": { + "test-ui": "vitest --ui", + "test": "vitest", + "build": "rollup -c ./scripts/rollup.config.js && npm run build-types", + "build-types": "tsc -p tsconfig.vue.json && tsc -p tsconfig.pinia.json && tsc -p tsconfig.vuex.json && rollup -c ./scripts/build-types.js" + }, + "dependencies": { + "openinula": "^0.1.14" + }, + "devDependencies": { + "@babel/core": "7.21.3", + "@babel/plugin-proposal-class-properties": "7.16.7", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7", + "@babel/plugin-proposal-object-rest-spread": "7.16.7", + "@babel/plugin-proposal-optional-chaining": "7.16.7", + "@babel/plugin-syntax-jsx": "7.16.7", + "@babel/plugin-transform-arrow-functions": "7.16.7", + "@babel/plugin-transform-block-scoped-functions": "7.16.7", + "@babel/plugin-transform-block-scoping": "7.16.7", + "@babel/plugin-transform-classes": "7.16.7", + "@babel/plugin-transform-computed-properties": "7.16.7", + "@babel/plugin-transform-destructuring": "7.16.7", + "@babel/plugin-transform-for-of": "7.16.7", + "@babel/plugin-transform-literals": "7.16.7", + "@babel/plugin-transform-object-assign": "7.16.7", + "@babel/plugin-transform-object-super": "7.16.7", + "@babel/plugin-transform-parameters": "7.16.7", + "@babel/plugin-transform-react-jsx": "7.16.7", + "@babel/plugin-transform-react-jsx-source": "^7.16.7", + "@babel/plugin-transform-runtime": "7.16.7", + "@babel/plugin-transform-shorthand-properties": "7.16.7", + "@babel/plugin-transform-spread": "7.16.7", + "@babel/plugin-transform-template-literals": "7.16.7", + "@babel/preset-env": "7.16.7", + "@babel/preset-typescript": "^7.16.7", + "@rollup/plugin-babel": "^6.0.3", + "@rollup/plugin-node-resolve": "^15.1.0", + "@testing-library/user-event": "^12.1.10", + "@types/jest": "^29.5.14", + "@vitejs/plugin-react": "^4.2.1", + "@vitest/ui": "^0.34.5", + "jsdom": "^24.0.0", + "prettier": "2.8.8", + "rollup": "2.79.1", + "rollup-plugin-dts": "^6.0.1", + "rollup-plugin-terser": "^5.1.3", + "typescript": "4.9.3", + "vitest": "^0.34.5" + } +} diff --git a/packages/inula-adapter/scripts/build-types.js b/packages/inula-adapter/scripts/build-types.js new file mode 100644 index 000000000..dbc9aa210 --- /dev/null +++ b/packages/inula-adapter/scripts/build-types.js @@ -0,0 +1,64 @@ +/* + * Copyright (c) 2023 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 fs from 'fs'; +import path from 'path'; +import dts from 'rollup-plugin-dts'; + +function deleteFolder(filePath) { + if (fs.existsSync(filePath)) { + if (fs.lstatSync(filePath).isDirectory()) { + const files = fs.readdirSync(filePath); + files.forEach(file => { + const nextFilePath = path.join(filePath, file); + const states = fs.lstatSync(nextFilePath); + if (states.isDirectory()) { + deleteFolder(nextFilePath); + } else { + fs.unlinkSync(nextFilePath); + } + }); + fs.rmdirSync(filePath, { recursive: true }); + } else if (fs.lstatSync(filePath).isFile()) { + fs.unlinkSync(filePath); + } + } +} + +/** + * 删除非空文件夹 + * @param folders {string[]} + * @returns {{buildEnd(): void, name: string}} + */ +export function cleanUp(folders) { + return { + name: 'clean-up', + buildEnd() { + folders.forEach(f => deleteFolder(f)); + }, + }; +} + +function buildTypeConfig(name) { + return { + input: [`./build/${name}/@types/${name}/index.d.ts`], + output: { + file: `./build/${name}/@types/index.d.ts`, + }, + plugins: [dts(), cleanUp([`./build/${name}/@types/`])], + }; +} + +export default [buildTypeConfig('vue'), buildTypeConfig('pinia'), buildTypeConfig('vuex')]; diff --git a/packages/inula-adapter/scripts/rollup.config.js b/packages/inula-adapter/scripts/rollup.config.js new file mode 100644 index 000000000..eb483d36c --- /dev/null +++ b/packages/inula-adapter/scripts/rollup.config.js @@ -0,0 +1,113 @@ +/* + * Copyright (c) 2023 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 path from 'path'; +import fs from 'fs'; +import babel from '@rollup/plugin-babel'; +import nodeResolve from '@rollup/plugin-node-resolve'; +import { terser } from 'rollup-plugin-terser'; + +const rootDir = path.join(__dirname, '..'); +const outDir = path.join(rootDir, 'build'); + +const extensions = ['.js', '.ts', '.tsx']; + +if (!fs.existsSync(outDir)) { + fs.mkdirSync(outDir, { recursive: true }); +} + +const getConfig = (mode, name) => { + const prod = mode.startsWith('prod'); + const outputList = [ + { + file: path.join(outDir, `${name}/cjs/${name}-adapter.${prod ? 'min.' : ''}js`), + sourcemap: 'true', + format: 'cjs', + }, + { + file: path.join(outDir, `${name}/umd/${name}-adapter.${prod ? 'min.' : ''}js`), + name: 'VueAdapter', + sourcemap: 'true', + format: 'umd', + }, + ]; + if (!prod) { + outputList.push({ + file: path.join(outDir, `${name}/esm/${name}-adapter.js`), + sourcemap: 'true', + format: 'esm', + }); + } + return { + input: path.join(rootDir, `/src/${name}/index.ts`), + output: outputList, + plugins: [ + nodeResolve({ + extensions, + modulesOnly: true, + }), + babel({ + exclude: 'node_modules/**', + configFile: path.join(rootDir, '/babel.config.js'), + babelHelpers: 'runtime', + extensions, + }), + prod && terser(), + name === 'vue' + ? copyFiles([ + { + from: path.join(rootDir, 'package.json'), + to: path.join(outDir, 'package.json'), + }, + { + from: path.join(rootDir, 'README.md'), + to: path.join(outDir, 'README.md'), + }, + ]) + : copyFiles([ + { + from: path.join(rootDir, `npm/${name}/package.json`), + to: path.join(outDir, `${name}/package.json`), + }, + ]), + ], + }; +}; + +function copyFiles(copyPairs) { + return { + name: 'copy-files', + generateBundle() { + copyPairs.forEach(({ from, to }) => { + const destDir = path.dirname(to); + // 判断目标文件夹是否存在 + if (!fs.existsSync(destDir)) { + // 目标文件夹不存在,创建它 + fs.mkdirSync(destDir, { recursive: true }); + } + fs.copyFileSync(from, to); + }); + }, + }; +} + +export default [ + getConfig('dev', 'vue'), + getConfig('prod', 'vue'), + getConfig('dev', 'pinia'), + getConfig('prod', 'pinia'), + getConfig('dev', 'vuex'), + getConfig('prod', 'vuex'), +]; diff --git a/packages/inula-adapter/src/pinia/index.ts b/packages/inula-adapter/src/pinia/index.ts new file mode 100644 index 000000000..74e0da324 --- /dev/null +++ b/packages/inula-adapter/src/pinia/index.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 * from './pinia'; diff --git a/packages/inula-adapter/src/pinia/pinia.ts b/packages/inula-adapter/src/pinia/pinia.ts new file mode 100644 index 000000000..8a4c209b5 --- /dev/null +++ b/packages/inula-adapter/src/pinia/pinia.ts @@ -0,0 +1,208 @@ +/* + * 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, StoreObj, vueReactive } from 'openinula'; +import { + FilterAction, + FilterComputed, + FilterState, + StoreDefinition, + StoreSetup, + Store, + AnyFunction, + ActionType, + StoreToRefsReturn, +} from './types'; + +const { ref, isRef, toRef, isReactive, isReadonly } = vueReactive; + +const storeMap = new Map(); + +export function defineStore< + Id extends string, + S extends Record, + A extends Record, + C extends Record, +>(definition: StoreDefinition): (pinia?: any) => Store; + +export function defineStore< + Id extends string, + S extends Record, + A extends Record, + C extends Record, +>(id: Id, definition: Omit, 'id'>): (pinia?: any) => Store; + +export function defineStore>( + id: Id, + setup: StoreSetup +): (pinia?: any) => Store, FilterAction, FilterComputed>; + +export function defineStore(idOrDef: any, setupOrDef?: any) { + let id: string; + let definition: StoreDefinition | StoreSetup; + let isSetup = false; + + if (typeof idOrDef === 'string') { + isSetup = typeof setupOrDef === 'function'; + id = idOrDef; + definition = setupOrDef; + } else { + id = idOrDef.id; + definition = idOrDef; + } + + if (isSetup) { + return defineSetupStore(id, definition as StoreSetup); + } else { + return defineOptionsStore(id, definition as StoreDefinition); + } +} + +/** + * createStore实现中会给actions增加第一个参数store，pinia不需要，所以需要去掉 + * @param actions + */ +function enhanceActions( + actions?: ActionType, Record, Record> +) { + if (!actions) { + return {}; + } + + return Object.fromEntries( + Object.entries(actions).map(([key, value]) => { + return [ + key, + function (this: StoreObj, state: Record, ...args: any[]) { + return value.bind(this)(...args); + }, + ]; + }) + ); +} + +function defineOptionsStore(id: string, definition: StoreDefinition) { + const state = definition.state ? definition.state() : {}; + const computed = definition.getters || {}; + const actions = enhanceActions(definition.actions) || {}; + + return () => { + if (storeMap.has(id)) { + return storeMap.get(id)!(); + } + + const useStore = createStore({ + id, + state, + actions, + computed, + }); + + storeMap.set(id, useStore); + + return useStore(); + }; +} + +function defineSetupStore>(id: string, storeSetup: StoreSetup) { + return () => { + const data = storeSetup(); + if (!data) { + return {}; + } + + if (storeMap.has(id)) { + return storeMap.get(id)!(); + } + + const state: Record = {}; + const actions: Record = {}; + const getters: Record = {}; + for (const key in data) { + const prop = data[key]; + + if ((isRef(prop) && !isReadonly(prop)) || isReactive(prop)) { + // state + state[key] = prop; + } else if (typeof prop === 'function') { + // action + actions[key] = prop as AnyFunction; + } else if (isRef(prop) && isReadonly(prop)) { + // getters + getters[key] = (prop as any).getter as AnyFunction; + } + } + + const useStore = createStore({ + id, + state, + computed: getters, + actions: enhanceActions(actions), + }); + + storeMap.set(id, useStore); + + return useStore(); + }; +} + +export function mapStores< + S extends Record, + A extends Record, + C extends Record, +>(...stores: (() => Store)[]): { [key: string]: () => Store } { + const result: { [key: string]: () => Store } = {}; + + stores.forEach((store: () => Store) => { + const expandedStore = store(); + result[`${expandedStore.id}Store`] = () => expandedStore; + }); + + return result; +} + +export function storeToRefs< + S extends Record, + A extends Record, + C extends Record, +>(store: Store): StoreToRefsReturn { + const stateRefs = Object.fromEntries( + Object.entries(store.$s || {}).map(([key, value]) => { + return [key, ref(value)]; + }) + ); + + const getterRefs = Object.fromEntries( + Object.entries(store.$config.computed || {}).map(([key, value]) => { + const computeFn = (value as () => any).bind(store, store.$s); + return [key, toRef(computeFn)]; + }) + ); + + return { ...stateRefs, ...getterRefs } as StoreToRefsReturn; +} + +export function createPinia() { + console.warn( + `The pinia-adapter in inula does not support the createPinia interface. Please modify your code accordingly.` + ); + + const result = { + install: (app: any) => {}, + use: (plugin: any) => result, + state: {}, + }; + + return result; +} diff --git a/packages/inula-adapter/src/pinia/types.ts b/packages/inula-adapter/src/pinia/types.ts new file mode 100644 index 000000000..cf98faec9 --- /dev/null +++ b/packages/inula-adapter/src/pinia/types.ts @@ -0,0 +1,103 @@ +/* + * 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 type { RefType, UnwrapRef, ComputedImpl } from 'openinula'; + +export type StoreSetup> = () => R; + +export type AnyFunction = (...args: any[]) => any; + +// defineStore init type +export interface StoreDefinition< + Id extends string = string, + S extends Record = Record, + A extends Record = Record, + C extends Record = Record, +> { + id?: Id; + state?: () => S; + actions?: ActionType; + getters?: ComputedType; +} + +// defineStore return type +export type Store< + S extends Record, + A extends Record, + C extends Record, +> = { + $s: S; + $state: S; + $a: ActionType; + $c: ComputedType; + $subscribe: (listener: Listener) => void; + $unsubscribe: (listener: Listener) => void; +} & { [K in keyof S]: S[K] } & { [K in keyof ActionType]: ActionType[K] } & { + [K in keyof ComputedType]: ReturnType[K]>; +}; + +export type ActionType = A & ThisType & WithGetters>; + +type ComputedType = { + [K in keyof C]: AddFirstArg; +} & ThisType & WithGetters>; +type AddFirstArg = T extends (...args: infer A) => infer R + ? (state: S, ...args: A) => R + : T extends () => infer R + ? (state: S) => R + : T; + +// In Getter function, make this.xx can refer to other getters +export type WithGetters = { + readonly [k in keyof G]: G[k] extends (...args: any[]) => infer R ? R : UnwrapRef; +}; + +type Listener = (change: any) => void; + +// Filter state properties +export type FilterState> = { + [K in FilterStateProperties]: UnwrapRef; +}; +type FilterStateProperties> = { + [K in keyof T]: T[K] extends ComputedImpl + ? never + : T[K] extends RefType + ? K + : T[K] extends Record // Reactive类型 + ? K + : never; +}[keyof T]; + +// Filter action properties +export type FilterAction> = { + [K in FilterFunctionProperties]: T[K] extends AnyFunction ? T[K] : never; +}; +type FilterFunctionProperties> = { + [K in keyof T]: T[K] extends AnyFunction ? K : never; +}[keyof T]; + +// Filter computed properties +export type FilterComputed> = { + [K in FilterComputedProperties]: T[K] extends ComputedImpl ? (T extends AnyFunction ? T : never) : never; +}; +type FilterComputedProperties> = { + [K in keyof T]: T[K] extends ComputedImpl ? K : never; +}[keyof T]; + +export type StoreToRefsReturn, C extends Record> = { + [K in keyof S]: RefType; +} & { + [K in keyof ComputedType]: Readonly[K]>>>; +}; diff --git a/packages/inula-adapter/src/vue/Teleport.ts b/packages/inula-adapter/src/vue/Teleport.ts new file mode 100644 index 000000000..502d876cb --- /dev/null +++ b/packages/inula-adapter/src/vue/Teleport.ts @@ -0,0 +1,16 @@ +import { useState, useEffect, createPortal } from 'openinula'; +export function Teleport({ to, children }) { + const container = useState(() => { + document.createElement('div'); + }); + + useEffect(() => { + to.appendChild(container); + + return () => { + to.removeChild(container); + }; + }, [to, container]); + + return createPortal(children, container); +} diff --git a/packages/inula-adapter/src/vue/compare.ts b/packages/inula-adapter/src/vue/compare.ts new file mode 100644 index 000000000..0008c5eaa --- /dev/null +++ b/packages/inula-adapter/src/vue/compare.ts @@ -0,0 +1,54 @@ +/* + * Copyright (c) 2023 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. + */ + +/** + * 兼容IE浏览器没有Object.is + */ +export function isSame(x: any, y: any) { + if (!(typeof Object.is === 'function')) { + if (x === y) { + // +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // NaN == NaN + return x !== x && y !== y; + } + } else { + return Object.is(x, y); + } +} + +export function shallowCompare(paramX: any, paramY: any): boolean { + if (isSame(paramX, paramY)) { + return true; + } + + // 对比对象 + if (typeof paramX === 'object' && typeof paramY === 'object' && paramX !== null && paramY !== null) { + const keysX = Object.keys(paramX); + const keysY = Object.keys(paramY); + + // key长度不相等时直接返回不相等 + if (keysX.length !== keysY.length) { + return false; + } + + return keysX.every( + (key, i) => Object.prototype.hasOwnProperty.call(paramY, key) && isSame(paramX[key], paramY[keysX[i]]) + ); + } + + return false; +} diff --git a/packages/inula-adapter/src/vue/condition.tsx b/packages/inula-adapter/src/vue/condition.tsx new file mode 100644 index 000000000..06df086c3 --- /dev/null +++ b/packages/inula-adapter/src/vue/condition.tsx @@ -0,0 +1,52 @@ +/* + * 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, { isValidElement, Children, FC } from 'openinula'; + +interface ConditionalProps { + children?: any; + condition: boolean; +} + +export const If: FC = ({ children, condition }) => { + return condition ? <>{children} : null; +}; + +export const ElseIf: FC = If; + +export const Else: FC> = ({ children }) => { + return <>{children}; +}; + +interface ConditionalRendererProps { + children?: any; +} + +export const ConditionalRenderer: FC = ({ children }) => { + const childrenArray = Children.toArray(children); + const renderedChild = childrenArray.find(child => { + if (isValidElement(child)) { + if (child.type === If || child.type === ElseIf) { + return child.props.condition; + } + if (child.type === Else) { + return true; + } + } + return false; + }); + + return renderedChild ? <>{renderedChild} : null; +}; diff --git a/packages/inula-adapter/src/vue/directive.tsx b/packages/inula-adapter/src/vue/directive.tsx new file mode 100644 index 000000000..1b651952a --- /dev/null +++ b/packages/inula-adapter/src/vue/directive.tsx @@ -0,0 +1,116 @@ +import { ComponentType, useCallback, useEffect, useLayoutEffect, useMemo, createElement, vueReactive } from 'openinula'; +import { useDirectives } from './globalAPI'; + +const { useInstance } = vueReactive; + +/** + * Vue写法：
+ * Inula写法： + * + *
child
+ * + * + * @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的动态组件，如： + * @param is + * @param components + * @param componentProps + * @constructor + */ +export function DynamicComponent({ is, components, ...componentProps }: DynamicComponentProps): InulaElement | null { + if (is === '') { + return null; + } + + let Component: any = null; + + if (typeof is === 'string') { + const pascalCaseName = toPascalCase(is); + // Look in local components first + Component = components && components[pascalCaseName]; + + // If not found, look in global components + if (!Component) { + const app = getCurrentInstance().appContext.app; + Component = app._context.components[pascalCaseName]; + } + } else if (typeof is === 'function') { + // If 'is' is already a component, use it directly + Component = is; + } + + if (!Component) { + Component = is; + } + + return ; +} + +// 把vue风格的组件命名转换为react风格的组件命名，如：my-component => MyComponent +function toPascalCase(name: string): string { + // If the string doesn't contain hyphens, just capitalize the first letter + if (!name.includes('-')) { + return name.charAt(0).toUpperCase() + name.slice(1); + } + + // For hyphenated strings, capitalize each word + return name + .split('-') + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(''); +} + +DynamicComponent.__internal_comp_tag = 'DynamicComponent'; diff --git a/packages/inula-adapter/src/vue/globalAPI.tsx b/packages/inula-adapter/src/vue/globalAPI.tsx new file mode 100644 index 000000000..340a41042 --- /dev/null +++ b/packages/inula-adapter/src/vue/globalAPI.tsx @@ -0,0 +1,336 @@ +/* + * 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, { createContext, lazy, Suspense, unmountComponentAtNode, useContext, vueReactive } from 'openinula'; +import { vShow } from './vShow'; + +const { useInstance } = vueReactive; + +export interface AppContext { + app: App; + config: AppConfig; + components: Record; + 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(, rootContainer); + + isMounted = true; + app._container = rootContainer; + } + }, + + unmount() { + if (isMounted) { + unmountComponentAtNode(app._container); + + delete app._container; + } + }, + + provide(key, value) { + context.provides[key as string | symbol] = value; + + return app; + }, + + runWithContext(fn) { + // 不支持 + console.log('Inula中暂时不支持runWithContext，请手动修改相关的代码。'); + return fn(); + }, + }); + + // 默认提供v-show指令 + app.directive('show', vShow); + + appMap.set(id, app); + + return app; +} + +export function useGlobalProperties(): Record; +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 ; +} + +export function registerDirective(name: string, directive: any) { + const app = appMap.get(DEFAULT_APP_KEY); + app!.directive(name, directive); +} + +export function useDirectives() { + const app = useContext(AppContext); + return app!._context.directives; +} + +export function defineAsyncComponent(loader: () => Promise) { + 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 ; + })} + {/* 挂载当前组件的节点 */} + {needCache ? null : children} + + ); +} diff --git a/packages/inula-adapter/src/vue/keepAlive/keeper.tsx b/packages/inula-adapter/src/vue/keepAlive/keeper.tsx new file mode 100644 index 000000000..dc821200c --- /dev/null +++ b/packages/inula-adapter/src/vue/keepAlive/keeper.tsx @@ -0,0 +1,59 @@ +import React, { useRef, useEffect } from 'openinula'; +import { NodeKeeperLifeCycleContext } from './context'; +import { KEEP_ALIVE_LIFECYCLE, LifeCycleFunc } from './lifeCycleHooks'; + +interface KeeperProps { + active: boolean; + key?: any; + children?: any; +} +const Keeper = ({ children, active }: KeeperProps) => { + const wrapper = useRef(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 ( + + { +
+ {children} +
+ } + + ); +}; + +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
{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>(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 + +
+ child2 +
+ + * 例如 最底层节点内容如下，也返回null + * <> +
+ grandchild +
+
+ grandchild2 +
+ + * 例如 找到最底层节点内容如下，返回xxxx对应的vNode + * <> +
+ grandchild +
+ grandchild2 +
+
+ + * @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(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 ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(Array.from(document.querySelector('#child').classList).includes('red')).toBe(true); + }); + + it('Should merge css', () => { + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(Array.from(document.querySelector('#child').classList).includes('red')).toBe(true); + expect(Array.from(document.querySelector('#child').classList).includes('blue')).toBe(true); + }); + + it('Should merge style', () => { + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100px'); + expect(document.querySelector('#child').style.color).toBe('blue'); + }); + + it('Should prefer child style', () => { + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100px'); + expect(document.querySelector('#child').style.color).toBe('red'); + }); +}); + +describe('$attrs: $attrs object', () => { + it('should deep merge classes', () => { + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const Child = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const GrandChild = rawProps => { + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(Array.from(document.querySelector('#child').classList).includes('four')).toBe(true); + expect(Array.from(document.querySelector('#child').classList).includes('three')).toBe(true); + expect(Array.from(document.querySelector('#child').classList).includes('two')).toBe(true); + expect(Array.from(document.querySelector('#child').classList).includes('one')).toBe(true); + }); + + it('should deep merge styles', () => { + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const Child = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const GrandChild = rawProps => { + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100%'); + expect(document.querySelector('#child').style.color).toBe('red'); + expect(document.querySelector('#child').style.display).toBe('inline-block'); + expect(document.querySelector('#child').style.backgroundColor).toBe('yellow'); + }); + + it('should deep merge styles by order when styles updated', () => { + let updateWidth = () => {}; + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const Child = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const GrandChild = rawProps => { + const [width, setWidth] = useState(50); + updateWidth = () => { + setWidth(width + 1); + }; + useReactiveProps(rawProps, {}); + return
; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100%'); + expect(document.querySelector('#child').style.color).toBe('red'); + expect(document.querySelector('#child').style.display).toBe('inline-block'); + expect(document.querySelector('#child').style.backgroundColor).toBe('yellow'); + updateWidth(); + expect(document.querySelector('#child').style.width).toBe('100%'); + }); + + it('should deep merge styles when use classComponent', () => { + let updateWidth = () => {}; + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const Child = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const GrandChild = rawProps => { + const [width, setWidth] = useState(50); + updateWidth = () => { + setWidth(width + 1); + }; + useReactiveProps(rawProps, {}); + return
; + }; + + class App extends Component { + constructor(props) { + super(props); + } + render() { + return ; + } + } + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100%'); + expect(document.querySelector('#child').style.color).toBe('red'); + expect(document.querySelector('#child').style.display).toBe('inline-block'); + expect(document.querySelector('#child').style.backgroundColor).toBe('yellow'); + updateWidth(); + expect(document.querySelector('#child').style.width).toBe('100%'); + }); + + it('should deep merge styles when use Memo', async () => { + let updateWidth = () => {}; + function Parent(rawProps) { + useReactiveProps(rawProps, {}); + return ; + } + + const Child = memo(rawProps => { + useReactiveProps(rawProps, {}); + return ; + }); + + const GrandChild = memo(rawProps => { + const [width, setWidth] = useState(50); + updateWidth = () => { + setWidth(width + 1); + }; + useReactiveProps(rawProps, {}); + return
; + }); + + class App extends Component { + constructor(props) { + super(props); + } + render() { + return ; + } + } + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100%'); + expect(document.querySelector('#child').style.color).toBe('red'); + expect(document.querySelector('#child').style.display).toBe('inline-block'); + expect(document.querySelector('#child').style.backgroundColor).toBe('yellow'); + updateWidth(); + expect(document.querySelector('#child').style.width).toBe('100%'); + }); + + it('should deep merge styles when use forwardRef', async () => { + let updateWidth = () => {}; + function Parent(rawProps) { + useReactiveProps(rawProps, {}); + return ; + } + + const Child = forwardRef(rawProps => { + useReactiveProps(rawProps, {}); + return ; + }); + + const GrandChild = memo(rawProps => { + const [width, setWidth] = useState(50); + updateWidth = () => { + setWidth(width + 1); + }; + useReactiveProps(rawProps, {}); + return
; + }); + + class App extends Component { + constructor(props) { + super(props); + } + render() { + return ; + } + } + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child').style.width).toBe('100%'); + expect(document.querySelector('#child').style.color).toBe('red'); + expect(document.querySelector('#child').style.display).toBe('inline-block'); + expect(document.querySelector('#child').style.backgroundColor).toBe('yellow'); + updateWidth(); + expect(document.querySelector('#child').style.width).toBe('100%'); + }); +}); + +describe('$attrs: $attrs object', async resolve => { + it('Should inherit scope', () => { + const GrandChild = rawProps => { + useReactiveProps(rawProps, {}); + return ( +
+

+ Inner element +

+
+ ); + }; + + const Child = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const Parent = rawProps => { + useReactiveProps(rawProps, {}); + return ; + }; + + const App = () => { + return ; + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + + expect(document.querySelector('#child')?.getAttribute('data-v-ghjk1569')).toBe('true'); + expect(document.querySelector('#child')?.getAttribute('data-v-abcd1234')).toBe('true'); + expect(document.querySelector('#child')?.getAttribute('data-v-wxyz6789')).toBe('true'); + expect(document.querySelector('#child')?.getAttribute('data-v-qrst3456')).toBe('true'); + expect(document.querySelector('#inner')?.getAttribute('data-v-abcd1234')).not.toBe('true'); + expect(document.querySelector('#inner')?.getAttribute('data-v-wxyz6789')).not.toBe('true'); + expect(document.querySelector('#inner')?.getAttribute('data-v-qrst3456')).not.toBe('true'); + expect(document.querySelector('#inner')?.getAttribute('data-v-ghjk1569')).toBe('true'); + }); +}); diff --git a/packages/inula-adapter/tests/vue/condition.test.tsx b/packages/inula-adapter/tests/vue/condition.test.tsx new file mode 100644 index 000000000..02de9e60d --- /dev/null +++ b/packages/inula-adapter/tests/vue/condition.test.tsx @@ -0,0 +1,208 @@ +/* + * 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 { If, ElseIf, Else, ConditionalRenderer } from '../../src/vue/condition'; + +import { act, useRef, useState, vueReactive } from 'openinula'; +import { describe, expect, it, vi } from 'vitest'; +import '../utils/globalSetup'; +import { createApp } from '../../src/vue'; + +const { useReactive, useReference } = vueReactive; + +describe('Condition Component', () => { + it('Should ConditionalRenderer work', () => { + let _ref; + let _updateType; + + function Comp() { + const ref = useRef(); + _ref = ref; + const [type, setType] = useState('A'); + + const updateType = val => { + setType(val); + }; + _updateType = updateType; + + return ( +
+
+ + {type === 'A' &&
A
} + {type === 'B' &&
B
} + {type === 'C' &&
C
} + +
Not A/B/C
+ + +
+
+ ); + } + + const app = createApp(); + + app.mount(global.container); + + expect(_ref.current.innerHTML).toBe('
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 && ( +
+ + {$t('SynchronizedData')} +
+ )} + + = 0}> + {options.uploadStatus === 'UPLOADING' && options.progress < 100 && options.progress >= 0 && ( +
+
+
+ {options.progress + '%'} +
+
+ )} + + + {options.progress === 100 && options.uploadStatus === 'FAILURE' && ( +
+
+ + {$t('Fail')} + + {$t('viewDetails')} + + +
+ )} + + +
Other
+ + +
+ ); + } + + const app = createApp(); + + app.mount(global.container); + + expect(_ref.current.innerHTML).toBe('
Other
'); + + act(() => { + _options.uploadStatus = 'COMPLETED'; + _options.progress = 100; + }); + + expect(_ref.current.innerHTML).toBe( + '
SynchronizedData
' + ); + + act(() => { + _options.uploadStatus = 'FAILURE'; + }); + + expect(_ref.current.innerHTML).toBe( + '
FailviewDetails
' + ); + + 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.formater(item)}
} + + + {item.label &&
{item.label}
} + + +
{item.value}
+ + +
+ ); + } + + const app = createApp(); + + app.mount(global.container); + + expect(_ref.current.innerHTML).toBe('
AGG
'); + }); +}); diff --git a/packages/inula-adapter/tests/vue/directive.test.tsx b/packages/inula-adapter/tests/vue/directive.test.tsx new file mode 100644 index 000000000..57a0a3465 --- /dev/null +++ b/packages/inula-adapter/tests/vue/directive.test.tsx @@ -0,0 +1,262 @@ +/* + * 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 { DirectiveComponent } from '../../src/vue/directive'; + +import { act, useState } from 'openinula'; +import { describe, expect, it, vi } from 'vitest'; +import '../utils/globalSetup'; +import { createApp } from '../../src/vue'; + +describe('api: app.directive', () => { + it('should directive work in dom', () => { + const fnMount = vi.fn(); + const fnUnmounted = vi.fn(); + const fnUpdated = vi.fn(); + const fnClose = vi.fn(); + const fnBind = vi.fn(); + + function Comp() { + const [showPopup, setShowPopup] = useState(true); + const closePopup = () => { + setShowPopup(false); + fnClose(); + }; + + return ( +
+ {showPopup && ( + // Vue写法：
+ +
child
+ + )} +
点击外部关闭弹窗
+
+ ); + } + + const app = createApp(); + + app.directive('click-outside', { + mounted(el, binding) { + el.clickOutsideEvent = function (event) { + if (!(el === event.target || el.contains(event.target))) { + binding.value(event); + } + }; + document.addEventListener('click', el.clickOutsideEvent); + fnMount(); + }, + updated(el, binding) { + fnUpdated(); + }, + unmounted(el) { + document.removeEventListener('click', el.clickOutsideEvent); + fnUnmounted(); + }, + }); + + app.directive('focus', { + bind(el, binding) { + el.focus(); + fnBind(); + }, + }); + + app.mount(global.container); + + act(() => { + global.container.querySelector('#div')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fnMount).toHaveBeenCalledTimes(1); + expect(fnUpdated).toHaveBeenCalledTimes(1); + expect(fnUnmounted).toHaveBeenCalledTimes(1); + expect(fnClose).toHaveBeenCalledTimes(1); + expect(fnBind).toHaveBeenCalledTimes(1); + }); + + it('should directive work in component', () => { + const fnMount = vi.fn(); + const fnUnmounted = vi.fn(); + const fnUpdated = vi.fn(); + const fnClose = vi.fn(); + const fnBind = vi.fn(); + + function Popup() { + return
弹窗
; + } + + 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写法：
+ +
child
+ + )} + + +
+ ); + } + + const app = createApp(); + + app.mount(global.container); + + expect(fnMount).toHaveBeenCalledTimes(1); + expect(fnBind).toHaveBeenCalledTimes(1); + + act(() => { + global.container.querySelector('#update')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fnUpdated).toHaveBeenCalledTimes(2); + + act(() => { + global.container.querySelector('#close')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fnUnmounted).toHaveBeenCalledTimes(1); + expect(fnClose).toHaveBeenCalledTimes(1); + }); + + it('should v-show directive work in component', () => { + function Popup() { + return ( +
+ 弹窗 +
+ ); + } + + function Comp() { + const [showPopup, setShowPopup] = useState(true); + + const closePopup = () => { + setShowPopup(!showPopup); + }; + + return ( +
+ {/* Vue写法：*/} + +
child
+ + + +
+ ); + } + + const app = createApp(); + + app.mount(global.container); + + expect(document.querySelector('#popup-div')!.outerHTML).toBe( + '' + ); + + 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(); + + // @ts-ignore + expect(screen.getByText('Hello, Custom Component!')).toBeInTheDocument(); + }); + + it('Should work with global Component', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + + const CustomComponent = ({ text }) =>
{text}
; + + const app = createApp(); + + app.component('CustomComponent', CustomComponent); + + app.mount(container); + + // @ts-ignore + expect(screen.getByText('Hello, Custom Component!')).toBeInTheDocument(); + }); + + it('Should work with DOM elements', () => { + render( + + + 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 ( + <> +
+ 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(); + app.mount(global.container); + + expect(document.querySelector('#counter')!.innerHTML).toBe('1'); + expect(document.querySelector('#double')!.innerHTML).toBe('2'); + + app.unmount(); + + expect(document.querySelector('#counter')).toBeNull(); + }); + + it('use', () => { + const PluginA: Plugin = app => app.provide('foo', 1); + const PluginB: Plugin = { + install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2), + }; + + class PluginC { + someProperty = {}; + + static install() { + app.provide('baz', 2); + } + } + + const Comp = () => { + const foo = useProvide('foo'); + const bar = useProvide('bar'); + const baz = useProvide('baz'); + + return ( +
+ + {foo},{bar},{baz} + +
+ ); + }; + + const app = createApp(); + app.use(PluginA); + app.use(PluginB, 1, 1); + app.use(PluginC); + + app.mount(global.container); + expect(document.querySelector('#provide')!.innerHTML).toBe('1,2,2'); + }); + + it('provide', () => { + const Comp = () => { + const foo = useProvide('foo'); + const bar = useProvide('bar'); + return ( +
+ + {foo},{bar} + +
+ ); + }; + + const app = createApp(); + + app.provide('foo', 1); + app.provide('bar', 2); + + app.mount(global.container); + + expect(document.querySelector('#foo')!.innerHTML).toBe('1,2'); + }); + + it('config.globalProperties', () => { + const Comp = () => { + // this.foo 转成： + const foo = useGlobalProperties('foo'); + const { bar, fn } = useGlobalProperties(); + fn(); + return ( +
+ + {foo}, {bar} + +
+ ); + }; + + const app = createApp(); + + app.config.globalProperties.foo = 'hello'; + app.config.globalProperties.bar = 'inula'; + app.config.globalProperties.fn = () => { + // 不支持this + return this.foo; + }; + app.mount(global.container); + + expect(document.querySelector('#foo')!.innerHTML).toBe('hello, inula'); + }); + + it('app.component', () => { + const Child = () => { + return
child
; + }; + const Child2 = () => { + return
child2
; + }; + + const Comp = () => { + return ( +
+ + +
+ ); + }; + + const app = createApp(); + app.component('child', Child); + registerComponent('child2', Child2); + app.mount(global.container); + + expect(document.querySelector('#child')!.innerHTML).toBe('child'); + expect(document.querySelector('#child2')!.innerHTML).toBe('child2'); + }); + + it('app.component', () => { + const Child = () => { + return
child
; + }; + const Child2 = () => { + return
child2
; + }; + + const Comp = () => { + return ( +
+ + +
+ ); + }; + + const app = createApp(); + app.component('child', Child); + registerComponent('child2', Child2); + app.mount(global.container); + + expect(document.querySelector('#child')!.innerHTML).toBe('child'); + expect(document.querySelector('#child2')!.innerHTML).toBe('child2'); + }); + + it('Should work in multiple apps', () => { + const Comp1 = () => { + const foo = useGlobalProperties('foo'); + return ( +
+ {foo} +
+ ); + }; + + const Comp2 = () => { + const foo = useGlobalProperties('foo'); + return ( +
+ {foo} +
+ ); + }; + + const div1 = document.createElement('div'); + document.body.appendChild(div1); + const app1 = createApp(); + + app1.config.globalProperties.foo = 'hello app1'; + app1.mount(div1); + + const div2 = document.createElement('div'); + document.body.appendChild(div2); + const app2 = createApp(); + + app2.config.globalProperties.foo = 'hello app2'; + app2.mount(div2); + + expect(document.querySelector('#comp1')!.innerHTML).toBe('hello app1'); + expect(document.querySelector('#comp2')!.innerHTML).toBe('hello app2'); + }); + + it('Should lazy Suspense work', async () => { + let _resolve: () => void; + + const mockImport = component => { + return new Promise(resolve => { + _resolve = () => { + resolve({ default: component }); + }; + }); + }; + + function AsyncComp(props) { + return
{props.text}
; + } + + const Comp = () => { + return ( +
+ Loading...
}> + + +
+ ); + }; + + const app = createApp(); + + // 通过：mockImport(AsyncComp)，模拟写法：import('./AsyncComp') + app.component( + 'AsyncComp', + lazy(() => mockImport(AsyncComp)) + ); + + app.mount(global.container); + + expect(document.querySelector('#loading')!.innerHTML).toBe('Loading...'); + + await act(async () => { + _resolve(); + }); + + expect(document.querySelector('#async')!.innerHTML).toBe('I am AsyncComp'); + }); + + it('Should defineAsyncComponent work', async () => { + let _resolve: () => void; + + const mockImport = component => { + return new Promise(resolve => { + _resolve = () => { + resolve({ default: component }); + }; + }); + }; + + function AsyncComp(props) { + return
{props.text}
; + } + + const Comp = () => { + return ( +
+ +
+ ); + }; + + const app = createApp(); + + // 通过：mockImport(AsyncComp)，模拟写法：import('./AsyncComp') + app.component( + 'AsyncComp', + defineAsyncComponent(() => mockImport(AsyncComp)) + ); + + app.mount(global.container); + + await act(async () => { + _resolve(); + }); + + expect(document.querySelector('#async')!.innerHTML).toBe('I am AsyncComp'); + }); +}); diff --git a/packages/inula-adapter/tests/vue/injectProvide.test.tsx b/packages/inula-adapter/tests/vue/injectProvide.test.tsx new file mode 100644 index 000000000..dc329df8f --- /dev/null +++ b/packages/inula-adapter/tests/vue/injectProvide.test.tsx @@ -0,0 +1,111 @@ +/* + * 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 } from '../../src/vue/globalAPI'; +import { provide, inject } from '../../src/vue/injectProvide'; +import '../utils/globalSetup'; +import { describe, expect, it, vi, beforeEach } from 'vitest'; + +describe('api: inject/provide', () => { + beforeEach(() => {}); + + it('basic usage', () => { + // each of ProvA and ProvB component implements different context value + const ProvA = () => { + provide('val', 'A'); + return ( +
+ +
+ ); + }; + 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(); + app.mount(global.container); + + expect(document.querySelector('#app')?.textContent).toBe('AB'); + }); + + it('default value', () => { + // Injects value that was not provided before. should fallback to default value + const Inj = () => { + const val = inject('this should fail', 'defaultValue'); + return
{val}
; + }; + const Comp = () => { + return ( +
+ +
+ ); + }; + + const app = createApp(); + app.mount(global.container); + + expect(document.querySelector('#Inj')?.innerHTML).toBe('defaultValue'); + }); + + it('symbol keys', () => { + // Uses symbol key instead of string. + const contextKey = Symbol(); + + const ProvA = () => { + provide(contextKey, 'A'); + return ( +
+ +
+ ); + }; + const Inj = () => { + const val = inject(contextKey); + return
{val}
; + }; + const Comp = () => { + return ( +
+ +
+ ); + }; + + const app = createApp(); + app.mount(global.container); + + expect(document.querySelector('#ProvA')?.textContent).toBe('A'); + }); +}); diff --git a/packages/inula-adapter/tests/vue/keepAlive.test.tsx b/packages/inula-adapter/tests/vue/keepAlive.test.tsx new file mode 100644 index 000000000..e7910c3e5 --- /dev/null +++ b/packages/inula-adapter/tests/vue/keepAlive.test.tsx @@ -0,0 +1,271 @@ +/* + * 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 { + KeepAlive, + useActivatePro as onActivated, + useUnActivatePro as onDeactivated, +} from '../../src/vue/keepAlive/index'; +import { createApp } from '../../src/vue/globalAPI'; +import '../utils/globalSetup'; +import { describe, expect, it, beforeEach } from 'vitest'; +import { DynamicComponent } from '../../src/vue'; +import { useState, act } from 'openinula'; + +describe('component: KeepAlive', () => { + beforeEach(() => {}); + + let toggle, increment; + + const CompCount = () => { + const [count, setCount] = useState(0); + increment = () => { + setCount(count + 1); + }; + return
{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(); + act(() => { + app.mount(global.container); + }); + + // await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
0
'); + increment(); + increment(); + increment(); + expect(document.querySelector('#app')?.innerHTML).toBe('
3
'); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + }); + + 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(); + act(() => { + app.mount(global.container); + }); + expect(document.querySelector('#app')?.innerHTML).toBe('
0
'); + increment(); + increment(); + increment(); + expect(document.querySelector('#app')?.innerHTML).toBe('
3
'); + + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
B
C
' + ); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
C
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(); + act(() => { + app.mount(global.container); + }); + expect(document.querySelector('#app')?.innerHTML).toBe('
A
'); + + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
' + ); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
C
' + ); + act(() => { + toggle(); + }); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
' + ); + }); + + it('exclude ', async () => { + const Comp = () => { + const componentLookup = [CompA, CompB, CompC]; + + const [display, setDisplay] = useState(0); + toggle = () => setDisplay((display + 1) % 3); + + return ( +
+ + + +
+ ); + }; + + const app = createApp(); + act(() => { + app.mount(global.container); + }); + expect(document.querySelector('#app')?.innerHTML).toBe('
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( + '
C
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(); + act(() => { + app.mount(global.container); + }); + expect(activationCounter).toBe(0); + expect(deactivationCounter).toBe(0); + + act(() => { + toggle(); + }); + expect(activationCounter).toBe(1); + expect(deactivationCounter).toBe(0); + act(() => { + toggle(); + }); + expect(activationCounter).toBe(1); + expect(deactivationCounter).toBe(1); + act(() => { + toggle(); + }); + expect(activationCounter).toBe(2); + expect(deactivationCounter).toBe(1); + act(() => { + toggle(); + }); + expect(activationCounter).toBe(2); + expect(deactivationCounter).toBe(2); + }); +}); diff --git a/packages/inula-adapter/tests/vue/keepAlivePro.test.tsx b/packages/inula-adapter/tests/vue/keepAlivePro.test.tsx new file mode 100644 index 000000000..55c090e44 --- /dev/null +++ b/packages/inula-adapter/tests/vue/keepAlivePro.test.tsx @@ -0,0 +1,263 @@ +/* + * 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 { KeepAlivePro, onActivated, onDeactivated } from '../../src/vue/keepAlivePro'; +import { createApp } from '../../src/vue/globalAPI'; +import '../utils/globalSetup'; +import { describe, expect, it, vi, beforeEach } from 'vitest'; +import { DynamicComponent } from '../../src/vue'; +import { useState } from 'openinula'; + +function wait(ms) { + return new Promise(resolve => { + setTimeout(resolve, ms); + }); +} + +describe('component: KeepAlive', () => { + beforeEach(() => {}); + + let toggle, increment; + + const CompCount = () => { + const [count, setCount] = useState(0); + increment = () => { + setCount(count + 1); + }; + return
{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(); + app.mount(global.container); + + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
0
'); + increment(); + await wait(10); + increment(); + await wait(10); + increment(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
3
'); + + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + }); + + 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(); + app.mount(global.container); + + await wait(100); + expect(document.querySelector('#app')?.innerHTML).toBe('
0
'); + increment(); + await wait(10); + increment(); + await wait(10); + increment(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
3
'); + + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
3
B
' + ); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
B
C
' + ); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
C
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(); + app.mount(global.container); + + await wait(100); + expect(document.querySelector('#app')?.innerHTML).toBe('
A
'); + + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
' + ); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
C
' + ); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
A
B
' + ); + }); + + it('exclude ', async () => { + const Comp = () => { + const componentLookup = [CompA, CompB, CompC]; + + const [display, setDisplay] = useState(0); + toggle = () => setDisplay((display + 1) % 3); + + return ( +
+ + + +
+ ); + }; + + const app = createApp(); + app.mount(global.container); + + await wait(100); + expect(document.querySelector('#app')?.innerHTML).toBe('
A
'); + + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
B
'); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe('
C
'); + toggle(); + await wait(10); + expect(document.querySelector('#app')?.innerHTML).toBe( + '
C
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(); + app.mount(global.container); + + await wait(100); + expect(activationCounter).toBe(0); + expect(deactivationCounter).toBe(0); + + toggle(); + await wait(10); + expect(activationCounter).toBe(1); + expect(deactivationCounter).toBe(0); + toggle(); + await wait(10); + expect(activationCounter).toBe(1); + expect(deactivationCounter).toBe(1); + toggle(); + await wait(10); + expect(activationCounter).toBe(2); + expect(deactivationCounter).toBe(1); + toggle(); + await wait(10); + expect(activationCounter).toBe(2); + expect(deactivationCounter).toBe(2); + }); +}); diff --git a/packages/inula-adapter/tests/vue/liftcycle.test.tsx b/packages/inula-adapter/tests/vue/liftcycle.test.tsx new file mode 100644 index 000000000..9af46ba4d --- /dev/null +++ b/packages/inula-adapter/tests/vue/liftcycle.test.tsx @@ -0,0 +1,191 @@ +/* + * 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 } from 'vitest'; +import { render, act, useState } from 'openinula'; +import { onBeforeUnmount, onUnmounted, onMounted, onBeforeMount, onUpdated } from '../../src/vue/lifecycle'; + +describe('lifecycle', () => { + it('should call the onBeforeMount', () => { + const fn = vi.fn(() => { + expect(document.querySelector('span')).toBeNull(); + }); + + const Comp = () => { + const [toggle, setToggle] = useState(true); + + return ( + <> + {toggle ? : null} + + + ); + }; + + const Child = () => { + onBeforeMount(fn); + return ; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(document.querySelector('span')).not.toBeNull(); + + act(() => { + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fn).toHaveBeenCalledTimes(1); + }); + + it('should call the onMounted', () => { + const fn = vi.fn(() => { + // 断言在组件卸载之后，子组件不存在于 DOM 中 + expect(document.querySelector('span')).not.toBeNull(); + }); + + const Comp = () => { + const [toggle, setToggle] = useState(true); + + return ( + <> + {toggle ? : null} + + + ); + }; + + const Child = () => { + onMounted(fn); + return ; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(document.querySelector('span')).not.toBeNull(); + + act(() => { + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fn).toHaveBeenCalledTimes(1); + }); + + it('should call the onUnmounted after the component unmounts', () => { + const fn = vi.fn(() => { + // 断言在组件卸载之后，子组件不存在于 DOM 中 + expect(document.querySelector('span')).not.toBeNull(); + }); + + const Comp = () => { + const [toggle, setToggle] = useState(true); + + return ( + <> + {toggle ? : null} + + + ); + }; + + const Child = () => { + onUnmounted(fn); + return ; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(document.querySelector('span')).not.toBeNull(); + + act(() => { + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fn).toHaveBeenCalledTimes(1); + }); + + it('should call the onBeforeUnmount before the component unmounts', () => { + const fn = vi.fn(() => { + // 断言在组件卸载之前，子组件仍然存在于 DOM 中 + expect(document.querySelector('span')).not.toBeNull(); + }); + + const Comp = () => { + const [toggle, setToggle] = useState(true); + + return ( + <> + {toggle ? : null} + + + ); + }; + + const Child = () => { + onBeforeUnmount(fn); + return ; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(document.querySelector('span')).not.toBeNull(); + + act(() => { + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(fn).toHaveBeenCalledTimes(1); + + expect(document.querySelector('span')).toBeNull(); + }); + + it('should call the onUpdated/onBeforeUpdate', () => { + const fn = vi.fn(() => { + expect(document.querySelector('span')!.outerHTML).toBe('0'); + }); + + const Comp = () => { + const [toggle, setToggle] = useState(true); + + onUpdated(fn); + + return ( + <> + {toggle ? 1 : 0} + + + ); + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(fn).toHaveBeenCalledTimes(0); + expect(document.querySelector('span')!.outerHTML).toBe('1'); + + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + + expect(fn).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/inula-adapter/tests/vue/props.test.tsx b/packages/inula-adapter/tests/vue/props.test.tsx new file mode 100644 index 000000000..6416f006b --- /dev/null +++ b/packages/inula-adapter/tests/vue/props.test.tsx @@ -0,0 +1,194 @@ +/* + * 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, useEffect } from 'openinula'; +import { useReactiveProps } from '../../src/vue'; + +const { useReactive, useComputed, useWatch, nextTick } = vueReactive; + +describe('reactive props', () => { + it('should reactive props work, when pass number', () => { + const App = () => { + const data = useReactive({ + count: 1, + }); + + const increase = () => { + data.count = data.count + 1; + }; + + return ( + <> +
+

Parent Component

+ + +
+ + ); + }; + + const Child = rawProps => { + const props = useReactiveProps(rawProps); + const countComputed = useComputed(() => { + return props.count; + }); + + return ( +
+

Child Component

+
{countComputed.value}
+
+ ); + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(document.querySelector('#active')!.innerHTML).toBe('1'); + + act(() => { + container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(document.querySelector('#active')!.innerHTML).toBe('2'); + }); + + it('should reactive props work, when pass array', async () => { + const App = () => { + const data = useReactive({ + array: ['item1', 'item2', 'item3'], + }); + + const updateArray = () => { + data.array = ['item4', 'item5', 'item6', 'item7']; + }; + const addItem = () => { + data.array.push('item88'); + }; + + return ( + <> +
+

Parent Component

+ + + +
+ + ); + }; + + 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 ( +
+

{props.name}

+
    + {data.items.map(item => ( +
  • {item}
    • + ))} +
+
+ ); + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + act(() => { + render(, container); + }); + + expect(document.querySelectorAll('li').length).toBe(3); + + act(() => { + container.querySelector('#updateBtn')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + // 依赖useWatch，需要加个nextTick + await nextTick(); + expect(document.querySelectorAll('li').length).toBe(4); + + act(() => { + container.querySelector('#addBtn')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + expect(document.querySelectorAll('li').length).toBe(5); + }); + + it('should support set [] to []', () => { + function App() { + const dataReactive: { pagination: number[] } = useReactive({ pagination: [] }); + useEffect(() => { + dataReactive.pagination = []; + dataReactive.pagination.push(1); + }, []); + + return ( +
+ +
+ ); + } + + const Child = rawProps => { + const props = useReactiveProps(rawProps); + + const len = props.pagination.length; + return ( +
+
{len}
+
+ ); + }; + + const container = document.createElement('div'); + act(() => { + render(, container); + }); + + expect(container.querySelector('#len')!.innerHTML).toBe('1'); + }); +}); diff --git a/packages/inula-adapter/tests/vue/sfcAPI.test.tsx b/packages/inula-adapter/tests/vue/sfcAPI.test.tsx new file mode 100644 index 000000000..90d336b89 --- /dev/null +++ b/packages/inula-adapter/tests/vue/sfcAPI.test.tsx @@ -0,0 +1,129 @@ +/* + * 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 } from 'openinula'; +import { defineExpose } from '../../src/vue/sfcAPI'; +import '../utils/globalSetup'; + +const { useReference, useInstance } = vueReactive; + +describe('sfc APIs', () => { + it('defineExpose: should expose methods to parent component through ref', () => { + const Child = () => { + const count = useReference(0); + + defineExpose({ + increment: () => { + count.value++; + }, + getCount: () => count.value, + }); + + return
Count: {count.value}
; + }; + + const App = () => { + const childRef = useReference(null); + + const handleClick = () => { + if (childRef.value) { + childRef.value.increment(); + } + }; + + return ( +
+ { + childRef.value = useInstance(val); + }} + /> + +
+ ); + }; + + document.body.appendChild(global.container); + render(, global.container); + + // 验证初始值 + expect(document.querySelector('#child')!.innerHTML).toBe('Count: 0'); + + // 点击按钮触发子组件方法 + act(() => { + global.container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + // 验证方法被调用后的结果 + expect(document.querySelector('#child')!.innerHTML).toBe('Count: 1'); + }); + + it('defineExpose: should handle multiple exposed properties updates', () => { + const Child = () => { + const count = useReference(0); + const name = useReference('test'); + + defineExpose({ + updateName: () => { + name.value = 'updated'; + }, + count, + }); + + return ( +
+ Count: {count.value} - Name: {name.value} +
+ ); + }; + + const App = () => { + const childRef = useReference(null); + + const handleUpdate = () => { + if (childRef.value) { + childRef.value.updateName(); + childRef.value.count.value++; + } + }; + + return ( +
+ { + childRef.value = useInstance(val); + }} + /> + +
+ ); + }; + + document.body.appendChild(global.container); + render(, global.container); + + // 验证初始值 + expect(document.querySelector('#child')!.innerHTML).toBe('Count: 0 - Name: test'); + + // 点击按钮更新所有属性 + act(() => { + global.container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true })); + }); + + // 验证所有属性都被更新 + expect(document.querySelector('#child')!.innerHTML).toBe('Count: 1 - Name: updated'); + }); +}); diff --git a/packages/inula-adapter/tests/vuex/vuex.component.test.tsx b/packages/inula-adapter/tests/vuex/vuex.component.test.tsx new file mode 100644 index 000000000..17eea1a93 --- /dev/null +++ b/packages/inula-adapter/tests/vuex/vuex.component.test.tsx @@ -0,0 +1,116 @@ +/* + * 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, vi } from 'vitest'; +import { act, render } from 'openinula'; +import { useMapState, useMapGetters, useMapMutations } from '../../src/vuex/maps'; +import { createStore, registerStore, useStore } from '../../src/vuex'; +import '../utils/globalSetup'; + +describe('vuex in component', () => { + it('should store work in component', () => { + 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); + + const Comp = () => { + const store = useStore(); + + return ( + <> +
+ counter: {store.state.foo.counter} +
+
+ double: {store.getters.double} +
+ + + ); + }; + + render(, 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('should maps api work in component', () => { + 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); + + const Comp = () => { + const { counter } = useMapState('foo', ['counter']); + const { double } = useMapGetters('foo', ['double']); + const { inc } = useMapMutations('foo', ['inc']); + + return ( + <> +
+ counter: {counter.value} +
+
+ double: {double.value} +
+ + + ); + }; + + render(, 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'); + }); +}); diff --git a/packages/inula-adapter/tests/vuex/vuex.maps.test.tsx b/packages/inula-adapter/tests/vuex/vuex.maps.test.tsx new file mode 100644 index 000000000..489e87948 --- /dev/null +++ b/packages/inula-adapter/tests/vuex/vuex.maps.test.tsx @@ -0,0 +1,640 @@ +/* + * 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, vi } from 'vitest'; +import { createStore, registerStore } from '../../src/vuex/vuex'; +import { useMapState, useMapMutations, useMapActions, useMapGetters } from '../../src/vuex/maps'; +import { render } from 'openinula'; +import '../utils/globalSetup'; + +describe('vuex maps API', () => { + it('mapState (array)', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + inc: state => state.a++, + }, + }); + registerStore(store); + + let _a; + const Comp = () => { + const { a } = useMapState(['a']); + _a = a; + + return <>a: {a.value}; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_a.value).toBe(1); + store.commit('inc'); + expect(_a.value).toBe(2); + }); + + it('mapState (object)', () => { + const store = createStore({ + state: { + a: 1, + }, + getters: { + b: () => 2, + }, + mutations: { + inc: state => state.a++, + }, + }); + registerStore(store); + + let _a; + const Comp = () => { + const { a } = useMapState({ + a: (state, getters) => { + return state.a + getters.b; + }, + }); + _a = a; + + return <>a: {a.value}; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_a.value).toBe(3); + store.commit('inc'); + expect(_a.value).toBe(4); + }); + + it('mapState (with namespace)', () => { + const store = createStore({ + modules: { + foo: { + namespaced: true, + state: { a: 1 }, + getters: { + b: state => state.a + 1, + }, + mutations: { + inc: state => state.a++, + }, + }, + }, + }); + registerStore(store); + + let _a; + const Comp = () => { + const { a } = useMapState('foo', { + a: (state, getters) => { + return state.a + getters.b; + }, + }); + _a = a; + + return <>a: {a.value}; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_a.value).toBe(3); + store.state.foo.a++; + expect(_a.value).toBe(5); + }); + + it('mapMutations (array)', () => { + const store = createStore({ + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + }); + registerStore(store); + + let _inc, _dec; + const Comp = () => { + const { inc, dec } = useMapMutations(['inc', 'dec']); + _inc = inc; + _dec = dec; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _inc(); + expect(store.state.count).toBe(1); + _dec(); + expect(store.state.count).toBe(0); + }); + + it('mapMutations (object)', () => { + const store = createStore({ + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + }); + registerStore(store); + + let _plus, _minus; + const Comp = () => { + const { plus, minus } = useMapMutations({ + plus: 'inc', + minus: 'dec', + }); + _plus = plus; + _minus = minus; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _plus(); + expect(store.state.count).toBe(1); + _minus(); + expect(store.state.count).toBe(0); + }); + + it('mapMutations (function)', () => { + const store = createStore({ + state: { count: 0 }, + mutations: { + inc(state, amount) { + state.count += amount; + }, + }, + }); + registerStore(store); + + let _plus; + const Comp = () => { + const { plus } = useMapMutations({ + plus(commit, amount) { + commit('inc', amount + 1); + }, + }); + _plus = plus; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _plus(42); + expect(store.state.count).toBe(43); + }); + + it('mapMutations (with namespace)', () => { + const store = createStore({ + modules: { + foo: { + namespaced: true, + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + }, + }, + }); + registerStore(store); + + let _plus, _minus; + const Comp = () => { + const { plus, minus } = useMapMutations('foo', { + plus: 'inc', + minus: 'dec', + }); + _plus = plus; + _minus = minus; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _plus(); + expect(store.state.foo.count).toBe(1); + _minus(); + expect(store.state.foo.count).toBe(0); + }); + + it('mapMutations (function with namepsace)', () => { + const store = createStore({ + modules: { + foo: { + namespaced: true, + state: { count: 0 }, + mutations: { + inc(state, amount) { + state.count += amount; + }, + }, + }, + }, + }); + registerStore(store); + + let _plus; + const Comp = () => { + const { plus } = useMapMutations('foo', { + plus(commit, amount) { + commit('inc', amount + 1); + }, + }); + _plus = plus; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _plus(42); + expect(store.state.foo.count).toBe(43); + }); + + it('mapGetters (array)', () => { + const store = createStore({ + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + getters: { + hasAny: ({ count }) => count > 0, + negative: ({ count }) => count < 0, + }, + }); + registerStore(store); + + let _hasAny, _negative; + const Comp = () => { + const { hasAny, negative } = useMapGetters(['hasAny', 'negative']); + _hasAny = hasAny; + _negative = negative; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_hasAny.value).toBe(false); + expect(_negative.value).toBe(false); + store.commit('inc'); + expect(_hasAny.value).toBe(true); + expect(_negative.value).toBe(false); + store.commit('dec'); + store.commit('dec'); + expect(_hasAny.value).toBe(false); + expect(_negative.value).toBe(true); + }); + + it('mapGetters (object)', () => { + const store = createStore({ + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + getters: { + hasAny: ({ count }) => count > 0, + negative: ({ count }) => count < 0, + }, + }); + registerStore(store); + + let _a, _b; + const Comp = () => { + const { a, b } = useMapGetters({ + a: 'hasAny', + b: 'negative', + }); + _a = a; + _b = b; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_a.value).toBe(false); + expect(_b.value).toBe(false); + store.commit('inc'); + expect(_a.value).toBe(true); + expect(_b.value).toBe(false); + store.commit('dec'); + store.commit('dec'); + expect(_a.value).toBe(false); + expect(_b.value).toBe(true); + }); + + it('mapGetters (with namespace)', () => { + const store = createStore({ + modules: { + foo: { + namespaced: true, + state: { count: 0 }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + getters: { + hasAny: ({ count }) => count > 0, + negative: ({ count }) => count < 0, + }, + }, + }, + }); + registerStore(store); + + let _a, _b; + const Comp = () => { + const { a, b } = useMapGetters('foo', { + a: 'hasAny', + b: 'negative', + }); + _a = a; + _b = b; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_a.value).toBe(false); + expect(_b.value).toBe(false); + store.commit('foo/inc'); + expect(_a.value).toBe(true); + expect(_b.value).toBe(false); + store.commit('foo/dec'); + store.commit('foo/dec'); + expect(_a.value).toBe(false); + expect(_b.value).toBe(true); + }); + + it('mapActions (array)', () => { + const fna = vi.fn(); + const fnb = vi.fn(); + const store = createStore({ + actions: { + a: fna, + b: fnb, + }, + }); + registerStore(store); + + let _a, _b; + const Comp = () => { + const { a, b } = useMapActions(['a', 'b']); + _a = a; + _b = b; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _a(); + expect(fna).toHaveBeenCalled(); + expect(fnb).not.toHaveBeenCalled(); + _b(); + expect(fnb).toHaveBeenCalled(); + }); + + it('mapActions (object)', () => { + const fna = vi.fn(); + const fnb = vi.fn(); + const store = createStore({ + actions: { + a: fna, + b: fnb, + }, + }); + registerStore(store); + + let _foo, _bar; + const Comp = () => { + const { foo, bar } = useMapActions({ + foo: 'a', + bar: 'b', + }); + _foo = foo; + _bar = bar; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _foo(); + expect(fna).toHaveBeenCalled(); + expect(fnb).not.toHaveBeenCalled(); + _bar(); + expect(fnb).toHaveBeenCalled(); + }); + + it('mapActions (function)', () => { + const fna = vi.fn(); + const store = createStore({ + actions: { a: fna }, + }); + registerStore(store); + + let _foo; + const Comp = () => { + const { foo } = useMapActions({ + foo(dispatch, arg) { + dispatch('a', arg + 'bar'); + }, + }); + _foo = foo; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _foo('foo'); + expect(fna.mock.calls[0][1]).toBe('foobar'); + }); + + it('mapActions (with namespace)', () => { + const fna = vi.fn(); + const fnb = vi.fn(); + const store = createStore({ + modules: { + foo: { + namespaced: true, + actions: { + a: fna, + b: fnb, + }, + }, + }, + }); + registerStore(store); + + let _foo, _bar; + const Comp = () => { + const { foo, bar } = useMapActions('foo', { + foo(dispatch, arg) { + dispatch('a', arg + 'bar'); + }, + bar: 'b', + }); + _foo = foo; + _bar = bar; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _foo(); + expect(fna).toHaveBeenCalled(); + expect(fnb).not.toHaveBeenCalled(); + _bar(); + expect(fnb).toHaveBeenCalled(); + }); + + it('mapActions (function with namespace)', () => { + const fna = vi.fn(); + const store = createStore({ + modules: { + foo: { + namespaced: true, + actions: { a: fna }, + }, + }, + }); + registerStore(store); + + let _foo; + const Comp = () => { + const { foo } = useMapActions('foo', { + foo(dispatch, arg) { + dispatch('a', arg + 'bar'); + }, + }); + _foo = foo; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + _foo('foo'); + expect(fna.mock.calls[0][1]).toBe('foobar'); + }); + + it('should work together', () => { + const actionAFn = vi.fn(); + const actionBFn = vi.fn(); + const store = createStore({ + modules: { + foo: { + namespaced: true, + state: { count: 0 }, + getters: { + isEven: state => state.count % 2 === 0, + }, + mutations: { + inc: state => state.count++, + dec: state => state.count--, + }, + actions: { + actionA: actionAFn, + actionB: actionBFn, + }, + }, + }, + }); + registerStore(store); + + let _count, _isEven, _inc, _dec, _actionA, _actionB; + const Comp = () => { + const { count } = useMapState('foo', ['count']); + _count = count; + const { isEven } = useMapGetters('foo', ['isEven']); + _isEven = isEven; + const { inc, dec } = useMapMutations('foo', ['inc', 'dec']); + _inc = inc; + _dec = dec; + const { actionA, actionB } = useMapActions('foo', ['actionA', 'actionB']); + _actionA = actionA; + _actionB = actionB; + + return <>; + }; + + const container = document.createElement('div'); + document.body.appendChild(container); + render(, container); + + expect(_count.value).toBe(0); + expect(_isEven.value).toBe(true); + store.state.foo.count++; + expect(_count.value).toBe(1); + expect(_isEven.value).toBe(false); + _inc(); + expect(store.state.foo.count).toBe(2); + expect(store.getters['foo/isEven']).toBe(true); + _dec(); + expect(store.state.foo.count).toBe(1); + expect(store.getters['foo/isEven']).toBe(false); + _actionA(); + expect(actionAFn).toHaveBeenCalled(); + expect(actionBFn).not.toHaveBeenCalled(); + _actionB(); + expect(actionBFn).toHaveBeenCalled(); + }); +}); diff --git a/packages/inula-adapter/tests/vuex/vuex.modules.test.ts b/packages/inula-adapter/tests/vuex/vuex.modules.test.ts new file mode 100644 index 000000000..d7cee580a --- /dev/null +++ b/packages/inula-adapter/tests/vuex/vuex.modules.test.ts @@ -0,0 +1,480 @@ +/* + * 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, vi } from 'vitest'; +import { createStore } from '../../src/vuex/vuex'; + +const TEST = 'TEST'; + +describe('vuex modules', () => { + it('dynamic module registration', () => { + const store = createStore({ + modules: { + foo: { + state: { bar: 1 }, + mutations: { inc: state => state.bar++ }, + actions: { inc: ({ commit }) => commit('inc') }, + getters: { fooBar: state => state.bar }, + }, + one: { + state: { a: 0 }, + mutations: { + aaa(state, n) { + state.a += n; + }, + }, + }, + }, + }); + + store.registerModule('hi', { + state: { a: 1 }, + mutations: { inc: state => state.a++ }, + actions: { incHi: ({ commit }) => commit('inc') }, + getters: { ga: state => state.a }, + }); + + // expect(store._mutations.inc.length).toBe(2); + expect(store.state.hi.a).toBe(1); + expect(store.getters.ga).toBe(1); + + // assert initial modules work as expected after dynamic registration + expect(store.state.foo.bar).toBe(1); + expect(store.getters.fooBar).toBe(1); + + // test dispatching actions defined in dynamic module + store.dispatch('incHi'); + expect(store.state.hi.a).toBe(2); + expect(store.getters.ga).toBe(2); + + expect(store.state.foo.bar).toBe(1); + expect(store.getters.fooBar).toBe(1); + + // unregister + store.unregisterModule('hi'); + expect(store.state.hi).toBeUndefined(); + expect(store.getters.ga).toBeUndefined(); + + // assert initial modules still work as expected after unregister + store.dispatch('inc'); + expect(store.state.foo.bar).toBe(2); + expect(store.getters.fooBar).toBe(2); + }); + + it('dynamic module registration with namespace inheritance', () => { + const store = createStore({ + modules: { + a: { + namespaced: true, + }, + }, + }); + const actionSpy = vi.fn(); + const mutationSpy = vi.fn(); + store.registerModule('b', { + state: { value: 1 }, + getters: { foo: state => state.value }, + actions: { foo: actionSpy }, + mutations: { foo: mutationSpy }, + }); + + expect(store.state.b.value).toBe(1); + expect(store.getters['foo']).toBe(1); + + store.dispatch('foo'); + expect(actionSpy).toHaveBeenCalled(); + + store.commit('foo'); + expect(mutationSpy).toHaveBeenCalled(); + }); + + it('dynamic module existance test', () => { + const store = createStore({}); + + store.registerModule('bonjour', {}); + + expect(store.hasModule('bonjour')).toBe(true); + store.unregisterModule('bonjour'); + expect(store.hasModule('bonjour')).toBe(false); + }); + + it('should keep getters when component gets destroyed', async () => { + const store = createStore({}); + + const spy = vi.fn(); + + const moduleA = { + namespaced: true, + state: () => ({ value: 1 }), + getters: { + getState(state) { + spy(); + return state.value; + }, + }, + mutations: { + increment: state => { + state.value++; + }, + }, + }; + + store.registerModule('moduleA', moduleA); + + expect(store.getters['moduleA/getState']).toBe(1); + expect(spy).toHaveBeenCalledTimes(1); + + store.commit('moduleA/increment'); + + expect(store.getters['moduleA/getState']).toBe(2); + expect(spy).toHaveBeenCalledTimes(2); + }); + + it('should not fire an unrelated watcher', () => { + const spy = vi.fn(); + const store = createStore({ + modules: { + a: { + state: { value: 1 }, + }, + b: {}, + }, + }); + + store.watch(state => state.a, spy); + store.registerModule('c', { + state: { value: 2 }, + }); + expect(spy).not.toHaveBeenCalled(); + }); + + it('state as function (multiple module in same store)', () => { + const store = createStore({ + modules: { + one: { + state: { a: 0 }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + two: { + state() { + return { a: 0 }; + }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + }, + }); + + expect(store.state.one.a).toBe(0); + expect(store.state.two.a).toBe(0); + + store.commit(TEST, 1); + expect(store.state.one.a).toBe(1); + expect(store.state.two.a).toBe(1); + }); + + it('state as function (same module in multiple stores)', () => { + const storeA = createStore({ + modules: { + foo: { + state() { + return { a: 0 }; + }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + }, + }); + + const storeB = createStore({ + modules: { + bar: { + state() { + return { a: 0 }; + }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + }, + }); + + expect(storeA.state.foo.a).toBe(0); + expect(storeB.state.bar.a).toBe(0); + + storeA.commit(TEST, 1); + expect(storeA.state.foo.a).toBe(1); + expect(storeB.state.bar.a).toBe(0); + + storeB.commit(TEST, 2); + expect(storeA.state.foo.a).toBe(1); + expect(storeB.state.bar.a).toBe(2); + }); + + it('module: mutation', function () { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + modules: { + nested: { + state: { a: 2 }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + four: { + state: { a: 6 }, + mutations: { + [TEST](state, n) { + state.a += n; + }, + }, + }, + }, + }); + store.commit(TEST, 1); + expect(store.state.a).toBe(2); + expect(store.state.nested.a).toBe(3); + expect(store.state.four.a).toBe(7); + }); + + it('module: action', function () { + let calls = 0; + + const store = createStore({ + state: { + a: 1, + }, + actions: { + [TEST]({ state, rootState }) { + calls++; + expect(state.a).toBe(1); + expect(rootState).toBe(store.state); + }, + }, + modules: { + nested: { + state: { a: 2 }, + actions: { + [TEST]({ state, rootState }) { + calls++; + expect(state.a).toBe(2); + expect(rootState).toBe(store.state); + }, + }, + }, + four: { + state: { a: 6 }, + actions: { + [TEST]({ state, rootState }) { + calls++; + expect(state.a).toBe(6); + expect(rootState).toBe(store.state); + }, + }, + }, + }, + }); + store.dispatch(TEST); + expect(calls).toBe(3); + }); + + it('module: getters', function () { + const store = createStore({ + state: { + a: 1, + }, + getters: { + constant: () => 0, + [`getter1`]: (state, getters, rootState) => { + expect(getters.constant).toBe(0); + expect(rootState.a).toBe(store.state.a); + return state.a; + }, + }, + modules: { + nested: { + state: { a: 2 }, + getters: { + [`getter2`]: (state, getters, rootState) => { + expect(getters.constant).toBe(0); + expect(rootState.a).toBe(store.state.a); + return state.a; + }, + }, + }, + four: { + state: { a: 6 }, + getters: { + [`getter6`]: (state, getters, rootState) => { + expect(getters.constant).toBe(0); + expect(rootState.a).toBe(store.state.a); + return state.a; + }, + }, + }, + }, + }); + [1, 2, 6].forEach(n => { + expect(store.getters[`getter${n}`]).toBe(n); + }); + }); + + it('module: namespace', () => { + const actionSpy = vi.fn(); + const mutationSpy = vi.fn(); + + const store = createStore({ + modules: { + a: { + namespaced: true, + state: { + a: 1, + }, + getters: { + b: () => 2, + }, + actions: { + [TEST]: actionSpy, + }, + mutations: { + [TEST]: mutationSpy, + }, + }, + }, + }); + + expect(store.state.a.a).toBe(1); + expect(store.getters['a/b']).toBe(2); + store.dispatch('a/' + TEST); + expect(actionSpy).toHaveBeenCalled(); + store.commit('a/' + TEST); + expect(mutationSpy).toHaveBeenCalled(); + }); + + it('module: getters are namespaced in namespaced module', () => { + const store = createStore({ + state: { value: 'root' }, + getters: { + foo: state => state.value, + }, + modules: { + a: { + namespaced: true, + state: { value: 'module' }, + getters: { + foo: state => { + return state.value; + }, + bar: (state, getters) => { + return getters.foo; + }, + baz: (state, getters, rootState, rootGetters) => rootGetters.foo, + }, + }, + }, + }); + + expect(store.getters['a/foo']).toBe('module'); + expect(store.getters['a/bar']).toBe('module'); + expect(store.getters['a/baz']).toBe('root'); + }); + + it('module: action context is namespaced in namespaced module', () => { + const rootActionSpy = vi.fn(); + const rootMutationSpy = vi.fn(); + const moduleActionSpy = vi.fn(); + const moduleMutationSpy = vi.fn(); + + const store = createStore({ + state: { value: 'root' }, + getters: { foo: state => state.value }, + actions: { foo: rootActionSpy }, + mutations: { foo: rootMutationSpy }, + modules: { + a: { + namespaced: true, + state: { value: 'module' }, + getters: { foo: state => state.value }, + actions: { + foo: moduleActionSpy, + test({ dispatch, commit, getters, rootGetters }) { + expect(getters.foo).toBe('module'); + expect(rootGetters.foo).toBe('root'); + + dispatch('foo'); + expect(moduleActionSpy).toHaveBeenCalledTimes(1); + dispatch('foo', null, { root: true }); + expect(rootActionSpy).toHaveBeenCalledTimes(1); + + commit('foo'); + expect(moduleMutationSpy).toHaveBeenCalledTimes(1); + commit('foo', null, { root: true }); + expect(rootMutationSpy).toHaveBeenCalledTimes(1); + }, + }, + mutations: { foo: moduleMutationSpy }, + }, + }, + }); + + store.dispatch('a/test'); + }); + + it('dispatching multiple actions in different modules', () => { + const store = createStore({ + modules: { + a: { + actions: { + [TEST]() { + return 1; + }, + }, + }, + b: { + actions: { + [TEST]() { + return new Promise(r => r(2)); + }, + }, + }, + }, + }); + store.dispatch(TEST).then(res => { + expect(res[0]).toBe(1); + expect(res[1]).toBe(2); + }); + }); +}); diff --git a/packages/inula-adapter/tests/vuex/vuex.store.test.ts b/packages/inula-adapter/tests/vuex/vuex.store.test.ts new file mode 100644 index 000000000..9602582ec --- /dev/null +++ b/packages/inula-adapter/tests/vuex/vuex.store.test.ts @@ -0,0 +1,343 @@ +/* + * 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, vi } from 'vitest'; +import { createStore } from '../../src/vuex/vuex'; +import { vueReactive } from 'openinula'; + +const { nextTick } = vueReactive; + +const TEST_M = 'TEST_M'; +const TEST_A = 'TEST_A'; + +describe('vuex Store', () => { + it('committing mutations', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + }); + store.commit(TEST_M, 2); + expect(store.state.a).toBe(3); + }); + + it('committing with object style', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, payload) { + state.a += payload.amount; + }, + }, + }); + store.commit({ + type: TEST_M, + amount: 2, + }); + expect(store.state.a).toBe(3); + }); + + it('dispatching actions, sync', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + actions: { + [TEST_A]({ commit }, n) { + commit(TEST_M, n); + }, + }, + }); + store.dispatch(TEST_A, 2); + expect(store.state.a).toBe(3); + }); + + it('dispatching with object style', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + actions: { + [TEST_A]({ commit }, payload) { + commit(TEST_M, payload.amount); + }, + }, + }); + store.dispatch({ + type: TEST_A, + amount: 2, + }); + expect(store.state.a).toBe(3); + }); + + it('dispatching actions, with returned Promise', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + actions: { + [TEST_A]({ commit }, n) { + return new Promise(resolve => { + setTimeout(() => { + commit(TEST_M, n); + resolve(''); + }, 0); + }); + }, + }, + }); + expect(store.state.a).toBe(1); + store.dispatch(TEST_A, 2).then(() => { + expect(store.state.a).toBe(3); + }); + }); + + it('composing actions with async/await', () => { + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + actions: { + [TEST_A]({ commit }, n) { + return new Promise(resolve => { + setTimeout(() => { + commit(TEST_M, n); + resolve(''); + }, 0); + }); + }, + two: async ({ commit, dispatch }, n) => { + await dispatch(TEST_A, 1); + expect(store.state.a).toBe(2); + commit(TEST_M, n); + }, + }, + }); + expect(store.state.a).toBe(1); + store.dispatch('two', 3).then(() => { + expect(store.state.a).toBe(5); + }); + }); + + it('detecting action Promise errors', () => { + const store = createStore({ + actions: { + [TEST_A]() { + return new Promise((resolve, reject) => { + reject('no'); + }); + }, + }, + }); + const thenSpy = vi.fn(); + store + .dispatch(TEST_A) + .then(thenSpy) + .catch((err: string) => { + expect(thenSpy).not.toHaveBeenCalled(); + expect(err).toBe('no'); + }); + }); + + it('getters', () => { + const store = createStore({ + state: { + a: 0, + }, + getters: { + state: state => (state.a > 0 ? 'hasAny' : 'none'), + }, + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + actions: { + check({ getters }, value) { + // check for exposing getters into actions + expect(getters.state).toBe(value); + }, + }, + }); + expect(store.getters.state).toBe('none'); + store.dispatch('check', 'none'); + + store.commit(TEST_M, 1); + + expect(store.getters.state).toBe('hasAny'); + store.dispatch('check', 'hasAny'); + }); + + it('should accept state as function', () => { + const store = createStore({ + state: () => ({ + a: 1, + }), + mutations: { + [TEST_M](state, n) { + state.a += n; + }, + }, + }); + expect(store.state.a).toBe(1); + store.commit(TEST_M, 2); + expect(store.state.a).toBe(3); + }); + + it('subscribe: should handle subscriptions / unsubscriptions', async () => { + const subscribeSpy = vi.fn(); + const secondSubscribeSpy = vi.fn(); + const testPayload = 2; + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state) { + state.a++; + }, + }, + }); + + const unsubscribe = store.subscribe(subscribeSpy); + store.subscribe(secondSubscribeSpy); + store.commit(TEST_M, testPayload); + await nextTick(); + unsubscribe(); + store.commit(TEST_M, testPayload); + await nextTick(); + + expect(subscribeSpy).toHaveBeenCalledTimes(1); + expect(secondSubscribeSpy).toHaveBeenCalledTimes(2); + }); + + it('subscribe: should handle subscriptions with synchronous unsubscriptions', async () => { + const subscribeSpy = vi.fn(); + const testPayload = 2; + const store = createStore({ + state: { + a: 1, + }, + mutations: { + [TEST_M](state) { + state.a++; + }, + }, + }); + + const unsubscribe = store.subscribe(() => unsubscribe()); + store.subscribe(subscribeSpy); + store.commit(TEST_M, testPayload); + await nextTick(); + + expect(subscribeSpy).toHaveBeenCalledTimes(1); + }); + + it('subscribeAction: should handle subscriptions with synchronous unsubscriptions', async () => { + const subscribeSpy = vi.fn(); + const testPayload = 2; + const store = createStore({ + state: { + a: 1, + }, + actions: { + [TEST_A]({ state }) { + state.a++; + }, + }, + }); + + const unsubscribe = store.subscribeAction(() => unsubscribe()); + store.subscribeAction(subscribeSpy); + store.dispatch(TEST_A, testPayload); + await nextTick(); + + expect(subscribeSpy).toHaveBeenCalledTimes(1); + }); + + it('watch: with resetting vm', async () => { + const store = createStore({ + state: { + count: 0, + }, + mutations: { + [TEST_M]: state => state.count++, + }, + }); + + const spy = vi.fn(); + store.watch(state => state.count, spy); + + store.commit(TEST_M); + await nextTick(); + expect(store.state.count).toBe(1); + + expect(spy).toHaveBeenCalledTimes(1); + }); + + it("watch: getter function has access to store's getters object", () => { + const store = createStore({ + state: { + count: 0, + }, + mutations: { + [TEST_M]: state => state.count++, + }, + getters: { + getCount: state => state.count, + }, + }); + + const getter = function getter(state: any) { + return state.count; + }; + const spy = vi.spyOn({ getter }, 'getter'); + const spyCb = vi.fn(); + + store.watch(spy as any, spyCb); + + store.commit(TEST_M); + expect(store.state.count).toBe(1); + + expect(spy).toHaveBeenCalledWith(store.state, store.getters); + }); +}); diff --git a/packages/inula-adapter/tsconfig.json b/packages/inula-adapter/tsconfig.json new file mode 100644 index 000000000..22366a6f5 --- /dev/null +++ b/packages/inula-adapter/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "outDir": "./build", + "incremental": false, + "sourceMap": true, + "allowJs": true, // allowJs=true => tsc compile js as module, no type check + "checkJs": false, // Disable ts error checking in js + "strict": true, // js-ts mixed setting + "noImplicitReturns": true, + "noUnusedLocals": false, // 等大部分js代码改成ts之后再启用. + "noUnusedParameters": false, + "noImplicitAny": false, + "noImplicitThis": true, + "module": "CommonJS", + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "moduleResolution": "node", + "target": "es5", + "jsx": "preserve", + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "allowUnreachableCode": true, + "alwaysStrict": true, + "esModuleInterop": true, + "declaration": true, + "experimentalDecorators": true, + "downlevelIteration": true, + "types": ["jest"], // 赋值为空数组使@types/node不会起作用 + "lib": ["dom", "esnext", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"], + "baseUrl": ".", + "rootDir": "./src", + "strictNullChecks": true + }, + "exclude": ["node_modules", "**/*.spec.ts"] +} diff --git a/packages/inula-adapter/tsconfig.pinia.json b/packages/inula-adapter/tsconfig.pinia.json new file mode 100644 index 000000000..7e356f71e --- /dev/null +++ b/packages/inula-adapter/tsconfig.pinia.json @@ -0,0 +1,10 @@ +{ + "files": [ + "src/pinia/index.ts" + ], + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "declarationDir": "./build/pinia/@types" + }, +} diff --git a/packages/inula-adapter/tsconfig.vue.json b/packages/inula-adapter/tsconfig.vue.json new file mode 100644 index 000000000..61eb13c3d --- /dev/null +++ b/packages/inula-adapter/tsconfig.vue.json @@ -0,0 +1,10 @@ +{ + "files": [ + "src/vue/index.ts" + ], + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "declarationDir": "./build/vue/@types" + }, +} diff --git a/packages/inula-adapter/tsconfig.vuex.json b/packages/inula-adapter/tsconfig.vuex.json new file mode 100644 index 000000000..748555187 --- /dev/null +++ b/packages/inula-adapter/tsconfig.vuex.json @@ -0,0 +1,10 @@ +{ + "files": [ + "src/vuex/index.ts" + ], + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "declarationDir": "./build/vuex/@types" + }, +} diff --git a/packages/inula-adapter/vitest.config.ts b/packages/inula-adapter/vitest.config.ts new file mode 100644 index 000000000..01da6bc11 --- /dev/null +++ b/packages/inula-adapter/vitest.config.ts @@ -0,0 +1,32 @@ +/* + * 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 react from '@vitejs/plugin-react'; + +const alias = { + react: 'openinula', // 新增 + 'react-dom': 'openinula', // 新增 + 'react/jsx-dev-runtime': 'openinula/jsx-dev-runtime', +}; + +export default { + plugins: [react()], + test: { + environment: 'jsdom', + }, + resolve: { + alias, + }, +};