npm - @maxelms/create-plugin-cli - Versions diffs - 1.1.26 → 1.1.27 - Mend

@maxelms/create-plugin-cli 1.1.26 → 1.1.27

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 (92) hide show

package/templates/angular-micro-field/public/configuration.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "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"
+      }
+    ]
+  },
+  "externalParams": {
+    "label": "外部参数",
+    "type": "string"
+  }
+}

package/templates/angular-micro-field/public/index.html.tpl ADDED Viewed

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Maxelms 页面组件 angular13</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id="root-<%= timestamp %>"></div>
+</body>
+</html>

package/templates/angular-micro-field/src/app.component.css ADDED Viewed

@@ -0,0 +1,10 @@
+/* App component styles - minimal styles for layout */
+:host {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+  color: #333;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/templates/angular-micro-field/src/app.component.html ADDED Viewed

@@ -0,0 +1,8 @@
+<app-content
+  [title]="title"
+  [propName1]="propName1"
+  [propName2]="propName2"
+  [value]="value"
+  [isFormEditing]="isFormEditing"
+  (valueChange)="onValueChange($event)">
+</app-content>

package/templates/angular-micro-field/src/app.component.ts.tpl ADDED Viewed

@@ -0,0 +1,60 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { MasterPropsSubject } from './master-props'
+type Value = {
+  text?: string
+  value?: string
+}
+@Component({
+  selector: '#root-<%= timestamp %>',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent implements OnInit, OnDestroy {
+  title = 'angular13';
+  propName1: string = '';
+  propName2: string = '';
+  isFormEditing?: boolean = false;
+  value?: string = '';
+  onChange?: (val: Value) => void;
+  private propsSub?: Subscription;
+  constructor(private cdr: ChangeDetectorRef) {}
+  ngOnInit() {
+    console.log('ngOnInit')
+    // 订阅 singleSpaProps
+    this.propsSub = MasterPropsSubject.subscribe((props: any) => {
+      // console.log('收到主应用传来的 props:', props)
+      const {
+        configurations, bizData,
+        isFormEditing, value, onChange
+      } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      // this.isFormEditing = isFormEditing || false
+      this.isFormEditing = true
+      this.value = value?.text || ''
+      console.log(value?.text, 123412341234)
+      this.onChange = onChange
+      this.cdr.detectChanges() // 手动触发变更检测
+    })
+  }
+  onValueChange(newValue: string): void {
+    this.value = newValue;
+    console.log('Value changed to:', newValue);
+    // 这里可以添加其他逻辑，比如发送到父应用
+    this.onChange?.({ text: newValue, value: newValue });
+    this.cdr.detectChanges() // 手动触发变更检测
+  }
+  ngOnDestroy() {
+    this.propsSub?.unsubscribe()
+  }
+}

package/templates/angular-micro-field/src/app.module.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { AppComponent } from './app.component'
+import { ContentComponent } from './components/content.component'
+@NgModule({
+  declarations: [
+    AppComponent,
+    ContentComponent,
+  ],
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/templates/angular-micro-field/src/components/content.component.css ADDED Viewed

@@ -0,0 +1,116 @@
+.content {
+  display: flex;
+  margin: 82px auto 32px;
+  padding: 0 16px;
+  max-width: 960px;
+  flex-direction: column;
+  align-items: center;
+}
+.readonly-text {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  min-width: 300px;
+}
+.readonly-text p {
+  margin: 8px 0;
+  color: #333;
+}
+input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 300px;
+}
+input:focus {
+  outline: none;
+  border-color: #1976d2;
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+}
+.card {
+  border-radius: 4px;
+  border: 1px solid #eee;
+  background-color: #fafafa;
+  height: 40px;
+  width: 200px;
+  margin: 0 8px 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  line-height: 24px;
+}
+.card.card-small {
+  height: 16px;
+  width: 168px;
+}
+.card.highlight-card {
+  background-color: #1976d2;
+  color: white;
+  font-weight: 600;
+  border: none;
+  width: auto;
+  min-width: 30%;
+  position: relative;
+}
+.card.card.highlight-card span {
+  margin-left: 60px;
+}
+svg#rocket {
+  width: 80px;
+  position: absolute;
+  left: -10px;
+  top: -24px;
+}
+svg#rocket-smoke {
+  height: calc(100vh - 95px);
+  position: absolute;
+  top: 10px;
+  right: 180px;
+  z-index: -10;
+}
+svg#clouds {
+  position: fixed;
+  bottom: -160px;
+  left: -230px;
+  z-index: -10;
+  width: 1920px;
+}
+/* Responsive Styles */
+@media screen and (max-width: 767px) {
+  .content {
+    width: 100%;
+  }
+  .card.highlight-card span {
+    margin-left: 72px;
+  }
+  svg#rocket-smoke {
+    right: 120px;
+    transform: rotate(-5deg);
+  }
+}
+@media screen and (max-width: 575px) {
+  svg#rocket-smoke {
+    display: none;
+    visibility: hidden;
+  }
+}

