@maxelms/create-plugin-cli 1.1.0

package/templates/react-micro-field-umi/src/pages/configuration/index.tsx

@@ -0,0 +1,90 @@
+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 = {
+  propName1: '配置项内容',
+  propName2: 350,
+  propName3: false
+}
+
+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="propName1" label="配置项一">
+        <Input />
+      </Form.Item>
+      <Form.Item name="propName2" label="配置项二">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item name="propName3" label="配置项三" valuePropName="checked">
+        <Switch />
+      </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-field-umi/src/pages/index.tsx.tpl

@@ -0,0 +1,54 @@
+export default App;
+import React from 'react';
+import { Input } from 'antd';
+import { FieldPluginProps } from '@max-kit/max-api';
+import { useMasterProps } from '../hooks/masterProps';
+import './index.less';
+
+const prefixCls = 'maxelms-customize-component-<%= timestamp %>'
+
+const App = (props: FieldPluginProps) => {
+  const masterProps = useMasterProps();
+  /** 当组件运行在 APaaS 基座应用时才存在 props 属性 */
+  const { configurations, value, onChange, readOnly } = masterProps
+  /** configurations 是组件的配置项信息 */
+  const {
+    propName1: placeholder,
+    propName2: width = 350,
+    propName3: disabled,
+  } = configurations || {}
+
+  /** value、onChange 是字段组件作为表单受控组件的必要属性 */
+  const inputValue = value?.value || "欢迎使用 Maxelms 字段组件"
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    onChange && onChange({
+      text: null,
+      value: e.target.value
+    })
+  }
+
+  /** 字段只读态 */
+  if (readOnly) {
+    return (
+      <span>{inputValue}</span>
+    )
+  }
+
+  /** 字段编辑态 */
+  return (
+    <div className={prefixCls}>
+      <div>
+        <Input
+          style={{ width }}
+          value={inputValue}
+          onChange={onInputChange}
+          disabled={disabled}
+          placeholder={placeholder}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;

package/templates/react-micro-field-umi/src/pages/interface.ts

@@ -0,0 +1,12 @@
+
+
+export interface PageInfoProps {
+  /** 模式：前台或者布局设计器 */
+  mode: 'design' | 'application'
+  /** 页面类型：新建页、编辑页、列表页、迷你详情页 */
+  type: 'create' | 'edit' | 'list' | 'mini'
+  /** 集成类型：头部高亮字段、表格、表单 */
+  integrate: 'highlight' | 'table' | 'form'
+  /** 布局设计器模式：webpc、移动端 */
+  designMode?: 'web' | 'mobile'
+}

package/templates/react-micro-field-umi/src/pages/style.less.tpl

@@ -0,0 +1,15 @@
+
+@prefixCls: maxelms-customize-component-<%= timestamp %>;
+
+.@{prefixCls} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    input {
+      text-align: center;
+    }
+    img {
+        width: 350px;
+    }
+}

package/templates/react-micro-field-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-field-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-field-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/react-micro-plugin/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["import", { "libraryName": "antd", "style": true }]
+  ]
+}

package/templates/react-micro-plugin/.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-plugin/README.md

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

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

@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Switch, Input, InputNumber, Select } from 'antd';
+import { PluginChannel } from '@max-kit/max-api'
+import 'antd/dist/antd.css';
+
+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-plugin/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-plugin/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-plugin/manifest.json.tpl

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

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

@@ -0,0 +1,50 @@
+{
+  "version": "1.0.0",
+  "description": "Maxelms plugin react demo",
+  "name": "<%= pluginName %>",
+  "scripts": {
+    "build": "webpack --mode=production --node-env=production && maxelms-plugin-cli -c",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "serve": "webpack serve",
+    "start": "webpack serve"
+  },
+  "devDependencies": {
+    "babel-plugin-import": "1.13.5",
+    "moment-locales-webpack-plugin": "1.2.0",
+    "@babel/core": "7.15.8",
+    "@babel/preset-react": "7.14.5",
+    "@maxelms/create-plugin-cli": "<%= cliVersion %>",
+    "@squoosh/lib": "0.5.3",
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.10",
+    "archiver": "5.3.1",
+    "autoprefixer": "10.3.7",
+    "babel-loader": "8.2.3",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "10.2.0",
+    "css-loader": "6.5.0",
+    "css-minimizer-webpack-plugin": "4.2.1",
+    "html-webpack-plugin": "5.5.0",
+    "image-minimizer-webpack-plugin": "3.8.1",
+    "less": "4.1.2",
+    "less-loader": "10.2.0",
+    "mini-css-extract-plugin": "2.4.3",
+    "postcss": "8.3.11",
+    "postcss-loader": "6.2.0",
+    "prettier": "2.4.1",
+    "style-loader": "3.3.1",
+    "ts-loader": "9.2.6",
+    "typescript": "4.4.4",
+    "webpack": "5.60.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.4.0",
+    "workbox-webpack-plugin": "6.3.0"
+  },
+  "dependencies": {
+    "@max-kit/max-api": "1.0.1",
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  }
+}

package/templates/react-micro-plugin/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Add you postcss configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [['autoprefixer']],
+};

package/templates/react-micro-plugin/public/configuration.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 页面组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/react-micro-plugin/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/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms 页面组件</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/react-micro-plugin/src/App.tsx.tpl

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Input } from 'antd'
+import { PluginProps } from '@max-kit/max-api';
+import './style.less';
+
+const prefixCls = 'maxelms-customize-component-<%= timestamp %>'
+
+const App = (props: PluginProps) => {
+  /** 当组件运行在 APaaS 基座应用时才存在 props 属性 */
+  /** configurations 是组件的配置项信息 */
+  const { configurations } = props
+  const {
+    propName1: placeholder,
+    propName2: width = 350,
+    propName3: disabled,
+  } = configurations || {}
+
+  return (
+    <div className={prefixCls}>
+      <div>
+        <Input
+          style={{ width }}
+          disabled={disabled}
+          placeholder={placeholder}
+          defaultValue="欢迎使用 Maxelms 页面组件"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;

package/templates/react-micro-plugin/src/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { registerPlugin, poweredByMaxelms, PluginProps } from '@max-kit/max-api'
+import App from './App';
+
+const render = (container: string, props?: PluginProps) => {
+  ReactDOM.render(<App {...props} />, document.querySelector(container));
+};
+
+const container = '#root';
+
+if (poweredByMaxelms) {
+  registerPlugin({
+    bootstrap() {
+    },
+    mount(props: PluginProps) {
+      render(`#${props.containerId} ${container}`, props);
+    },
+    update(props: PluginProps) {
+      render(`#${props.containerId} ${container}`, props);
+    },
+    unmount(props) {
+      const element = document.querySelector(`#${props.containerId} ${container}`)
+      element && ReactDOM.unmountComponentAtNode(element);
+    }
+  });
+} else {
+  render(container);
+}

package/templates/react-micro-plugin/src/style.less.tpl

@@ -0,0 +1,12 @@
+
+@prefixCls: maxelms-customize-component-<%= timestamp %>;
+
+.@{prefixCls} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    input {
+      text-align: center;
+    }
+}

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

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "target": "es5",
+    "allowJs": true
+  }
+}