fix(core): regenerate examples source bundle file when emit and refac…

…tor somethings #OSP-223

packages/core/src/builders/library-component.spec.ts

@@ -147,18 +147,17 @@ describe('#library-component', () => {
         for (const example of baseExamples) {
             expect(await context.host.exists(example)).toEqual(true);
         }
-        const aliasBundleJsonFiles: { path: string; content: string }[] = JSON.parse(
-            await context.host.readFile(`${absDestAssetsExamplesBundlePath}/button/bundle.json`)
-        ).files;
+        const aliasBundleJsonFiles: { path: string; content: string }[] = await context.host.readJSON(
+            `${absDestAssetsExamplesBundlePath}/button/bundle.json`
+        );
         await expectFiles(context.host, {
-            [`${absDestSiteContentComponentsPath}/button/module.ts`]: aliasBundleJsonFiles.find(
-                item => item.path === 'src/examples.module.ts'
-            ).content,
+            [`${absDestSiteContentComponentsPath}/button/module.ts`]: aliasBundleJsonFiles.find(item => item.path === 'examples.module.ts')
+                .content,
             [`${absDestSiteContentComponentsPath}/button/basic/basic.component.ts`]: aliasBundleJsonFiles.find(
-                item => item.path === 'src/basic/basic.component.ts'
+                item => item.path === 'basic/basic.component.ts'
             ).content,
             [`${absDestSiteContentComponentsPath}/button/basic/basic.component.html`]: aliasBundleJsonFiles.find(
-                item => item.path === 'src/basic/basic.component.html'
+                item => item.path === 'basic/basic.component.html'
             ).content
         });
     });

packages/core/src/builders/library-component.ts

@@ -47,7 +47,7 @@ export class LibraryComponentImpl extends FileEmitter implements LibraryComponen
     private localeApiDocsMap: Record<string, ApiDeclaration[]> = {};
     private localeDocItemsMap: Record<string, ComponentDocItem> = {};
     private exampleEntrySource: string;
-    private bundleFileList = [];
+
     constructor(private docgeni: DocgeniContext, public lib: Library, name: string, absPath: string) {
         super();
         this.name = name;
@@ -190,10 +190,7 @@ export class LibraryComponentImpl extends FileEmitter implements LibraryComponen
                 }
             }
             exampleOrderMap.set(liveExample, exampleOrder);
-            const sourceFiles = await this.buildExampleHighlighted(absComponentExamplePath);
-            sourceFiles.forEach(item => {
-                this.bundleFileList.push({ path: resolve('src', resolve(exampleName, item.name)), content: item.originContent });
-            });
+            const sourceFiles = await this.buildExample(absComponentExamplePath);
             liveExample.sourceFiles = sourceFiles;
             this.examples.push(liveExample);
         }
@@ -202,13 +199,9 @@ export class LibraryComponentImpl extends FileEmitter implements LibraryComponen
             examples: this.examples,
             examplesModule: moduleName
         });
-        this.bundleFileList.push({
-            path: 'src/examples.module.ts',
-            content: await this.docgeni.host.readFile(resolve(this.absExamplesPath, 'module.ts'))
-        });
     }
 
-    private async buildExampleHighlighted(absComponentExamplePath: string): Promise<ExampleSourceFile[]> {
+    private async buildExample(absComponentExamplePath: string): Promise<ExampleSourceFile[]> {
         const files = await this.docgeni.host.getFiles(absComponentExamplePath, {
             exclude: EXAMPLE_META_FILE_NAME
         });
@@ -222,7 +215,7 @@ export class LibraryComponentImpl extends FileEmitter implements LibraryComponen
                 name: fileName,
                 highlightedPath: destFileName,
                 highlightedContent: highlightedSourceCode,
-                originContent: sourceCode
+                content: sourceCode
             });
         }
 
@@ -304,20 +297,29 @@ export class LibraryComponentImpl extends FileEmitter implements LibraryComponen
         }
         const examplesEntryPath = resolve(this.absDestSiteContentComponentsPath, 'index.ts');
         await this.docgeni.host.copy(this.absExamplesPath, this.absDestSiteContentComponentsPath);
-        const bundlePath = resolve(this.absExamplesSourceBundleDir, 'bundle.json');
-        const content = JSON.stringify({ files: this.bundleFileList });
-        await this.addEmitFile(bundlePath, content);
-        await this.docgeni.host.writeFile(bundlePath, content);
         this.addEmitFile(examplesEntryPath, this.exampleEntrySource);
         await this.docgeni.host.writeFile(examplesEntryPath, this.exampleEntrySource);
