@worktile/planet 12.1.0 → 12.1.1

package/examples/app2/webpack.config.js

@@ -0,0 +1,92 @@
+// const ngToolsWebpack = require('@ngtools/webpack');
+// const path = require('path');
+// const CopyWebpackPlugin = require('copy-webpack-plugin');
+// const ProgressPlugin = require('webpack/lib/ProgressPlugin');
+// const workspaceRoot = path.resolve(__dirname, './');
+// const projectRoot = path.resolve(__dirname, './');
+// const {
+//     IndexHtmlWebpackPlugin
+// } = require('@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin');
+// const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+// const config = {
+//     mode: 'development',
+//     resolve: {
+//         extensions: ['.ts', '.js']
+//     },
+//     context: projectRoot,
+//     entry: {
+//         main: path.resolve(projectRoot, './src/main.ts'),
+//         polyfills: path.resolve(projectRoot, './src/polyfills.ts')
+//     },
+//     output: {
+//         path: path.resolve(workspaceRoot, './dist'),
+//         filename: `[name].js`,
+//         libraryTarget: 'umd',
+//         library: 'app2'
+//     },
+//     plugins: [
+//         new WebpackAssetsManifest(),
+//         new ngToolsWebpack.AngularCompilerPlugin({
+//             tsConfigPath: path.resolve(projectRoot, './src/tsconfig.app.json'),
+//             mainPath: path.resolve(projectRoot, './src/main.ts'),
+//             hostReplacementPaths: {
+//                 './src/environments/environment.ts': './src/environments/environment.prod.ts'
+//             },
+//             sourceMap: true,
+//             compilerOptions: {}
+//         }),
+//         new IndexHtmlWebpackPlugin({
+//             input: path.resolve(__dirname, './src/index.html'),
+//             output: path.basename('./src/index.html')
+//             // baseHref: buildOptions.baseHref,
+//             // entrypoints: generateEntryPoints(buildOptions),
+//             // deployUrl: buildOptions.deployUrl,
+//             // sri: buildOptions.subresourceIntegrity
+//         }),
+//         // new HtmlWebpackPlugin({
+//         //     filename: 'src/index.html'
+//         // })
+//         new ProgressPlugin()
+//     ],
+//     module: {
+//         rules: [
+//             { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
+//             { test: /\.css$/, loader: 'raw-loader' },
+//             { test: /\.html$/, loader: 'raw-loader' },
+//             {
+//                 // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+//                 // Removing this will cause deprecation warnings to appear.
+//                 test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
+//                 parser: { system: true }
+//             },
+//             // require.resolve is required only because of the monorepo structure here.
+//             {
+//                 test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+//                 // test: /\.ts$/,
+//                 loader: require.resolve('@ngtools/webpack')
+//             }
+//         ]
+//     },
+//     devServer: {
+//         historyApiFallback: true,
+//         port: 3002
+//     },
+//     watch: true
+// };
+
+// const assets = ['favicon.ico', 'assets/'];
+// const copyWebpackPluginPatterns = assets.map(asset => {
+//     return {
+//         from: `src/${asset}`,
+//         to: asset.includes('.') ? '' : asset
+//     };
+// });
+// const copyWebpackPluginOptions = {
+//     ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db']
+// };
+
+// const copyWebpackPluginInstance = new CopyWebpackPlugin(copyWebpackPluginPatterns, copyWebpackPluginOptions);
+// config.plugins.push(copyWebpackPluginInstance);
+
+// module.exports = config;

package/examples/common/app-root-context.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppRootContext {
+    name: string;
+
+    setName(name: string) {
+        this.name = name;
+    }
+}

package/examples/common/cache.ts

