feat(hippy-vue-next): support vue3.x (#2357)

* feat(hippy-vue-next): initialize hippy-vue-next package * feat(hippy-vue-next): rollup build config * feat(example): add vue-next demo * docs(hippy-vue-next): update vue version * feat(hippy-vue-next): update branch up to date with Tencent:master * feat(hippy-vue-next): update comment * feat(example): use @vue/runtime-core with package * docs(hippy-vue-next): update comment * fix(hippy-vue-next): fix demo debug problem * feat(hippy-vue-next): modify import type of runtime in demo * feat(hippy-vue-next): generate d.ts file * fix(hippy-vue-next): fix android horizontal problem in demo-list * feat(hippy-vue-next): modify eslint options to check demo's code * feat(hippy-vue-next): add vue-next unit test * feat(hippy-vue-next): fix & commit unit tests * feat(hippy-vue-next): ignore api-extractor warnings * docs(hippy-vue-next): update docs * docs(hippy-vue-next): update comment * docs(hippy-vue-next): update docs * docs(hippy-vue-next): update docs * chore(license): add license header * docs(hippy-vue-next): update docs * feat(hippy-vue-next): add once event demo * refactor(hippy-vue-next): rename tool package * docs(hippy-vue-next): update docs * docs(hippy-vue-next): update comment * docs(hippy-vue-next): update docs * feat(hippy-vue-next): modify regexp * docs(hippy-vue-next): update docs * feat(hippy-vue-next): modify regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): perf regexp * feat(hippy-vue-next): reset old package-lock * feat(hippy-vue-next): update breakStrategy demo * feat(hippy-vue-next): add utils unit test case * feat(hippy-vue-next): add utils & element unit test case * feat(hippy-vue-next): add event & element unit test case * feat(hippy-vue-next): add native unit test case * feat(hippy-vue-next): add built-in & patch unit test case * feat(hippy-vue-next): add patch unit test case * feat(hippy-vue-next): add style unit test case * feat(hippy-vue-next): add style unit test case * feat(hippy-vue-next): add style & util unit test case * fix(hippy-vue-next): fix swiper & animation warn in debug mode * feat(hippy-vue-next): use shallowRef to up perf for component reactive * fix(hippy-vue-next): fix animation warn in debug mode * feat(hippy-vue-next): upgrade debug package * feat(hippy-vue-next): fix CR problem * feat(hippy-vue-next): fix CR problem * feat(hippy-vue-next): app start support both callback & promise * feat(hippy-vue-next): fix turbo proxy value problem * feat(hippy-vue-next): update docs * feat(hippy-vue-next): fix animation demo problem * feat(hippy-vue-next): modify register hippy method to compatible vue2 * feat(hippy-vue-next): update docs * feat(hippy-vue-next): update vue3 docs * feat(hippy-vue-next): add waterfall lose props * fix(vue-next): fix lint issues and logic robust issues * feat(hippy-vue-next): add event bus & unit test case * feat(hippy-vue-next): add webpack vendor options * feat(hippy-vue-next): add webpack vendor options * feat(hippy-vue-next): remove unused demo method * feat(hippy-vue-next): modify event bus to compatible vue2 * feat(hippy-vue-next): modify event bus to compatible vue2 * feat(hippy-vue-next): add event-bus unit test cases * feat(hippy-vue-next): add build vendor directive * feat(hippy-vue-next): remove demo redundant method & add silent option * feat(hippy-vue-next): update debug doc * feat(hippy-vue-next): add console output style * feat(hippy-vue-next): add custom nativeapis and components demo * docs(text): extend custom nativeapis and components docs * feat(hippy-vue-next): remove auto generated declaration files * feat(hippy-vue-next): update demo list & compatible vue3.2.39+ event * feat(hippy-vue-next): support scoped & attribute selector & merge update * feat(hippy-vue-next): support scoped & add unit tests * feat(hippy-vue-next): update vue-next-demo same to vue-demo * feat(hippy-vue-next): add unit tests * feat(hippy-vue-next): use named export instead universal export * feat(hippy-vue-next): update css-loader name to compatible vue-loader * feat(hippy-vue-next): fix style matched issue * refactor(vue-next): update docs & lock * fix(npm,eslint): update npm package & fix lint * feat(hippy-vue-next): add style unit tests * feat(hippy-vue-next): fix eslint issue * feat(hippy-vue-next): add android router inject logic & doc * feat(hippy-vue-next): use hippy history to solve router inject logic * feat(hippy-vue-next): update router history doc * feat(hippy-vue-next): update router history doc * feat(vue): add getElemCss scoped judgement * refactor(vue-demo): remove stop Co-authored-by: anqinli <[email protected]> Co-authored-by: birdguo <[email protected]> Co-authored-by: Zoom Chan <[email protected]> Co-authored-by: birdguo <[email protected]>
Tencent · Oct 8, 2022 · 2346eb8 · 2346eb8
1 parent 3fb012d
commit 2346eb8
Show file tree

Hide file tree

Showing 183 changed files with 58,745 additions and 8,875 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -53,6 +53,10 @@ module.exports = {
     'jsx-a11y',
   ],
   overrides: [
+    {
+      files: ['*.test.ts'],
+      extends: ['plugin:jest/recommended'],
+    },
     {
       files: ['**/*.ts', '**/*.tsx'],
       extends: ['eslint-config-tencent/ts'],
@@ -65,6 +69,9 @@ module.exports = {
         '@typescript-eslint/naming-convention': 'off',
         '@typescript-eslint/prefer-for-of': 'off',
       },
+      parserOptions: {
+        project: ['./**/tsconfig.json'],
+      },
     },
   ],
   env: {
@@ -95,6 +102,9 @@ module.exports = {
     // Allow event name not kebab-case
     'vue/custom-event-name-casing': 'off',
 
+    // Allow component names not be multi-word
+    'vue/multi-word-component-names': 'off',
+
     'import/no-unresolved': 'off',
 
     // Disable prop-types
@@ -103,6 +113,8 @@ module.exports = {
     // Disable deprecated
     'react/no-deprecated': 'off',
 
+    'react/no-unknown-property': 'off',
+
     'import/namespace': [
       'error',
       {
@@ -156,6 +168,7 @@ module.exports = {
           ['shared', resolveVue('shared')],
           ['sfc', resolveVue('sfc')],
           ['he', path.resolve(__dirname, './packages/hippy-vue/src/util/entity-decoder')],
+          ['@hippy-vue-next-style-parser', resolvePackage('hippy-vue-next-style-parser')],
         ],
       },
     },

diff --git a/.github/workflows/frontend_build_tests.yml b/.github/workflows/frontend_build_tests.yml
@@ -32,7 +32,7 @@ jobs:
       - name: lint & build
         run: npm run lint & npm run build
       - name: test
-        run: npm run coverage
+        run: npm run test:jest && npm run coverage
       - name: coverage
         if: matrix.node == '16.x'
         uses: codecov/codecov-action@v2
diff --git a/README.md b/README.md
@@ -58,10 +58,10 @@ For iOS, we recommend to use iOS simulator when first try. However, you can chan
    >
    > `npm run build`: Build each front-end sdk package.  
 
-2. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo]` at root directory.
+2. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]` at root directory.
 3. Start the Xcode and build the iOS app with `open examples/ios-demo/HippyDemo.xcodeproj`.
 
-> If `Step 2` throw error, you can `cd` to `examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
+> If `Step 2` throw error, you can `cd` to `examples` hippy-react-demo or hippy-vue-demo or hippy-vue-next-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
 >
 > More details for [iOS SDK integration](https://hippyjs.org/#/ios/integration?id=ios-%e9%9b%86%e6%88%90).
 
@@ -81,12 +81,12 @@ Before build the android app, please make sure the SDK and NDK is installed, And
    >
    > `npm run build`: Build each front-end sdk package.  
 
-2. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo]` at root directory.
+2. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]` at root directory.
 3. Open `Android Project` at root directory with Android Studio.
 4. Connect Android phone with USB cable and make sure USB debugging mode is enabled(Run `adb devices` on the computer terminal to check cellphone connection status).
 5. Open the project with Android Studio, run and install the apk.
 
-> If `Step 2` throw error, you can `cd` to `examples` hippy-react-demo or hippy-vue-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
+> If `Step 2` throw error, you can `cd` to `examples` hippy-react-demo or hippy-vue-demo or hippy-vue-next-demo, and run `npm install --legacy-peer-deps` to install demo dependencies first.
 >
 > If you encounter the issue of `No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android`, here is the [solution](https://github.com/google/filament/issues/15#issuecomment-415423557).
 >
@@ -95,19 +95,19 @@ Before build the android app, please make sure the SDK and NDK is installed, And
 ### Debug the js demo
 
 1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
-2. Run `npm run init:example [hippy-react-demo|hippy-vue-demo]` at root directory.
-3. Run `npm run debugexample [hippy-react-demo|hippy-vue-demo] dev` at root directory.
+2. Run `npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]` at root directory.
+3. Run `npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev` at root directory.
 
-> Or you can `cd` to `examples/hippy-react-demo` or `examples/hippy-vue-demo` directory to run `npm run hippy:dev` instead.
+> Or you can `cd` to `examples/hippy-react-demo` or `examples/hippy-vue-demo` or `examples/hippy-vue-next-demo` directory to run `npm run hippy:dev` instead.
 >
-> On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` > `dist`(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please call `npm run build` at root directory again.
+> On example debug mode, npm packages such as @hippy/react, @hippy/vue, @hippy/vue-next are linked to `packages` > `[different package]` > `dist`(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please call `npm run build` at root directory again.
 >
 > More details for debugging can be read in [Hippy Debug Document](https://hippyjs.org/#/guide/debug).
 
 ### Build the js production demo
 
 1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
-2. `cd` to examples `hippy-react-demo` or `hippy-vue-demo`.
+2. `cd` to examples `hippy-react-demo` or `hippy-vue-demo` or `hippy-vue-next-demo`.
 3. Run `npm install` to install demo js dependencies.
 4. Run `npm run hippy:vendor` and `npm run hippy:build` in sequence to build the production `vendor.[android|ios].js` and `index.[android|ios].js`.
 
@@ -136,12 +136,15 @@ Hippy
 ├── examples                          # Demo code for frontend or native developer.
 │   ├── hippy-react-demo              # hippy-react js demo code.
 │   ├── hippy-vue-demo                # hippy-vue js demo code.
+│   ├── hippy-vue-next-demo           # hippy-vue-next js demo code.
 │   ├── ios-demo                      # iOS native demo code.
 │   └── android-demo                  # Android native demo code.
 ├── packages                          # npm packages.
 │   ├── hippy-react                   # React binding for Hippy.
 │   ├── hippy-react-web               # Web adapter for hippy-react.
+│   ├── hippy-vue-next-style-parser   # style parser for Hippy vue-next.
 │   ├── hippy-vue                     # Vue binding for Hippy.
+│   ├── hippy-vue-next                # Vue-next binding for Hippy.
 │   ├── hippy-vue-css-loader          # Webpack loader for convert CSS text to JS AST.
 │   ├── hippy-vue-loader              # Forked from vue-loader to do some hippy customization.
 │   ├── hippy-vue-native-components   # Native components extensions for hippy-vue.

diff --git a/docs/assets/img/hippy-vue-next-arch-cn.png b/docs/assets/img/hippy-vue-next-arch-cn.png
diff --git a/docs/en-us/assets/img/hippy-vue-next-arch-en.png b/docs/en-us/assets/img/hippy-vue-next-arch-en.png
diff --git a/docs/en-us/guide/debug.md b/docs/en-us/guide/debug.md
@@ -609,6 +609,6 @@ Set Host App debugMode to true and pass in the bundleUrl generated by front-end
 
 Both hippy-react and hippy-vue will output the information of communicating with native, including the js-native node operations, events sent/received. These logs are actually very helpful for business debugging, allowing developers to understand how the front-end framework translates code into a syntax that the native can understand. When you encounter problems, please first check the framework communication logs, as they can basically locate most of the problems.
 
-If you need to turn off the logs, you can add `silent: true` to hippy-react's `new Hippy` startup parameters, or  turn on `Vue.config.silent = true;` in hippy-vue project entry file.
+If you need to turn off the logs, you can add `silent: true` to hippy-react's `new Hippy` startup parameters, or  turn on `Vue.config.silent = true;` in hippy-vue project entry file, or add `silent: true` to hippy-vue-next's `createApp` init options.
 
 <img src="../assets/img/inspectDebugInfo.png" alt="Communication Info" width="60%"/>