!203 vuetohorizon转换工具逻辑新增

Merge pull request !203 from Yunge/v2h

Author: 陈超涛

packages/vue-to-horizon/ep.json

@@ -11,11 +11,11 @@ export {
    *  import a from './a.jsx'
    *  registerComponent('a', a)
    */
-  registerComponent,
+    registerComponent,
   /**
    * 全局加载组件
    * import GlobalComponent from 'adapters/component'
    * <GlobalComponent componentName={'You Registered component'}  {...props} />
    */
-  GlobalComponent,
+    GlobalComponent
 };

packages/vue-to-horizon/eslint.config.js

@@ -1 +1,2 @@
+
 export * from '@cloudsop/horizon-adapter/pinia';

packages/vue-to-horizon/libs/horizon-vue/adapters/component.jsx

@@ -1,7 +1,8 @@
+
 export function reactiveAssign(reactive, obj = {}) {
   Object.keys(obj).forEach(key => {
     reactive[key] = obj[key];
-  });
+  })
 }
 
 export function vForNumber(n, callback) {
@@ -10,5 +11,27 @@ export function vForNumber(n, callback) {
   }
   return Array.from(new Array(n).keys()).map(i => {
     return callback(i + 1, i);
-  });
+  })
+}
+
+export function classnames(...args) {
+  const styleClass = [];
+  for (let index = 0; index < args.length; index++) {
+    const item = args[index];
+    if (item) {
+      const type = typeof item;
+      if (Array.isArray(item)) {
+        styleClass.push(classnames.apply(this, item));
+      } else if (type === 'object') {
+        Object.keys(item).forEach(k => {
+          if (item[k]) {
+            styleClass.push(this && this[k] || k);
+          }
+        });
+      } else if (type === 'string' || type === 'number') {
+        styleClass.push(this && this[item] || item);
+      }
+    }
+  }
+  return styleClass.join(' ');
 }

packages/vue-to-horizon/libs/horizon-vue/adapters/piniaAdapter.js

@@ -28,66 +28,4 @@ export const useInstance = vueReactive.useInstance;
 export const toInstance = vueReactive.toInstance;
 export const markRaw = vueReactive.markRaw;
 