package/templates/angular-micro-field/src/components/content.component.html ADDED Viewed

@@ -0,0 +1,10 @@
+<div class="content" role="main">
+  <!-- 当 isFormEditing 为 true 时显示 input 框 -->
+  <input *ngIf="isFormEditing" [title]="propName1" [placeholder]="propName2" [value]="value"
+    (input)="onInputChange($event)" />
+  <!-- 当 isFormEditing 为 false 时显示只读文本 -->
+  <div *ngIf="!isFormEditing" class="readonly-text">
+    {{ value }}
+  </div>
+</div>

package/templates/angular-micro-field/src/components/content.component.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+@Component({
+  selector: 'app-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.css']
+})
+export class ContentComponent {
+  @Input() title: string = 'angular13';
+  @Input() propName1: string = '';
+  @Input() propName2: string = '';
+  @Input() value: string = '';
+  @Input() isFormEditing: boolean = false;
+  @Output() valueChange = new EventEmitter<string>();
+  onInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.valueChange.emit(target.value);
+  }
+}

package/templates/angular-micro-field/src/index.ts.tpl ADDED Viewed

@@ -0,0 +1,101 @@
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+// import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
+import { registerPlugin, poweredByMaxelms } from '@maxelms/create-pulgin-api'
+import { AppModule } from './app.module'
+import { MasterPropsSubject } from './master-props'
+const container = '#root-<%= timestamp %>'
+const environment = process.env.NODE_ENV === 'production'
+let $root: any
+let appModuleRef: any = null; // 保存应用模块引用
+if (environment) {
+  enableProdMode()
+}
+if (!poweredByMaxelms) {
+  const props = {
+    configurations: {
+      'propName1': '11',
+      'propName2': 3502,
+    },
+  }
+  console.log(props, 'props poweredByMaxelms')
+  render(props, 'mount')
+  // 为开发环境添加全局卸载函数
+  (window as any).unmountAngularApp = unmountApp
+} else {
+  registerPlugin?.({
+    bootstrap() {
+    },
+    mount(props: any) {
+      // console.log(props, 'props mount')
+      render(props, 'mount')
+      $root = document.querySelector(`#${props.containerId} ${container}`)
+    },
+    update(props: any) {
+      // console.log(props, 'props update')
+      render(props, 'update')
+    },
+    unmount(props: any) {
+      // console.log(props, 'props unmount')
+      unmountApp()
+    },
+  })
+}
+function render(singleSpaProps: any, mode: 'mount' | 'update') {
+  MasterPropsSubject.next(singleSpaProps)
+  if (mode === 'mount') {
+    // 首次挂载时创建应用
+    console.log('首次挂载，创建 Angular 应用')
+    appModuleRef = platformBrowserDynamic().bootstrapModule(AppModule, {
+      ngZone: 'noop',
+    })
+    return appModuleRef
+  } else if (mode === 'update') {
+    // 更新时只发送新的 props，不重新创建应用
+    console.log('更新模式，只发送新的 props')
+    MasterPropsSubject.next(singleSpaProps)
+    return appModuleRef
+  }
+}
+function unmountApp() {
+  console.log('卸载 Angular 应用')
+  if (appModuleRef) {
+    try {
+      // 销毁 Angular 应用实例
+      appModuleRef.destroy()
+      console.log('Angular 应用已成功销毁')
+    } catch (error) {
+      console.error('销毁 Angular 应用时出错:', error)
+    } finally {
+      // 清理引用
+      appModuleRef = null
+    }
+  } else {
+    console.log('没有找到 Angular 应用实例，无需销毁')
+  }
+  // 清理 DOM 元素
+  try {
+    const containerElement = document.querySelector(container)
+    if (containerElement) {
+      containerElement.innerHTML = ''
+      console.log('DOM 容器已清理')
+    }
+  } catch (error) {
+    console.error('清理 DOM 时出错:', error)
+  }
+  // 清理全局变量
+  $root = null
+}

package/templates/angular-micro-field/src/master-props.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ReplaySubject } from 'rxjs'
+export const MasterPropsSubject = new ReplaySubject<MasterProps>(1)
+// Add any custom single-spa props you have to this type def
+// https://single-spa.js.org/docs/building-applications.html#custom-props
+export type MasterProps = any;

package/templates/angular-micro-field/tsconfig.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": ["es2018", "dom"],
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "files": [
+    "src/index.ts"
+  ],
+  "include": [
+    "src/app/**/*",
+  ]
+}

package/templates/angular-micro-field/webpack.config.js ADDED Viewed

