@maxelms/create-plugin-cli 1.1.0

package/templates/react-micro-app/webpack.config.js.tpl

@@ -0,0 +1,178 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+
+const isProduction = process.env.NODE_ENV == 'production';
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+
+/**
+ * Maxelms 平台默认提供 react react-dom 的 umd 资源
+ * 配置 externals 可以减少打包时间，提升加载性能
+ **/
+
+const externals = false ? {
+  "react": {
+    commonjs: '__MAXELMS_SHARE_MODULES__',
+    commonjs2: '__MAXELMS_SHARE_MODULES__',
+    root: ['__MAXELMS_SHARE_MODULES__', 'React']
+  },
+  "react-dom": {
+    commonjs: '__MAXELMS_SHARE_MODULES__',
+    commonjs2: '__MAXELMS_SHARE_MODULES__',
+    root: ['__MAXELMS_SHARE_MODULES__', 'ReactDOM']
+  },
+  "lodash": {
+    commonjs: '__MAXELMS_SHARE_MODULES__',
+    commonjs2: '__MAXELMS_SHARE_MODULES__',
+    root: ['__MAXELMS_SHARE_MODULES__', 'lodash']
+  },
+} : {}
+
+
+const config = {
+  entry: './src/index.tsx',
+  output: {
+    publicPath: '',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'umd',
+    library: "<%= pluginName %>-<%= uniqueIdentifier %>",
+  },
+  externals,
+  devServer: {
+    port: 9000,
+    open: true,
+    host: 'localhost',
+    headers: {
+      "Access-Control-Allow-Origin": '*'
+    }
+  },
+  plugins: [
+    new MomentLocalesPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+    }),
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: 'public',
+        globOptions: {
+          dot: true,
+          gitignore: true,
+          ignore: ['**/public/index.html'],
+        },
+        noErrorOnMissing: true,
+      },
+      {
+        from: 'README.md'
+      },
+      {
+        from: 'manifest.json'
+      },
+      ],
+    }),
+    new MiniCssExtractPlugin(),
+
+    // Add your plugins here
+    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+  ],
+  module: {
+    rules: [{
+      test: /\.(ts|tsx)$/i,
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-react']
+        }
+      },
+        'ts-loader',
+      ],
+      exclude: ['/node_modules/'],
+    },
+    {
+      test: /\.less$/i,
+      use: [stylesHandler, {
+        loader: 'css-loader',
+        options: {
+          modules: {
+            auto: path => !path.includes("node_modules"),
+            localIdentName: '[local]_[hash:base64:16]'
+          }
+        }
+      }, 'postcss-loader', {
+          loader: 'less-loader',
+          options: {
+            lessOptions: {
+              javascriptEnabled: true
+            }
+          }
+        }],
+    },
+    {
+      test: /\.css$/i,
+      use: [stylesHandler, {
+        loader: 'css-loader',
+        options: {
+          modules: {
+            auto: path => !path.includes("node_modules"),
+            localIdentName: '[local]_[hash:base64:16]'
+          }
+        }
+      }, 'postcss-loader'],
+    },
+    {
+      test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+      type: 'asset',
+    },
+
+      // Add your rules for custom modules here
+      // Learn more about loaders from https://webpack.js.org/loaders/
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      '@': path.resolve('src')
+    }
+  },
+  optimization: {
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin(),
+      new ImageMinimizerPlugin({
+        test: /screenshots\/.*\.(jpe?g|png|avif)$/i,
+        minimizer: {
+          implementation: ImageMinimizerPlugin.squooshMinify,
+          options: {
+            encodeOptions: {
+              mozjpeg: {
+                quality: 15,
+              },
+              avif: {
+                cqLevel: 18,
+                speed: 6
+              },
+              oxipng: {
+                level: 2,
+              }
+            },
+          },
+        },
+      }),
+    ],
+  },
+};
+
+module.exports = () => {
+  if (isProduction) {
+    config.mode = 'production';
+  } else {
+    config.mode = 'development';
+  }
+  return config;
+};

package/templates/react-micro-app-umi/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/templates/react-micro-app-umi/.env

@@ -0,0 +1 @@
+PORT=8001

