improve docs preview

ocombe · ocombe · commit 04aea64a4317 · 2021-11-03T13:04:28.000+01:00
diff --git a/packages/angular-v10/angular-v10.webpack.ts b/packages/angular-v10/angular-v10.webpack.ts
@@ -108,7 +108,7 @@ export class AngularV10Webpack extends AngularWebpack {
       sourceMap: optionValue(angularOptions.sourceMap, setup === WebpackSetup.Serve),
       outputHashing: optionValue(angularOptions.outputHashing, setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None),
       watch: setup === WebpackSetup.Serve,
-      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', ...(angularOptions.allowedCommonJsDependencies || [])],
+      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])],
     };
 
     const normalizedWorkspaceRoot = normalize(workspaceRoot);
diff --git a/packages/angular-v10/component.json b/packages/angular-v10/component.json
@@ -40,7 +40,7 @@
           "react-dev-utils": "10.2.1",
           "remark": "~13.0.0",
           "remark-frontmatter": "~3.0.0",
-          "remark-html": "~13.0.1",
+          "remark-html": "13.0.1",
           "remark-loader": "~2.0.0",
           "remark-prism": "~1.3.6",
           "rxjs": "^6.6.3",
diff --git a/packages/angular-v11/angular-v11.webpack.ts b/packages/angular-v11/angular-v11.webpack.ts
@@ -95,7 +95,7 @@ export class AngularV11Webpack extends AngularWebpack {
       sourceMap: optionValue(angularOptions.sourceMap, setup === WebpackSetup.Serve),
       outputHashing: optionValue(angularOptions.outputHashing, setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None),
       watch: setup === WebpackSetup.Serve,
-      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', ...(angularOptions.allowedCommonJsDependencies || [])],
+      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])],
     };
 
     const normalizedWorkspaceRoot = normalize(workspaceRoot);
diff --git a/packages/angular-v11/component.json b/packages/angular-v11/component.json
@@ -37,7 +37,7 @@
           "react-dev-utils": "10.2.1",
           "remark": "~13.0.0",
           "remark-frontmatter": "~3.0.0",
-          "remark-html": "~13.0.1",
+          "remark-html": "13.0.1",
           "remark-loader": "~2.0.0",
           "remark-prism": "~1.3.6",
           "rxjs": "^6.6.3",
diff --git a/packages/angular-v12/angular-v12.webpack.ts b/packages/angular-v12/angular-v12.webpack.ts
@@ -133,7 +133,7 @@ export class AngularV12Webpack extends AngularWebpack {
       sourceMap: optionValue(angularOptions.sourceMap, setup === WebpackSetup.Serve),
       outputHashing: optionValue(angularOptions.outputHashing, setup === WebpackSetup.Build ? OutputHashing.All : OutputHashing.None),
       watch: setup === WebpackSetup.Serve,
-      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', ...(angularOptions.allowedCommonJsDependencies || [])],
+      allowedCommonJsDependencies: ['@teambit/harmony', 'graphql', '@teambit/documenter.ng.content.copy-box', ...(angularOptions.allowedCommonJsDependencies || [])],
     };
     const normalizedWorkspaceRoot = normalize(workspaceRoot);
     const projectRoot = normalize('');
diff --git a/packages/angular-v12/component.json b/packages/angular-v12/component.json
@@ -36,7 +36,7 @@
           "react-dev-utils": "10.2.1",
           "remark": "~13.0.0",
           "remark-frontmatter": "~3.0.0",
-          "remark-html": "~13.0.1",
+          "remark-html": "13.0.1",
           "remark-loader": "~4.0.0",
           "remark-prism": "~1.3.6",
           "rxjs": "^6.6.7",
diff --git a/packages/angular-v8/component.json b/packages/angular-v8/component.json
@@ -40,7 +40,7 @@
           "react-dev-utils": "10.2.1",
           "remark": "~13.0.0",
           "remark-frontmatter": "~3.0.0",
