npm - @maxelms/create-plugin-cli - Versions diffs - 1.1.0 - Mend

@maxelms/create-plugin-cli 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (274) hide show

package/templates/react-micro-button/package.json.tpl ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "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": {
+    "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-button/postcss.config.js ADDED Viewed

@@ -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-button/public/basicConfiguration.json ADDED Viewed

@@ -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-button/public/configuration.html ADDED Viewed

@@ -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-button/public/configuration.json ADDED Viewed

@@ -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-button/public/index.html ADDED Viewed

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Maxelms plugin react demo</title>
+  </head>
+  <body>
+    <div id="micro-button-root"></div>
+  </body>
+</html>

package/templates/react-micro-button/src/App.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Modal } from 'antd'
+import { ButtonPluginProps } from '@max-kit/max-api'
+import 'antd/lib/modal/style'
+const App = (props: ButtonPluginProps) => {
+  const { originalButtonProps, bizData, pluginEnv, userInfo } = props
+  const { name = <button>自定义按钮</button> } = originalButtonProps || {}
+  const [visible, setVisible] = React.useState(false)
+  const onOk = () => {
+    setVisible(false)
+  }
+  const onCancel = () => {
+    setVisible(false)
+  }
+  return (
+    <>
+      <Modal
+        title="弹窗"
+        okText="确定"
+        cancelText="取消"
+        visible={visible}
+        closable={false}
+        onOk={onOk}
+        onCancel={onCancel}
+      >
+        <p>可以在此处编写弹出层 UI 逻辑</p>
+      </Modal>
+      {/* 在此处编写要渲染在按钮内的 UI 逻辑，务必保持 UI 简洁，避免影响页面效果 */}
+      <span onClick={() => setVisible(true)}>
+        {name}
+      </span>
+    </>
+  )
+}
+export default App

package/templates/react-micro-button/src/app.less ADDED Viewed

File without changes

package/templates/react-micro-button/src/index.less ADDED Viewed

File without changes

package/templates/react-micro-button/src/index.tsx ADDED Viewed

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

package/templates/react-micro-button/tsconfig.json ADDED Viewed

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

package/templates/react-micro-button/webpack.config.js.tpl ADDED Viewed

@@ -0,0 +1,150 @@
+// 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: {
+    host: 'localhost',
+    port: 8080,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    static: [{
+      directory: path.join(__dirname, 'public/')
+    }],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MomentLocalesPlugin(),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      inject: true,
+      chunks: ['index'],
+      filename: 'index.html',
+      template: 'public/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'],
+  },
+  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-field/.babelrc ADDED Viewed

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

package/templates/react-micro-field/.gitignore.tpl ADDED Viewed

@@ -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-field/README.md ADDED Viewed

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

package/templates/react-micro-field/configuration/Configuration.tsx ADDED Viewed

@@ -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-field/configuration/index.css ADDED Viewed

@@ -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-field/configuration/index.tsx ADDED Viewed

@@ -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-field/manifest.json.tpl ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "configurationType": "<%= configurationType %>",
+  "fieldTypes": ["TEXT"],
+  "deviceTypes": ["mobile", "pc"],
+  "bizTypes": ["standard-object", "cform", "approval"],
+  "slotTypes": ["table-cell", "form-item"]
+}

package/templates/react-micro-field/package.json.tpl ADDED Viewed

@@ -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-field/postcss.config.js ADDED Viewed

@@ -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-field/public/basicConfiguration.json ADDED Viewed

@@ -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-field/public/configuration.html ADDED Viewed

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