@@ -0,0 +1,82 @@
+import { helpers } from 'ngx-tethys/util';
+const { isString, isNumber } = helpers;
+const NUMBER_PREFIX = `____n____`;
+
+const supportedStorage = window && window.localStorage;
+const storageSource = window.localStorage || window.sessionStorage;
+
+const cache = {
+    /**
+     * set item to local storage
+     *
+     * @example
+     * cache.set('key1', 'key1-value');
+     * cache.set('key1', 10);
+     * cache.set('key1', { id: 1, name: 'name 1'});
+     * cache.set('key1', 'key1-value', false);
+     * @param key string
+     * @param value string | number | object
+     */
+    set<TValue = string>(key: string, value: TValue) {
+        const itemValue = isString(value)
+            ? value
+            : isNumber(value)
+            ? `${NUMBER_PREFIX}${value}`
+            : JSON.stringify(value);
+        if (supportedStorage) {
+            storageSource.setItem(key, itemValue as string);
+        }
+    },
+    /**
+     * get item from local storage
+     *
+     * @example
+     * cache.get('key1');
+     * cache.get<number>('key1');
+     * cache.get<User>('key1');
+     * cache.get<User[]>('key1');
+     * cache.get('key1', false);
+     *
+     * @param key string
+     */
+    get<TValue = string>(key: string): TValue {
+        if (supportedStorage) {
+            const value = storageSource.getItem(key);
+            if (value) {
+                try {
+                    const result = JSON.parse(value);
+                    return result;
+                } catch (error) {
+                    if (isString(value) && value.includes(NUMBER_PREFIX)) {
+                        return parseInt(value.replace(NUMBER_PREFIX, ''), 10) as any;
+                    } else {
+                        return value as any;
+                    }
+                }
+            } else {
+                return undefined;
+            }
+        } else {
+            return undefined;
+        }
+    },
+    /**
+     * remove key from storage
+     * @param key cache key
+     */
+    remove(key: string) {
+        if (supportedStorage) {
+            storageSource.removeItem(key);
+        }
+    },
+    /**
+     * clear all storage
+     */
+    clear() {
+        if (supportedStorage) {
+            storageSource.clear();
+        }
+    }
+};
+
+export { cache };

package/examples/common/index.ts

@@ -0,0 +1,13 @@
+import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
+import { Provider } from '@angular/core';
+import { PlanetOverlayContainer } from './overlay-container.service';
+
+export * from './app-root-context';
+export * from './module';
+export * from './cache';
+export * from './overlay-container.service';
+
+export const OVERLAY_PROVIDER: Provider = {
+    provide: OverlayContainer,
+    useClass: PlanetOverlayContainer
+};

package/examples/common/module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SectionCardComponent } from './section-card/section-card.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    declarations: [SectionCardComponent],
+    imports: [CommonModule],
+    exports: [SectionCardComponent]
+})
+export class DemoCommonModule {}

package/examples/common/overlay-container.service.ts

@@ -0,0 +1,28 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class PlanetOverlayContainer extends OverlayContainer {
+    constructor(@Inject(DOCUMENT) document: any, protected _platform: Platform) {
+        super(document, _platform);
+    }
+
+    private _getContainerElement(): HTMLElement {
+        if (!this._containerElement) {
+            this._containerElement = this._document.querySelector('.cdk-overlay-container');
+            return this._containerElement;
+        } else {
+            return this._containerElement;
+        }
+    }
+
+    getContainerElement(): HTMLElement {
+        if (!this._getContainerElement()) {
+            this._createContainer();
+        }
+
+        return this._containerElement;
+    }
+}

package/examples/common/section-card/section-card.component.html

@@ -0,0 +1,5 @@
+<div class="section-card-header" *ngIf="title">{{ title }}</div>
+
+<div class="section-card-body">
+  <ng-content></ng-content>
+</div>

package/examples/common/section-card/section-card.component.scss

@@ -0,0 +1,15 @@
+.section-card {
+    display: block;
+    position: relative;
+    padding: 15px;
+    border: 2px $gray-300 dashed;
+
+    .section-card-header {
+        position: absolute;
+        padding: 0 10px;
+        background: $white;
+        top: -10px;
+        left: 5px;
+        color: $gray-600; // $gray-500;
+    }
+}

package/examples/common/section-card/section-card.component.ts

@@ -0,0 +1,11 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+    selector: 'section-card',
+    templateUrl: './section-card.component.html'
+})
+export class SectionCardComponent {
+    @HostBinding('class.section-card') addSectionCard = true;
+
+    @Input() title: string;
+}

package/examples/portal/src/app/a-detail/a-detail.component.html

@@ -0,0 +1,8 @@
+<thy-dialog-header thyTitle="a Detail from Portal"> </thy-dialog-header>
+<thy-dialog-body>
+  <span class="resame-name">This is Micro Front-end application example.</span>
+  <div class="btn-pair mt-2">
+    <button thyButton="primary-square" (click)="ok()">Ok</button>
+    <button thyButton="link-secondary" (click)="close()">Cancel</button>
+  </div>
+</thy-dialog-body>