-export function Teleport({ to, children }) {
-  const container = window.horizon.useState(() => {
-    document.createElement('div');
-  });
-
-  window.horizon.useEffect(() => {
-    to.appendChild(container);
-
-    return () => {
-      to.removeChild(container);
-    };
-  }, [to, container]);
-
-  return window.horizon.createPortal(children, container);
-}
-
-export function useWindowSize(options = {}) {
-  const {
-    initialWidth = Number.POSITIVE_INFINITY,
-    initialHeight = Number.POSITIVE_INFINITY,
-    listenOrientation = true,
-    includeScrollbar = true,
-  } = options;
-
-  const width = ref(initialWidth);
-  const height = ref(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();
-
-  window.horizon.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 window.horizon.createElement(component, props, props.children);
-}
-
-export function render(vnode, target) {
-  window.horizon.render(vnode, target);
-}
-
 export * from '@cloudsop/horizon-adapter';

packages/vue-to-horizon/libs/horizon-vue/adapters/util.js

@@ -17,7 +17,7 @@ module.exports = {
   presets: ['@babel/preset-typescript', ['@babel/preset-env', { targets: { node: 'current' } }]],
   // 确保启用实验性语法
   experimental: {
-    async: true,
+    async: true
   },
   plugins: [
     '@babel/plugin-syntax-jsx',

packages/vue-to-horizon/libs/horizon-vue/adapters/vueAdapter.js

@@ -221,17 +221,18 @@ function convert(options) {
   });
   log(handle);
 
-  const configPathSrc = _resolve(options.src, '..');
+  const configPathSrc = _resolve(options.src,'..');
   const configPathOut = _resolve(options.out);
-  console.log('should replace config:', {
-    path: _resolve(configPathSrc, 'webpackConfig.js'),
-    target: _resolve(configPathOut, 'webpack.config.js'),
-    shouldChange: existsSync(_resolve(configPathSrc, 'webpackConfig.js')),
-    targetExists: existsSync(_resolve(configPathOut, 'webpack.config.js')),
-  });
-  if (existsSync(_resolve(configPathSrc, 'webpackConfig.js'))) {
-    rmSync(_resolve(configPathOut, 'webpack.config.js'));
-    copyFileSync(_resolve(configPathSrc, 'webpackConfig.js'), _resolve(configPathOut, 'webpack.config.js'));
+  console.log(
+    "should replace config:",
+    {path:_resolve(configPathSrc,'webpackConfig.js'),
+      target:_resolve(configPathOut,'webpack.config.js'),
+    shouldChange:existsSync(_resolve(configPathSrc,'webpackConfig.js')),
+  targetExists: existsSync(_resolve(configPathOut,'webpack.config.js'))}
+  )
+  if(existsSync(_resolve(configPathSrc,'webpackConfig.js'))){
+    rmSync(_resolve(configPathOut,'webpack.config.js'));
+    copyFileSync(_resolve(configPathSrc,'webpackConfig.js'),_resolve(configPathOut,'webpack.config.js'))
   }
 }
 

packages/vue-to-horizon/libs/horizon-vue/babel.config.js

@@ -72,11 +72,7 @@ function scanPath(vuePath, whitelist, blacklist) {
   };
 }
 
-function compileFiles(
-  vueSrcPath,
-  out,
-  { clean = true, jsx = true, whitelist, blacklist, lastBuild, configPath, componentConfigPath }
-) {
+function compileFiles(vueSrcPath, out, { clean = true, jsx = true, whitelist, blacklist, lastBuild, configPath, componentConfigPath }) {
   console.log({ vueSrcPath });
   const successLog = [];
   const errorLog = [];
@@ -117,7 +113,7 @@ function compileFiles(
             keys.forEach(key => {
               item.attributesMap[convertToCamelCase(key)] = item.attributesMap[key];
             });
-          });
+          })
         }
       } catch (e) {
         LOG.error('read component config file failed');

packages/vue-to-horizon/libs/horizon-vue/cli.js

@@ -4,8 +4,9 @@ import { traverse } from '@babel/core';
 import t from '@babel/types';
 import SourceCodeContext from './sourceCodeContext.js';
 import { globalLibPaths } from './defaultConfig.js';
-import { INSTANCE } from './jsx/consts.js';
-import { addInstance } from './jsx/handlers/instanceHandler.js';
+import { INSTANCE } from './jsx/consts.js'
+import { addInstance } from './jsx/handlers/instanceHandler.js'
+
 
 export default class BaseCovertHandler {
   targetAst = null;
@@ -246,7 +247,10 @@ export default class BaseCovertHandler {
     // 检查 targetAst 是否为数组
     if (Array.isArray(this.targetAst)) {
       this.targetAst.push(exportDefaultStatement);
-    } else if (this.targetAst.program && Array.isArray(this.targetAst.program.body)) {
+    } else if (
+      this.targetAst.program &&
+      Array.isArray(this.targetAst.program.body)
+    ) {
       this.targetAst.program.body.push(exportDefaultStatement);
     } else {
       console.warn('Unable to add export default statement: unexpected AST structure');
@@ -296,7 +300,10 @@ export default class BaseCovertHandler {
 
       this.addCodeAstToHorizonForOnce('$i18n', () => {
         return t.variableDeclaration('const', [
-          t.variableDeclarator(t.identifier('$i18n'), t.callExpression(t.identifier('useI18n'), [])),
+          t.variableDeclarator(
+            t.identifier('$i18n'),
+            t.callExpression(t.identifier('useI18n'), [])
+          )
         ]);
       });
     }
@@ -328,7 +335,10 @@ export default class BaseCovertHandler {
           }
 
           return t.variableDeclaration('const', [
-            t.variableDeclarator(t.objectPattern(properties), t.callExpression(t.identifier(useMethod), callArgs)),
+            t.variableDeclarator(
+              t.objectPattern(properties),
+              t.callExpression(t.identifier(useMethod), callArgs)
+            )
           ]);
         }
 
@@ -340,19 +350,15 @@ export default class BaseCovertHandler {
 }
 
 function createBlankReactStr(name, css = [], template = '') {
-  // 将连字符转换为驼峰命名，确保函数名合法
-  const validFunctionName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
-
   const cssStr = css.map(c => `import './${name}${c.scoped ? '.scoped' : ''}.${c.lang}';`).join('\r\n');
   const componentBody = template.trim() ? 'return <TEMPLATE/>;' : 'return <Fragment />;';
-  const reactImport = template.trim()
-    ? "import React from '@cloudsop/horizon';"
-    : "import React, { Fragment } from '@cloudsop/horizon';";
+  const reactImport = template.trim() ?
+    'import React from \'@cloudsop/horizon\';' : 'import React, { Fragment } from \'@cloudsop/horizon\';';
 
   return `
     ${reactImport}
     ${cssStr}
-    function ${validFunctionName}(rawProps){
+    function ${name}(rawProps){
      ${componentBody}
     }
     `;
@@ -364,9 +370,6 @@ function createBlankReactStr(name, css = [], template = '') {
  * @returns
  */
 function getAstExportDefaultFunction(ast, name) {
-  // 将连字符转换为驼峰命名，确保函数名匹配
-  const validFunctionName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
-
   let exportDefaultFunction = null;
   traverse(ast, {
     ExportDefaultDeclaration(path) {
@@ -380,7 +383,7 @@ function getAstExportDefaultFunction(ast, name) {
       }
     },
     FunctionDeclaration(path) {
-      if (path.node.id.name === validFunctionName) {
+      if (path.node.id.name === name) {
         exportDefaultFunction = path.node;
         path.stop();
       }