@@ -0,0 +1,112 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const { AngularWebpackPlugin } = require('@ngtools/webpack')
+const isProduction = process.env.NODE_ENV == 'production'
+const config = {
+  entry: {
+    index: './src/index.ts',
+  },
+  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': '*',
+    },
+    proxy: {
+      '/api/': {
+        target: 'https://max-ai.maxelms.com/',
+        changeOrigin: true,
+        cookieDomainRewrite: '',
+      },
+      '/app/api/': {
+        target: 'https://max-ai.maxelms.com/',
+        changeOrigin: true,
+        cookieDomainRewrite: '',
+      },
+      '/app-admin/api/': {
+        target: 'https://max-ai.maxelms.com/',
+        changeOrigin: true,
+        cookieDomainRewrite: '',
+      },
+    },
+    static: [{
+      directory: path.join(__dirname, 'examples/'),
+    }, {
+      directory: path.join(__dirname, 'public/'),
+    }],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: 'public/index.html',
+      chunks: ['index'],
+      filename: 'index.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' },
+      ],
+    }),
+    new AngularWebpackPlugin({
+      tsconfig: './tsconfig.json',
+      jitMode: true,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: '@ngtools/webpack',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.html$/,
+        use: 'raw-loader',
+      },
+      {
+        test: /\.css$/,
+        use: ['to-string-loader', 'css-loader'],
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        type: 'asset',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    alias: {
+      '@': path.resolve('src'),
+    },
+  },
+}
+module.exports = () => {
+  if (isProduction) {
+    config.mode = 'production'
+  } else {
+    config.mode = 'development'
+  }
+  return config
+}

package/templates/angular-micro-plugin/package.json.tpl CHANGED Viewed

@@ -10,8 +10,8 @@
     "@angular/core": "13.0.0",
     "@angular/platform-browser": "13.0.0",
     "@angular/platform-browser-dynamic": "13.0.0",
-    "@maxelms/create-plugin-cli": "1.1.24",
-    "@maxelms/create-pulgin-api": "1.0.0",
+    "@maxelms/create-plugin-cli": "^1.0.0",
+    "@maxelms/create-pulgin-api": "^1.0.0",
     "@ngtools/webpack": "13",
     "css-loader": "7.1.2",
     "raw-loader": "4.0.2",

package/templates/react-micro-app/package.json.tpl CHANGED Viewed

@@ -50,5 +50,11 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "6.4.3"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router-dom": "6.4.3"
   }
 }

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

@@ -46,5 +46,10 @@
     "antd": "4.21.2",
     "react": "16.14.0",
     "react-dom": "16.14.0"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   }
 }

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

@@ -5,6 +5,7 @@ import App from './App';
 import './index.less';
 const render = (container: string, props?: any) => {
+  if (!document.querySelector(container)) return
   ReactDOM.render(<App {...props} />, document.querySelector(container));
 };

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

@@ -47,5 +47,10 @@
     "antd": "4.21.2",
     "react": "16.14.0",
     "react-dom": "16.14.0"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   }
 }

package/templates/react-micro-field-umi/package.json.tpl CHANGED Viewed

@@ -44,5 +44,10 @@
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
     "yorkie": "^2.0.0"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   }
 }

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

@@ -47,5 +47,10 @@
     "antd": "4.21.2",
     "react": "16.14.0",
     "react-dom": "16.14.0"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   }
 }

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

@@ -44,5 +44,10 @@
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",
     "yorkie": "^2.0.0"
+  },
+  "resolutions": {
+    "antd": "4.21.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   }
 }

package/templates/vue3-micro-button/package.json.tpl CHANGED Viewed

@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@maxelms/create-pulgin-api": "1.0.0",
+    "@maxelms/create-pulgin-api": "^1.0.0",
     "core-js": "3.6.5",
     "element-ui": "2.15.6",
     "vue": "3.0.0",

package/templates/vue3-micro-field/package.json.tpl CHANGED Viewed

@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@maxelms/create-pulgin-api": "1.0.0",
+    "@maxelms/create-pulgin-api": "^1.0.0",
     "core-js": "3.6.5",
     "element-ui": "2.15.6",
     "vue": "3.0.0",

package/templates/vue3-micro-plugin/package.json.tpl CHANGED Viewed

@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@maxelms/create-pulgin-api": "1.0.0",
+    "@maxelms/create-pulgin-api": "^1.0.0",
     "core-js": "3.6.5",
     "element-ui": "2.15.6",
     "vue": "3.0.0",

package/templates/vue3vite-micro-button/package.json.tpl CHANGED Viewed

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@esbuild/darwin-arm64": "0.24.0",
-    "@maxelms/create-pulgin-api": "1.0.0",
+    "@maxelms/create-pulgin-api": "^1.0.0",
     "@rollup/rollup-darwin-arm64": "4.28.1",
     "pinia": "2.2.6",
     "vue": "3.5.13",