npm - @maxelms/create-plugin-cli - Versions diffs - 1.1.25-master.1 → 1.1.27 - Mend

@maxelms/create-plugin-cli 1.1.25-master.1 → 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-app/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-app/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-app/src/about.component.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { PropsService } from './props.service'
+@Component({
+  selector: 'app-about',
+  template: `
+    <div class="content" role="main">
+        app-about
+        <p>propName1 = {{ propName1 }}</p>
+        <p>propName2 = {{ propName2 }}</p>
+    </div>
+  `,
+  styles: [`
+    .content {
+      margin-top: 200px;
+    }
+  `],
+})
+export class AboutComponent {
+  propName1: string = '';
+  propName2: string = '';
+  private propsSub?: Subscription;
+  constructor(
+    private propsService: PropsService,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.init()
+  }
+  init() {
+    this.propsSub = this.propsService.props$.subscribe((props: any) => {
+      const { configurations } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      setTimeout(() => {
+        this.cdr.detectChanges() // ⚡ 手动刷新视图
+      }, 100)
+    })
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router'
+import { HomeComponent } from './home.component'
+import { AboutComponent } from './about.component'
+import { ContactComponent } from './contact.component'
+export const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: HomeComponent },
+  { path: 'about', component: AboutComponent },
+  { path: 'contact', component: ContactComponent },
+  { path: '**', redirectTo: '/home' },
+]

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

@@ -0,0 +1,22 @@
+: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;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 8px 0;
+}
+p {
+  margin: 0;
+}

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

@@ -0,0 +1,304 @@
+<style>
+  .spacer {
+    flex: 1;
+  }
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+  .toolbar img {
+    margin: 0 16px;
+  }
+  .toolbar nav {
+    display: flex;
+    gap: 16px;
+  }
+  .toolbar nav a {
+    color: white;
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+  }
+  .toolbar nav a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .toolbar nav a.active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+  .toolbar #twitter-logo:hover {
+    opacity: 0.8;
+  }
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+  .card svg.material-icons path {
+    fill: #888;
+  }
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+  .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-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(black, 0.35);
+  }
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+  .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;
+  }
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+  a:hover {
+    color: #125699;
+  }
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+  .terminal pre {
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27, 31, 35, .2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  }
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+    border-color: rgba(27, 31, 35, .35);
+    background-position: -.5em;
+  }
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container>*:not(.circle-link),
+    .terminal {
+      width: 100%;
+    }
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+    .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;
+    }
+  }
+</style>
+<!-- Toolbar -->
+<div class="toolbar" role="banner">
+  <img width="40" alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />
+  <span>Angular Microfrontend</span>
+  <div class="spacer"></div>
+  <nav>
+    <a routerLink="/home" routerLinkActive="active">Home</a>
+    <a routerLink="/about" routerLinkActive="active">About</a>
+    <a routerLink="/contact" routerLinkActive="active">Contact</a>
+  </nav>
+</div>
+<!-- Router Outlet -->
+<router-outlet></router-outlet>

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

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { singleSpaPropsSubject } from './single-spa-props' // 引用你定义的 Subject
+import { PropsService } from './props.service'
+@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?: any;
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private propsService: PropsService,
+  ) {}
+  ngOnInit() {
+    console.log('ngOnInit')
+    // 订阅 singleSpaProps
+    this.propsSub = singleSpaPropsSubject.subscribe((props: any) => {
+      console.log('收到主应用传来的 props: 111', props)
+      const { configurations, bizData } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      // 更新服务中的props，供子组件使用
+      this.propsService.updateProps(props)
+      this.cdr.detectChanges() // 手动触发变更检测
+    })
+  }
+  ngOnDestroy() {
+    this.propsSub?.unsubscribe()
+  }
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core'
+import { HashLocationStrategy, LocationStrategy } from '@angular/common'
+import { BrowserModule } from '@angular/platform-browser'
+import { RouterModule } from '@angular/router'
+import { AppComponent } from './app.component'
+import { HomeComponent } from './home.component'
+import { AboutComponent } from './about.component'
+import { ContactComponent } from './contact.component'
+import { routes } from './app-routing.module'
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    AboutComponent,
+    ContactComponent,
+  ],
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot(routes, { useHash: true }),
+  ],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

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

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { PropsService } from './props.service'
+@Component({
+  selector: 'app-contact',
+  template: `
+    <div class="content" role="main">
+        app-contact
+        <p>propName1 = {{ propName1 }}</p>
+        <p>propName2 = {{ propName2 }}</p>
+    </div>
+  `,
+  styles: [`
+    .content {
+      margin-top: 200px;
+    }
+  `],
+})
+export class ContactComponent {
+  propName1: string = '';
+  propName2: string = '';
+  private propsSub?: Subscription;
+  constructor(
+    private propsService: PropsService,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.init()
+  }
+  init() {
+    this.propsSub = this.propsService.props$.subscribe((props: any) => {
+      const { configurations } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      setTimeout(() => {
+        this.cdr.detectChanges() // ⚡ 手动刷新视图
+      }, 100)
+    })
+  }
+}

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

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { PropsService } from './props.service'
+@Component({
+  selector: 'app-home',
+  template: `
+    <div class="content" role="main">
+        app-home
+        <p>propName1 = {{ propName1 }}</p>
+        <p>propName2 = {{ propName2 }}</p>
+    </div>
+  `,
+  styles: [`
+    .content {
+      margin-top: 200px;
+    }
+  `],
+})
+export class HomeComponent {
+  propName1: string = '';
+  propName2: string = '';
+  private propsSub?: Subscription;
+  constructor(
+    private propsService: PropsService,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.init()
+  }
+  init() {
+    this.propsSub = this.propsService.props$.subscribe((props: any) => {
+      const { configurations } = props || {}
+      this.propName1 = configurations?.propName1 || ''
+      this.propName2 = configurations?.propName2 || ''
+      setTimeout(() => {
+        this.cdr.detectChanges() // ⚡ 手动刷新视图
+      }, 100)
+    })
+  }
+}

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

