Stable/fliggy beta

packages/jsx-compiler/CHANGELOG.md

@@ -1,4 +1,16 @@
 # Changelog
+
+## [0.4.38] Beta
+
+### Fixed
+
+- Fix: Solve the problem that the bytedance microapp can't pass through the className property by replace the native miniapp component tag in the compiler. image, icon, scroll-view.
+
+### Added
+
+- Feat: compat props-default-to-true in WeChat
+- Feat: add scroll-view event map of bytedance, like onScroll -> bindscroll
+
 ## [0.4.37]
 
 - Fix(bytedance-microapp): componentTag don't support the name start with '_'. Remove the `_` in bytedance.

packages/jsx-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-compiler",
-  "version": "0.4.37",
+  "version": "0.4.38-3",
   "license": "BSD-3-Clause",
   "description": "Parser for Rax JSX Statements.",
   "files": [
@@ -32,5 +32,12 @@
   "devDependencies": {
     "handlebars": "^4.5.0",
     "jest": "^24.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:raxjs/miniapp.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   }
 }

packages/jsx-compiler/src/adapter.js

@@ -83,6 +83,8 @@ const parserAdapters = {
     // Handle rax-slider and rax-swiper
     insertSwiperSlot: true,
     needRegisterProps: true,
+    // https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true compat for WeChatMiniProgram
+    needPropsDefaultToTrue: true,
   },
   'bytedance': {
     platform: 'bytedance',
@@ -103,6 +105,24 @@ const parserAdapters = {
       ...componentCommonProps.bytedance,
       className: '__rax-text'
     },
+    icon: {
+      ...componentCommonProps.bytedance,
+      className: ''
+    },
+    image: {
+      ...componentCommonProps.bytedance,
+      className: ''
+    },
+    'scroll-view': {
+      ...componentCommonProps.bytedance,
+      className: '',
+      onEndReached: 'bindscrolltolower',
+      onScroll: 'bindscroll',
+      onTouchStart: 'binddragstart',
+      onTouchMove: 'binddragging',
+      onTouchEnd: 'binddragend',
+      // onTouchCancel: ''
+    },
     styleKeyword: true,
     slotScope: false,
     // Need transform onClick -> bindonclick

packages/jsx-compiler/src/getCompiledComponents.js

@@ -12,7 +12,10 @@ module.exports = function(platform) {
     case 'bytedance':
       return {
         'rax-view': 'view',
-        'rax-text': 'text'
+        'rax-text': 'text',
+        'rax-image': 'image',
+        'rax-icon': 'icon',
+        'rax-scrollview': 'scroll-view'
       };
   }
 };

packages/jsx-compiler/src/modules/attribute.js

@@ -74,6 +74,9 @@ function transformAttribute(ast, code, adapter) {
           }
           break;
         default:
+          if (node.value === null && adapter.needPropsDefaultToTrue && !/:else|x-memo/.test(node.name.name)) {
+            node.value = t.jsxExpressionContainer(t.booleanLiteral(true));
+          }
           path.skip();
       }
     }

packages/jsx2mp-loader/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.4.37] Beta
+
+### Fixed
+
+- Fix: getHighestPriorityPackage() 逻辑修正，增加项目直接依赖该包的校验，通过时才会去尝试查找项目依赖、优先启用
+- Fix: support platform-loader
+- Fix: script-loader exclude 'plugin://xx/comp' in usingComponents
+
+### Added
+
+- Feat: support remove unused import and require of App、Page、Component、Npm package
+- Feat: miniappConfig compat the case where the entry of component use multiple platform like index.wechat.js, index.ali.js. And don't change the filed main that can't be resolved
+- Feat: hackRegeneratorRuntimeFunction in ali miniapp of copyNpm
 
 ## [0.4.36] - 2022-06-22
 

