Release: build-plugin-component 1.3.0 (#93)

* feat: 🎸 custom portal moduels

exposed mothods to build-plugin-miniapp-preview

✅ Closes: #66, #53

* fix: 🐛 can not gen device.js when run start

* chore: 🤖 version

* Feat/optimize component doc (#94)

✅ Closes: #86

* chore: 🤖 change version to 1.3.0

Co-authored-by: 山河 <406400939@qq.com>

Author: maoxiaoke

.gitignore

@@ -19,6 +19,7 @@ packages/*/es/
 .vscode-test
 
 **/.ice/
+.idea/
 
 **/package-lock.json
 **/build

packages/build-plugin-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-component",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "build plugin for component development",
   "main": "src/index.js",
   "scripts": {

packages/build-plugin-component/src/compiler/babel.js

@@ -31,7 +31,7 @@ const getBabelConfig = ({ target, componentLibs, rootDir, babelPlugins, babelOpt
   }
   // generate babel-plugin-import config
   const plugins = [];
-  componentLibs.forEach(libraryName => {
+  componentLibs.forEach((libraryName) => {
     // check es folder if target is es
     const pluginOption = {
       libraryName,
@@ -52,7 +52,7 @@ const getBabelConfig = ({ target, componentLibs, rootDir, babelPlugins, babelOpt
   babelConfig.plugins = babelConfig.plugins.concat(plugins);
   if (alias) {
     const aliasRelative = {};
-    Object.keys(alias).forEach(aliasKey => {
+    Object.keys(alias).forEach((aliasKey) => {
       aliasRelative[aliasKey] = alias[aliasKey].startsWith('./') ? alias[aliasKey] : `./${alias[aliasKey]}`;
     });
     babelConfig.plugins = babelConfig.plugins.concat([[
@@ -84,11 +84,11 @@ module.exports = function babelCompiler(
   const filesPath = glob.sync('**/*.*', { cwd: srcPath, ignore: ['node_modules/**', '*.d.ts'] });
   // traverse to compile the js files
   const compileInfo = [];
-  compileTargets.forEach(target => {
+  compileTargets.forEach((target) => {
     const destPath = path.join(rootDir, target);
     // clear dir
     fs.emptyDirSync(destPath);
-    filesPath.forEach(filePath => {
+    filesPath.forEach((filePath) => {
       const sourceFile = path.join(srcPath, filePath);
       if (!REG_JS.test(filePath) || REG_D_TS.test(filePath)) {
         // copy file if it does not match REG_JS

packages/build-plugin-component/src/configs/rax/getDemoConfig.js

@@ -3,14 +3,14 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { hmrClient } = require('rax-compile-config');
 const getBaseWebpack = require('./getBaseWebpack');
-const generateRaxDemo = require('../../utils/generateRaxDemo');
 const setCSSRule = require('../../utils/setCSSRule');
+const { getRaxDemoEntryJs } = require('../../utils/handlePaths');
 
 module.exports = (context, options) => {
   const { command, rootDir } = context;
-  const { demos, entries } = options;
+  const { demos, entries, inlineStyle = true } = options;
   const config = getBaseWebpack(context, { ...options, name: 'demo' });
-  const portalPath = generateRaxDemo(demos, context);
+  const portalPath = getRaxDemoEntryJs(rootDir);
   if (command === 'start') {
     config
       .entry('portal')
@@ -23,7 +23,7 @@ module.exports = (context, options) => {
   config.output.filename('[name].js');
   config.output.publicPath('./');
   config.output.path(path.join(rootDir, 'build'));
-  setCSSRule(config, command !== 'start');
+  setCSSRule(config, inlineStyle);
   if (command === 'start') {
     config.output.publicPath('/demo');
   } else {
@@ -38,6 +38,8 @@ module.exports = (context, options) => {
           filename: `demo/${entryKey}.html`,
           chunks: [entryKey],
           jsPath: `./${entryKey}.js`,
+          cssPath: `./${entryKey}.css`,
+          inlineStyle,
           template: path.resolve(__dirname, '../../template/raxDemo.html'),
         },
       ]);

packages/build-plugin-component/src/configs/rax/getDistConfig.js

@@ -27,6 +27,7 @@ module.exports = (context, options) => {
   ]);
   // 输出到 dist 目录
   config.output.path(path.join(rootDir, 'dist'));
+
   setCSSRule(config, options.inlineStyle);
   config.plugin('minicss')
     .use(MiniCssExtractPlugin, [{

packages/build-plugin-component/src/configs/rax/miniapp/getBase.js

@@ -10,6 +10,7 @@ const parseTarget = (target) => (target === MINIAPP ? 'ali-miniapp' : target);
 module.exports = (context, target, options = {}, onGetWebpackConfig) => {
   const { rootDir, command } = context;
   const { distDir = '' } = options[target] || {};
+
   const outputPath = getOutputPath(context, { target, distDir });
   const config = getWebpackBase(context, {
     disableRegenerator: true,

packages/build-plugin-component/src/rax.js

@@ -20,8 +20,11 @@ const devCompileLog = require('./utils/raxDevCompileLog');
 const buildCompileLog = require('./utils/raxBuildCompileLog');
 const modifyPkgHomePage = require('./utils/modifyPkgHomePage');
 const getDemoConfig = require('./configs/rax/getDemoConfig');
+const getReadme = require('./utils/getReadme');
+const generateRaxDemo = require('./utils/generateRaxDemo');
+const { setModulesInfo } = require('./utils/getPortalModules');
 
-module.exports = ({ registerTask, registerUserConfig, context, onHook, registerCliOption, onGetWebpackConfig, onGetJestConfig, modifyUserConfig, log }) => {
+module.exports = ({ registerTask, registerUserConfig, context, onHook, registerCliOption, onGetWebpackConfig, onGetJestConfig, modifyUserConfig, log, registerMethod, setValue }) => {
   const { rootDir, userConfig, command, pkg, commandArgs } = context;
   const { plugins, targets, disableUMD, inlineStyle = true, ...compileOptions } = userConfig;
   if (!(targets && targets.length)) {
@@ -37,6 +40,12 @@ module.exports = ({ registerTask, registerUserConfig, context, onHook, registerC
   registerUserConfig(defaultUserConfig.concat(raxUserConfig));
   // disable demo when watch dist
 
+  registerMethod('pluginComponentGetDemoDir', getDemoDir);
+  registerMethod('pluginComponentGetDemos', getDemos);
+  registerMethod('pluginComponentGetReadme', getReadme);
+  registerMethod('pluginComponentSetPortalModules', setModulesInfo);
+  setValue('pluginComponentDir', __dirname);
+
   let entries = {};
   let serverBundles = {};
   let demos = [];
@@ -76,7 +85,7 @@ module.exports = ({ registerTask, registerUserConfig, context, onHook, registerC
     if (raxBundles) {
       entries = raxBundles.entries;
       serverBundles = raxBundles.serverBundles;
-      const demoConfig = getDemoConfig(context, { ...compileOptions, entries, demos });
+      const demoConfig = getDemoConfig(context, { ...compileOptions, entries, demos, inlineStyle });
       registerTask('component-demo', demoConfig);
     }
   }
@@ -108,7 +117,7 @@ module.exports = ({ registerTask, registerUserConfig, context, onHook, registerC
     fse.removeSync(path.join(rootDir, 'build'));
     fse.removeSync(path.join(rootDir, 'es'));
 
-    targets.forEach(target => {
+    targets.forEach((target) => {
       const options = { ...userConfig, target, inlineStyle };
       if (target === WEB) {
         registerTask(`component-build-${target}`, getDistConfig(context, options));
@@ -140,16 +149,22 @@ module.exports = ({ registerTask, registerUserConfig, context, onHook, registerC
     });
   }
 
+  onHook(`before.${command}.run`, async () => {
+    await generateRaxDemo(demos, context);
+  });
+
   onHook('after.build.compile', async (args) => {
     buildCompileLog(args, targets, rootDir, userConfig);
     if (!skipDemo) {
       await modifyPkgHomePage(pkg, rootDir);
     }
   });
+
   onHook('after.start.compile', async (args) => {
     const devUrl = args.url;
     devCompileLog(args, devUrl, targets, entries, rootDir, { ...userConfig, watchDist });
   });
+
   if (command === 'test') {
     // jest config
     onGetJestConfig((jestConfig) => {
@@ -177,4 +192,4 @@ function addMiniappTargetParam(target, originalConfig = {}) {
       break;
   }
   originalConfig.mode = 'watch';
-}
+}

packages/build-plugin-component/src/template/device.hbs

@@ -0,0 +1,22 @@
+import { createElement } from 'rax';
+
+const Device = ({ children }) => (
+  <div className={'device-view'}>
+    <svg className="device-md-bar" viewBox="0 0 1384.3 40.3">
+      <path className="st0" d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z" />
+      <circle className="st0" cx="1299" cy="20.2" r="20" />
+      <path
+        className="st0"
+        d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
+      />
+    </svg>
+
+    <svg className="device-ios-notch" viewBox="0 0 219 31">
+      <path d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z" fillRule="evenodd" />
+    </svg>
+
+    <div className="device-view-inner">{children}</div>
+  </div>
+);
+
+export default Device;

packages/build-plugin-component/src/template/miniapp/ali-miniapp/mini.project.json

@@ -0,0 +1,3 @@
+{
+  "builtInModules_blacklist": ["core-js"]
+}

packages/build-plugin-component/src/template/raxDemo.html

@@ -4,6 +4,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <title>Rax Component Demo</title>
+<% if (!htmlWebpackPlugin.options.inlineStyle) { %>
+  <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cssPath %>"></link>
+<% } %>
 </head>
 <body style="padding: 0;margin: 0">
 <script type="text/javascript" src="<%= htmlWebpackPlugin.options.jsPath %>"></script>