feat(template): support open isolated example #OSP-162

docgeni · Sep 10, 2021 · a700170 · a700170
1 parent 9b5ded4
commit a700170
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 105 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,5 @@
 ---
-title: Docgeni - 为 Angular 组件开发场景而生的文档工具
+title: 首页
 order: 10
 hero:
   title: Docgeni

diff --git a/packages/template/src/module.ts b/packages/template/src/module.ts
@@ -4,7 +4,6 @@ import { DocgeniPagesModule } from './pages/pages.module';
 import { CONFIG_TOKEN, DEFAULT_CONFIG } from './services/public-api';
 import { HttpClientModule } from '@angular/common/http';
 import { DocgeniBuiltInModule } from './built-in/built-in.module';
-import { BUILT_IN_COMPONENTS } from './built-in';
 
 @NgModule({
     declarations: [],

diff --git a/packages/template/src/pages/example/example.component.html b/packages/template/src/pages/example/example.component.html
@@ -0,0 +1 @@
+<dg-example-renderer [name]="name"></dg-example-renderer>
diff --git a/packages/template/src/pages/example/example.component.ts b/packages/template/src/pages/example/example.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PageTitleService } from '../../services/page-title.service';
+
+@Component({
+    selector: 'dg-example-isolated-viewer',
+    templateUrl: './example.component.html'
+})
+export class ExampleIsolatedViewerComponent implements OnInit {
+    public name: string;
+
+    constructor(private route: ActivatedRoute, private pageTitle: PageTitleService) {}
+
+    ngOnInit(): void {
+        this.name = this.route.snapshot.paramMap.get('name');
+        this.pageTitle.title = `Example - ${this.name}`;
+    }
+}
diff --git a/packages/template/src/pages/pages.module.ts b/packages/template/src/pages/pages.module.ts
@@ -5,12 +5,15 @@ import { DocViewerComponent, DocViewerHomeComponent } from './doc-viewer/doc-vie
 import { DocgeniSharedModule } from '../shared/shared.module';
 import { HomeComponent } from './home/home.component';
 import { ChannelComponent, ChannelHomeComponent } from './channel/channel.component';
-import { RootComponent } from './root/root.component';
+import { ActualRootComponent, RootComponent } from './root/root.component';
 import { ComponentOverviewComponent } from './component-viewer/overview/component-overview.component';
 import { ComponentApiComponent } from './component-viewer/api/component-api.component';
 import { ComponentExamplesComponent } from './component-viewer/examples/component-examples.component';
+import { ExampleIsolatedViewerComponent } from './example/example.component';
 
 const COMPONENTS = [
+    ActualRootComponent,
+    RootComponent,
     HomeComponent,
     ChannelComponent,
     ChannelHomeComponent,
@@ -20,10 +23,11 @@ const COMPONENTS = [
     ComponentOverviewComponent,
     ComponentApiComponent,
     ComponentExamplesComponent,
-    ComponentEmptyComponent
+    ComponentEmptyComponent,
+    ExampleIsolatedViewerComponent
 ];
 @NgModule({
-    declarations: [RootComponent, ...COMPONENTS],
+    declarations: [...COMPONENTS],
     imports: [DocgeniSharedModule],
     providers: [],
     exports: [...COMPONENTS]
@@ -33,6 +37,7 @@ export class DocgeniPagesModule {
 }
 
 export {
+    ActualRootComponent,
     RootComponent,
     HomeComponent,
     ChannelComponent,

diff --git a/packages/template/src/pages/root/root.component.ts b/packages/template/src/pages/root/root.component.ts
@@ -2,48 +2,11 @@ import { Route, Router, Routes } from '@angular/router';
 import { NavigationService } from './../../services/navigation.service';
 import { Component, HostBinding } from '@angular/core';
 import { GlobalContext } from '../../services/public-api';
-import { ChannelItem } from '../../interfaces';
-import { DocViewerComponent, DocViewerHomeComponent } from '../doc-viewer/doc-viewer.component';
-import {
-    ComponentApiComponent,
-    ComponentEmptyComponent,
-    ComponentExamplesComponent,
-    ComponentOverviewComponent
-} from '../component-viewer';
-import { ChannelComponent } from '../channel/channel.component';
-import { RouterResetService } from '../../services/router-reset.service';
-
-const componentChildrenRoutes: Routes = [
-    {
-        path: '',
-        component: DocViewerHomeComponent
-    },
-    {
-        path: 'overview',
-        component: ComponentOverviewComponent
-    },
-    {
-        path: 'api',
-        component: ComponentApiComponent
-    },
-    {
-        path: 'examples',
-        component: ComponentExamplesComponent
-    },
-    {
-        path: 'empty',
-        component: ComponentEmptyComponent
-    },
-    {
-        path: '**',
-        component: ComponentExamplesComponent
-    }
-];
 @Component({
-    selector: 'dg-root',
+    selector: 'dg-root-actual',
     templateUrl: './root.component.html'
 })
-export class RootComponent {
+export class ActualRootComponent {
     @HostBinding(`class.dg-main`) isMain = true;
 
     @HostBinding(`class.dg-layout`) isLayout = true;
@@ -56,3 +19,11 @@ export class RootComponent {
 
     constructor(public global: GlobalContext, public navigationService: NavigationService) {}
 }
+
+@Component({
+    selector: 'dg-root',
+    template: '<router-outlet></router-outlet>'
+})
+export class RootComponent {
+    constructor(public global: GlobalContext, public navigationService: NavigationService) {}
+}
diff --git a/packages/template/src/services/router-reset.service.ts b/packages/template/src/services/router-reset.service.ts
@@ -6,6 +6,8 @@ import { DocViewerComponent, DocViewerHomeComponent } from '../pages/doc-viewer/
 import { ComponentOverviewComponent } from '../pages/component-viewer/overview/component-overview.component';
 import { ComponentApiComponent, ComponentEmptyComponent, ComponentExamplesComponent } from '../pages/component-viewer';
 import { HomeComponent } from '../pages/home/home.component';
+import { ExampleIsolatedViewerComponent } from '../pages/example/example.component';
+import { ActualRootComponent } from '../pages/root/root.component';
 
 const componentChildrenRoutes: Routes = [
     {
@@ -42,11 +44,24 @@ export class RouterResetService {
 
     resetRoutes() {
         const config = this.router.config;
-        const routes: Routes = [];
-        routes.push({
-            path: '',
-            component: HomeComponent
-        });
+        const routes: Routes = [
+            {
+                path: '',
+                component: HomeComponent
+            }
+        ];
+        const rootRoutes: Routes = [
+            {
+                path: '',
+                component: ActualRootComponent,
+                children: routes
+            },
+            {
+                path: '~examples/:name',
+                component: ExampleIsolatedViewerComponent
+            }
+        ];
+
         const channelPathToRoutes: Record<string, Route> = {};
         const channelPathToHomeRoutes: Record<string, Route> = {};
         let shouldRemoveHome = false;
@@ -128,6 +143,6 @@ export class RouterResetService {
             }
         }
 
-        this.router.resetConfig([...config, ...routes, { path: '**', redirectTo: '' }]);
+        this.router.resetConfig([...config, ...rootRoutes, { path: '**', redirectTo: '' }]);
     }
 }
diff --git a/packages/template/src/shared/example-renderer/example-renderer.component.html b/packages/template/src/shared/example-renderer/example-renderer.component.html
@@ -0,0 +1,6 @@
+<ng-template
+  *ngIf="enableIvy && componentType && exampleModuleFactory"
+  [ngComponentOutlet]="componentType"
+  [ngComponentOutletNgModuleFactory]="exampleModuleFactory"
+></ng-template>
+<ng-template *ngIf="!enableIvy && componentType" [ngComponentOutlet]="componentType"></ng-template>
diff --git a/packages/template/src/shared/example-renderer/example-renderer.component.ts b/packages/template/src/shared/example-renderer/example-renderer.component.ts
@@ -0,0 +1,44 @@
+import { Component, EventEmitter, Input, NgModuleFactory, OnInit, Output, Type, ɵNgModuleFactory } from '@angular/core';
+import { LiveExample } from '../../interfaces/example';
+import { ExampleLoader, ExampleLoadResult } from '../../services/example-loader';
+
+@Component({
+    selector: 'dg-example-renderer, [dgExampleRenderer]',
+    templateUrl: './example-renderer.component.html'
+})
+export class ExampleRendererComponent implements OnInit {
+    /** Component type for the current example. */
+    componentType: Type<any> | null = null;
+
+    exampleModuleFactory: NgModuleFactory<any> | null = null;
+
+    @Input() set name(name: string) {
+        this.load(name);
+    }
+
+    @Input() set exampleModuleType(type: Type<any>) {
+        this.exampleModuleFactory = new ɵNgModuleFactory(type);
+    }
+
+    @Input() set exampleComponentType(type: Type<any>) {
+        this.componentType = type;
+    }
+
+    @Output() exampleLoadSuccess = new EventEmitter<LiveExample>();
+
+    get enableIvy() {
+        return this.exampleLoader.enableIvy;
+    }
+
+    constructor(private exampleLoader: ExampleLoader) {}
+
+    ngOnInit(): void {}
+
+    load(name: string) {
+        this.exampleLoader.load(name).then(result => {
+            this.exampleModuleFactory = new ɵNgModuleFactory(result.moduleType);
+            this.componentType = result.componentType;
+            this.exampleLoadSuccess.emit(result.example);
+        });
+    }
+}
diff --git a/packages/template/src/shared/example-viewer/example-viewer.component.html b/packages/template/src/shared/example-viewer/example-viewer.component.html
@@ -2,20 +2,25 @@
   <div class="dg-example-viewer-header">
     <span class="title">{{ example.title }}</span>
   </div>
-  <div class="dg-example-viewer-body">
-    <ng-template
+  <div
+    class="dg-example-viewer-body"
+    dgExampleRenderer
+    [exampleModuleType]="exampleModuleType"
+    [exampleComponentType]="exampleComponentType"
+  >
+    <!-- <ng-template
       *ngIf="enableIvy && exampleComponentType && exampleModuleFactory"
       [ngComponentOutlet]="exampleComponentType"
       [ngComponentOutletNgModuleFactory]="exampleModuleFactory"
     ></ng-template>
-    <ng-template *ngIf="!enableIvy && exampleComponentType" [ngComponentOutlet]="exampleComponentType"></ng-template>
+    <ng-template *ngIf="!enableIvy && exampleComponentType" [ngComponentOutlet]="exampleComponentType"></ng-template> -->
   </div>
   <!-- <div class="dg-example-viewer-intro" title="{{example.title}}">
   </div> -->
   <div class="dg-example-viewer-actions" title="{{ example.title }}">
     <a class="action-item" href="javascript:;" [dgCopy]="sourceCode?.textContent"></a>
     <a class="action-item" href="javascript:;" (click)="toggleSource()"><dg-icon iconName="code"></dg-icon></a>
-    <!-- <a class="action-item" href="javascript:;"><dg-icon iconName="external"></dg-icon></a> -->
+    <a class="action-item" target="_blank" [href]="'~examples/' + name"><dg-icon iconName="external"></dg-icon></a>
   </div>
   <div class="dg-example-viewer-sources" [ngClass]="{ 'dg-sources-show': showSource }">
     <div class="dg-tab-links">

diff --git a/packages/template/src/shared/example-viewer/example-viewer.component.ts b/packages/template/src/shared/example-viewer/example-viewer.component.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, HostBinding, Input, Type, NgModuleFactory, ɵNgModuleFactory, ViewChild } from '@angular/core';
+import { Component, OnInit, HostBinding, Input, Type, NgModuleFactory, ɵNgModuleFactory } from '@angular/core';
 import { LiveExample } from '../../interfaces/public-api';
 import { ExampleLoader } from '../../services/example-loader';
-import { CopierService } from '../copier/copier.service';
 import { GlobalContext } from '../../services/public-api';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
@@ -50,7 +49,7 @@ export class ExampleViewerComponent implements OnInit {
     /** Component type for the current example. */
     exampleComponentType: Type<any> | null = null;
 
-    exampleModuleFactory: NgModuleFactory<any> | null = null;
+    exampleModuleType: Type<any> | null = null;
 
     example: LiveExample;
 
@@ -64,7 +63,7 @@ export class ExampleViewerComponent implements OnInit {
         return this.exampleLoader.enableIvy;
     }
 
-    constructor(private exampleLoader: ExampleLoader, private copier: CopierService, private globalContext: GlobalContext) {}
+    constructor(private exampleLoader: ExampleLoader, private globalContext: GlobalContext) {}
 
     // Use short name such as TS, HTML, CSS replace exampleName.component.*, we need to transform
     // the file name to match the exampleName.component.* that displays main source files.
@@ -76,7 +75,7 @@ export class ExampleViewerComponent implements OnInit {
 
     ngOnInit(): void {
         this.exampleLoader.load(this.name).then(result => {
-            this.exampleModuleFactory = new ɵNgModuleFactory(result.moduleType);
+            this.exampleModuleType = result.moduleType;
             this.exampleComponentType = result.componentType;
             this.example = result.example;
             const rootDir = this.globalContext.getAssetsContentPath(

diff --git a/packages/template/src/shared/shared.module.ts b/packages/template/src/shared/shared.module.ts
@@ -23,55 +23,35 @@ import { TranslatePipe } from './pipes/translate.pipe';
 import { HeroActionClassPipe } from './pipes/hero.pipe';
 import { CopyComponent } from './copy/copy.component';
 import { SourceCodeComponent } from './source-code/source-code.component';
+import { ExampleRendererComponent } from './example-renderer/example-renderer.component';
 
+const COMPONENTS = [
+    NavbarComponent,
+    FooterComponent,
+    SidebarComponent,
+    ExampleViewerComponent,
+    ExampleRendererComponent,
+    IconComponent,
+    DocHeaderComponent,
+    ContentViewerComponent,
+    SourceCodeComponent,
+    LabelComponent,
+    TableOfContentsComponent,
+    LocalesSelectorComponent,
+    AssetsContentPathPipe,
+    LogoComponent,
+    CopyComponent,
+    IsComponentDocPipe,
+    TranslatePipe,
+    IsModeLitePipe,
+    IsModeFullPipe,
+    HeroActionClassPipe
+];
 @NgModule({
-    declarations: [
-        NavbarComponent,
-        FooterComponent,
-        SidebarComponent,
-        ExampleViewerComponent,
-        IconComponent,
-        DocHeaderComponent,
-        ContentViewerComponent,
-        SourceCodeComponent,
-        LabelComponent,
-        TableOfContentsComponent,
-        LocalesSelectorComponent,
-        AssetsContentPathPipe,
-        LogoComponent,
-        CopyComponent,
-        IsComponentDocPipe,
-        TranslatePipe,
-        IsModeLitePipe,
-        IsModeFullPipe,
-        HeroActionClassPipe
-    ],
+    declarations: [...COMPONENTS],
     imports: [CommonModule, FormsModule, RouterModule, HttpClientModule, LayoutModule],
     entryComponents: [ExampleViewerComponent],
-    exports: [
-        CommonModule,
-        FormsModule,
-        RouterModule,
-        HttpClientModule,
-        NavbarComponent,
-        SidebarComponent,
-        FooterComponent,
-        ExampleViewerComponent,
-        DocHeaderComponent,
-        ContentViewerComponent,
-        SourceCodeComponent,
-        IconComponent,
-        LabelComponent,
-        TableOfContentsComponent,
-        LogoComponent,
-        CopyComponent,
-        AssetsContentPathPipe,
-        IsComponentDocPipe,
-        TranslatePipe,
-        IsModeLitePipe,
-        IsModeFullPipe,
-        HeroActionClassPipe
-    ]
+    exports: [CommonModule, FormsModule, RouterModule, HttpClientModule, ...COMPONENTS]
 })
 export class DocgeniSharedModule {}
 
@@ -80,6 +60,7 @@ export {
     FooterComponent,
     SidebarComponent,
     ExampleViewerComponent,
+    ExampleRendererComponent,
     IconComponent,
     DocHeaderComponent,
     LabelComponent,

diff --git a/packages/template/src/shared/source-code/source-code.component.ts b/packages/template/src/shared/source-code/source-code.component.ts
@@ -23,7 +23,6 @@ export class SourceCodeComponent extends ContentRenderer implements OnInit {
     ngOnInit(): void {}
 
     updateDocument(content: string): void {
-        debugger;
         this.codeContent.nativeElement.innerHTML = content;
     }