Merge pull request #4799 from alibaba/release/2.1.1

Release/2.1.1

examples/basic-vite/build.json

@@ -15,4 +15,4 @@
       "changeOrigin": true
     }
   }
-}
+}

examples/basic-vite/package.json

@@ -10,8 +10,8 @@
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^16.9.13",
+    "@types/react": "^17.0.0",
-    "@types/react-dom": "^16.9.4"
+    "@types/react-dom": "^17.0.0"
   },
   "license": "MIT"
 }

examples/basic-vite/src/Layout/index.tsx

@@ -0,0 +1,8 @@
+export default ({ children }) => {
+  return (
+    <div>
+      Layout
+      {children}
+    </div>
+  );
+};

examples/basic-vite/src/pages/Dashboard/Page1/index.tsx

@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>Page1</div>
+  );
+};

examples/basic-vite/src/pages/Dashboard/Page2/index.tsx

@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>Page2</div>
+  );
+};

examples/basic-vite/src/pages/Dashboard/index.tsx

@@ -0,0 +1,8 @@
+export default ({ children }) => {
+  return (
+    <div>
+      这是 Dashboard
+      {children}
+    </div>
+  );
+};

examples/basic-vite/src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import store from './store';
 import './index.css';
 

examples/basic-vite/src/routes.ts

@@ -1,4 +1,8 @@
 import { IRouterConfig, lazy } from 'ice';
+import DashboardLayout from '@/pages/Dashboard';
+import Dashboard1 from '@/pages/Dashboard/Page1';
+import Dashboard2 from '@/pages/Dashboard/Page2';
+import Layout from '@/Layout';
 
 const Home = lazy(() => import('@/pages/Home'));
 
@@ -6,7 +10,31 @@ const routes: IRouterConfig[] = [
   {
     path: '/',
     component: Home,
-  }
+    exact: true
+  },
+  {
+    path: '/',
+    component: Layout,
+    children: [
+      {
+        path: '/dashboard',
+        component: DashboardLayout,
+        children: [
+          {
+            path: '/a',
+            component: Dashboard1,
+            exact: true
+          },
+          {
+            path: '/b',
+            component: Dashboard2,
+            exact: true
+          }
+        ]
+      },
+    ]
+  },
+
 ];
 
 export default routes;

examples/basic-vite/tsconfig.json

@@ -6,7 +6,7 @@
     "outDir": "build",
     "module": "esnext",
     "target": "es6",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "lib": [
@@ -37,7 +37,7 @@
         ".ice/pages/*"
       ],
       "$store": [
-        "src/store.ts"
+        "src/store1.ts"
       ]
     }
   }

packages/build-app-templates/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.2
+
+- [fix] add default static config of rax app render
+
 ## 1.0.1
 
 - [fix] add rax template of render

packages/build-app-templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder/app-templates",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "App templates for ice.js and rax-app",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",

packages/build-app-templates/src/templates/rax/runApp.ts.ejs

@@ -26,15 +26,10 @@ import { setAppConfig } from '<%- relativeCorePath %>/appConfig';
 import ErrorBoundary from '<%- relativeCorePath %>/ErrorBoundary';
 import { IAppConfig, IBuildConfig, IStaticConfig, IRuntimeValue } from '<%- typesPath  %>';
 import { mount, unmount } from '<%- relativeCorePath %>/render';
-<% if (routesFilePath)  { %>
+import defaultStaticConfig from '<%- relativeCorePath %>/staticConfig';
-import defaultStaticConfig from '<%- routesFilePath %>';
-<% } %>
 
-let staticConfig: IStaticConfig | undefined;
+let staticConfig: IStaticConfig = defaultStaticConfig;
 
-<% if (routesFilePath)  { %>
-staticConfig = defaultStaticConfig;
-<% } %>
 const inMiniApp = (isMiniApp || isWeChatMiniProgram || isByteDanceMicroApp || isBaiduSmartProgram || isKuaiShouMiniProgram) && !isWeb;
 const buildConfig: IBuildConfig = <%- JSON.stringify(buildConfig) %>;
 const runtimeValue: IRuntimeValue = {};