package/templates/react-micro-app-umi/.gitignore.tpl

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/dist.maxplugin
+/dist.zip
+/.vscode

package/templates/react-micro-app-umi/.prettierignore

@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

package/templates/react-micro-app-umi/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

package/templates/react-micro-app-umi/.umirc.ts.tpl

@@ -0,0 +1,31 @@
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  history: {
+    type: 'hash'
+  },
+  publicPath: './',
+  routes: [
+    { path: '/', component: '@/layout/BasicLayout',
+      routes: [
+        { path: '/', component: '@/pages/home' },
+        { path: '/about', component: '@/pages/about' },
+      ]
+    },
+  ],
+  fastRefresh: {},
+  qiankun: {
+    slave: {},
+  },
+  copy: [
+    'README.md',
+    'manifest.json'
+  ],
+  chainWebpack(config:any) {
+    const umdUniqueIdentifier = '<%= pluginName %>-<%= uniqueIdentifier %>';
+    config.output.library(umdUniqueIdentifier).libraryTarget('umd').jsonpFunction(umdUniqueIdentifier);
+  }
+});

package/templates/react-micro-app-umi/README.md

@@ -0,0 +1,5 @@
+# Maxelms MicroApp
+
+## 功能介绍
+
+## 使用说明

package/templates/react-micro-app-umi/manifest.json.tpl

@@ -0,0 +1,21 @@
+{
+  "routes": [
+    {
+      "title": "首页",
+      "value": "/"
+    },
+    {
+      "title": "列表页",
+      "value": "/list"
+    },
+    {
+      "title": "详情页",
+      "value": "/view"
+    },
+    {
+      "title": "新建页",
+      "value": "/new"
+    }
+  ],
+  "deviceTypes": ["pc"]
+}

package/templates/react-micro-app-umi/package.json.tpl

@@ -0,0 +1,42 @@
+{
+  "name": "<%= pluginName %>",
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build && maxelms-plugin-cli -c",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "6.5.0",
+    "@umijs/plugin-qiankun": "2.35.4",
+    "@umijs/preset-react": "1.x",
+    "archiver": "5.3.1",
+    "lodash": "4.17.21",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "umi": "3.4.8"
+  },
+  "devDependencies": {
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "@umijs/test": "3.4.8",
+    "lint-staged": "10.0.7",
+    "prettier": "2.2.0",
+    "typescript": "4.1.2",
+    "yorkie": "2.0.0"
+  }
+}

package/templates/react-micro-app-umi/public/basicConfiguration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/react-micro-app-umi/public/configuration.json

@@ -0,0 +1,30 @@
+{
+  "propName1": {
+    "label": "配置项一",
+    "type": "string",
+    "defaultValue": "配置项内容"
+  },
+  "propName2": {
+    "label": "配置项二",
+    "type": "number",
+    "defaultValue": 350
+  },
+  "propName3": {
+    "label": "配置项三",
+    "type": "select",
+    "options": [
+      {
+        "label": "选项1",
+        "value": "option1"
+      },
+      {
+        "label": "选项2",
+        "value": "option2"
+      },
+      {
+        "label": "选项3",
+        "value": "option3"
+      }
+    ]
+  }
+}

package/templates/react-micro-app-umi/src/layout/BasicLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'umi'
+
+const BasicLayout: React.FC<{}> = props => {
+
+  return (
+    <div>
+      <Link to="/">home</Link>
+      |
+      <Link to="/about">about</Link>
+      {props.children}
+    </div>
+  )
+}
+
+export default BasicLayout

package/templates/react-micro-app-umi/src/pages/about.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div>
+      About
+    </div>
+  )
+}
+
+export default About

package/templates/react-micro-app-umi/src/pages/home.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useModel } from 'umi'
+
+const Home = () => {
+  const qiankunStateFromMaster = useModel('@@qiankunStateFromMaster')
+  /**
+   * masterGlobalState 是基座应用传递给子应用的属性
+   * setMasterGlobalState 可更改属性值
+   */
+  const { masterGlobalState, setMasterGlobalState } = qiankunStateFromMaster || {}
+
+  return (
+    <div>
+      Home
+    </div>
+  )
+}
+
+export default Home

