feat: 新增inula-adapter模块适配vue api

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"

packages/inula-adapter/.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+.idea
+.vscode
+package-lock.json
+/build

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文件中的<script>和<style>标记内的代码
+  endOfLine: 'lf', // 仅限换行（\n）
+};

packages/inula-adapter/README.md

@@ -0,0 +1,7 @@
+## 适配Vue
+
+### 生命周期
+
+### pinia
+
+### vuex

packages/inula-adapter/babel.config.js

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  presets: ['@babel/preset-typescript', ['@babel/preset-env', { targets: { node: 'current' } }]],
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        runtime: 'automatic',
+        importSource: 'openinula',
+      },
+    ],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    '@babel/plugin-transform-object-assign',
+    '@babel/plugin-transform-object-super',
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+    ['@babel/plugin-transform-template-literals', { loose: true }],
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-literals',
+    '@babel/plugin-transform-for-of',
+    '@babel/plugin-transform-block-scoped-functions',
+    '@babel/plugin-transform-classes',
+    '@babel/plugin-transform-shorthand-properties',
+    '@babel/plugin-transform-computed-properties',
+    '@babel/plugin-transform-parameters',
+    ['@babel/plugin-transform-spread', { loose: true, useBuiltIns: true }],
+    ['@babel/plugin-transform-block-scoping', { throwIfClosureRequired: false }],
+    ['@babel/plugin-transform-destructuring', { loose: true, useBuiltIns: true }],
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining',
+  ],
+};

packages/inula-adapter/docs/README_global_api.md