-          "remark-html": "~13.0.1",
+          "remark-html": "13.0.1",
           "remark-loader": "~2.0.0",
           "remark-prism": "~1.3.6",
           "rxjs": "~6.4.0",
diff --git a/packages/angular-v9/component.json b/packages/angular-v9/component.json
@@ -40,7 +40,7 @@
           "react-dev-utils": "10.2.1",
           "remark": "~13.0.0",
           "remark-frontmatter": "~3.0.0",
-          "remark-html": "~13.0.1",
+          "remark-html": "13.0.1",
           "remark-loader": "~2.0.0",
           "remark-prism": "~1.3.6",
           "rxjs": "^6.6.3",
diff --git a/packages/angular/angular.webpack.ts b/packages/angular/angular.webpack.ts
@@ -1,6 +1,7 @@
 import { Schema as BrowserBuilderSchema } from '@angular-devkit/build-angular/src/browser/schema';
 import { Bundler, BundlerContext, DevServer, DevServerContext, Target } from '@teambit/bundler';
 import { CACHE_ROOT } from '@teambit/legacy/dist/constants';
+import { ComponentID } from '@teambit/component';
 import { PkgMain } from '@teambit/pkg';
 import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
 import { Logger } from '@teambit/logger';
@@ -21,8 +22,7 @@ import { existsSync, mkdirSync, writeFileSync } from 'fs-extra';
 import objectHash from 'object-hash';
 import { join, posix, resolve } from 'path';
 import { readConfigFile, sys } from 'typescript';