package/examples/portal/src/app/a-detail/a-detail.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { ThyDialogRef } from 'ngx-tethys/dialog';
+
+@Component({
+    selector: 'app-a-detail',
+    templateUrl: './a-detail.component.html'
+})
+export class ADetailComponent {
+    constructor(private dialogRef: ThyDialogRef<ADetailComponent>) {}
+
+    ok() {
+        this.dialogRef.close();
+    }
+
+    close() {
+        this.dialogRef.close();
+    }
+}

package/examples/portal/src/app/about/about.component.html

@@ -0,0 +1,27 @@
+<section-card title="Planet">
+  <code>ngx-planet</code> is a powerful and easy micro front-end library only for angular.<br />
+  This is live demo for planet which contains portal, app1, app2.<br /><br />
+  <span class="text-danger">Github Repository </span>
+  <a target="_blank" href="https://github.com/worktile/ngx-planet">https://github.com/worktile/ngx-planet</a>
+</section-card>
+
+<section-card class="mt-5" title="AppRootContext data, it can be change in app1">
+  <span class="text-desc">appRootContext.name: </span> <span class="text-danger">{{ appRootContext.name }}</span>
+</section-card>
+
+<section-card class="mt-5" title="Links to app1 and app2 from portal">
+  <a [routerLink]="['/app1/dashboard']" routerLinkActive="active">To App1's Dashboard</a> <br />
+  <a href="javascript:;" (click)="toApp2Dashboard()">To App2's Dashboard</a>
+</section-card>
+
+<section-card class="mt-5" title="Open detail by dialog, it can be opened in app1">
+  <button thyButton="primary-square" (click)="openADetail()">Open A Detail</button>
+</section-card>
+
+<section-card class="mt-5 portal-special" title="Portal 特有的样式">
+  <span class="text-desc">portal 特有样式: </span> <span class="text-danger">font-size： 20px</span>
+</section-card>
+
+<section-card class="mt-5 same-name" title="同名样式">
+  <span class="text-desc">同名样式: </span> <span class="text-danger">color： blue， font-size:12px</span>
+</section-card>

package/examples/portal/src/app/about/about.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+    let component: AboutComponent;
+    let fixture: ComponentFixture<AboutComponent>;
+
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [AboutComponent]
+            }).compileComponents();
+        })
+    );
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AboutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/examples/portal/src/app/about/about.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
+import { ThyDialog } from 'ngx-tethys/dialog';
+import { ADetailComponent } from '../a-detail/a-detail.component';
+import { AppRootContext } from '@demo/common';
+
+@Component({
+    selector: 'app-about',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.scss']
+})
+export class AboutComponent implements OnInit {
+    @HostBinding(`class.thy-layout-content`) isThyLayoutContent = true;
+
+    constructor(private router: Router, private thyDialog: ThyDialog, public appRootContext: AppRootContext) {}
+
+    ngOnInit() {}
+
+    toApp2Dashboard() {
+        this.router.navigateByUrl(`/app2/dashboard`);
+    }
+
+    openADetail() {
+        this.thyDialog.open(ADetailComponent);
+    }
+}

package/examples/portal/src/app/app-routing.module.ts

