Merge branch 'unify-demo-source-generation'

bbarry · Sep 10, 2020 · a725968 · a725968
2 parents 338cfa3 + 55e2097
commit a725968
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 413 deletions.
diff --git a/demo/v-all/bin/file-gen-vNew.ts b/demo/v-all/bin/file-gen-vNew.ts
diff --git a/demo/v-all/bin/file-gen.ts b/demo/v-all/bin/file-gen.ts
@@ -3,14 +3,59 @@ import * as path from 'path';
 import { examples } from './examples';
 
 const sourceDir = path.join(process.cwd(), 'src');
+const mainFileGenerationStyle = process.argv.includes("--main-file=factory")
+  ? "factory"
+  : process.argv.includes("--main-file=dynamic")
+    ? "dynamic"
+    : null;
+
+if (!mainFileGenerationStyle) {
+  throw new Error("Main file generation style was not specified. Please use either '--main-file=factory' (for Angular version 8 and below) or '--main-file=dynamic'");
+}
+
+generateFiles();
 
 function writeExampleFile(featureName, fileName, contents) {
   const location = path.join(sourceDir, 'app', 'examples', featureName, fileName);
 
   fs.writeFileSync(location, contents, { encoding: 'UTF8' });
 }
 
+function highlightRequire(file: string, lang: string) {
+  var hl = require('highlight.js');
+  var highlightAuto = hl.highlightAuto;
+  var highlight = hl.highlight;
+
+  const data = JSON.stringify(highlightCode(fs.readFileSync(file, { encoding: 'utf-8' }), lang))
+
+  function highlightCode(code: string, lang: string | undefined) {
+    if(lang) {
+      return highlight(lang, code).value;
+    }
+
+    return highlightAuto(code).value;
+  }
+
+  return data;
+}
+
 function generateMain(featureName) {
+  switch (mainFileGenerationStyle) {
+    case "factory": {
+      generateMainFactory(featureName);
+      break;
+    }
+    case "dynamic": {
+      generateMainDynamic(featureName);
+      break;
+    }
+    default: {
+      throw new Error(`Unexpected mainFileGenerationStyle=${JSON.stringify(mainFileGenerationStyle)}`);
+    }
+  }
+}
+
+function generateMainFactory(featureName) {
   const contents = `import { enableProdMode } from '@angular/core';
 import { platformBrowser } from '@angular/platform-browser';
 import { DemoModuleNgFactory } from './${featureName}-demo.module.ngfactory';
@@ -22,11 +67,23 @@ platformBrowser().bootstrapModuleFactory(DemoModuleNgFactory);
   writeExampleFile(featureName, `${featureName}-demo.main.ts`, contents);
 }
 
+function generateMainDynamic(featureName) {
+  const contents = `import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DemoModule } from './${featureName}-demo.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(DemoModule);
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.main.ts`, contents);
+}
+
 function generateData(example) {
   const featureName = example.name;
   const additionalContents = !example.additional ? '' : `
     additional: {
-      content: require('!highlight-loader?raw=true&lang=${example.additional.type}!./${example.additional.filename}.ts'),
+      content: ${highlightRequire(`./src/app/examples/${featureName}/${example.additional.filename}.ts`, example.additional.type)},
       title: '${example.additional.title}',
       type: '${example.additional.type}',
     },`;
@@ -37,9 +94,9 @@ export const settings: PageSettings = {
   feature: '${featureName}',
   title: '${example.title}',
   content: {
-    component: require('!highlight-loader?raw=true&lang=ts!./${featureName}-demo.component.ts'),
-    html: require('!highlight-loader?raw=true&lang=html!./${featureName}-demo.component.html'),
-    module: require('!highlight-loader?raw=true&lang=ts!./${featureName}-demo.module.ts'),${additionalContents}
+    component: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.component.ts`, 'ts')},
+    html: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.component.html`, 'html')},
+    module: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.module.ts`, 'ts')},${additionalContents}
   },
 };
 `;
@@ -66,5 +123,3 @@ function generateFiles() {
   examples.forEach(generateData);
   generateLinks();
 }
-
-generateFiles();
diff --git a/demo/v-all/package.json.merge b/demo/v-all/package.json.merge
@@ -2,7 +2,7 @@
   "name": "ng-recaptcha-demo",
   "private": true,
   "scripts": {
-    "file-gen": "ts-node ./bin/file-gen.ts",
+    "file-gen": "ts-node ./bin/file-gen.ts --main-file=factory",
     "latest": "yarn remove ng-recaptcha; yarn install; yarn add ng-recaptcha@../../ng-recaptcha-latest.tgz --update-checksums",
     "clean": "rimraf src/**/*.{js,js.map,ngsummary.json,d.ts,metadata.json,auto-gen.ts} src/app/examples/**/*{-demo.main.ts,-demo.data.ts}",
     "build:ngc": "ngc",
@@ -18,7 +18,7 @@
     "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^4.1.1",
     "css-loader": "^3.6.0",
-    "highlight-loader": "^0.7.2",
+    "highlight.js": "^10.1.1",
     "html-loader": "^0.5.1",
     "npm-run-all": "^4.1.2",
     "raw-loader": "^0.5.1",

diff --git a/demo/v10-template/package.json b/demo/v10-template/package.json
@@ -2,7 +2,7 @@
   "name": "v10-template",
   "version": "0.0.0",
   "scripts": {
-    "file-gen": "ts-node ./bin/file-gen-vNew.ts v10 --latest",
+    "file-gen": "ts-node ./bin/file-gen.ts --main-file=dynamic",
     "latest": "yarn remove ng-recaptcha; yarn install; yarn add ng-recaptcha@../../ng-recaptcha-latest.tgz --update-checksums",
     "clean": "rimraf src/app/examples/**/*{-demo.main.ts,-demo.data.ts}",
     "serve": "http-server ./dist -a localhost -p 9000 -c-1",