@maxelms/create-plugin-cli 1.1.0

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

@@ -0,0 +1,156 @@
+// 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 { CleanWebpackPlugin } = require('clean-webpack-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;
+
+const config = {
+  entry: {
+    index: './src/index.tsx',
+    <% if (configurationType === 'html') {%>
+    configuration: './configuration/index.tsx',
+    <% } %>
+  },
+  output: {
+    publicPath: "",
+    path: path.resolve(__dirname, 'dist'),
+    filename: isProduction
+      ? '[name].[contenthash].bundle.js'
+      : '[name].bundle.js',
+  },
+  devServer: {
+    open: ['/', '/playground.html'],
+    host: 'localhost',
+    port: 8080,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    static: [{
+      directory: path.join(__dirname, 'examples/'),
+    }, {
+      directory: path.join(__dirname, 'public/')
+    }],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MomentLocalesPlugin(),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: 'public/index.html',
+      chunks: ['index'],
+      filename: 'index.html',
+    }),
+    <% if (configurationType === 'html') {%>
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: 'public/configuration.html',
+      chunks: ['configuration'],
+      filename: 'configuration.html',
+    }),
+    <% } %>
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'public',
+          globOptions: {
+            dot: true,
+            gitignore: true,
+            ignore: ['**/public/index.html', '**/public/configuration.html'],
+          },
+          noErrorOnMissing: true,
+        },
+        { from: 'README.md' },
+        { from: 'manifest.json' },
+      ],
+    }),
+  ],
+  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, 'css-loader', 'postcss-loader', {
+          loader: 'less-loader',
+          options: {
+            lessOptions: {
+              javascriptEnabled: true
+            }
+          }
+        }],
+      },
+      {
+        test: /\.css$/i,
+        use: [stylesHandler, 'css-loader', '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-plugin-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-plugin-umi/.gitignore.tpl

@@ -0,0 +1,24 @@
+# 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
+/.pnpm-debug.log
+/pnpm-lock.yaml
+
+# production
+/dist
+dist.maxplugin
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local
+/.vscode

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

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

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

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

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

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

package/templates/react-micro-plugin-umi/config/config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'umi';
+import pluginConfig from './plugin';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [
+    {
+      exact: true,
+      path: '/',
+      component: '../pages/index',
+    },
+    {
+      exact: true,
+      path: '/configuration',
+      component: '../pages/configuration/index',
+    },
+  ],
+  exportStatic: {
+    dynamicRoot: true,
+    htmlSuffix: true,
+  },
+  extraBabelPlugins: [
+    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
+  ],
+  fastRefresh: {},
+  ...pluginConfig,
+});

package/templates/react-micro-plugin-umi/config/plugin.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+
+const pluginConfig = {
+  mountElementId: 'root-plugin',
+  runtimeHistory: {},
+  publicPath: './',
+  devServer: {
+    port: 8080,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    static: {
+      directory: path.join(__dirname, 'examples/'),
+    }
+  }
+}
+
+export default pluginConfig

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

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

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

@@ -0,0 +1,48 @@
+{
+  "name": "<%= pluginName %>",
+  "private": true,
+  "scripts": {
+    "start": "npm-run-all -l -p start:plugin start:playground",
+    "start:plugin": "cross-env umi dev",
+    "start:playground": "http-server -p 3000 ./examples -a localhost -o /playground.html",
+    "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": {
+    "@max-kit/max-api": "1.0.1",
+    "antd": "4.21.2",
+    "archiver": "5.3.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "umi": "3.4.25"
+  },
+  "devDependencies": {
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@types/react": "16.14.28",
+    "@types/react-dom": "16.9.16",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "3.4.25",
+    "babel-plugin-import": "1.13.5",
+    "cross-env": "^7.0.3",
+    "http-server": "^14.1.1",
+    "lint-staged": "^10.0.7",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.2.0",
+    "typescript": "^4.1.2",
+    "yorkie": "^2.0.0"
+  }
+}

package/templates/react-micro-plugin-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-plugin-umi/src/app.tsx

@@ -0,0 +1,46 @@
+import ReactDom from 'react-dom';
+// @ts-ignore
+import { setCreateHistoryOptions } from 'umi';
+import { registerPlugin, poweredByMaxelms } from '@max-kit/max-api'
+import { setMasterProps } from './hooks/masterProps';
+import './public-path';
+
+window.__SINGLETON_MODE__ = true
+
+const defaultRootElement = 'root-plugin' as any
+let rootElement = defaultRootElement
+let containerId: string
+
+export const render = (oldRender: any) => {
+  if (!poweredByMaxelms) {
+    oldRender()
+    return
+  }
+  registerPlugin({
+    mount(props) {
+      setMasterProps(props.containerId, props)
+      setCreateHistoryOptions({
+        type: 'memory',
+      })
+      containerId = props.containerId
+      rootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`);
+      oldRender()
+    },
+    update(props) {
+      setMasterProps(props.containerId, props)
+    },
+    unmount(props) {
+      setMasterProps(props.containerId, undefined)
+      const unmountRootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`);
+      unmountRootElement && ReactDom.unmountComponentAtNode(unmountRootElement)
+    }
+  })
+}
+
+export const modifyClientRenderOpts = (memo: any) => {
+  memo.routes[0].containerId = containerId
+  return {
+    ...memo,
+    rootElement,
+  }
+}