@@ -0,0 +1,54 @@
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { registerPlugin, poweredByMaxelms } from '@maxelms/create-pulgin-api'
+import { AppModule } from './app.module'
+import { singleSpaPropsSubject } from './single-spa-props'
+let container = '#root-<%= timestamp %>'
+const environment = process.env.NODE_ENV === 'production'
+if (environment) {
+  enableProdMode()
+}
+if (!poweredByMaxelms) {
+  const props = {
+    configurations: {
+      'propName1': '11',
+      'propName2': 3502,
+    },
+  }
+  console.log(props, 'props poweredByMaxelms')
+  render(props)
+} else {
+  let $root: any
+  registerPlugin?.({
+    bootstrap() {
+      console.log('Angular microfrontend bootstrap')
+    },
+    mount(props: any) {
+      console.log(props, 'props mount')
+      render(props)
+      $root = document.querySelector(`#${props.containerId} ${container}`)
+    },
+    update(props: any) {
+      console.log(props, 'props update')
+      render(props)
+    },
+    unmount(props: any) {
+      console.log('Angular microfrontend unmount')
+      const element = document.querySelector(`#${props.containerId} ${container}`) || $root
+      // Angular will handle cleanup automatically
+    },
+  })
+}
+function render(singleSpaProps: any) {
+  singleSpaPropsSubject.next(singleSpaProps)
+  return platformBrowserDynamic().bootstrapModule(AppModule, {
+    ngZone: 'noop',
+  })
+}

package/templates/angular-micro-app/src/props.service.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+@Injectable({
+  providedIn: 'root',
+})
+export class PropsService {
+  private propsSubject = new BehaviorSubject<any>({})
+  public props$ = this.propsSubject.asObservable()
+  updateProps(props: any) {
+    this.propsSubject.next(props)
+  }
+  getCurrentProps() {
+    return this.propsSubject.value
+  }
+}

package/templates/angular-micro-app/src/single-spa-props.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ReplaySubject } from 'rxjs'
+export const singleSpaPropsSubject = new ReplaySubject<SingleSpaProps>(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 SingleSpaProps = any;

package/templates/angular-micro-app/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/**/*",
+  ]
+}