feat(ng2-tree): add stylus, webpack-dev-server support

Author: rychkog

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .idea/
-build/
+build/
+typings/

components/ng2-tree.component.ts

@@ -1,64 +1,69 @@
-import {Input} from "angular2/core";
-import {Component} from "angular2/core";
+import {Input, Component} from "angular2/core";
 import {CORE_DIRECTIVES} from "angular2/common";
 
 @Component({
-  selector: 'ng2-tree',
-  template: `
+    selector: 'ng2-tree',
+    template: `
       <ul class="tree">
         <li>
-          <span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span><span class="node-value">{{tree.value}}</span>
+          <span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span>
+          <span class="node-value">{{tree.value}}</span>
           <ng2-tree *ngFor="#child of tree.children" [tree]="child"></ng2-tree>
         </li>
       </ul>
-  `,
-  directives: [Ng2Tree, CORE_DIRECTIVES]
+    `,
+    directives: [Ng2Tree, CORE_DIRECTIVES]
 })
 export class Ng2Tree {
-  @Input()
-  private tree:any;
+    private static COMPONENT_TAG_NAME: string = 'NG2-TREE';
+    private static FOLDING_NODE_EXPANDED: string = 'node-expanded';
+    private static FOLDING_NODE_COLLAPSED: string = 'node-collapsed';
+    private static FOLDING_NODE_LEAF: string = 'node-leaf';
 
-  private switchFolding($event: any, tree: any): void {
-    this.handleFoldingType($event.target.parentNode, tree);
-  }
-  
-  private foldingType(node: any): any {
-    if (node.foldingType) {
-      return node.foldingType;
-    }
+    @Input()
+    private tree: any;
 
-    if (node.children) {
-      node.foldingType = 'node-expanded';
-      return 'node-expanded';
+    private switchFolding($event: any, tree: any): void {
+        this.handleFoldingType($event.target.parentNode, tree);
     }
 
-    node.foldingType = 'leaf';
-    return 'leaf';
-  }
+    private foldingType(node: any): any {
+        if (node.foldingType) {
+            return node.foldingType;
+        }
+
+        if (node.children) {
+            node.foldingType = Ng2Tree.FOLDING_NODE_EXPANDED;
+        } else {
+            node.foldingType = Ng2Tree.FOLDING_NODE_LEAF;
+        }
 
-  private nextFoldingType(node: any): string {
-    if (node.foldingType === 'node-expanded') {
-      return 'node-collapsed';
+        return node.foldingType;
     }
 
-    return 'node-expanded';
-  }
+    private nextFoldingType(node: any): string {
+        if (node.foldingType === Ng2Tree.FOLDING_NODE_EXPANDED) {
+            return Ng2Tree.FOLDING_NODE_COLLAPSED;
+        }
 
-  private handleFoldingType(parent: any, node: any) {
-    if (node.foldingType === 'leaf') {
-      return;
-    }
-    
-    let display = 'block';
-    if (node.foldingType === 'node-expanded') {
-      display = 'none';
+        return Ng2Tree.FOLDING_NODE_EXPANDED;
     }
 
-    node.foldingType = this.nextFoldingType(node);
-    for (let element of parent.childNodes) {
-      if (element.nodeName === 'NG2-TREE') {
-        element.style.display = display;
-      }
+    private handleFoldingType(parent: any, node: any) {
+        if (node.foldingType === Ng2Tree.FOLDING_NODE_LEAF) {
+            return;
+        }
+
+        let display = 'block';
+        if (node.foldingType === Ng2Tree.FOLDING_NODE_EXPANDED) {
+            display = 'none';
+        }
+
+        node.foldingType = this.nextFoldingType(node);
+        for (let element of parent.childNodes) {
+            if (element.nodeName === Ng2Tree.COMPONENT_TAG_NAME) {
+                element.style.display = display;
+            }
+        }
     }
-  }
 }

demo/app.ts

@@ -4,13 +4,15 @@ import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
 import {Ng2Tree} from '../ng2-tree';
 
+require('./styles.styl');
+
 @Component({
     selector: 'app',
     template: `<ng2-tree [tree]="tree"></ng2-tree>`,
     directives: [Ng2Tree]
 })
 class App {
-    private tree:any = {
+    private tree: any = {
         value: 'A',
         children: [
             {

demo/colors.styl

@@ -0,0 +1,2 @@
+folding-color = orange
+node-value-color = green

demo/index.ejs

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+    <app>Loading...</app>
+
+</body>
+</html>

demo/index.html

@@ -0,0 +1,37 @@
+@import colors
+
+node-expanded-symbol = '[-]'
+node-collapsed-symbol = '[+]'
+leaf-node-symbol = '\25cf' //black circle
+
+.tree
+    font-family: monospace
+
+    li
+        padding: 3px 0
+        list-style: none
+
+    .folding
+        cursor: pointer
+        padding: 0 5px 0 5px
+        font-weight: bold
+        color: folding-color
+
+        &.node-expanded
+            &:after
+                content: node-expanded-symbol
+
+        &.node-collapsed
+            &:after
+                content: node-collapsed-symbol
+
+
+        &.node-leaf
+            cursor: default
+
+            &:after
+                content: leaf-node-symbol
+
+      .node-value
+        font-weight: bold
+        color: node-value-color

demo/styles.css

@@ -4,24 +4,31 @@
   "description": "angular2 component for representing ui tree structures",
   "main": "ng2-tree.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "preinstall": "rm -rf ./typings",
+    "dev": "webpack-dev-server --inline --hot",
+    "build": "webpack"
   },
   "author": "rychko.georgiy@gmail.com",
   "license": "ISC",
   "dependencies": {
     "angular2": "2.0.0-beta.12",
-    "es6-shim": "0.34.4",
-    "lodash": "^4.6.1",
-    "reflect-metadata": "0.1.3",
+    "es6-shim": "0.35.0",
+    "lodash": "4.6.1",
+    "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
-    "systemjs": "^0.19.23",
-    "ts-loader": "^0.8.1",
+    "systemjs": "0.19.23",
+    "ts-loader": "0.8.1",
     "typescript": "1.8.2",
     "webpack": "1.12.14",
     "zone.js": "0.6.6"
   },
   "devDependencies": {
     "clean-webpack-plugin": "0.1.8",
-    "html-webpack-plugin": "^2.9.0"
+    "css-loader": "0.23.1",
+    "html-webpack-plugin": "2.9.0",
+    "style-loader": "0.13.1",
+    "stylus-loader": "1.5.1",
+    "typings": "0.7.9",
+    "webpack-dev-server": "1.14.1"
   }
 }

demo/styles.styl

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
+    "moduleResolution": "node",
     "sourceMap": true,
     "declaration": true,
     "removeComments": true,
@@ -15,5 +16,8 @@
   },
   "exclude": [
     "node_modules"
+  ],
+  "files": [
+    "typings/main.d.ts"
   ]
 }

package.json

@@ -0,0 +1,8 @@
+{
+  "ambientDependencies": {
+    "require": "registry:dt/require#2.1.20+20160316155526",
+    "source-map": "registry:dt/source-map#0.0.0+20160317120654",
+    "uglify-js": "registry:dt/uglify-js#2.6.1+20160316155526",
+    "webpack": "registry:dt/webpack#1.12.9+20160321060707"
+  }
+}

tsconfig.json

@@ -2,17 +2,17 @@
 
 const path = require('path');
 const webpack = require('webpack');
-//const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
-let config = {};
+const config = {};
 
 config.devtool = 'sourcemap';
 config.context = __dirname;
 
 config.resolve = {
     root: __dirname,
-    extensions: ['', '.ts', '.js', '.json']
+    extensions: ['', '.ts', '.js', '.json', '.styl']
 };
 
 config.entry = {
@@ -28,23 +28,29 @@ config.entry = {
 
 config.output = {
     path: path.join(__dirname, './build'),
+    publicPath: '/',
     filename: '[name].js'
 };
 
 config.module = {
     loaders: [
         {
             test: /\.ts$/,
-            loader: 'ts-loader'
+            loader: 'ts'
         },
         {
-            test: /\.css$/,
-            loader: 'raw'
+            test: /\.styl$/,
+            loader: 'style!css!stylus?resolve url'
         }
     ]
 };
 
 config.plugins = [
+    new HtmlWebpackPlugin({
+        title: 'ng2-tree',
+        template: 'demo/index.ejs',
+        inject: 'body'
+    }),
     new CleanWebpackPlugin(['build'], {
         root: __dirname,
         verbose: true
@@ -54,4 +60,9 @@ config.plugins = [
     })
 ];
 
+config.devServer = {
+    host: 'localhost',
+    port: 8080
+};
+
 module.exports = config;