bump ver. 1.2.0: correctly handle external resource load with require()

close #1

.gitignore

@@ -1,9 +1,8 @@
 # Javascript
 node_modules
-typings/*
+typings
 dist
 npm-debug.log
-!typings/tempfix-plugin-tsc-issue-6615.d.ts
 
 ## OS X
 .DS_Store

README.md

@@ -26,14 +26,15 @@ This step was JUST DONE to produce the repository in the current state, so you d
 But it may be useful to know how to start from scratch.
 ```
 npm init -y
-npm i --save  angular  reflect-metadata  systemjs  ng-metadata 
-npm i --save  systemjs-plugin-css  system-text
-npm i --save-dev  typescript  tslint
+npm i --save  angular  reflect-metadata  ng-metadata
+npm i --save  systemjs  system-text  systemjs-plugin-css
+npm i --save-dev  typescript  tslint  copyfiles  rimraf
+typings i -g
 typings init
 typings install  jquery  angular  --save  --ambient
 ```
 
-Folder structure
+####Folder structure
 ```
 \ - app                             <-- contains all your Typescript code
 |    \ - components     
@@ -43,21 +44,22 @@ Folder structure
 |    | - styles.css                 <-- sample css styles loaded by plugin
 |    \ - startup.ts                 <-- entry point boostrap angular app
 |
-| - dist                            <-- output directory for transpiled code TS->JS
+| - dist                            <-- output directory for transpiled code TS->JS + copied assets css/html
 | - index.html                      <-- initial page that load ambient dependency: SystemJS, Reflect-metadata 
-| - system.config.js                <-- SystemJS configuration for loading module starting from 'app/startup' entrypoint  
-\ - tsconfig.json                   <-- configure compiler (tsc) to build Typescript code 
+| - system.conf.js                  <-- SystemJS configuration for loading module starting from 'app/startup' entrypoint  
+\ - tsconfig.json                   <-- configure compiler (tsc) to build Typescript code
 ```
 
-Configure [tsconfig.json](tsconfig.json) to build **Typescipt** app files and output js to `dist` folder, 
-and setup [SystemJS](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md) into [systemjs.config.js](systemjs.config.js) 
+Configure [tsconfig.json](tsconfig.json) to build **Typescipt** app files and output corresponding (commonjs) JS files to `dist` folder, 
+and setup [SystemJS](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md) into [systemjs.conf.js](systemjs.conf.js) 
 to load the **Angular** `app` module bootstrapping it with ngMetadata from `app/startup` . 
-And finally setup some scripts in [package.json](package.json) to automate `build` and `serve`
+And finally setup some scripts in [package.json](package.json) to automate `build` , `serve` and copy assets (html/css) to `dist`
 
 
 ###BRANCH `plugins`
-This branch use SystemJS [plugins](package.json#L35-L36) to load external resources: [*.html!](app/components/my-app.component.ts#L2) for component and [*.css!](app/startup.ts#L6) style,
-see changes in [systemjs.conf.js](systemjs.conf.js#L15-L16) to handle the configuration neccessary.
+This branch use SystemJS [plugins](package.json#L38-L39) to load external resources: [require(*.html)](app/components/my-app.component.ts#L2) for component and [import *.css!](app/startup.ts#L6) style,
+see [changes][systemjs.conf.js](systemjs.conf.js#L21-L25) in [systemjs.conf.js](systemjs.conf.js#L32-L36) to handle the configuration neccessary.
+**NOTE:** To avoid compile error for require, include global ambient definition in [typings-manual-fix.d.ts](typings-manual-fix.d.ts#L2)
 
 ###OTHER SETUP AND SAMPLE
 This repo contains other SystemJS config and TS sample, to test different setup checkout branches:

app/components/my-app.component.ts

@@ -1,14 +1,9 @@
 import {Component} from "ng-metadata/core";
-import html from "app/components/my-app.html!"; // LOADING TEMPLATE HTML FROM EXTERNAL FILE WITH .html! SYSTEMJS PLAGIN
-// TO AVOID TS2307 ERROR YOU MUST USE ABSOLUTE PATH AND DECLARE MODULE IN    typings/tempfix-plugin-tsc-issue-6615.d.ts
-
-// WIP uncomment this section to load tpl or try this code but it's NOT working and give TS compile error: import tpl from "./my-app.html";
-// declare const require: (moduleOrPath: string) => any;
-// const tpl = require("./my-app.html");
+const html = require("./my-app.html"); // require external HTML - relative path is based on .js loaded so need to copy assets in ./dist
 
 @Component({
     selector: "my-app",
-    template: html // WIP replate with tpl here
+    template: html
 })
 export class AppCmp {
     constructor() {}

app/startup.ts

@@ -4,6 +4,7 @@ import {AppModule} from "./app.module";
 
 // import CSS (SystemJS will inject it into the document)
 import "./styles.css!"; // IMPORTING DIRECTLY CSS USING SYSTEMJS PLUGIN css! INCLUDE IT IN HEAD
+// ALTERNATIVE: require("./styles.css"); // require external CSS - relative path is based on .js loaded so need to copy assets in ./dist
 
 // that boostrap the app.module
 bootstrap(AppModule);

index.html

@@ -9,7 +9,6 @@
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
     <!-- 2. Configure SystemJS for ngMetadata -->
-    <script src="dist/app-bundle.js">/*load app-bundle built by TS*/</script>
     <script src="systemjs.conf.js">/*config SystemJS with entrypoint 'app/startup'*/</script>
   </head>
 

