Added systemjs build system for the example app

zefoy · Feb 16, 2017 · 26e2934 · 26e2934
1 parent 3796fbd
commit 26e2934
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 5 deletions.
diff --git a/example/config/lite-server-bs-config.js b/example/config/lite-server-bs-config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  server: {
+    baseDir: './',
+    middleware: {
+      1: require('connect-history-api-fallback')({index: '/src/devel.html'})
+    }
+  }
+};
diff --git a/example/config/systemjs-build.config.js b/example/config/systemjs-build.config.js
@@ -0,0 +1,52 @@
+(function (global) {
+  System.config({
+    transpiler: 'ts',
+    typescriptOptions: {
+      tsconfig: "src/tsconfig.json",
+      types: []
+    },
+    meta: {
+      'typescript': {
+        exports: "ts"
+      }
+    },
+    paths: {
+      'npm:': 'https://unpkg.com/'
+    },
+    map: {
+      'app': 'src',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      'rxjs': 'npm:rxjs',
+      'ts': 'npm:plugin-typescript/lib/plugin.js',
+      'typescript': 'npm:typescript/lib/typescript.js',
+      'angular2-dropzone-wrapper': 'node_modules/angular2-dropzone-wrapper'
+    },
+    packages: {
+      'app': {
+        main: './main.ts',
+        defaultExtension: 'ts',
+        meta: {
+          '*.ts': {
+            loader: "ts"
+          }
+        }
+      },
+      'rxjs': {
+        defaultExtension: 'js'
+      },
+      'angular2-dropzone-wrapper': {
+        main: 'bundles/angular2-dropzone-wrapper.umd.js',
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);
+
diff --git a/example/config/systemjs-server.config.js b/example/config/systemjs-server.config.js
@@ -0,0 +1,52 @@
+(function (global) {
+  System.config({
+    transpiler: 'ts',
+    typescriptOptions: {
+      tsconfig: "src/tsconfig.json",
+      types: []
+    },
+    meta: {
+      'typescript': {
+        exports: "ts"
+      }
+    },
+    paths: {
+      'npm:': 'node_modules/'
+    },
+    map: {
+      'app': 'src',
+      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+      '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
+      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+      'rxjs': 'npm:rxjs',
+      'ts': 'npm:plugin-typescript/lib/plugin.js',
+      'typescript': 'npm:typescript/lib/typescript.js',
+      'angular2-dropzone-wrapper': 'node_modules/angular2-dropzone-wrapper'
+    },
+    packages: {
+      'app': {
+        main: './main.ts',
+        defaultExtension: 'ts',
+        meta: {
+          '*.ts': {
+            loader: "ts"
+          }
+        }
+      },
+      'rxjs': {
+        defaultExtension: 'js'
+      },
+      'angular2-dropzone-wrapper': {
+        main: 'bundles/angular2-dropzone-wrapper.umd.js',
+        defaultExtension: 'js'
+      }
+    }
+  });
+})(this);
+
diff --git a/example/config/webpack-server.config.js → example/config/webpack-server-jit.config.js b/example/config/webpack-server.config.js → example/config/webpack-server-jit.config.js
diff --git a/example/package.json b/example/package.json
@@ -11,13 +11,14 @@
   },
   "scripts": {
     "init": "npm install",
-    "start": "webpack-dev-server --open --inline --config config/webpack-server.config.js",
+    "start": "webpack-dev-server --open --inline --config config/webpack-server-jit.config.js",
     "clean": "rm -rf dist node_modules",
     "lint": "npm run lint:ts && npm run lint:css",
     "build": "rm -rf dist/* && npm run build:aot",
     "deploy": "rm -rf dist && deploy-to-git",
     "lint:ts": "tslint 'src/**/*.ts'",
     "lint:css": "stylelint 'src/**/*.css' --syntax css",
+    "start:sjs": "lite-server -c config/lite-server-bs-config.js",
     "build:aot": "webpack --config config/webpack-build-aot.config.js",
     "build:jit": "webpack --config config/webpack-build-jit.config.js"
   },
@@ -57,13 +58,18 @@
     "angular2-router-loader": "~0.3.0",
     "angular2-template-loader": "~0.5.0",
     "awesome-typescript-loader": "~2.2.0",
+    "connect-history-api-fallback": "~1.3.0",
     "copy-webpack-plugin": "~3.0.0",
     "deploy-to-git": "~0.1.0",
     "html-webpack-plugin": "~2.22.0",
+    "lite-server": "~2.2.0",
+    "node-sass": "~3.8.0",
+    "plugin-typescript": "~6.0.0",
     "raw-loader": "~0.5.0",
     "sass-loader": "~4.0.0",
     "stylelint": "~7.2.0",
     "stylelint-config-standard": "~13.0.0",
+    "systemjs": "~0.20.0",
     "tslint": "~3.15.0",
     "typescript": "~2.0.0",
     "webpack": "~2.2.0",

diff --git a/example/src/app/app.component.ts b/example/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper';
 
 @Component({
+  moduleId: module.id + '',
   selector: 'my-app',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']

diff --git a/example/src/build.html b/example/src/build.html
@@ -0,0 +1,73 @@
+<html>
+  <head>
+    <base href="/">
+
+    <meta charset="UTF-8">
+
+    <title>Example app</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
+
+    <style>
+      .loading,
+      .loading:after,
+      .loading:before {
+        content: ' ';
+        top: 0;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        animation: spinner 1600ms infinite ease-in-out;
+      }
+
+      .loading {
+        color: #555;
+        margin: 64px auto;
+        position: relative;
+        animation-delay: -160ms;
+      }
+
+      .loading:after {
+        left: 64px;
+      }
+
+      .loading:before {
+        left: -64px;
+        animation-delay: -320ms;
+      }
+
+      .loading:after,
+      .loading:before {
+        position: absolute;
+      }
+
+      @keyframes spinner {
+        40% {
+          box-shadow: 0 40px 0 0;
+        }
+
+        0%,
+        80%,
+        100% {
+          box-shadow: 0 40px 0 -20px;
+        }
+      }
+    </style>
+
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+    <script src="https://unpkg.com/zone.js@0.7.7/dist/zone.js"></script>
+    <script src="https://unpkg.com/systemjs@0.20.7/dist/system.src.js"></script>
+
+    <script src="config/systemjs-server.config.js"></script>
+
+    <script>
+      System.import('app').catch(function(err) { console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app><div class="loading"></div></my-app>
+  </body>
+</html>
diff --git a/example/src/devel.html b/example/src/devel.html
@@ -0,0 +1,79 @@
+<html>
+  <head>
+    <base href="/">
+
+    <meta charset="UTF-8">
+
+    <title>Example app</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" />
+
+    <style>
+      .loading,
+      .loading:after,
+      .loading:before {
+        content: ' ';
+        top: 0;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        animation: spinner 1600ms infinite ease-in-out;
+      }
+
+      .loading {
+        color: #555;
+        margin: 64px auto;
+        position: relative;
+        animation-delay: -160ms;
+      }
+
+      .loading:after {
+        left: 64px;
+      }
+
+      .loading:before {
+        left: -64px;
+        animation-delay: -320ms;
+      }
+
+      .loading:after,
+      .loading:before {
+        position: absolute;
+      }
+
+      @keyframes spinner {
+        40% {
+          box-shadow: 0 40px 0 0;
+        }
+
+        0%,
+        80%,
+        100% {
+          box-shadow: 0 40px 0 -20px;
+        }
+      }
+    </style>
+
+    <!-- Should be used for build
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+    <script src="https://unpkg.com/zone.js@0.7.7/dist/zone.js"></script>
+    <script src="https://unpkg.com/systemjs@0.19.46/dist/system.src.js"></script>
+    -->
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="config/systemjs-server.config.js"></script>
+
+    <script>
+      System.import('app').catch(function(err) { console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app><div class="loading"></div></my-app>
+  </body>
+</html>
diff --git a/example/src/index.html b/example/src/index.html
@@ -55,6 +55,8 @@
         }
       }
     </style>
+
+    <script>window.module = 'aot';</script>
   </head>
 
   <body>

diff --git a/example/src/tsconfig.json b/example/src/tsconfig.json
@@ -3,7 +3,7 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "module": "es2015",
+    "module": "commonjs",
     "moduleResolution": "node",
     "outDir": "./dist",
     "sourceMap": true,

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "angular2-inline-template-style": "~0.2.0",
     "angular2-template-loader": "~0.5.0",
     "awesome-typescript-loader": "~2.2.0",
+    "codelyzer": "2.0.0",
     "core-js": "~2.4.0",
     "cpx": "~1.5.0",
     "node-sass": "~3.8.0",
@@ -58,7 +59,7 @@
     "strip-sourcemap-loader": "~0.0.0",
     "stylelint": "~7.2.0",
     "stylelint-config-standard": "~13.0.0",
-    "tslint": "~3.15.0",
+    "tslint": "~4.0.0",
     "typescript": "~2.0.0",
     "watch": "~1.0.0",
     "webpack": "~2.2.0",

diff --git a/tslint.json b/tslint.json
@@ -1,6 +1,9 @@
 {
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
   "rules": {
-    "max-line-length": [true, 120],
+    "max-line-length": [true, 360],
     "no-inferrable-types": true,
     "class-name": true,
     "comment-format": [
@@ -59,6 +62,7 @@
       "check-operator",
       "check-separator",
       "check-type"
-    ]
+    ],
+    "templates-use-public": true
   }
 }