-import webpack, { Configuration } from 'webpack';
-import WsDevServer from 'webpack-dev-server';
+import { Configuration } from 'webpack';
 
 export enum WebpackSetup {
   Serve = 'serve',
@@ -152,8 +152,16 @@ export abstract class AngularWebpack {
   }
 
   async createDevServer(context: DevServerContext, transformers: WebpackConfigTransformer[] = []): Promise<DevServer> {
-    // TODO(ocombe) find a better way to get the preview root path
-    const rootPath = resolve(require.resolve('@teambit/angular'), '../../preview/');
+    let rootPath: string;
+    try {
+      rootPath = this.workspace?.componentDir(ComponentID.fromString('teambit.angular/angular'), {
+        ignoreScopeAndVersion: true,
+        ignoreVersion: true
+      }, { relative: false }) || '';
+      rootPath = join(rootPath, 'preview');
+    } catch(e) {
+      rootPath = resolve(require.resolve('@teambit/angular'), '../../preview/');
+    }
     const tsconfigPath = this.writeTsconfig(context, rootPath);
 
     const defaultConfig: any = await this.getWebpackConfig(
diff --git a/packages/angular/preview/src/app/app.component.html b/packages/angular/preview/src/app/app.component.html
diff --git a/packages/angular/preview/src/app/app.component.ts b/packages/angular/preview/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  template: `<app-lazy-load class='primaryPalette'></app-lazy-load>`,
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
diff --git a/packages/angular/preview/src/app/app.module.ts b/packages/angular/preview/src/app/app.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-// import { RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -13,7 +12,6 @@ import { LazyLoadComponent } from './lazy-load/lazy-load.component';
 @NgModule({
   declarations: [AppComponent, LazyLoadComponent],
   imports: [CommonModule, BrowserModule, BrowserAnimationsModule, HttpClientModule, /*RouterModule.forRoot([]),*/ ReactiveFormsModule, FormsModule, DocsModule],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/packages/angular/preview/src/app/docs/docs.component.ts b/packages/angular/preview/src/app/docs/docs.component.ts
@@ -2,10 +2,27 @@ import { Component, Input, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'app-docs',
-  template: ` <div #docsRoot [innerHTML]="template | safeHtml" class='docsMainBlock'></div> `,
+  template: `
+    <div class='docsMainBlock'>
+      <app-context>
+        <div class='header'>
+          <heading element='h1'>{{displayName | titlecase}}</heading>
+          <heading element='h2' class='subTitle' *ngIf='description'>{{description}}</heading>
+          <docs-label-list [labels]='labels'></docs-label-list>
+          <consumable-link title='Package name' [link]='packageName'></consumable-link>
+        </div>
+        <separator></separator>
+        <div class='md' #docsRoot [innerHTML]="template | safeHtml"></div>
+      </app-context>
+    </div>
+  `,
   styleUrls: ['./docs.style.scss'],
 })
 export class DocsComponent {
   @ViewChild('docsRoot', { static: true }) docsRoot!: ElementRef;
   @Input() template = '';
+  @Input() displayName = '';
+  @Input() packageName = '';
+  @Input() description = '';
+  @Input() labels: string[] = [];
 }
diff --git a/packages/angular/preview/src/app/docs/docs.module.ts b/packages/angular/preview/src/app/docs/docs.module.ts
@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
+import { HeadingModule } from '@teambit/base-ui.ng.text.heading';
+import { SeparatorModule } from '@teambit/design.ng.content.separator';
+import { ConsumableLinkModule } from '@teambit/documenter.ng.content.consumable-link';
+import { LabelListModule } from '@teambit/documenter.ng.content.label-list';
+import { AppContextModule } from '@teambit/design.ng.theme.app-context';
 import { DocsComponent } from './docs.component';
 import { SafeHtmlPipe } from './safe-html.pipe';
 
 @NgModule({
   entryComponents: [DocsComponent],
   declarations: [SafeHtmlPipe, DocsComponent],
+  imports: [CommonModule, HeadingModule, SeparatorModule, ConsumableLinkModule, LabelListModule, CommonModule, AppContextModule, HeadingModule],
   exports: [BrowserModule, SafeHtmlPipe, DocsComponent],
 })
 export class DocsModule {}
diff --git a/packages/angular/preview/src/app/docs/docs.style.scss b/packages/angular/preview/src/app/docs/docs.style.scss
@@ -1,85 +1,111 @@
+@import "~@teambit/base-ui.text.text-sizes/text-sizes.module";
+
 .docsMainBlock {
   padding: 50px 40px 10px;
   max-width: 1440px;
   margin: 0 auto 150px;
 
+  .header {
+    max-width: 700px;
+  }
+
   ::ng-deep {
     color: #414141;
 
-    h1, h2, h3, h4, h5, h6 {
-      font-weight: 700;
-      margin: 0 0 20px;
+    .header {
+      .copyMethod {
+        align-content: center;
+        margin-bottom: 16px;
+        grid-template-columns: 1fr 4fr;
+      }
+
+      .subTitle h2 {
+        color: var(--bit-text-color-light, #6c707c);
+        font-size: var(--bit-p-xl, 20px);
+      }
+
+      heading h1 {
+        margin-top: 0;
+      }
     }
 
-    h1, h2 {
+    hr {
+      border: none;
       border-bottom: 1px solid #ededed;
-      padding-bottom: 8px;
+      border-radius: 5px;
+      margin-bottom: 40px;
+      margin-top: 30px;
     }
 
-    h3, h4, h5, h6 {
-      margin-top: 40px;
-      width: 100%;
-      justify-content: start;
-    }
+    .md {
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: 700;
+        margin: 0 0 20px;
+      }
 
-    h1 {
-      font-size: 36px
-    }
+      h1, h2 {
+        border-bottom: 1px solid #ededed;
+        padding-bottom: 8px;
+      }
 
-    h2 {
-      font-size: 26px
-    }
+      h3, h4, h5, h6 {
+        margin-top: 40px;
+        width: 100%;
+        justify-content: start;
+      }
 
-    h3 {
-      font-size: 24px
-    }
+      h1 {
+        font-size: 36px
+      }
 
-    h4 {
-      font-size: 18px
-    }
+      h2 {
+        font-size: 26px
+      }
 
-    h5, h6 {
-      font-size: 16px
-    }
+      h3 {
+        font-size: 24px
+      }
 
-    :not(pre) > code {
-      font-family: monospace,sans-serif;
-      border-radius: .25em;
-      padding: .2em .4em;
-      font-size: .85em;
-      background-color: hsla(0,0%,65.1%,.2);
-    }
+      h4 {
+        font-size: 18px
+      }
 
-    a {
-      text-decoration: none;
-    }
+      h5, h6 {
+        font-size: 16px
+      }
 
-    blockquote {
-      background-color: rgba(202,200,200,.2);
-      border-left: 5px solid #897dec;
-      border-radius: 5px;
-      padding: 1em 10px 1em 18px;
-      margin: 0 0 1em;
-    }
+      :not(pre) > code {
+        font-family: monospace, sans-serif;
+        border-radius: .25em;
+        padding: .2em .4em;
+        font-size: .85em;
+        background-color: hsla(0, 0%, 65.1%, .2);
+      }
 
-    ul {
-      padding-left: 18px;
-      margin-bottom: 0;
-    }
+      a {
+        text-decoration: none;
+      }
 
-    ol {
-      list-style: revert;
-      list-style-position: outside;
-      margin: 0 0 16px;
-      padding: 0 0 0 32px;
-    }
+      blockquote {
+        background-color: rgba(202, 200, 200, .2);
+        border-left: 5px solid #897dec;
+        border-radius: 5px;
+        padding: 1em 10px 1em 18px;
+        margin: 0 0 1em;
+      }
 
-    hr {
-      border: none;
-      border-bottom: 1px solid #ededed;
-      border-radius: 5px;
-      margin-bottom: 40px;
-      margin-top: 30px;
+      ul {
+        padding-left: 18px;
+        margin-bottom: 0;
+      }
+
+      ol {
+        list-style: revert;
+        list-style-position: outside;
+        margin: 0 0 16px;
+        padding: 0 0 0 32px;
+      }
     }
   }
 }
+
diff --git a/packages/angular/preview/src/app/global.d.ts b/packages/angular/preview/src/app/global.d.ts
@@ -1,10 +1,11 @@
 import { Type } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
+import { DocsTemplateAttrs } from '../types';
 
 declare global {
   interface Window {
     onComponentLoad$: ReplaySubject<Type<any>>;
     onModuleLoad$: ReplaySubject<Type<any>>;
-    onDocsLoad$: ReplaySubject<string>;
+    onDocsLoad$: ReplaySubject<DocsTemplateAttrs>;
   }
 }
diff --git a/packages/angular/preview/src/app/lazy-load/lazy-load.component.ts b/packages/angular/preview/src/app/lazy-load/lazy-load.component.ts
@@ -1,5 +1,4 @@
 import {
-  ChangeDetectorRef,
   Compiler,
   Component,
   ComponentFactoryResolver,
@@ -12,6 +11,7 @@ import {
   ViewContainerRef,
   NgZone
 } from '@angular/core';
+import { DocsTemplateAttrs } from '../../types';
 import { DocsComponent } from '../docs/docs.component';
 
 @Component({
@@ -56,11 +56,16 @@ export class LazyLoadComponent implements OnInit, OnDestroy {
     }
   }
 
-  private insertDocs(template: string) {
+  private insertDocs(template: DocsTemplateAttrs) {
     this.ngZone.run(() => {
+      console.log(template)
       const cmpRefs = this.insertComponent([DocsComponent]);
       const docsCmp = cmpRefs[0].instance as DocsComponent;
-      docsCmp.template = template;
+      docsCmp.template = template.body;
+      docsCmp.labels = template.attributes.labels;
+      docsCmp.displayName = template.attributes.displayName;
+      docsCmp.packageName = template.attributes.packageName;
+      docsCmp.description = template.attributes.description;
     });
   }
 
diff --git a/packages/angular/preview/src/docs.ts b/packages/angular/preview/src/docs.ts
diff --git a/packages/angular/preview/src/styles.scss b/packages/angular/preview/src/styles.scss
diff --git a/packages/angular/preview/tsconfig.app.json b/packages/angular/preview/tsconfig.app.json
diff --git a/packages/ng-packagr/index.ts b/packages/ng-packagr/index.ts
diff --git a/workspace.jsonc b/workspace.jsonc