my-app.html

@@ -0,0 +1,6 @@
+<h1>APP/DIST</h1>
+<h2>CSS and HTML loaded by SystemJS plugins</h2>
+To learn how to build an <a href="https://angularjs.org">Angular 1.x</a> app using component-style, 
+writing code in <a href="https://www.typescriptlang.org">Typescript</a> in an effective way, 
+and be ready to migrate to <a href="https://angular.io">NG2</a>
+<h3>JUST USE <a href="https://github.com/ngParty/ng-metadata">ngMetadata</a>!</h3>

package.json

@@ -1,14 +1,17 @@
 {
   "name": "ng-metadata-quickstart",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Sample project quickstart using ngMetadata",
   "main": "index.js",
   "scripts": {
-    "lint": "tslint --config tslint.json app/*.ts app/**/*.ts",
+    "clear:dist": "node_modules/.bin/rimraf dist",
+    "copy:asset": "node_modules/.bin/copyup 'app/**/*.html' 'app/**/*.css' dist",
+    "dist": "npm run clear:dist  &&  npm run copy:asset",
+    "lint": "tslint  --config tslint.json  app/*.ts  app/**/*.ts",
     "prebuild": "npm run lint",
     "build": "tsc  -w  -pretty  -p .",
     "serve": "http-server  --cors  -c-1  -o index.html",
-    "start": "npm run build  &  npm run serve",
+    "start": "npm run dist  &&  npm run build  &  npm run serve",
     "postinstall": "typings  install"
   },
   "repository": {
@@ -31,13 +34,14 @@
     "angular": "^1.5.3",
     "ng-metadata": "^1.5.2",
     "reflect-metadata": "^0.1.3",
-    "systemjs": "^0.19.26"
-    ,"system-text": "^0.1.0"
-    ,"systemjs-plugin-css": "^0.1.20"
+    "systemjs": "^0.19.26",
+    "system-text": "^0.1.0",
+    "systemjs-plugin-css": "^0.1.20"
   },
   "devDependencies": {
+    "copyfiles": "^0.2.1",
+    "rimraf": "^2.5.2",
     "tslint": "^3.7.4",
-    "typescript": "^1.8.10",
-    "systemjs-plugin-text": "git+https://github.com/systemjs/plugin-text.git"
+    "typescript": "^1.8.10"
   }
 }

systemjs.conf.js

@@ -8,27 +8,33 @@ var SystemConfig = (function() {
     var config = {
         baseUrl: "./",
         paths: {
+            app: "./dist",  // path outDir of transpiled TS->JS commonjs
             "npm:*": "node_modules/*"
         },
         map: {
             "angular": "npm:angular/angular.min.js"
             ,"css": "npm:systemjs-plugin-css/css.js"    //enable css plugins for import *.css!
             ,"html": "npm:system-text/text.js"          //enable text plugins for import *.html!
-            //,"text": "npm:system-text/text.js"          // WIP uncomment this line, and comment the "html" line above
         },
         packages: {
             // npm packages are injected here
+            "app": {
+                "format": "cjs",
+                "defaultExtension": "js",
+                "main": "startup" // specify here the entry-point for 'app' bootstrap
+             }
         },
         meta: {
             "angular": {
                 "format": "global",
                 "exports": "angular"
             }
-            /* ,meta: { // WIP uncomment this section to enable serving html with loader text pluging
-                "*.html": {
-                    loader: "text"
-                }
-            } */
+            , "*.html": { // use html plugins for require(*.html) relative to dist outDir
+                loader: "html"
+            }
+            , "*.css": { // use css plugins for require(*.css) relative to dist outDir
+                loader: "css"
+            }
         }
     };
 
@@ -44,6 +50,6 @@ var SystemConfig = (function() {
     // Read more info on SystemJS config here: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
     System.config(config);
 
-    // Load 'app/startup' compiled by TS into app_bundle.js (this will boostrap angular and the app.module)  
-    System.import( "app/startup" ).catch( console.error.bind( console ) );
+    // Load entrypoint 'app' --> 'app/startup' compiled by TS into outDir = dist (this will boostrap angular and the app.module)  
+    System.import( "app" ).catch( console.error.bind( console ) );
 })();

tsconfig.json

@@ -1,19 +1,18 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "system",
+    "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
-    "outFile": "dist/app-bundle.js", //BUILD AND BUNDLE ALL TS --> JS 
-    "rootDir": "./" //NEEDED TO HAVE CORRECT MODULE DEF app/* IN BUNDLE
+    "outDir": "./dist" // DIRECTORY WHERE ALL BUILD TS --> JS ARE SAVED
   },
   "files": [
     "app/startup.ts",
     "typings/browser.d.ts",
-    "typings/tempfix-plugin-tsc-issue-6615.d.ts" //NEEDED TO FIX TS2307 ERROR LOADING HTML WITH SYSTEMJS PLUGIN
+    "typings-manual-fix.d.ts" // NEEDED TO VALIDATE require() FOR HTML/CSS
   ]
 }

typings-manual-fix.d.ts

@@ -0,0 +1,2 @@
+// FIX: GLOBAL AMBIENT DECLARE TO VALIDATE COMPILE OF require(...) FOR IMPORTING HTML/CSS IN TYPESCRIPT VIA PLUGINS
+declare const require: (pathToHtmlOrCss: string) => any;