@@ -74,6 +69,8 @@ export function runApp(appConfig?: IAppConfig, <% if (buildConfig.router !== fal
   }
   // set History before GID
   initHistory && initHistory(appConfig as any, { staticConfig });
+  <% }  else if (typeof pageConfig !== 'undefined') { %>
+    appConfig.renderComponent.__pageConfig = pageConfig;
   <% } %>
 
   let renderer;

packages/build-mpa-config/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.2
+
+- fix match rules for app.json
+
 ## 4.0.1
 
 - feat add renderData of `isMPA`

packages/build-mpa-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder/mpa-config",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "enable mpa project for framework",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",

packages/build-mpa-config/src/generate/index.ts

@@ -20,6 +20,7 @@ function generatePageFiles(api: IPluginAPI, options: IGeneratorOptions): IGenera
     return {
       entryPath: pageEntry,
       runAppPath: generator.runAppPath,
+      routesFilePath: generator.routesFilePath,
     };
   }
 
@@ -27,6 +28,7 @@ function generatePageFiles(api: IPluginAPI, options: IGeneratorOptions): IGenera
   return {
     entryPath: generator.entryPath,
     runAppPath: generator.runAppPath,
+    routesFilePath: generator.routesFilePath,
   };
 }
 

packages/build-mpa-config/src/index.ts

@@ -38,10 +38,12 @@ export const generateMPAEntries = (api: IPluginAPI, options: IConfigOptions) =>
     // when the entry has no export default declaration, do not generate any files
     let finalEntry = entryPath;
     let runAppPath = null;
+    let routesFilePath;
     if (isAppEntry || checkExportDefaultDeclarationExists(path.join(rootDir, 'src', source))) {
       const result = generateEntry(api, { framework, targetDir, pageEntry: entryPath, entryName, pageConfig, isAppEntry });
       finalEntry = result.entryPath;
       runAppPath = result.runAppPath;
+      routesFilePath = result.routesFilePath;
     }
 
     parsedEntries[entryName] = {
@@ -49,6 +51,7 @@ export const generateMPAEntries = (api: IPluginAPI, options: IConfigOptions) =>
       finalEntry,
       shouldRedirectRunApp: isAppEntry,
       runAppPath,
+      routesFilePath,
     };
   });
   return parsedEntries;
