-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support style isolation (#166)
* feat: support style isolation * feat: support style isolation * feat: support style isolation * chore: fix error test * test: add test about style isolation * feat: style isolation Co-authored-by: zhenshuaiwws <[email protected]>
- Loading branch information
1 parent
71a331a
commit 5a6d6e0
Showing
39 changed files
with
705 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,30 @@ | ||
| const WebpackAssetsManifest = require('webpack-assets-manifest'); | ||
| const PrefixWrap = require('@worktile/planet-postcss-prefixwrap'); | ||
|
|
||
| module.exports = { | ||
| optimization: { | ||
| runtimeChunk: false | ||
| }, | ||
| plugins: [new WebpackAssetsManifest()] | ||
| plugins: [new WebpackAssetsManifest()], | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.scss$/, | ||
| use: [ | ||
| { | ||
| loader: 'postcss-loader', | ||
| options: { | ||
| plugins: [ | ||
| PrefixWrap('.app1', { | ||
| hasAttribute: 'planet-inline', | ||
| prefixRootTags: true | ||
| }) | ||
| ] | ||
| } | ||
| }, | ||
| 'sass-loader' | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,45 @@ | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
|
|
||
| import { RouterModule, Route } from '@angular/router'; | ||
| import { RouterModule } from '@angular/router'; | ||
| import { NgxTethysModule } from 'ngx-tethys'; | ||
| import { DashboardComponent } from './dashboard/dashboard.component'; | ||
| import { routers } from './app.routing'; | ||
| import { AppRootComponent, AppActualRootComponent } from './root/root.component'; | ||
| import { DemoCommonModule } from '@demo/common'; | ||
| import { DemoCommonModule, OVERLAY_PROVIDER } from '@demo/common'; | ||
| import { NgxPlanetModule } from 'ngx-planet'; | ||
| import { ProjectsComponent } from './projects/projects.component'; | ||
| import { App1DetailComponent } from './detail/detail.component'; | ||
| import { Overlay, OverlayModule } from '@angular/cdk/overlay'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { AppOverlay } from './overlay'; | ||
| import { ProjectsDialogComponent } from './projects/dialog/projects-dialog.component'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { SharedModule } from './shared.module'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [AppRootComponent, AppActualRootComponent, DashboardComponent, ProjectsComponent], | ||
| declarations: [ | ||
| AppRootComponent, | ||
| AppActualRootComponent, | ||
| DashboardComponent, | ||
| ProjectsComponent, | ||
| App1DetailComponent, | ||
| ProjectsDialogComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| BrowserAnimationsModule, | ||
| RouterModule.forRoot(routers), | ||
| // UserModule, | ||
| NgxTethysModule, | ||
| FormsModule, | ||
| SharedModule, | ||
| DemoCommonModule, | ||
| NgxPlanetModule | ||
| NgxPlanetModule, | ||
| OverlayModule | ||
| ], | ||
| providers: [], | ||
| entryComponents: [], | ||
| providers: [OVERLAY_PROVIDER, { provide: Overlay, useClass: AppOverlay }], | ||
| entryComponents: [App1DetailComponent, ProjectsDialogComponent], | ||
| bootstrap: [AppRootComponent] | ||
| }) | ||
| export class AppModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <thy-dialog-header thyTitle="a Detail from App1"> </thy-dialog-header> | ||
| <thy-dialog-body> | ||
| <span class="same-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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { ThyDialogRef } from 'ngx-tethys/dialog'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-detail', | ||
| templateUrl: './detail.component.html' | ||
| }) | ||
| export class App1DetailComponent { | ||
| constructor(private dialogRef: ThyDialogRef<App1DetailComponent>) {} | ||
|
|
||
| ok() { | ||
| this.dialogRef.close(); | ||
| } | ||
|
|
||
| close() { | ||
| this.dialogRef.close(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Directionality } from '@angular/cdk/bidi'; | ||
| import { | ||
| Overlay, | ||
| OverlayConfig, | ||
| OverlayContainer, | ||
| OverlayKeyboardDispatcher, | ||
| OverlayPositionBuilder, | ||
| OverlayRef, | ||
| ScrollStrategyOptions | ||
| } from '@angular/cdk/overlay'; | ||
| import { DOCUMENT, Location } from '@angular/common'; | ||
| import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone } from '@angular/core'; | ||
| import { helpers } from 'ngx-tethys'; | ||
|
|
||
| @Injectable() | ||
| export class AppOverlay extends Overlay { | ||
| constructor( | ||
| /** Scrolling strategies that can be used when creating an overlay. */ | ||
| scrollStrategies: ScrollStrategyOptions, | ||
| _overlayContainer: OverlayContainer, | ||
| _componentFactoryResolver: ComponentFactoryResolver, | ||
| _positionBuilder: OverlayPositionBuilder, | ||
| _keyboardDispatcher: OverlayKeyboardDispatcher, | ||
| _injector: Injector, | ||
| _ngZone: NgZone, | ||
| @Inject(DOCUMENT) _document: any, | ||
| _directionality: Directionality, | ||
| _location: Location | ||
| ) { | ||
| super( | ||
| scrollStrategies, | ||
| _overlayContainer, | ||
| _componentFactoryResolver, | ||
| _positionBuilder, | ||
| _keyboardDispatcher, | ||
| _injector, | ||
| _ngZone, | ||
| _document, | ||
| _directionality, | ||
| _location | ||
| ); | ||
| } | ||
|
|
||
| private getOverlayPanelClasses(config: OverlayConfig) { | ||
| let classes = ['app1']; | ||
| if (config.panelClass) { | ||
| if (helpers.isArray(config.panelClass)) { | ||
| classes = classes.concat(config.panelClass); | ||
| } else { | ||
| classes.push(config.panelClass as string); | ||
| } | ||
| } | ||
| return classes; | ||
| } | ||
|
|
||
| create(config?: OverlayConfig): OverlayRef { | ||
| const overlayConfig: OverlayConfig = { | ||
| ...config, | ||
| panelClass: this.getOverlayPanelClasses(config) | ||
| }; | ||
| const overlayRef = super.create(overlayConfig); | ||
| overlayRef.addPanelClass(overlayConfig.panelClass); | ||
| return overlayRef; | ||
| } | ||
| } |
10 changes: 10 additions & 0 deletions
10
examples/app1/src/app/projects/dialog/projects-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <thy-dialog-header thyTitle="a Detail from App1"> </thy-dialog-header> | ||
| <thy-dialog-body> | ||
| <span class="same-name">this is a app2's component </span> | ||
| <thy-loading [thyDone]="loadingDone"></thy-loading> | ||
| <div #container></div> | ||
| </thy-dialog-body> | ||
| <thy-dialog-footer [thyDivided]="true"> | ||
| <button thyButton="primary-square" (click)="ok()">Ok</button> | ||
| <button thyButton="link-secondary" (click)="close()">Cancel</button> | ||
| </thy-dialog-footer> |
41 changes: 41 additions & 0 deletions
41
examples/app1/src/app/projects/dialog/projects-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { Component, ElementRef, EventEmitter, HostBinding, OnInit, ViewChild } from '@angular/core'; | ||
| import { PlanetComponentLoader } from 'ngx-planet'; | ||
| import { ThyDialogRef } from 'ngx-tethys'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-projects-dialog', | ||
| templateUrl: `./projects-dialog.component.html` | ||
| }) | ||
| export class ProjectsDialogComponent implements OnInit { | ||
| @HostBinding('class.thy-dialog-content') container = true; | ||
|
|
||
| @ViewChild('container', { static: true }) elementRef: ElementRef<HTMLDivElement>; | ||
|
|
||
| loadingDone = false; | ||
|
|
||
| constructor( | ||
| private planetComponentLoader: PlanetComponentLoader, | ||
| private dialogRef: ThyDialogRef<ProjectsDialogComponent> | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| this.planetComponentLoader | ||
| .load<{ click: EventEmitter<any> }>('app2', 'project1', { | ||
| container: this.elementRef | ||
| }) | ||
| .subscribe(componentRef => { | ||
| this.loadingDone = true; | ||
| componentRef.componentInstance.click.subscribe(() => { | ||
| console.log('project item clicked'); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| ok() { | ||
| this.dialogRef.close(); | ||
| } | ||
|
|
||
| close() { | ||
| this.dialogRef.close(); | ||
| } | ||
| } |
Oops, something went wrong.