build: move inline resources script to tools

* Moves the inline resources script to the `tools/gulp/packaging` folder. This is necessary when exposing the build tools (e.g for flex-layout)
* This also makes the packaging more clean because no external script is referenced (also switched to TypeScript and improved code)

Author: devversion

scripts/release/inline-resources.js

@@ -5,9 +5,9 @@ import {SOURCE_ROOT, DIST_ROOT, HTML_MINIFIER_OPTIONS} from '../build-config';
 import {sequenceTask, sassBuildTask, copyTask, triggerLivereload} from '../util/task_helpers';
 import {composeRelease} from './build-release';
 import {buildPackageBundles} from './build-bundles';
+import {inlineResourcesFolder} from './inline-resources';
 
 // There are no type definitions available for these imports.
-const inlineResources = require('../../../scripts/release/inline-resources');
 const htmlmin = require('gulp-htmlmin');
 
 /**
@@ -84,7 +84,7 @@ export function createPackageBuildTasks(packageName: string, requiredPackages: s
     return src(htmlGlob).pipe(htmlmin(HTML_MINIFIER_OPTIONS)).pipe(dest(packageOut));
   });
 
-  task(`${packageName}:assets:inline`, () => inlineResources(packageOut));
+  task(`${packageName}:assets:inline`, () => inlineResourcesFolder(packageOut));
 
   /**
    * Watch tasks, that will rebuild the package whenever TS, SCSS, or HTML files change.

tools/gulp/packaging/build-tasks-gulp.ts

@@ -0,0 +1,58 @@
+/* tslint:disable:no-eval */
+
+import {dirname, join} from 'path';
+import {readFileSync, writeFileSync} from 'fs';
+import {sync as glob} from 'glob';
+
+/** Finds all JavaScript files and inlines all external resources of Angular components. */
+export function inlineResourcesFolder(folderPath: string) {
+  glob(join(folderPath, '**/*.js')).forEach(filePath => inlineResources(filePath));
+}
+
+/** Inlines the external resources of Angular components of a file. */
+export function inlineResources(filePath: string) {
+  let fileContent = readFileSync(filePath, 'utf-8');
+
+  fileContent = inlineTemplate(fileContent, filePath);
+  fileContent = inlineStyles(fileContent, filePath);
+  fileContent = removeModuleId(fileContent);
+
+  writeFileSync(filePath, fileContent, 'utf-8');
+}
+
+/** Inlines the templates of Angular components for a specified source file. */
+function inlineTemplate(fileContent: string, filePath: string) {
+  return fileContent.replace(/templateUrl:\s*'([^']+?\.html)'/g, (match, templateUrl) => {
+    const templateFile = join(dirname(filePath), templateUrl);
+    const templateContent = loadResourceFile(templateFile);
+    return `template: "${templateContent}"`;
+  });
+}
+
+
+/** Inlines the external styles of Angular components for a specified source file. */
+function inlineStyles(fileContent: string, filePath: string) {
+  return fileContent.replace(/styleUrls:\s*(\[[\s\S]*?])/gm, (match, styleUrls) => {
+    // The RegExp matches the array of external style files. This is a string right now and
+    // can to be parsed using the `eval` method.
+    const parsedUrls = eval(styleUrls) as string[];
+
+    return 'styles: [' + parsedUrls.map(styleUrl => {
+      const stylePath = join(dirname(filePath), styleUrl);
+      const styleContent = loadResourceFile(stylePath);
+      return `"${styleContent}"`;
+    }).join(',\n') + ']';
+  });
+}
+
+/** Remove every mention of `moduleId: module.id` */
+function removeModuleId(fileContent: string) {
+  return fileContent.replace(/\s*moduleId:\s*module\.id\s*,?\s*/gm, '');
+}
+
+/** Loads the specified resource file and drops line-breaks of the content. */
+function loadResourceFile(filePath: string): string {
+  return readFileSync(filePath, 'utf-8')
+    .replace(/([\n\r]\s*)+/gm, ' ')
+    .replace(/"/g, '\\"');
+}