@@ -0,0 +1,57 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AboutComponent } from './about/about.component';
+import { SettingsComponent } from './settings/settings.component';
+import { EmptyComponent } from 'ngx-planet';
+
+const routes: Routes = [
+    {
+        path: '',
+        redirectTo: 'about',
+        pathMatch: 'full'
+    },
+    {
+        path: 'about',
+        component: AboutComponent
+    },
+    {
+        path: 'settings',
+        component: SettingsComponent
+    },
+    {
+        path: 'app1',
+        component: EmptyComponent,
+        children: [
+            {
+                path: '**',
+                component: EmptyComponent
+            }
+        ]
+    },
+    {
+        path: 'app2',
+        component: EmptyComponent,
+        children: [
+            {
+                path: '**',
+                component: EmptyComponent
+            }
+        ]
+    },
+    {
+        path: 'app4',
+        component: EmptyComponent,
+        children: [
+            {
+                path: '**',
+                component: EmptyComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always', relativeLinkResolution: 'legacy' })],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {}

package/examples/portal/src/app/app.component.html

@@ -0,0 +1,73 @@
+<thy-layout>
+  <div class="portal">
+    <thy-sidebar class="app-nav">
+      <img class="logo" src="/assets/images/logo.svg" />
+      <thy-nav [thyVertical]="'true'" class="mt-2" [thyType]="'primary'">
+        <a
+          thyNavLink
+          thyTooltip="App1"
+          [routerLink]="['/app1']"
+          routerLinkActive="active"
+          thyTooltip="App1"
+          thyTooltipPlacement="right"
+        >
+          <thy-icon thyIconName="application"></thy-icon>
+        </a>
+        <a thyNavLink [routerLink]="['/app2']" routerLinkActive="active" thyTooltip="App2" thyTooltipPlacement="right">
+          <thy-icon thyIconName="app-agile"></thy-icon>
+        </a>
+        <a
+          thyNavLink
+          [routerLink]="['/about']"
+          routerLinkActive="active"
+          thyTooltip="About"
+          thyTooltipPlacement="right"
+        >
+          <thy-icon thyIconName="smile"></thy-icon>
+        </a>
+        <a
+          thyNavLink
+          [routerLink]="['/settings']"
+          routerLinkActive="active"
+          thyTooltip="Settings"
+          thyTooltipPlacement="right"
+          ><thy-icon thyIconName="settings"></thy-icon
+        ></a>
+        <a
+          thyNavLink
+          href="javascript:;"
+          [thyPopover]="more"
+          thyPlacement="right"
+          thyTooltip="More"
+          thyTooltipPlacement="right"
+        >
+          <thy-icon thyIconName="more"></thy-icon>
+        </a>
+
+        <ng-template #more>
+          <thy-action-menu>
+            <a thyActionMenuItem routerLinkActive="active" [routerLink]="['/app1/dashboard']">
+              <span thyActionMenuItemIcon>
+                <thy-icon thyIconName="house"></thy-icon>
+              </span>
+              <span thyActionMenuItemName>To App1's dashboard</span>
+            </a>
+            <a thyActionMenuItem routerLinkActive="active" [routerLink]="['/app1/users']">
+              <span thyActionMenuItemIcon>
+                <thy-icon thyIconName="user-group"></thy-icon>
+              </span>
+              <span thyActionMenuItemName>To App1's users</span>
+            </a>
+          </thy-action-menu>
+        </ng-template>
+      </thy-nav>
+    </thy-sidebar>
+  </div>
+  <div id="app-host-container" class="thy-layout" [ngClass]="{ hide: !loadingDone }">
+    <div class="portal portal-container">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+
+  <thy-loading class="portal" *ngIf="!loadingDone" [thyDone]="loadingDone"></thy-loading>
+</thy-layout>

package/examples/portal/src/app/app.component.scss

@@ -0,0 +1,58 @@
+$app-nav-width: 70px;
+$app-nav-bg-color: #48525c;
+
+.portal-container {
+    display: contents;
+    height: 100%ß;
+}
+.app-nav {
+    width: $app-nav-width;
+    background: $app-nav-bg-color;
+    height: 100%;
+
+    .logo {
+        height: 50px;
+        margin-top: 15px;
+    }
+
+    &.thy-layout-sidebar {
+        border-right: none;
+    }
+
+    .nav-link {
+        opacity: 0.8;
+        min-width: $app-nav-width;
+        color: $white;
+        height: $app-nav-width;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        .thy-icon {
+            color: $white;
+            font-size: $font-size-xlg;
+        }
+        &.active,
+        &:hover {
+            background: rgb(57, 65, 76);
+            color: $white;
+            .thy-icon {
+                color: $white;
+            }
+        }
+    }
+
+    // .thy-nav--vertical {
+    //     .nav-link {
+    //         border-left-width: 0px;
+    //     }
+    // }
+}
+
+.same-name {
+    color: blue;
+    font-size: 12px;
+}
+
+.portal-special {
+    font-size: 20px;
+}

package/examples/portal/src/app/app.component.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                imports: [RouterTestingModule],
+                declarations: [AppComponent]
+            }).compileComponents();
+        })
+    );
+
+    it('should create the app', () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    });
+
+    it(`should have as title 'ngx-micro-frontend'`, () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app.title).toEqual('ngx-micro-frontend');
+    });
+
+    it('should render title in a h1 tag', () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        fixture.detectChanges();
+        const compiled = fixture.debugElement.nativeElement;
+        expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-micro-frontend!');
+    });
+});