Create a simple router and template engine

CKGrafico · CKGrafico · commit 542fb0a5c097 · 2017-03-19T18:07:26.000+01:00
diff --git a/app.js b/app.js
@@ -0,0 +1 @@
+error TS6053: File 'app.ts' not found.
diff --git a/app/client/index.html b/app/client/index.html
@@ -10,23 +10,7 @@
 </head>
 
 <body>
-
-    <article id="webslides">
-    <section>
-        <h1>Slide 1</h1>
-    </section>
-    <section class="bg-black aligncenter">
-    <!-- .wrap = container 1200px -->
-        <div class="wrap">
-            <h1>Slide 2</h1>
-        </div>
-    </section>
-</article>
-
-    <div class="ck-site">
-        <h1>Hello World!</h1>
-    </div>
-
+    <div id="webslides"></div>
     <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/app/client/ts/app.router.ts b/app/client/ts/app.router.ts
@@ -0,0 +1,31 @@
+import * as $ from 'jquery';
+import 'webslides/static/js/svg-icons.js';
+import 'webslides/static/js/webslides.js';
+
+import {Slide} from './shared/slide';
+import {HomeSlide} from './home';
+import {MeSlide} from './me';
+
+export default class {
+    private slides: Slide[];
+    private $container;
+
+    constructor(container) {
+        this.$container = $(container);
+        this.slides = [
+            new HomeSlide(),
+            new MeSlide()
+        ];
+
+        this.init();
+    }
+
+    private init(): void {
+        let $templates = $('<div/>');
+        for (let slide of this.slides) {
+            $templates.append(slide.compile());
+        }
+
+        this.$container.append($templates);
+    }
+}
diff --git a/app/client/ts/app.ts b/app/client/ts/app.ts
@@ -1,16 +1,19 @@
-// import $ from 'jquery';
-
+import * as $ from 'jquery';
 import 'webslides/static/js/svg-icons.js';
 import 'webslides/static/js/webslides.js';
 
-interface IExample {
-    readonly name: string;
-}
+import Router from './app.router';
 
-class Example implements IExample {
-    public readonly name = 'test';
-}
+let selectors = {
+    wrapper: '#webslides'
+};
 
-let example = new Example();
+class App {
+    private router: Router;
+
+    constructor() {
+        this.router = new Router(selectors.wrapper);
+    }
+}
 
-console.log(example.name);
+new App();
diff --git a/app/client/ts/home/home.slide.ts b/app/client/ts/home/home.slide.ts
@@ -0,0 +1,9 @@
+import {Slide} from '../shared/slide';
+import template from './home.template';
+
+export class HomeSlide extends Slide {
+    constructor() {
+        super();
+        this.template = template;
+    }
+}
diff --git a/app/client/ts/home/home.template.ts b/app/client/ts/home/home.template.ts
@@ -0,0 +1,7 @@
+export default options => `
+    <section class="bg-black aligncenter">
+        <div class="wrap">
+            <h1>Home Slide</h1>
+        </div>
+    </section>
+`;
diff --git a/app/client/ts/home/index.ts b/app/client/ts/home/index.ts
@@ -0,0 +1 @@
+export * from './home.slide';
diff --git a/app/client/ts/me/index.ts b/app/client/ts/me/index.ts
@@ -0,0 +1,2 @@
+export * from './me.slide';
+export * from './me.template';
diff --git a/app/client/ts/me/me.slide.ts b/app/client/ts/me/me.slide.ts
@@ -0,0 +1,9 @@
+import {Slide} from '../shared/slide';
+import template from './me.template';
+
+export class MeSlide extends Slide {
+    constructor() {
+        super();
+        this.template = template;
+    }
+}
diff --git a/app/client/ts/me/me.template.ts b/app/client/ts/me/me.template.ts
@@ -0,0 +1,7 @@
+export default options => `
+    <section class="aligncenter">
+        <div class="wrap">
+            <h1>Me Slide</h1>
+        </div>
+    </section>
+`;
diff --git a/app/client/ts/shared/slide/index.ts b/app/client/ts/shared/slide/index.ts
@@ -0,0 +1 @@
+export * from './slide';
diff --git a/app/client/ts/shared/slide/slide.ts b/app/client/ts/shared/slide/slide.ts
@@ -0,0 +1,6 @@
+export class Slide {
+    protected template = options => ``;
+    public compile(options = {}): any {
+        return this.template(options);
+    }
+}
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "body-parser": "^1.17.1",
     "express": "^4.15.2",
     "express-spa": "0.0.2",
+    "jquery": "^3.1.1",
     "normalize-scss": "^6.0.0",
     "typescript": "^2.2.1",
     "webslides": "^1.2.1"
diff --git a/tasks/ts.js b/tasks/ts.js
@@ -6,8 +6,14 @@ module.exports = (gulp, paths, $, _) => {
     
     return browserify({debug: $.environment.is.development() ? true : false})
     .add(_.files(paths.app.client.main))
-    .plugin(tsify)
+    .plugin(tsify, {
+        "module": "commonjs",
+        "target": "es5",
+        "noImplicitAny": false,
+        "sourceMap": false,
+        "allowSyntheticDefaultImports": true
+    })
     .bundle()
-    .on('error', function (error) { console.error(error.toString()); })
+    .on('error', error => console.error(error.toString()))
     .pipe(fs.createWriteStream(_.folder(paths.dist.client.js) + '/app.js'));
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './me.slide';`
	`2`	`+export * from './me.template';`