+        const allExampleSources: { path: string; content: string }[] = [];
         for (const example of this.examples) {
             for (const sourceFile of example.sourceFiles) {
                 const absExampleHighlightPath = resolve(this.absDestAssetsExamplesHighlightedPath, `${example.name}`);
                 const destHighlightedSourceFilePath = `${absExampleHighlightPath}/${sourceFile.highlightedPath}`;
+                allExampleSources.push({
+                    path: `${example.name}/${sourceFile.name}`,
+                    content: sourceFile.content
+                });
                 this.addEmitFile(destHighlightedSourceFilePath, sourceFile.highlightedContent);
                 await this.docgeni.host.writeFile(destHighlightedSourceFilePath, sourceFile.highlightedContent);
             }
         }
+        allExampleSources.push({
+            path: 'examples.module.ts',
+            content: await this.docgeni.host.readFile(resolve(this.absExamplesPath, 'module.ts'))
+        });
+        const bundlePath = resolve(this.absExamplesSourceBundleDir, 'bundle.json');
+        const content = JSON.stringify(allExampleSources);
+        await this.addEmitFile(bundlePath, content);
+        await this.docgeni.host.writeFile(bundlePath, content);
     }
 
     private getLibAbbrName(lib: Library): string {

packages/core/src/interfaces/example.ts

@@ -4,7 +4,7 @@ export interface ExampleSourceFile {
     name: string;
     highlightedPath: string;
     highlightedContent?: string;
-    originContent?: string;
+    content?: string;
 }
 
 export interface LiveExample {

packages/template/src/services/stackblitz-example.service.ts

@@ -13,8 +13,7 @@ export class StackblitzExampleService extends ExampleService {
         return input;
     }
     open(
-        list: { path: string; content: string }[],
-        dependencies: Record<string, string>,
+        files: { path: string; content: string }[],
         module: {
             name: string;
             importSpecifier: string;
@@ -29,19 +28,19 @@ export class StackblitzExampleService extends ExampleService {
         form.target = '_blank';
         form.method = 'post';
         form.action = `https://run.stackblitz.com/api/angular/v1`;
-        let entryFiles = this.generateEntryFile(module, component);
-        let allFiles = [...entryFiles, ...list];
-        let obj = {};
+        const entryFiles = this.generateEntryFile(module, component);
+        const allFiles = [...entryFiles, ...files];
+        const filesMap: Record<string, string> = {};
         allFiles.forEach(item => {
-            obj[`files[${item.path}]`] = item.content;
+            filesMap[`files[${item.path}]`] = item.content;
         });
-        for (const path in obj) {
-            if (Object.prototype.hasOwnProperty.call(obj, path)) {
-                const content = obj[path];
+        for (const path in filesMap) {
+            if (Object.prototype.hasOwnProperty.call(filesMap, path)) {
+                const content = filesMap[path];
                 form.appendChild(this.createFormInput(path, content));
             }
         }
-        let packageJsonFile = allFiles.find(item => item.path === 'package.json');
+        const packageJsonFile = allFiles.find(item => item.path === 'package.json');
         form.appendChild(this.createFormInput(`dependencies`, JSON.stringify(JSON.parse(packageJsonFile.content).dependencies)));
         document.body.appendChild(form);
         form.submit();

packages/template/src/shared/example-viewer/example-viewer.component.ts

@@ -117,18 +117,27 @@ export class ExampleViewerComponent implements OnInit {
 
     openStackBlitz() {
         forkJoin({
-            example: this.http.get(`assets/content/examples-source-bundle/${this.example.module.importSpecifier}/bundle.json`),
-            share: this.http.get(`assets/stack-blitz/bundle.json`)
+            examplesSources: this.http.get(`assets/content/examples-source-bundle/${this.example.module.importSpecifier}/bundle.json`),
+            sharedFiles: this.http.get(`assets/stack-blitz/bundle.json`)
         }).subscribe(
-            (result: {
-                example: { dependencies: Record<string, string>; files: { path: string; content: string }[] };
-                share: { path: string; content: string }[];
-            }) => {
-                let { example, share } = result;
-                this.stackblitzExampleService.open([...example.files, ...share], example.dependencies, this.example.module, {
-                    name: this.example.componentName,
-                    selector: this.example.key
-                });
+            (result: { examplesSources: { path: string; content: string }[]; sharedFiles: { path: string; content: string }[] }) => {
+                const { examplesSources, sharedFiles } = result;
+                this.stackblitzExampleService.open(
+                    [
+                        ...examplesSources.map(item => {
+                            return {
+                                ...item,
+                                path: `src/${item.path}`
+                            };
+                        }),
+                        ...sharedFiles
+                    ],
+                    this.example.module,
+                    {
+                        name: this.example.componentName,
+                        selector: this.example.key
+                    }
+                );
             }
         );
     }