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-field/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-field/public/index.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-field/src/App.tsx.tpl ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Input } from 'antd';
+import { FieldPluginProps } from '@max-kit/max-api';
+import './style.less';
+const prefixCls = 'maxelms-customize-component-<%= timestamp %>'
+const App = (props: FieldPluginProps) => {
+  /** 当组件运行在 APaaS 基座应用时才存在 props 属性 */
+  const { configurations, value, onChange, readOnly } = props
+  /** 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/src/index.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { registerPlugin, poweredByMaxelms, FieldPluginProps } from '@max-kit/max-api'
+import App from './App';
+const render = (container: string, props?: FieldPluginProps) => {
+  ReactDOM.render(<App {...props} />, document.querySelector(container));
+};
+const container = '#root';
+if (poweredByMaxelms) {
+  registerPlugin({
+    bootstrap() {
+    },
+    mount(props: FieldPluginProps) {
+      render(`#${props.containerId} ${container}`, props);
+    },
+    update(props: FieldPluginProps) {
+      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-field/src/style.less.tpl ADDED Viewed

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

@@ -0,0 +1,157 @@
+// 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/'),
+    },
+  },
+  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'],
+              plugins: [
+                ['import', {libraryName: 'antd', style: 'css'}]
+              ]
+            },
+          },
+          '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-field-umi/.editorconfig ADDED Viewed

@@ -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-field-umi/.gitignore.tpl ADDED Viewed

@@ -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-field-umi/.prettierignore ADDED Viewed

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

package/templates/react-micro-field-umi/.prettierrc ADDED Viewed

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

package/templates/react-micro-field-umi/README.md ADDED Viewed

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

package/templates/react-micro-field-umi/config/config.ts.tpl ADDED Viewed

@@ -0,0 +1,41 @@
+import { defineConfig } from 'umi';
+import pluginConfig from './plugin';
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  routes: [
+    {
+      exact: true,
+      path: '/',
+      component: '../layouts/BasicLayout',
+      routes: [
+        {
+          path: '/',
+          component: '@/pages/index',
+        }
+      ]
+    },
+    <% if (configurationType === 'html') {%>
+    {
+      exact: true,
+      path: '/configuration',
+      component: '../pages/configuration/index',
+    },
+    <% } %>
+  ],
+  exportStatic: {
+    dynamicRoot: true,
+    htmlSuffix: true,
+  },
+  extraBabelPlugins: [
+    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
+  ],
+  fastRefresh: {},
+  copy: [
+    'README.md',
+    'manifest.json'
+  ],
+  ...pluginConfig,
+});

package/templates/react-micro-field-umi/config/plugin.ts ADDED Viewed

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

@@ -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-field-umi/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-umi/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-field-umi/src/app.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import ReactDom from 'react-dom';
+// @ts-ignore
+import { setCreateHistoryOptions } from 'umi';
+import { registerPlugin, poweredByMaxelms, FieldPluginProps } 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: FieldPluginProps) {
+      setMasterProps(props.containerId, props)
+      setCreateHistoryOptions({
+        type: 'memory',
+      })
+      containerId = props.containerId
+      rootElement = document.querySelector(`#${props.containerId} #${defaultRootElement}`);
+      oldRender()
+    },
+    update(props: FieldPluginProps) {
+      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-field-umi/src/global.tsx ADDED Viewed

File without changes

package/templates/react-micro-field-umi/src/hooks/masterProps.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { FieldPluginProps } from '@max-kit/max-api'
+const runtimeProps: Record<string, FieldPluginProps> = {}
+export const masterPropsContext = React.createContext<FieldPluginProps>({} as FieldPluginProps)
+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-field-umi/src/layouts/BasicLayout.tsx ADDED Viewed

@@ -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