packages/jsx2mp-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx2mp-loader",
-  "version": "0.4.36",
+  "version": "0.4.37-9",
   "description": "",
   "files": [
     "src"
@@ -17,15 +17,16 @@
     "@babel/plugin-proposal-export-default-from": "^7.5.2",
     "@babel/plugin-transform-typescript": "^7.7.4",
     "@babel/preset-env": "^7.5.5",
-    "babel-plugin-danger-remove-unused-import": "^2.0.0",
+    "babel-plugin-danger-remove-unused-imports": "^2.1.1",
     "babel-plugin-minify-dead-code-elimination-while-loop-fixed": "^0.3.0",
+    "babel-plugin-remove-unused-reference": "^1.0.0",
     "babel-plugin-transform-define": "^1.3.1",
     "chalk": "^2.4.2",
     "convert-source-map": "^1.6.0",
     "csso": "^3.5.1",
     "enhanced-resolve": "^4.1.1",
     "fs-extra": "^8.1.0",
-    "jsx-compiler": "^0.4.27",
+    "jsx-compiler": "0.4.38-3",
     "less": "^4.0.0",
     "loader-utils": "^1.2.3",
     "miniapp-builder-shared": "^0.3.0",
@@ -35,5 +36,12 @@
     "stylesheet-loader": "^0.9.0",
     "stylus": "^0.54.7",
     "terser": "^4.3.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:raxjs/miniapp.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   }
 }

packages/jsx2mp-loader/src/babel-plugin-handle-regeneratorRuntime.js

@@ -0,0 +1,45 @@
+/**
+ * @Author 阿劭 [email protected]
+ * @Description 小程序严格模式下报错 `Function(...) is not function` 兼容
+ * https://aliyuque.antfin.com/tianjie.stj/nivfgf/wi0gk43l6otk3lam?singleDoc#tnMFv
+ */
+
+module.exports = function visitor({ types: t }) {
+
+  /**
+   * 判断节点是否是 Function("r", "regeneratorRuntime = r")(runtime);
+   * @param {*} node 
+   */
+  function isFunctionRegeneratorRuntime (node) {
+    return (
+      t.isCallExpression(node.callee) &&
+      node.callee.callee.name === 'Function' &&
+      node.callee.arguments.length === 2 &&
+      t.isStringLiteral(node.callee.arguments[0]) &&
+      node.callee.arguments[0].value === 'r' &&
+      t.isStringLiteral(node.callee.arguments[1]) &&
+      node.callee.arguments[1].value === 'regeneratorRuntime = r' &&
+      node.arguments.length === 1 &&
+      t.isIdentifier(node.arguments[0]) &&
+      node.arguments[0].name === 'runtime'
+    );
+  }
+
+  return {
+    visitor: {
+      CallExpression(path, state) {
+        const { node } = path;
+        if (
+          t.isCallExpression(node.callee) &&
+          node.callee.callee.name === 'Function'
+        ) {
+          if (isFunctionRegeneratorRuntime(node)) {
+            if (path.parentPath.node && t.isExpressionStatement(path.parentPath.node)) {
+              path.parentPath.remove();
+            }
+          }
+        }
+      },
+    }
+  };
+};

packages/jsx2mp-loader/src/script-loader.js

@@ -3,13 +3,14 @@ const { join, dirname, relative, resolve, sep, extname } = require('path');
 const { copySync, existsSync, mkdirpSync, ensureFileSync, writeJSONSync, readFileSync, readJSONSync } = require('fs-extra');
 const { getOptions } = require('loader-utils');
 const resolveModule = require('resolve');
-const { constants: { QUICKAPP }} = require('miniapp-builder-shared');
+const { constants: { QUICKAPP, MINIAPP }, platformMap } = require('miniapp-builder-shared');
 const cached = require('./cached');
 const { removeExt, doubleBackslash, normalizeOutputFilePath, addRelativePathPrefix, isFromTargetDirs } = require('./utils/pathHelper');
 const { isNpmModule, isJSONFile, isTypescriptFile } = require('./utils/judgeModule');
 const isMiniappComponent = require('./utils/isMiniappComponent');
 const parse = require('./utils/parseRequest');
 const { output, transformCode } = require('./output');
+const eliminateDeadCode = require('./utils/dce');
 
 const ScriptLoader = __filename;
 
