@cloudbase/lowcode-builder 0.0.4 → 0.1.2

package/template/webpack/web.prod.js

@@ -6,9 +6,10 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const themeVars = require('./themeVars');
 const HappyPack = require('happypack');
-const core = 4;
+const core = 7;
 const happyThreadPool = HappyPack.ThreadPool({ size: core });
 
+const TS_LOADER_ID = 'ts-loader';
 module.exports = function (options) {
   const {
     context,
@@ -22,54 +23,69 @@ module.exports = function (options) {
     definePlugin = {},
   } = options;
   const isDevelopment = mode !== 'production';
+  const babelLoader = {
+    loader: 'babel-loader',
+    options: {
+      compact: false,
+      cacheDirectory: true,
+      cwd: context,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: {
+              esmodules: true,
+            },
+          },
+        ],
+        '@babel/preset-react',
+      ],
+      plugins: [
+        [
+          'babel-plugin-import',
+          {
+            libraryName: '@govcloud/gsd-kbone-react',
+            libraryDirectory: 'lib/components',
+            camel2DashComponentName: false,
+          },
+        ],
+        '@babel/plugin-proposal-class-properties',
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        '@babel/plugin-proposal-export-default-from',
+        '@babel/plugin-proposal-export-namespace-from',
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-partial-application',
+        ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+      ].filter(Boolean),
+    },
+  };
+
   let plugins = [
     new HappyPack({
-      id: 'babel',
+      id: TS_LOADER_ID,
       loaders: [
+        babelLoader,
         {
-          loader: 'babel-loader',
+          loader: 'ts-loader',
           options: {
-            compact: false,
-            cacheDirectory: true,
-            cwd: context,
-            presets: [
-              [
-                '@babel/preset-env',
-                {
-                  targets: {
-                    esmodules: true,
-                  },
-                  useBuiltIns: 'usage',
-                  corejs: '2.6.12',
-                },
-              ],
-              '@babel/preset-react',
-            ],
-            plugins: [
-              [
-                'babel-plugin-import',
-                {
-                  libraryName: '@govcloud/gsd-kbone-react',
-                  libraryDirectory: 'lib/components',
-                  camel2DashComponentName: false,
-                },
-              ],
-              '@babel/plugin-proposal-class-properties',
-              ['@babel/plugin-proposal-decorators', { legacy: true }],
-              '@babel/plugin-proposal-export-default-from',
-              '@babel/plugin-proposal-export-namespace-from',
-              '@babel/plugin-proposal-optional-chaining',
-              '@babel/plugin-proposal-partial-application',
-              [
-                '@babel/plugin-proposal-pipeline-operator',
-                { proposal: 'minimal' },
-              ],
-            ].filter(Boolean),
+            compilerOptions: {
+              target: 'ESNext',
+              module: 'ESNext',
+              esModuleInterop: true,
+            },
+            happyPackMode: true,
+            transpileOnly: true,
           },
         },
       ],
       threadPool: happyThreadPool,
     }),
+    new HappyPack({
+      id: 'babel',
+      loaders: [babelLoader],
+      threadPool: happyThreadPool,
+    }),
     new HtmlWebpackPlugin({
       template: htmlTemplatePath,
       filename: 'index.html',
@@ -125,7 +141,7 @@ module.exports = function (options) {
     },
     devtool: isDevelopment ? 'eval' : false,
     resolve: {
-      extensions: ['.js', '.jsx', '.tsx', '.json', '.scss', '.css'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.scss', '.css'],
       modules: [...resolveModules],
       symlinks: false,
       cacheWithContext: false,
@@ -135,10 +151,15 @@ module.exports = function (options) {
     },
     module: {
       rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules\/(?!@cloudbase\/weda-ui)|gsd-kbone-react/,
+          use: [`happypack/loader?id=${TS_LOADER_ID}`],
+        },
         {
           test: /\.(js|jsx)$/,
+          exclude: /node_modules\/(?!@cloudbase\/weda-ui)|gsd-kbone-react/,
           use: ['happypack/loader?id=babel'],
-          exclude: /node_modules\/(?!@cloudbase\/weda-ui)/,
         },
         {
           test: /\.(scss|sass)$/,

package/template/src/pages/composite.tpl

@@ -1,151 +0,0 @@
-import * as React from "react";
-import { observer } from "mobx-react-lite";
-import { observable } from "mobx";
-import { get } from 'lodash'
-
-import { AppRender } from "handlers/render";
-import { createComputed } from "../../../../utils";
-import { createWidgets, retryDataBinds, WidgetsContext, resolveComponentProps } from 'handlers/utils'
-import getStateFn from "./lowcode/state.js";
-import computed from "./lowcode/computed.js";
-import lifecycle from "./lowcode/lifecycle.js";
-import { app, $page } from '../../../../app/global-api'
-
-<% handlersImports.forEach(handler => { %>
-import handler$<%= handler.name %> from "./lowcode/handler/<%= handler.name %>.js";
-<% }) %>
-
-// Import Components
-<% var componentsMap = {}; useComponents.forEach(compItem => {%>
-<% if(compItem.entry){ %><% if(!componentsMap[compItem.moduleName]){ componentsMap[compItem.moduleName] = true %>
-import <%= compItem.moduleNameVar %> from "libraries/<%= compItem.moduleName %>@<%= compItem.version %>/<%= compItem.entry %>";
-<% } %>const { <%= compItem.name %>: <%= compItem.var %> } = <%= compItem.moduleNameVar %>.components
-<% } else { %>import <%= compItem.var %> from "libraries/<%= compItem.moduleName %>@<%= compItem.version %>/components/<%= compItem.name %>";<% } %>
-<%}) %>
-
-import * as constObj from '../../libCommonRes/const'
-import * as toolsObj from '../../libCommonRes/tools'
-
-import "./lowcode/style.less";
-
-const pluginInstances = [];
-
-class CompositeCompWrapper extends React.Component {
-
-  $WEAPPS_COMP = {}
-
-  componentDidUpdate() {
-    const { data } = this.props
-    for(let prop in data) {
-      // 更新 propsData
-      this.propsData[prop] = data[prop]
-    }
-  }
-
-
-  constructor(props) {
-    super(props);
-
-    this.compConfig = <%= JSON.stringify(compConfig, null, 2) %>
-    this.virtualFields = Object.assign({}, props.pageVirtualFields || {}, {
-    <% useComponents.forEach(compItem => {%>
-      "<%= compItem.key %>": <% if(compItem.isPlainProps) {%> (props) => <<%= compItem.var %> {...resolveComponentProps(props, 1)} /> <% } else {%>  (props) => <<%= compItem.var %>{...resolveComponentProps(props, 0)} />  <% }%>,
-    <%}) %>
-    });
-    this.events = (<%= emitEvents %>).reduce((obj, trigger) => {
-      obj[trigger] = (event) => {
-        this.props.emit(trigger, event)
-      };
-      return obj
-    }, {});
-    this.handler = this.$WEAPPS_COMP.handler = {
-      <% handlersImports.forEach(handler => { %>
-      <%= handler.name %>: handler$<%= handler.name %>.bind(this),
-      <% }) %>
-    };
-    this.componentSchema = <%= componentSchema %>;
-    const widgetContext = <%= widgets %>
-    const dataBinds = <%= dataBinds %>
-    const defaultProps = <%= JSON.stringify(defaultProps, null, 2) %>
-    this.propsData = observable(Object.assign({}, defaultProps, this.props.data || {}))
-    this.$WEAPPS_COMP.lib = { const: constObj, tools: toolsObj }
-    this.$WEAPPS_COMP.props = { ...this.props, events: this.events, data: this.propsData }
-    this.state = this.$WEAPPS_COMP.state = observable(getStateFn.bind(this)())
-    this.computed = this.$WEAPPS_COMP.computed = createComputed(computed, this)
-    this.node = this.$WEAPPS_COMP.node = this.createWidgetNode(this) || {}
-    this.widgets = createWidgets(widgetContext, dataBinds, {})
-    // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
-    retryDataBinds()
-    Object.keys(this.widgets || {}).forEach(widgetId => {
-      // 将实例 ownerWidget 挂到内部组件上。内部组件就可以通过 $comp.node.ownerWidget 获取到所在的组件实例
-      this.widgets[widgetId].ownerWidget = this.node
-    })
-    this.pageListenerInstances = [];
-    this.createCompAPI(this)
-  }
-
-  createWidgetNode(compThis) {
-    // 当为数组时，需要判断自己属于 widgets 的哪一项
-    const {
-      compositeParent,
-      forIndexes,
-      id
-    } = compThis.props
-    let widgetData = compositeParent
-      ? compositeParent.$WEAPPS_COMP.widgets[id]
-      : $page.widgets[id]
-    if(Array.isArray(widgetData)) {
-      widgetData = widgetData.length > 0 ? get(widgetData, forIndexes) : {}
-    }
-    widgetData = widgetData || {}
-    widgetData.getOwnerWidget = () => compThis.node.ownerWidget
-    widgetData.getConfig = () => compThis.compConfig
-
-    return widgetData
-  }
-
-  createCompAPI(compThis) {
-    compThis.$WEAPPS_COMP = {
-      compConfig: compThis.compConfig,
-      widgets: compThis.widgets,
-      node: compThis.node,
-      handler: compThis.handler,
-      lib: { const: constObj, tools: toolsObj },
-      get props() {
-        return {...compThis.props, events: compThis.events, data: compThis.propsData }
-      },
-      get state() {
-        return compThis.state
-      },
-      get computed() {
-        return compThis.computed
-      },
-    };
-  }
-
-  componentDidMount() {
-    lifecycle.onAttached && lifecycle.onAttached.bind(this)()
-    lifecycle.onReady && lifecycle.onReady.bind(this)()
-  }
-
-  componentWillUnmount() {
-    lifecycle.onDetached && lifecycle.onDetached.bind(this)()
-  }
-
-  render() {
-    return (
-      <WidgetsContext.Provider value={{ parent: this }}>
-        <AppRender
-          className={this.props.className}
-          virtualFields={this.virtualFields}
-          componentSchema={this.componentSchema}
-          codeContext={this}
-        />
-      </WidgetsContext.Provider>
-    );
-  }
-}
-
-export default observer((props) => (
-   <CompositeCompWrapper {...props}></CompositeCompWrapper>
-));