package/templates/react-micro-app-umi/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "mock/**/*",
+    "src/**/*",
+    "config/**/*",
+    ".umirc.ts",
+    "typings.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib",
+    "es",
+    "dist",
+    "typings",
+    "**/__test__",
+    "test",
+    "docs",
+    "tests"
+  ]
+}

package/templates/react-micro-app-umi/typings.d.ts

@@ -0,0 +1,8 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(props: React.SVGProps<SVGSVGElement>): React.ReactElement
+  const url: string
+  export default url
+}

package/templates/react-micro-button/.gitignore.tpl

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/dist.maxplugin
+/dist.zip
+/.vscode

package/templates/react-micro-button/README.md

@@ -0,0 +1,5 @@
+# Maxelms Custom Button
+
+## 功能介绍
+
+## 使用说明

package/templates/react-micro-button/configuration/Configuration.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Switch, Input, InputNumber, Select } from 'antd';
+import { PluginChannel } from '@max-kit/max-api'
+
+interface ConfigurationType {}
+type PlainObject = Record<string, any>
+interface FieldData {
+  pathChain: string;
+  fieldId: string;
+  fieldName: string;
+  objId: string;
+  objName: string;
+  type: string;
+}
+
+const initFormValues:PlainObject = {
+  size: 'default',
+  disabled: false,
+  placeholder: '',
+  maxLength: null,
+  label: '',
+}
+
+const Configuration: React.FC<ConfigurationType> = () => {
+  const [form] = Form.useForm()
+
+  const pluginChannelRef = useRef(null)
+
+  const [fields, setFields] = useState<FieldData[]>([])
+
+  useEffect(() => {
+    const channel = new PluginChannel({
+      init: initConfigs
+    })
+
+    pluginChannelRef.current = channel
+    getFormFieldsAsync(channel)
+    return () => {
+      channel.destroy()
+    }
+  }, []);
+  
+  const initConfigs = (configs:PlainObject) => {
+    if (!configs || typeof configs !== 'object') return
+    if (typeof configs.field === 'object') configs.field = configs.field.pathChain
+    form.setFieldsValue(configs)
+  }
+
+  const submitConfig = () => {
+    const configs = form.getFieldsValue()
+    const { field } = configs
+    if (field) {
+      const fieldDetail = fields.find(item => item.pathChain === field)
+      if (fieldDetail) configs.field = fieldDetail
+    }
+    pluginChannelRef.current && pluginChannelRef.current.update(configs)
+  };
+
+  const getFormFieldsAsync = (channel: PluginChannel) => {
+    channel.emit('getFormFieldsValueAsync').then((data: FieldData[]) => {
+      setFields(data)
+    }).catch(err => {
+      console.log('err: ', err)
+    })
+  }
+
+  return (
+    <Form layout="vertical" form={form} initialValues={initFormValues} onFieldsChange={submitConfig} style={{padding: '10px'}}>
+      <Form.Item name="disabled" label="是否禁用" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      <Form.Item name="maxLength" label="最大长度">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item name="size" label="控件大小">
+        <Select
+          options={[
+            {
+              label: 'default',
+              value: 'default',
+            },
+            {
+              label: 'small',
+              value: 'small',
+            },
+            {
+              label: 'large',
+              value: 'large',
+            },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item name="placeholder" label="占位符">
+        <Input />
+      </Form.Item>
+      <Form.Item name="label" label="label">
+        <Input />
+      </Form.Item>
+      <Form.Item name="field" label="绑定字段">
+        <Select
+          options={fields.map((field) => {
+            return {
+              label: field.fieldName,
+              value: field.pathChain
+            }
+          })}
+        />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default Configuration;

package/templates/react-micro-button/configuration/index.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/templates/react-micro-button/configuration/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Configuration from './Configuration';
+import './index.css';
+
+ReactDOM.render(<Configuration />, document.getElementById('root'));

package/templates/react-micro-button/manifest.json.tpl

@@ -0,0 +1,3 @@
+{
+  "configurationType": "<%= configurationType %>"
+}