@@ -53,10 +54,11 @@ module.exports = function scriptLoader(content) {
   const outputFile = (rawContent, isFromNpm = true) => {
     let distSourcePath;
     if (isFromNpm) {
-      const relativeNpmPath = relative(currentNodeModulePath, this.resourcePath);
-      const splitedNpmPath = relativeNpmPath.split(sep);
-      if (/^_?@/.test(relativeNpmPath)) splitedNpmPath.shift(); // Extra shift for scoped npm.
-      splitedNpmPath.shift(); // Skip npm module package, for cnpm/tnpm will rewrite this.
+      // 以下四行开销测下来用不到，故注释
+      // const relativeNpmPath = relative(currentNodeModulePath, this.resourcePath);
+      // const splitedNpmPath = relativeNpmPath.split(sep);
+      // if (/^_?@/.test(relativeNpmPath)) splitedNpmPath.shift(); // Extra shift for scoped npm.
+      // splitedNpmPath.shift(); // Skip npm module package, for cnpm/tnpm will rewrite this.
       distSourcePath = normalizeNpmFileName(join(outputPath, 'npm', relative(rootNodeModulePath, this.resourcePath)));
     } else {
       const relativeFilePath = relative(
@@ -69,6 +71,9 @@ module.exports = function scriptLoader(content) {
     let outputContent = {};
     let outputOption = {};
 
+    // 支付宝小程序 copyNpm 模式下对 @babel/runtime/regenerator/index.js 中的 `Function("r", "regeneratorRuntime=r")(runtime);` 进行处理
+    const needHackRegeneratorRuntimeFunction = platform.type === platformMap[MINIAPP].type && !disableCopyNpm && this.resourcePath.indexOf('@babel/runtime/regenerator/index.js') > -1;
+
     outputContent = { code: rawContent };
     outputOption = {
       outputPath: {
@@ -86,8 +91,9 @@ module.exports = function scriptLoader(content) {
             platform,
             aliasEntries
           }
-        ]
-      ],
+        ],
+        needHackRegeneratorRuntimeFunction ? require('./babel-plugin-handle-regeneratorRuntime') : null
+      ].filter(t => t),
       platform,
       isTypescriptFile: isTypescriptFile(this.resourcePath),
       rootDir,
@@ -123,7 +129,9 @@ module.exports = function scriptLoader(content) {
         for (let key in componentConfig.usingComponents) {
           if (componentConfig.usingComponents.hasOwnProperty(key)) {
             const componentPath = componentConfig.usingComponents[key];
-            if (isNpmModule(componentPath)) {
+            if (componentPath.indexOf('plugin://') === 0) {
+              // exclude plugin. eg usingComponents { "c-xxxx": "plugin://ocr/ocr-id" }
+            } else if (isNpmModule(componentPath)) {
               // component from node module
               const realComponentPath = resolveModule.sync(componentPath, { basedir: this.resourcePath, paths: [this.resourcePath], preserveSymlinks: false });
               const relativeComponentPath = normalizeNpmFileName(addRelativePathPrefix(relative(dirname(sourceNativeMiniappScriptFile), realComponentPath)));
@@ -167,9 +175,17 @@ module.exports = function scriptLoader(content) {
 
     const pkg = readJSONSync(sourcePackageJSONPath);
     const npmName = pkg.name; // Update to real npm name, for that tnpm will create like `[email protected]@rax-view` folders.
-    const npmMainPath = join(sourcePackagePath, pkg.main || '');
-
-    const isUsingMainMiniappComponent = pkg.hasOwnProperty(MINIAPP_CONFIG_FIELD) && this.resourcePath === npmMainPath;
+    let npmMainPath = join(sourcePackagePath, pkg.main || '');
+    try {
+      // compat pkg.main without suffix like `lib/index`
+      npmMainPath = require.resolve(npmMainPath);
+    } catch (e) {
+      //  can't resolve npmMainPath
+    }
+    // 兼容组件入口分端的场景
+    // this.resourcePath 是 lib/index.wechat.js, npmMainPath 是 lib/index.js
+    const isSamePath = removeExt(this.resourcePath, platform.type) === removeExt(npmMainPath, platform.type);
+    const isUsingMainMiniappComponent = pkg.hasOwnProperty(MINIAPP_CONFIG_FIELD) && isSamePath;
     // Is miniapp compatible component.
     if (isUsingMainMiniappComponent || isRelativeMiniappComponent || isThirdMiniappComponent) {
       const mainName = platform.type === 'ali' ? 'main' : `main:${platform.type}`;
@@ -235,7 +251,9 @@ module.exports = function scriptLoader(content) {
         content
       ].join('\n');
     } else {
-      outputFile(rawContent);
+      content = eliminateDeadCode(content);
+      // outputFile(rawContent);
+      outputFile(content);
     }
   } else if (isFromConstantDir(this.resourcePath) && isThirdMiniappComponent) {
     const dependencies = [];
@@ -258,7 +276,10 @@ module.exports = function scriptLoader(content) {
       content
     ].join('\n');
   } else if (!isAppJSon) {
-    outputFile(rawContent, false);
+    // outputFile(rawContent, false);
+    // content 是过了 rax-platform-loader 的（会包含 env 变量转换为布尔常量化），而 rawContent 是没有这个转换的;
+    // 后续的 babel-plugin-minify-dead-code-elimination-while-loop-fixed 依赖布尔常量来 tree-shaking.
+    outputFile(content, false);
   }
 
   return isJSON ? '{}' : transformCode(

packages/jsx2mp-loader/src/utils/dce.js

@@ -15,12 +15,24 @@ const parserOpts = {
   ], // support all plugins
 };
 
+function removeDeadCode(source) {
+  return transformSync(source, {
+    parserOpts,
+    plugins: [
+      // 只传入插件名称时，云构建运行异常，babel 加载插件出错。所以必须增加 require()
+      // Error: Cannot find module 'babel-plugin-remove-unused-reference'
+      // Make sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.json file.
+      require('babel-plugin-remove-unused-reference')
+    ]
+  }).code;
+}
+
 function removeUnusedImport(source) {
   return transformSync(source, {
     parserOpts,
     plugins: [
       [
-        require('babel-plugin-danger-remove-unused-import'),
+        require('babel-plugin-danger-remove-unused-imports'),
         {
           ignore: 'rax'
         }
@@ -38,6 +50,7 @@ const codeProcessor = (processors = [], sourceCode) => processors
 
 function eliminateDeadCode(source) {
   const processors = [
+    removeDeadCode,
     removeUnusedImport,
   ];
 

packages/jsx2mp-loader/src/utils/pathHelper.js

@@ -98,12 +98,26 @@
  * @param {string} rootDir
  */
 function getHighestPriorityPackage(packageName, rootDir) {
-  const resolvePaths = require.resolve.paths(packageName);
-  resolvePaths.unshift(join(rootDir, 'node_modules'));
-  const packagePath = require.resolve(packageName, {
-    paths: resolvePaths
-  });
-  return require.resolve(packagePath);
+  // 无脑将 rootDir 的 node_modules 加入 resolve paths 的实现方式，存在因为项目间接依赖抬升 packageName 导致也会被命中，存在不稳定性
+  // 修正为项目必须直接引入了对应包时，才会尝试查找项目依赖 & 优先启用
+  try {
+    const pkgJSON = require(join(rootDir, 'package.json'));
+    const isDirectDeps = (pkgJSON.dependencies && pkgJSON.dependencies[packageName]) || (pkgJSON.devDependencies && pkgJSON.devDependencies[packageName]);
+    if (isDirectDeps) {
+      const rootDirResolved = require.resolve(packageName, {
+        paths: [join(rootDir, 'node_modules')]
+      });
+      if (rootDirResolved) {
+        return rootDirResolved;
+      }
+    }
+  } catch(error) {
+    if (process.env.DEBUG === 'true') {
+      const chalk = require('chalk');
+      console.log(chalk.magenta(`getHighestPriorityPackage(${packageName}, ${rootDir}) exception catched: ${error && error.message}`));
+    }
+  }
+  return require.resolve(packageName);
 }
 
 module.exports = {

packages/miniapp-compile-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.4] Beta
+
+### Added
+
+- Feat: support USE_FLI_RAX and RAX_RUNTIME_ALIAS, for `clam` internally change rax to FMini, especially for the @ali/fli-jsx2mp-runtime
+
 ## [0.3.3] - 2022-09-15
 
 - Fix: native routes in `pages/` build error: `needCopyList[i].to error in setEntry()`