feat: 增加vue2测试样例，hybrid中增加vue2组件开发

heweishui · Feb 18, 2024 · 318f283 · 318f283
1 parent e707453
commit 318f283
Show file tree

Hide file tree

Showing 13 changed files with 327 additions and 344 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -20,7 +20,7 @@
       "request": "launch",
       "name": "CLI debug",
       "program": "${workspaceFolder}/packages/taro-cli/bin/taro",
-      "cwd": "D:/project/taro-jd/taro/examples/demo-vue2",
+      "cwd": "D:/project/taro-demo/examples/demo-vue2",
       "args": ["build", "--type", "harmony-hybrid", "--watch"],
       "skipFiles": ["<node_internals>/**"]
     },

diff --git a/examples/demo-vue2 b/examples/demo-vue2
diff --git a/examples/mini-program-example/package.json b/examples/mini-program-example/package.json
@@ -44,33 +44,33 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.14.5",
-    "@tarojs/components": "3.6.23",
-    "@tarojs/helper": "3.6.23",
-    "@tarojs/plugin-platform-weapp": "3.6.23",
-    "@tarojs/plugin-platform-alipay": "3.6.23",
-    "@tarojs/plugin-platform-tt": "3.6.23",
-    "@tarojs/plugin-platform-swan": "3.6.23",
-    "@tarojs/plugin-platform-jd": "3.6.23",
-    "@tarojs/plugin-platform-qq": "3.6.23",
-    "@tarojs/plugin-platform-h5": "3.6.23",
+    "@tarojs/components": "workspace:*",
+    "@tarojs/helper": "workspace:*",
+    "@tarojs/plugin-platform-weapp": "workspace:*",
+    "@tarojs/plugin-platform-alipay": "workspace:*",
+    "@tarojs/plugin-platform-tt": "workspace:*",
+    "@tarojs/plugin-platform-swan": "workspace:*",
+    "@tarojs/plugin-platform-jd": "workspace:*",
+    "@tarojs/plugin-platform-qq": "workspace:*",
+    "@tarojs/plugin-platform-h5": "workspace:*",
     "@tarojs/plugin-platform-harmony-hybrid": "workspace:*",
-    "@tarojs/runtime": "3.6.23",
-    "@tarojs/shared": "3.6.23",
-    "@tarojs/taro": "3.6.23",
+    "@tarojs/runtime": "workspace:*",
+    "@tarojs/shared": "workspace:*",
+    "@tarojs/taro": "workspace:*",
     "@tarojs/plugin-framework-react": "workspace:*",
-    "@tarojs/react": "3.6.23",
+    "@tarojs/react": "workspace:*",
     "react-dom": "^18.2.0",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/cli": "3.6.23",
+    "@tarojs/cli": "workspace:*",
     "@types/webpack-env": "^1.13.6",
     "@types/react": "^18.2.0",
     "webpack": "5.78.0",
-    "@tarojs/webpack5-runner": "3.6.23",
-    "babel-preset-taro": "3.6.23",
-    "eslint-config-taro": "3.6.23",
+    "@tarojs/webpack5-runner": "workspace:*",
+    "babel-preset-taro": "workspace:*",
+    "eslint-config-taro": "workspace:*",
     "eslint": "^8.12.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "react-refresh": "^0.11.0",

