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-button/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-button/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-button/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-button/src/app.component.html ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <app-content [title]="title" [propName1]="propName1" [propName2]="propName2">
2	+ </app-content>

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

@@ -0,0 +1,38 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { MasterPropsSubject } from './master-props'
+@Component({
+  selector: '#root-<%= timestamp %>',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent implements OnInit, OnDestroy {
+  title = 'angular13';
+  propName1: string = '';
+  propName2: string = '';
+  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,
+      } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      // this.cdr.detectChanges() // 手动触发变更检测
+    })
+  }
+  ngOnDestroy() {
+    this.propsSub?.unsubscribe()
+  }
+}

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

@@ -0,0 +1,27 @@
+import { NgModule, Injector } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { createCustomElement } from '@angular/elements'
+import { AppComponent } from './app.component'
+import { ContentComponent } from './components/content.component'
+@NgModule({
+  declarations: [
+    AppComponent,
+    ContentComponent,
+  ],
+  imports: [BrowserModule],
+  bootstrap: [],
+})
+export class AppModule {
+  constructor(private injector: Injector) {
+    // 把 Angular 组件转成浏览器自定义元素
+    const element = createCustomElement(AppComponent, { injector })
+    // 注册到浏览器，标签名可以随意取
+    if (!customElements.get('my-dynamic')) {
+      customElements.define('my-dynamic', element)
+    }
+  }
+  ngDoBootstrap() {}
+}

package/templates/angular-micro-button/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-button/src/components/content.component.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div class="content" role="main">
+  <button (click)="onButtonClick()">点击弹框</button>
+</div>

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

@@ -0,0 +1,16 @@
+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 = '';
+  onButtonClick(): void {
+    alert(`propName1: ${this.propName1}, propName2: ${this.propName2}`);
+  }
+}

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

@@ -0,0 +1,107 @@
+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'
+let 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')
+    },
+    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') {
+    container = `${container}-${Date.now()}`
+    // 首次挂载时创建应用
+    console.log('首次挂载，创建 Angular 应用')
+    appModuleRef = platformBrowserDynamic().bootstrapModule(AppModule, {
+      ngZone: 'noop',
+    })
+    const $wrapper = document.querySelector(`#${singleSpaProps.containerId}`) || document.body
+    const $div = document.createElement('my-dynamic')
+    $div.id = container
+    $wrapper.appendChild($div)
+    $root = document.querySelector(`#${singleSpaProps.containerId} ${container}`)
+    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-button/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-button/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-button/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: ['/'],
+    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-field/.eslintrc.js ADDED Viewed

@@ -0,0 +1,3 @@
+const rule = require('@max-kit/eslint')
+module.exports = rule

package/templates/angular-micro-field/README.md ADDED Viewed

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