package/templates/react-micro-plugin-umi/src/hooks/masterProps.ts

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+const runtimeProps: Record<string, any> = {
+
+}
+
+export const masterPropsContext = React.createContext<Record<string, any>>({})
+
+export const useMasterProps = () => {
+  const masterProps = React.useContext(masterPropsContext)
+  return masterProps || {}
+}
+
+export const setMasterProps = (id: string, props: any) => {
+  runtimeProps[id] = props
+  const event = new CustomEvent(id)
+  window.dispatchEvent(event)
+}
+
+export const useGetMasterProps = (id: string) => {
+  const [state, setState] = useState(runtimeProps);
+
+  const updater = React.useCallback(() => {
+    setState({...runtimeProps})
+  }, [])
+
+  React.useEffect(() => {
+    window.addEventListener(id, updater)
+    return () => {
+      window.removeEventListener(id, updater)
+    }
+  }, [])
+  return state[id];
+}

package/templates/react-micro-plugin-umi/src/layouts/BasicLayout.tsx

@@ -0,0 +1,17 @@
+
+import React from 'react'
+import { useGetMasterProps, masterPropsContext } from '../hooks/masterProps'
+
+
+const BasicLayout: React.FC<any> = props => {
+  const containerId = props.routes[0].containerId
+  const runtimeProps = useGetMasterProps(containerId)
+
+  return (
+    <masterPropsContext.Provider value={runtimeProps}>
+      {props.children}
+    </masterPropsContext.Provider>
+  )
+}
+
+export default BasicLayout

package/templates/react-micro-plugin-umi/src/pages/configuration/index.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: 'middle',
+  disabled: false,
+  placeholder: '',
+  maxLength: null,
+  label: '',
+}
+
+const Configuration: React.FC<ConfigurationType> = () => {
+  const [form] = Form.useForm()
+
+  const pluginChannelRef = useRef<any>(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) => {
+      setFields(data as FieldData[])
+    }).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: 'middle',
+              value: 'middle',
+            },
+            {
+              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-plugin-umi/src/pages/index.tsx

@@ -0,0 +1,21 @@
+import { useMasterProps } from '../hooks/masterProps';
+import { Input } from 'antd';
+import BasicLayout from '../layouts/BasicLayout'
+
+function IndexPage(props: any) {
+  const masterProps = useMasterProps();
+  const { configurations } = masterProps;
+  const { label, placeholder, disabled, maxLength, size } = configurations || {}
+  return (
+    <div>
+      {label && (<label>{label}: </label>)}<Input placeholder={placeholder} disabled={disabled} maxLength={maxLength} size={size} />
+    </div>
+  );
+}
+
+
+export default (props: any) => {
+  return (
+    <BasicLayout {...props}><IndexPage /></BasicLayout>
+  )
+}

package/templates/react-micro-plugin-umi/src/public-path.js

@@ -0,0 +1,5 @@
+import { poweredByMaxelms } from '@max-kit/max-api';
+
+if (poweredByMaxelms) {
+  __webpack_public_path__ = window.__MAXELMS_GLOBAL_ENV__.publicPath;
+}

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

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "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-plugin-umi/typings.d.ts

@@ -0,0 +1,10 @@
+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/vue-micro-app/.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/vue-micro-app/README.md

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