@@ -67,17 +70,17 @@ const setMPAConfig = (api, config, options: IConfigOptions) => {
   // add redirect entry path
   const redirectEntries: IGenerateResult[] = [];
   Object.keys(parsedEntries).forEach((entryKey) => {
-    const { entryName, source, finalEntry, shouldRedirectRunApp, runAppPath } = parsedEntries[entryKey];
+    const { entryName, finalEntry, shouldRedirectRunApp, runAppPath, routesFilePath } = parsedEntries[entryKey];
     config.entry(entryName).add(finalEntry);
     if (shouldRedirectRunApp) {
       redirectEntries.push({
         entryPath: finalEntry,
         runAppPath,
+        routesFilePath,
       });
     }
     // get page paths for rule match
-    const matchStr = `src/${source}`;
+    matchStrs.push(formatPath(routesFilePath));
-    matchStrs.push(formatPath(matchStr));
   });
 
   api.applyMethod('addImportDeclaration', {

packages/build-mpa-config/src/template/rax/index.tsx.ejs

@@ -1,9 +1,11 @@
 import { runApp } from '<%- runAppPath %>';
 import { IAppConfig } from '<%- typesPath %>';
 <% if (routesFilePath) {%>
+import staticConfig from '<%- routesFilePath %>';
+
 const appConfig: IAppConfig = {};
 
-runApp(appConfig);
+runApp(appConfig, staticConfig);
 <% } else { %>
 import Page from '<%- resourcePath %>';
 

packages/build-mpa-config/src/types.ts

@@ -10,6 +10,7 @@ export interface IGeneratorOptions {
 export interface IGenerateResult {
   entryPath: string;
   runAppPath: string;
+  routesFilePath: string | undefined;
 }
 
 export type FrameworkType = 'rax' | 'react';

packages/build-user-config/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.2
+
+- [fix] remove unused package of `webpack-plugin-import`
+
 ## 1.1.1
 
 - [fix] OOM when use filesystem cache 

packages/build-user-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder/user-config",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Includes methods which are releated to set base user config for framework",
   "homepage": "",
   "license": "MIT",
@@ -19,7 +19,6 @@
     "react-dev-utils": "^11.0.4",
     "webpack-dev-mock": "^1.0.1",
     "webpack-dev-server": "^4.0.0",
-    "webpack-plugin-import": "^0.2.6",
     "@builder/swc": "^0.1.0",
     "@swc/helpers": "^0.2.12",
     "@builder/swc-loader": "^1.0.0",

packages/icejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ice.js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "command line interface and builtin plugin for icejs",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@builder/pack": "^0.4.0",
     "build-scripts": "^1.1.0",
-    "build-plugin-app-core": "2.0.1",
+    "build-plugin-app-core": "2.0.2",
     "build-plugin-helmet": "1.0.2",
     "build-plugin-ice-auth": "2.0.0",
     "build-plugin-ice-config": "2.0.0",
@@ -33,8 +33,8 @@
     "build-plugin-ice-request": "2.0.0",
     "build-plugin-ice-router": "2.0.1",
     "build-plugin-ice-ssr": "3.0.1",
-    "build-plugin-ice-store": "2.0.2",
+    "build-plugin-ice-store": "2.0.3",
-    "build-plugin-react-app": "2.0.1",
+    "build-plugin-react-app": "2.0.2",
     "build-plugin-pwa": "1.0.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.3.1",

packages/plugin-app-core/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.2
+
+- [feat] support load `styl` style
+- [fix] ts type of renderComponent
+
 ## 2.0.1
 
 - [feat] set `WEBPACK_CACHE_ID` value

packages/plugin-app-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-app-core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "the core plugin for icejs and raxjs.",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",

packages/plugin-app-core/src/dev.ts

@@ -29,7 +29,7 @@ export default (api, options: any = {}) => {
   }]);
 
   // rerender when global style file added or removed
-  watchEvents.push([/src\/global.(scss|less|css)/, async (event: string) => {
+  watchEvents.push([/src\/global.(scss|less|styl|css)/, async (event: string) => {
     if (event === 'unlink' || event === 'add') {
       await render();
     }

packages/plugin-app-core/src/generator/index.ts

@@ -123,7 +123,8 @@ export default class Generator {
 
   public parseRenderData() {
     const staticConfig = globby.sync(['src/app.json'], { cwd: this.rootDir });
-    const globalStyles = globby.sync(['src/global.@(scss|less|css)'], { cwd: this.rootDir, absolute: true });
+    // fix https://github.com/raxjs/rax-app/issues/831
+    const globalStyles = globby.sync(['src/global.@(scss|less|styl|css)'], { cwd: this.rootDir, absolute: true });
     let exportsData = {};
     EXPORT_API_MPA.forEach(item => {
       item.name.forEach(key => {

packages/plugin-app-core/src/generator/templates/types/index.ts.ejs

@@ -78,9 +78,10 @@ export interface IRuntimeValue {
 <% } %>
 
 export interface IAppConfig {
-  app?: IApp,
+  app?: IApp;
+  renderComponent?: FrameworkElement;
   <% if (isRax) {%>
-  router?: IRouter
+  router?: IRouter;
   <% } %>
   <% if (appConfigTypesImports) { %>
     <%- appConfigTypesExports %>

packages/plugin-fusion/src/index.js

@@ -396,15 +396,7 @@ module.exports = async (
       // 业务组件：不可枚举，使用 webpack-plugin-import，内置逻辑（pkg.componentConfig || pkg.stylePath）
       // compatible with build-plugin which do not set up WebpackPluginImport
       if (!config.plugins.get('WebpackPluginImport')) {
-        config.plugin('WebpackPluginImport').use(WebpackPluginImport, [
+        config.plugin('WebpackPluginImport').use(WebpackPluginImport);
-          [
-            // 老的业务组件里没有 stylePath or componentConfig
-            {
-              libraryName: /@ali\/ice-.*/,
-              stylePath: 'style.js',
-            },
-          ],
-        ]);
       }
 
       // 3. uniteBaseComponent

packages/plugin-react-app/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.2
+
+- [fix] bump version of `webpack-plugin-import`
+
 ## 2.0.1
 
 - [fix] bump version of `@builder/pack`

packages/plugin-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-react-app",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "The basic webpack configuration for ice project",
   "author": "ice-admin@alibaba-inc.com",
   "main": "lib/index.js",
@@ -37,7 +37,7 @@
     "react-router-dom": "^5.1.2",
     "react-router": "^5.2.1",
     "vite-plugin-component-style": "^1.0.0",
-    "webpack-plugin-import": "^0.2.6"
+    "webpack-plugin-import": "^0.3.0"
   },
   "devDependencies": {
     "@babel/traverse": "^7.14.5",

packages/plugin-react-app/src/setBase.js

@@ -57,13 +57,7 @@ module.exports = (api, { target, webpackConfig }) => {
       .end()
     // WebpackPluginImport
     .plugin('WebpackPluginImport')
-      .use(WebpackPluginImport, [[
+      .use(WebpackPluginImport);
-        {
-          libraryName: /@ali\/ice-.*/,
-          stylePath: 'style.js',
-        },
-      ]])
-      .end();
   // auto inject style.js of component (webpack-plugin-import) in mode vite
   if (userConfig.vite) {
     modifyUserConfig('vite.plugins', (vitePlugins) => {

packages/plugin-store/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.3
+
+- [fix] nested routes not render in vite mode
+
 ## 2.0.2
 
 - [fix] not restart after first use store

packages/plugin-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-ice-store",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "builtin `icestore` in icejs",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "https://github.com/alibaba/ice#readme",

packages/plugin-store/src/vitePluginPageRedirect.ts

@@ -4,7 +4,7 @@ import { formatPath } from '@builder/app-helpers';
 
 const getPageName = (resolveId: string): { type: string; pageName: string; } => {
   const layoutRegExp = /src\/pages\/(\w+)\/Layout/;
-  const pageRegExp = /src\/pages\/(\w+)(\/index)?(.(j|t)s(x)?)?/;
+  const pageRegExp = /src\/pages\/(\w+)(\/index)?(.(j|t)s(x)?)?$/;
   let type = '';
   if (resolveId.match(pageRegExp)) {
     type = 'page';

packages/vite-plugin-component-style/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.2
+
+- [fix] deprecate check of `pkg.componentConfig`
+
 ## 1.0.1
 
 - [feat] resolve style by module path

packages/vite-plugin-component-style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-component-style",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -13,7 +13,9 @@
     "es-module-lexer": "^0.4.1",
     "find-up": "^5.0.0",
     "fs-extra": "^10.0.0",
-    "magic-string": "^0.25.7",
+    "magic-string": "^0.25.7"
-    "vite": "^2.4.4"
+  },
+  "devDependencies": {
+    "vite": "^2.6.0"
   }
-}
+}

packages/vite-plugin-component-style/src/index.ts

@@ -50,8 +50,8 @@ export default (): Plugin => {
           // ignore errors
         }
         if (packageJsonPath) {
-          const { stylePath, componentConfig, module, main } = fse.readJSONSync(packageJsonPath);
+          const { stylePath, module, main } = fse.readJSONSync(packageJsonPath);
-          if (stylePath || componentConfig) {
+          if (stylePath) {
             const mainEntry = path.join(path.dirname(packageJsonPath), module || main);
             const styleFilePath = path.join(path.dirname(mainEntry), stylePath || 'style.js');
             if (fse.existsSync(styleFilePath)) {

packages/webpack-plugin-import/CHANGELOG.md

@@ -1,5 +1,9 @@
 # webpack-plugin-import Changelog
 
+## 0.3.0
+
+- [fix] deprecate check of `pkg.componentConfig`
+
 ## 0.2.9
 
 - [fix] change loader options involved in object

packages/webpack-plugin-import/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-plugin-import",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "main": "lib/index.js",
   "scripts": {
     "test": "echo \"test\"",
@@ -23,4 +23,4 @@
     "lib",
     "!lib/**/*.map"
   ]
-}
+}

packages/webpack-plugin-import/src/webpack-plugin-import.js

@@ -12,6 +12,35 @@ function fileExists(id) {
   return fileExistsCache[id];
 }
 
+// 历史业务组件，package.json 中不包含 stylePath 字段，但会生成 style.js 并且需要自动引入
+const packagesNeedImportStyle = [
+  '@ali/ice-url-changer',
+  '@ali/ice-pop-iframe',
+  '@ali/ice-media',
+  '@ali/ice-loading',
+  '@ali/ice-img-space',
+  '@ali/ice-box-selector',
+  '@ali/ice-anchor-image',
+  '@ali/ice-add-tag',
+  '@ali/ice-add-item',
+  '@ali/ice-add-image',
+  '@icedesign/title',
+  '@icedesign/qrcode',
+  '@icedesign/img',
+  '@icedesign/foundation-symbol',
+  '@icedesign/dynamic-icon',
+  '@icedesign/container',
+  '@icedesign/balloon-confirm',
+  '@icedesign/ellipsis',
+  '@ice/form',
+  '@icedesign/label',
+  '@icedesign/layout',
+  '@icedesign/list',
+  '@icedesign/notification',
+  '@icedesign/panel',
+  '@icedesign/styled-menu',
+];
+
 // 在 resolve 阶段, 修改上下文中的 loaders 属性, 让 next 包的 index.js 经过以下 loader 加工
 // see https://webpack.js.org/plugins/normal-module-replacement-plugin/
 module.exports = class WebpackPluginImport {
@@ -32,10 +61,6 @@ module.exports = class WebpackPluginImport {
       result.resourceResolveData.descriptionFileData &&
       result.resourceResolveData.descriptionFileData.name === result.rawRequest
     ) {
-      // 存量 ice 组件通过 componentConfig 字段标记是否为组件，如果是 ICE 组件，则需要引入样式
-      if (result.resourceResolveData.descriptionFileData.componentConfig) {
-        return 'style.js';
-      }
       // 在 package.json 中通过 stylePath 字段标记是否需要自动引入样式，如果配置 style path，则自动引入对应样式
       return result.resourceResolveData.descriptionFileData.stylePath;
     }
@@ -63,17 +88,21 @@ module.exports = class WebpackPluginImport {
             if (result.loaders && /\.(ts|js)x?$/i.test(result.resource)) {
               let needAdditionalStyle = false;
               let stylePath = 'style.js';
-
+              const matchedPackage = packagesNeedImportStyle.find((pageName) => result.rawRequest === pageName);
-              const matchedIndex = this.options.findIndex((opt) => {
+              if (matchedPackage) {
-                return this.libraryCheck(result, opt);
-              });
-
-              if (matchedIndex > -1) {
-                const matchedLibrary = this.options[matchedIndex];
-                if (matchedLibrary.stylePath) {
-                  stylePath = matchedLibrary.stylePath;
-                }
                 needAdditionalStyle = true;
+              } else {
+                const matchedIndex = this.options.findIndex((opt) => {
+                  return this.libraryCheck(result, opt);
+                });
+  
+                if (matchedIndex > -1) {
+                  const matchedLibrary = this.options[matchedIndex];
+                  if (matchedLibrary.stylePath) {
+                    stylePath = matchedLibrary.stylePath;
+                  }
+                  needAdditionalStyle = true;
+                }
               }
 
               if (!needAdditionalStyle) {