@@ -0,0 +1,267 @@
+## 全局 API
+
+1、createApp() 用法如下：
+```jsx
+import { createApp } from 'openinula';
+
+function App() {
+  return <div>Hello World</div>;
+}
+const app = createApp(<App>);
+
+app.mount('#app');
+```
+
+2、createSSRApp() 不支持
+
+3、app.mount() 用法如下：
+```jsx
+import { createApp } from 'openinula';
+
+function App() {
+  return <div>Hello World</div>;
+}
+const app = createApp(<App>);
+
+app.mount('#app');
+
+```
+
+4、app.unmount() 用法如下：
+```jsx
+import { createApp } from 'openinula';
+
+function App() {
+  return <div>Hello World</div>;
+}
+const app = createApp(<App>);
+
+app.mount('#app');
+
+app.unmount();
+```
+
+5、app.component() 不支持
+
+6、app.directive() 不支持
+
+7、app.use() 用法如下：
+```jsx
+const PluginA = {
+  install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2),
+}
+
+const app = createApp(Root)
+app.use(PluginA)
+
+```
+
+8、app.mixin() 不支持，需要手动修改，下面举个在plugin中使用mixin的例子：
+Vue的mixin用法如下：
+```js
+import Timer from '../timer';
+
+function startTimer(oCallback, iInterval) {
+  let timer = setInterval(function () {
+    oCallback();
+  }, iInterval);
+  this.arrTimer.push(timer);
+  return timer;
+}
+
+function endTimer(timer) {
+  if (timer != undefined) {
+    for (let i = 0; i < this.arrTimer.length; i++) {
+      if (this.arrTimer[i] == timer) {
+        this.arrTimer.splice(i, 1);
+        break;
+      }
+    }
+    clearInterval(timer);
+  }
+}
+
+function mountEvent(strSubject, oCallback) {
+  this.Bus.on(strSubject, oCallback);
+  this.arrMountEvent.push({
+    subject: strSubject,
+    callback: oCallback,
+  });
+}
+
+let isInstalled = false;
+export default {
+  install(projectVue) {
+    if (isInstalled) {
+      return;
+    }
+    isInstalled = true;
+
+    projectVue.mixin({
+      data() {
+        return {
+          arrTimer: [],
+          arrMountEvent: [],
+        };
+      },
+      beforeUnmount() {
+        this.arrTimer.forEach(oTimer => {
+          Timer.endTimer(oTimer, this);
+        });
+        this.arrMountEvent.forEach(oMountEvent => {
+          this.Bus.off(oMountEvent.subject, oMountEvent.callback);
+        });
+      },
+    });
+
+    // 1.定时器处理
+    projectVue.config.globalProperties.$startTimer = startTimer;
+    projectVue.config.globalProperties.$endTimer = endTimer;
+
+    // 1.mounted事件处理
+    projectVue.config.globalProperties.$mountEvent = mountEvent;
+  },
+};
+```
+openinula中需要修改为hook，改法如下：
+```jsx
+import { useReactive, onBeforeUnmount } from 'adapters/vue-openinula';
+import Timer from '../timer';
+
+export function useEventHook() {
+  const data = useReactive({
+    arrTimer: [],
+    arrMountEvent: [],
+  });
+
+  onBeforeUnmount(() => {
+    data.arrTimer.forEach(oTimer => {
+      Timer.endTimer(oTimer, this);
+    });
+    data.arrMountEvent.forEach(oMountEvent => {
+      this.Bus.off(oMountEvent.subject, oMountEvent.callback);
+    });
+  });
+
+  function startTimer(oCallback, iInterval) {
+    let timer = setInterval(function () {
+      oCallback();
+    }, iInterval);
+    data.arrTimer.push(timer);
+    return timer;
+  }
+
+  function endTimer(timer) {
+    if (timer != undefined) {
+      for (let i = 0; i < data.arrTimer.length; i++) {
+        if (data.arrTimer[i] == timer) {
+          data.arrTimer.splice(i, 1);
+          break;
+        }
+      }
+      clearInterval(timer);
+    }
+  }
+
+  function mountEvent(strSubject, oCallback) {
+    // this.Bus.on(strSubject, oCallback);
+    data.arrMountEvent.push({
+      subject: strSubject,
+      callback: oCallback,
+    });
+  }
+
+  return { startTimer, endTimer, mountEvent };
+}
+```
+使用方式对比如下：
+```jsx
+// 使用vue中的使用
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    showLog(logId) {
+      this.$startTimer(
+        () => {
+          self.queryAutoLog();
+        },
+        1000,
+      );
+    },
+  },
+}
+
+// openinula中使用
+export default (props) => {
+  const {$startTimer} = useEventHook();
+
+  const dataReactive = reactive({});
+  const showLog = () => {
+    $startTimer(
+      () => {
+        self.queryAutoLog();
+      },
+      1000,
+    );
+  };
+}
+```
+
+9、app.provide() 不支持
+
+10、app.runWithContext() 不支持
+
+11、app.version 用法如下：
+```jsx
+import { createApp } from 'openinula';
+function App() {
+  return <div>Hello World</div>;
+}
+const app = createApp(<App>);
+console.log(app.version);
+```
+12、app.config
+13、app.config.errorHandler 不支持
+14、app.config.warnHandler 不支持
+15、app.config.performance 不支持
+16、app.config.compilerOptions 不支持
+
+17、app.config.globalProperties
+1. 支持给app.config.globalProperties赋值，通过useGlobalProperties使用，用法如下：
+```jsx
+const Comp = () => {
+  // this.foo 转成：
+  const foo = useGlobalProperties('foo');
+  const { bar } = useGlobalProperties();
+  return (
+    <div>
+      <span id={'foo'}>
+        {foo}, {bar}
+      </span>
+    </div>
+  );
+};
+
+const app = createApp(<Comp />);
+// 设置globalProperties
+app.config.globalProperties.foo = 'hello';
+app.config.globalProperties.bar = 'inula';
+
+app.mount(global.container);
+```
+2. 但是如果给app.config.globalProperties赋值是函数，同时函数中使用了this，需要手动修改：
+```jsx
+app.config.globalProperties.foo = function() {
+  // this是undefined，需要手动修改
+  return this.bar;
+}
+
+// 修改为，把使用的内容传入
+app.config.globalProperties.foo = function(bar) {
+  return bar;
+}
+```
+
+18、app.config.optionMergeStrategies 不支持