diff --git a/examples/mini-program-example/src/pages/component/image/image.js b/examples/mini-program-example/src/pages/component/image/image.js
@@ -9,9 +9,6 @@ import Header from '../../../components/head/head'
 import ComponentState from '../../../components/component_state/component_state'
 
 export default class PageView extends React.Component {
- handleLoad = (e)=>{
-   console.log('e---->',e)
-  }
   render() {
     return (
       <View className='components-page'>
@@ -27,7 +24,7 @@ export default class PageView extends React.Component {
               <Text>Local Image</Text>
             </View>
             <View className='example-body'>
-              <Image style={{ width: '300px', height: '300px' }} src={nervLogo} lazyLoad onLoad={e=>this.handleLoad(e)}></Image>
+              <Image style={{ width: '300px', height: '300px' }} src={nervLogo}></Image>
             </View>
           </View>
           <View className='components-page__body-example example'>

diff --git a/...ro-platform-harmony-hybrid/types/env.d.ts → ...ges/taro-platform-harmony-hybrid/env.d.ts b/...ro-platform-harmony-hybrid/types/env.d.ts → ...ges/taro-platform-harmony-hybrid/env.d.ts
diff --git a/packages/taro-platform-harmony-hybrid/package.json b/packages/taro-platform-harmony-hybrid/package.json
@@ -56,7 +56,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "resolve": "^1.22.0",
-    "vue": "^2.6.11",
+    "vue": "2.7.16",
+    "vue-template-compiler": "2.7.14",
     "weui": "^1.1.2",
     "whatwg-fetch": "^3.4.0"
   },
@@ -66,22 +67,21 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-typescript": "^4.1.2",
+    "@rollup/plugin-typescript": "11.1.0",
     "@types/react": "^18.2.0",
-    "@types/vue": "^2.0.0",
     "@vue/compiler-sfc": "^2.6.11",
     "fast-glob": "^3.3.1",
     "lodash": "^4.17.21",
     "rollup": "^3.8.1",
-    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-externals": "^5.0.0",
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-ts": "^3.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^5.1.9",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^3.14.1",
     "typescript": "^4.7.4",
-    "vue-loader": "^15.9.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-class-component": "^7.2.6",
+    "vue-property-decorator": "^9.1.2"
   }
 }
diff --git a/packages/taro-platform-harmony-hybrid/rollup.config.ts b/packages/taro-platform-harmony-hybrid/rollup.config.ts
@@ -7,6 +7,7 @@ import { defineConfig } from 'rollup'
 import externals from 'rollup-plugin-node-externals'
 import postcss from 'rollup-plugin-postcss'
 import ts from 'rollup-plugin-ts'
+import typescript from 'rollup-plugin-typescript2'
 import vue from 'rollup-plugin-vue'
 
 import exportNameOnly from './build/rollup-plugin-export-name-only'
@@ -42,7 +43,6 @@ function getPlugins<T = InputPluginOption> (pre: T[] = [], post: T[] = []) {
         sourceMap: true,
       })
     }),
-    vue(),
     postcss({
       inject: { insertAt: 'top' }
     }),
@@ -67,7 +67,7 @@ const variesConfig: RollupOptions[] = [{
     'src/api/apis/taro.ts', // APIS
     'src/api/index.ts', // APIS
     'src/components/react/index.ts', // React 组件
-    'src/components/vue2/index.ts', // vue2 组件
+    // 'src/components/vue2/index.ts', // vue2 组件
     'src/components/vue3/index.ts', // vue3 组件
     'src/runtime/index.ts', // 供 Loader 使用的运行时入口
     'src/runtime/apis/index.ts', // API 入口
@@ -82,6 +82,31 @@ const variesConfig: RollupOptions[] = [{
     deps: true,
     devDeps: false,
   })])
