feat: Initial proof-of-concept compilation

Demonstrate how to use the tools and in which order they need to run.

.editorconfig

@@ -0,0 +1,14 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.{js,json,ts}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -57,3 +57,6 @@ typings/
 # dotenv environment variables file
 .env
 
+
+# Angular Build directory
+.ng_build/

foo/bar.html

@@ -0,0 +1 @@
+<h1 class="foo">bar!</h1>

foo/bar.scss

@@ -0,0 +1,5 @@
+$color: '#ff0000';
+
+.foo {
+    background-color: $color;
+}

foo/bar.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'bar-component',
+    templateUrl: './bar.html',
+    styleUrls: ['./bar.scss']
+})
+export class BarComponent {
+}

foo/public_api.ts

@@ -0,0 +1 @@
+export * from './bar';

ng-build.ts

@@ -0,0 +1,128 @@
+import * as ts from 'typescript';
+import * as path from 'path';
+import * as fs from 'fs';
+import {main as tsc} from '@angular/tsc-wrapped';
+import {ScriptTarget, ModuleKind} from 'typescript';
+
+// There are no type definitions available for these imports.
+const inlineNg2Template =  require('gulp-inline-ng2-template');
+const rollup = require('rollup');
+const sass = require('node-sass');
+const sorcery = require('sorcery');
+const uglify = require('uglify-js');
+const vfs = require('vinyl-fs');
+
+
+// TODO: this should come from cli arguments
+const SOURCE = 'foo';
+const TARGET = 'dist';
+
+const TEMP = '.ng_build';
+
+const doAssets = () => {
+
+  return new Promise((resolve, reject) => {
+    vfs.src(`${SOURCE}/**/*.ts`)
+      .pipe(inlineNg2Template({
+        base: `${SOURCE}`,
+        useRelativePaths: true,
+        styleProcessor: (path, ext, file, cb) => {
+
+          sass.render({
+            file: path
+          }, (err, result) => {
+            if (err) {
+              cb(err);
+            } else {
+              cb(null, result.css.toString());
+            }
+          });
+        }
+      }))
+      .on('error', reject)
+      .pipe(vfs.dest(`${TEMP}/sources`))
+      .on('end', resolve);
+  });
+
+}
+
+
+const doNgc = () => {
+  const tsconfigBuild = 'tsconfig.ng.json';
+  tsc(tsconfigBuild, { basePath: `${TEMP}/sources` });
+}
+
+
+const doRollup = (entry: string, format: string, dest: string) => {
+  const ROLLUP_GLOBALS = {
+    // Angular dependencies
+    '@angular/animations': 'ng.animations',
+    '@angular/core': 'ng.core',
+    '@angular/common': 'ng.common',
+    '@angular/forms': 'ng.forms',
+    '@angular/http': 'ng.http',
+    '@angular/platform-browser': 'ng.platformBrowser',
+    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+    '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
+  };
+
+  let bundleOptions = {
+    context: 'this',
+    external: Object.keys(ROLLUP_GLOBALS),
+    entry: entry
+  };
+
+  let writeOptions = {
+    // Keep the moduleId empty because we don't want to force developers to a specific moduleId.
+    moduleId: '',
+    moduleName: 'ng.material',
+    banner: '',
+    format: format,
+    dest: dest,
+    globals: ROLLUP_GLOBALS,
+    sourceMap: true
+  };
+
+  return rollup.rollup(bundleOptions).then((bundle: any) => bundle.write(writeOptions));
+}
+
+
+const doTsc = (inputFile: string, outputFile: string) => {
+
+  let input = fs.readFileSync(inputFile, 'utf-8');
+  let transpiled = ts.transpileModule(input, {
+    compilerOptions: {
+      target: ScriptTarget.ES5,
+      module: ModuleKind.ES2015,
+      allowJs: true
+    }
+  });
+  fs.writeFileSync(outputFile, transpiled.outputText);
+
+  return Promise.resolve();
+};
+
+
+// X. REMAPE SOURCEMAP
+async function remapSourcemap(sourceFile: string) {
+  // Once sorcery loaded the chain of sourcemaps, the new sourcemap will be written asynchronously.
+  return (await sorcery.load(sourceFile)).write();
+}
+
+const doPackage = () => {
+  console.log('Would need to copy over files from here to there...create package.json');
+}
+
+
+// 1. ASSETS
+doAssets()
+              // 2. NGC
+  .then(() => doNgc())
+              // 3. FESM15: ROLLUP
+  .then(() => doRollup(`${TEMP}/sources/index.js`, 'es', '.ng_build/bundles/fesm2015.js'))
+              // 4. FESM5: TSC
+  .then(() => doTsc('.ng_build/bundles/fesm2015.js', '.ng_build/bundles/es5.js'))
+              // 5. UMD: ROLLUP
+  .then(() => doRollup(`${TEMP}/bundles/es5.js`, 'umd', '.ng_build/bundles/umd.js'))
+              // 6. PACKAGE
+  .then(() => doPackage())

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ng-packagr",
+  "version": "1.0.0-alpha.0",
+  "repository": "https://github.com/dherges/ng-packagr.git",
+  "author": "david <david@spektrakel.de>",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/tsc-wrapped": "^4.1.2",
+    "@types/node": "^7.0.18",
+    "gulp-inline-ng2-template": "^4.0.0",
+    "node-sass": "^4.5.3",
+    "rollup": "^0.41.6",
+    "sorcery": "^0.10.0",
+    "ts-node": "^3.0.4",
+    "typescript": "^2.3.2",
+    "uglify-js": "^3.0.7",
+    "vinyl-fs": "^2.4.4"
+  },
+  "devDependencies": {
+    "@angular/core": "^4.1.2"
+  },
+  "scripts": {
+    "build": "ts-node ng-build.ts"
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "buildOnSave": false,
+  "compileOnSave": false,
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "lib": [
+      "es2015",
+      "es2016"
+    ],
+    "types": [
+      "node"
+    ]
+  }
+}

tsconfig.ng.json

@@ -0,0 +1,42 @@
+{
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "flatModuleId": "foo",
+    "flatModuleOutFile": "index",
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true
+  },
+  "buildOnSave": false,
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "skipLibCheck": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@angular"
+    ],
+    "lib": [
+      "dom",
+      "es2015"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.ngfactory.ts",
+    "**/*.shim.ts",
+    "**/*.spec.ts"
+  ],
+  "files": [
+    "public_api.ts"
+  ]
+}