feat: add scenarios folder which shows how to use APIs / materials

README.md

@@ -4,6 +4,6 @@
 
 更多参考资料：
 
-- [马上玩一下](https://alifd.alicdn.com/npm/@alilc/[email protected].0/build/index.html)
+- [马上玩一下](https://alifd.alicdn.com/npm/@alilc/[email protected].3/build/index.html)
 - [低代码引擎官网](http://lowcode-engine.cn)
 - [引擎主包](https://github.com/alibaba/lowcode-engine)

build.json

@@ -1,7 +1,6 @@
 {
   "entry": {
-    "index": "src/index",
-    "index-custom": "src/index-custom"
+    "preview": "./src/preview.tsx"
   },
   "vendor": false,
   "devServer": {

build.plugin.js

@@ -1,7 +1,10 @@
+const { join } = require('path');
+const fs = require('fs-extra');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const scenarioNames = fs.readdirSync(join('./src/scenarios')).filter(name => !name.startsWith('.'));
+
 module.exports = ({ onGetWebpackConfig }) => {
   onGetWebpackConfig((config) => {
     config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
@@ -15,34 +18,29 @@ module.exports = ({ onGetWebpackConfig }) => {
         fs: 'empty',
       },
     });
-    config.merge({
-      entry: {
-        index: require.resolve('./src/index.ts'),
-        preview: require.resolve('./src/preview.tsx'),
-      },
-    });
-    config
-      .plugin('index')
-      .use(HtmlWebpackPlugin, [
-        {
-          inject: false,
-          templateParameters: {
-          },
-          template: require.resolve('./public/index.html'),
-          filename: 'index.html',
+
+    scenarioNames.forEach(name => {
+      const hasTsx = fs.existsSync(join(`./src/scenarios/${name}/index.tsx`));
+      config.merge({
+        entry: {
+          [name]: hasTsx ? require.resolve(`./src/scenarios/${name}/index.tsx`) : require.resolve(`./src/scenarios/${name}/index.ts`),
         },
-      ]);
-    config
-      .plugin('index-custom')
-      .use(HtmlWebpackPlugin, [
-        {
-          inject: false,
-          templateParameters: {
+      });
+      config
+        .plugin(name)
+        .use(HtmlWebpackPlugin, [
+          {
+            inject: false,
+            minify: false,
+            templateParameters: {
+              scenario: name
+            },
+            template: require.resolve('./public/index.ejs'),
+            filename: `${name}.html`,
           },
-          template: require.resolve('./public/index-custom.html'),
-          filename: 'index-custom.html',
-        },
-      ]);
+        ]);
+    })
+
     config
       .plugin('preview')
       .use(HtmlWebpackPlugin, [

package.json

@@ -31,17 +31,18 @@
     "@alilc/lowcode-setter-title": "^1.0.2"
   },
   "devDependencies": {
+    "@alib/build-scripts": "^0.1.18",
     "@alilc/lowcode-engine": "^1.0.0",
     "@alilc/lowcode-engine-ext": "^1.0.0",
     "@alilc/lowcode-types": "^1.0.0",
-    "@alib/build-scripts": "^0.1.18",
     "@types/events": "^3.0.0",
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.2",
     "@types/streamsaver": "^2.0.0",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",
     "build-plugin-react-app": "^1.1.2",
+    "fs-extra": "^10.0.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0"
   }
 }

public/index-custom.html → public/index.ejs

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>阿里低代码引擎 Demo</title>
     <link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
-    <link href="./css/index-custom.css" rel="stylesheet" />
+    <link href="./css/index.css" rel="stylesheet" />
     <!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
     <link href="https://alifd.alicdn.com/npm/@alifd/[email protected]/variables.css" rel="stylesheet" />
     <link href="https://alifd.alicdn.com/npm/@alifd/[email protected]/dist/next.var.min.css" rel="stylesheet" />
@@ -29,13 +29,13 @@
     <!-- Fusion Next 的主包，低代码编辑器的依赖 -->
     <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
     <!-- 低代码引擎的主包 -->
-    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected].1/dist/js/engine-core.js"></script>
+    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected].2/dist/js/engine-core.js"></script>
     <!-- 低代码引擎官方扩展的主包 -->
-    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected].2/dist/js/engine-ext.js"></script>
+    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected].3/dist/js/engine-ext.js"></script>
   </head>
 
   <body>
     <div id="lce-container"></div>
-    <script type="text/javascript" src="./js/index-custom.js"></script>
+    <script type="text/javascript" src="./js/<%= scenario %>.js"></script>
   </body>
 </html>

public/index.html

@@ -1,41 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>阿里低代码引擎 Demo</title>
-    <link rel="icon" href="//img.alicdn.com/imgextra/i2/O1CN01lNWGJi1xflgRfSgbk_!!6000000006471-55-tps-22-26.svg">
-    <link href="./css/index.css" rel="stylesheet" />
-    <!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
-    <link href="https://alifd.alicdn.com/npm/@alifd/[email protected]/variables.css" rel="stylesheet" />
-    <link href="https://alifd.alicdn.com/npm/@alifd/[email protected]/dist/next.var.min.css" rel="stylesheet" />
-    <!-- 低代码引擎的页面框架样式 -->
-    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/css/engine-core.css" />
-    <!-- 低代码引擎官方扩展的样式 -->
-    <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/css/engine-ext.css" />
-
-    <!-- React，可替换为 production 包 -->
-    <script src="https://g.alicdn.com/code/lib/react/16.13.1/umd/react.production.min.js"></script>
-    <!-- React DOM，可替换为 production 包 -->
-    <script src="https://g.alicdn.com/code/lib/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
-    <!-- React 向下兼容，预防物料层的依赖 -->
-    <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
-    <script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
-    <!-- lodash，低代码编辑器的依赖 -->
-    <script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
-    <!-- 日期处理包，Fusion Next 的依赖 -->
-    <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
-    <!-- Fusion Next 的主包，低代码编辑器的依赖 -->
-    <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
-    <!-- 低代码引擎的主包 -->
-    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-core.js"></script>
-    <!-- 低代码引擎官方扩展的主包 -->
-    <script crossorigin="anonymous" src="https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-ext.js"></script>
-  </head>
-
-  <body>
-    <div id="lce-container"></div>
-    <script type="text/javascript" src="./js/index.js"></script>
-  </body>
-</html>
+误删，删了有奇妙的 bug😄~