+},{
+  input: [
+    'src/components/vue2/index.ts', // vue2 组件
+  ],
+  output: {
+    dir: 'dist',
+    preserveModules: true,
+    preserveModulesRoot: 'src'
+  },
+  plugins: [
+    nodeResolve({
+      preferBuiltins: false,
+      mainFields: ['main:harmony-hybrid', 'browser', 'module', 'jsnext:main', 'main']
+    }),
+    json({
+      compact: true,
+      preferConst: true,
+    }),
+    postcss({
+      inject: { insertAt: 'top' }
+    }),
+    typescript(),
+    vue(),
+    commonjs(),
+  ]
 }, {
   input: path.join(cwd, 'src/runtime/apis/index.ts'), // 供 babel-plugin-transform-taroapi 使用，为了能 tree-shaking
   output: {

diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/location/getLocation.ts
@@ -36,7 +36,7 @@ export const getLocation: typeof Taro.getLocation = (options) => {
   return new Promise<Taro.getLocation.SuccessCallbackResult>((resolve, reject) => {
     const loc: Partial<Taro.getLocation.SuccessCallbackResult> = {}
     let flag = true
-    let timeoutId: NodeJS.Timeout
+    let timeoutId: any
     // 只有开启了高精度定位才需要设置超时时间，默认超时时间10秒
     if (isHighAccuracy) {
       timeoutId = setTimeout(function () {

diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-react/image/index.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-react/image/index.tsx
@@ -1,7 +1,7 @@
 import 'weui'
 import './style/index.css'
 
-import classNames from 'classnames'
+// import classNames from 'classnames'
 import React from 'react'
 
 require('intersection-observer')
@@ -29,6 +29,8 @@ class Image extends React.Component<IProps> {
   imgRef: any = null
 
   componentDidMount () {
+    // eslint-disable-next-line no-console
+    console.log('component-react/image/index')
     if (this.props.lazyLoad) {
       this.observer = new IntersectionObserver(
         entries => {
@@ -66,53 +68,53 @@ class Image extends React.Component<IProps> {
     onLoad && onLoad(e)
   }
 
-  render () {
-    const {
-      className,
-      style = {},
-      src,
-      mode,
-      onError,
-      lazyLoad,
-      imgProps,
-      ...reset
-    } = this.props
-    const cls = classNames(
-      'taro-img',
-      {
-        'taro-img__widthfix': mode === 'widthFix'
-      },
-      className
-    )
-    const imgCls = classNames(
-      'taro-img__mode-' +
-        (mode || 'scaleToFill').toLowerCase().replace(/\s/g, '')
-    )
+  // render () {
+  //   const {
+  //     className,
+  //     style = {},
+  //     src,
+  //     mode,
+  //     onError,
+  //     lazyLoad,
+  //     imgProps,
+  //     ...reset
+  //   } = this.props
+  //   const cls = classNames(
+  //     'taro-img',
+  //     {
+  //       'taro-img__widthfix': mode === 'widthFix'
+  //     },
+  //     className
+  //   )
+  //   const imgCls = classNames(
+  //     'taro-img__mode-' +
+  //       (mode || 'scaleToFill').toLowerCase().replace(/\s/g, '')
+  //   )
 
-    return (
-      <div className={cls} style={style} {...reset}>
-        {lazyLoad ? (
-          <img
-            ref={img => (this.imgRef = img)}
-            className={imgCls}
-            data-src={src}
-            onLoad={this.imageOnLoad}
-            onError={onError}
-            {...imgProps}
-          />
-        ) : (
-          <img
-            ref={img => (this.imgRef = img)}
-            className={imgCls}
-            src={src}
-            onLoad={this.imageOnLoad}
-            onError={onError}
-            {...imgProps}
-          />
-        )}
-      </div>
-    )
-  }
+  //   return (
+  //     <div className={cls} style={style} {...reset}>
+  //       {lazyLoad ? (
+  //         <img
+  //           ref={img => (this.imgRef = img)}
+  //           className={imgCls}
+  //           data-src={src}
+  //           onLoad={this.imageOnLoad}
+  //           onError={onError}
+  //           {...imgProps}
+  //         />
+  //       ) : (
+  //         <img
+  //           ref={img => (this.imgRef = img)}
+  //           className={imgCls}
+  //           src={src}
+  //           onLoad={this.imageOnLoad}
+  //           onError={onError}
+  //           {...imgProps}
+  //         />
+  //       )}
+  //     </div>
+  //   )
+  // }
 }
 
 export default Image
diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-vue2/input/index.vue b/packages/taro-platform-harmony-hybrid/src/components/components-vue2/input/index.vue
@@ -4,32 +4,32 @@
     <input :type="type">
   </div>
 </template>
-  
+
 <script lang="ts">
-import { defineComponent} from 'vue';
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class CustomInput extends Vue {
+  @Prop({ type: String, required: true }) readonly type!: string;
+  @Prop({ type: Object, required: true }) readonly style!: Record<string, any>;
+
+  created() {
+    console.log('component created');
+  }
 
-export default defineComponent({
-  props: {
-    type: { type: String, required: true },
-    style: { type: Object, required: true },
-  },
-  data () {
-    return {
-      
-    };
-  },
-  created(){
-    console.log('image created')
-  },
-  mounted(){
-    console.log('image mounted')
+  mounted() {
+    console.log('component mounted');
   }
-});
+}
+
+
 </script>
+
 <style>
 .content {
   width: 300px;
   height: 300px;
-  border:'1px solid black'  
+  border: 1px solid black;  
 }
-</style>
+</style>
diff --git a/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts b/packages/taro-platform-harmony-hybrid/src/components/vue2/index.ts
@@ -73,4 +73,5 @@ export { WebView } from '@tarojs/components/lib/vue2'
 // export { MatchMedia } from './components/match-media/match-media'
 // export { default as PageContainer } from './components/page-container/page-container'
 export { default as Input } from '../components-vue2/input/index.vue'
+// export { default as Image } from '../components-vue2/image/index.vue'
 export { StickyHeader, StickySection, RootPortal, GridView, ListView, MatchMedia, PageContainer } from '@tarojs/components/lib/vue2'
diff --git a/packages/taro-platform-harmony-hybrid/tsconfig.json b/packages/taro-platform-harmony-hybrid/tsconfig.json
@@ -9,7 +9,7 @@
     "esModuleInterop": true,
     "outDir": "dist"
   },
-  "include": ["./src", "./types", "rollup.config.ts"],
+  "include": ["./src", "./types", "rollup.config.ts", "./src/**/*.vue", "./env.d.ts"],
   "ts-node": {
     "compilerOptions": {
       "module": "UMD",