feat: support Aurelia

- add CLI-generated Aurelia example

#28

examples/aurelia-ts/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "AureliaEffect.aurelia",
+    "msjsdiag.debugger-for-chrome",
+    "steoates.autoimport",
+    "EditorConfig.EditorConfig",
+    "christian-kohler.path-intellisense",
+    "behzad88.Aurelia"
+  ]
+}

examples/aurelia-ts/.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceRoot}/src",
+      "userDataDir": "${workspaceRoot}/.chrome",
+      "sourceMapPathOverrides": {
+        "webpack:///./src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

examples/aurelia-ts/.vscode/launch.json_if_cli-bundler

@@ -0,0 +1,32 @@
+{
+  // Use IntelliSense to find out which attributes exist for node debugging
+  // Use hover for the description of the existing attributes
+  // For further information visit https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome Debugger",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:9000",
+      "webRoot": "${workspaceRoot}/src",
+      "userDataDir": "${workspaceRoot}/.chrome",
+      "sourceMapPathOverrides": {
+        "../src/*": "${webRoot}/*"
+      }
+    },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach Karma Chrome",
+      "address": "localhost",
+      "port": 9333,
+      "sourceMaps": true,
+      "pathMapping": {
+        "/": "${workspaceRoot}",
+        "/base/": "${workspaceRoot}/"
+      },
+      "sourceMapPathOverrides": { "../src/*": "${webRoot}/*" }
+    }
+  ]
+}

examples/aurelia-ts/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "html.suggest.angular1": false,
+  "html.suggest.ionic": false
+}

examples/aurelia-ts/README.md

@@ -0,0 +1,27 @@
+# `aurelia-ts`
+
+This project is bootstrapped by [aurelia-cli](https://github.com/aurelia/cli).
+
+For more information, go to https://aurelia.io/docs/cli/webpack
+
+## Run dev app
+
+Run `au run`, then open `http://localhost:8080`
+
+To open browser automatically, do `au run --open`.
+
+To change dev server port, do `au run --port 8888`.
+
+To enable Webpack Bundle Analyzer, do `au run --analyze`.
+
+To enable hot module reload, do `au run --hmr`.
+
+## Build for production
+
+Run `au build --env prod`.
+
+## Unit tests
+
+Run `au test` (or `au jest`).
+
+To run in watch mode, `au test --watch` or `au jest --watch`.

examples/aurelia-ts/aurelia_project/aurelia.json

@@ -0,0 +1,30 @@
+{
+  "name": "aurelia-ts",
+  "type": "project:application",
+  "paths": {
+    "root": "src",
+    "resources": "resources",
+    "elements": "resources/elements",
+    "attributes": "resources/attributes",
+    "valueConverters": "resources/value-converters",
+    "bindingBehaviors": "resources/binding-behaviors"
+  },
+  "transpiler": {
+    "id": "typescript",
+    "fileExtension": ".ts"
+  },
+  "build": {
+    "options": {
+      "server": "dev",
+      "extractCss": "prod",
+      "coverage": false
+    }
+  },
+  "platform": {
+    "hmr": false,
+    "open": false,
+    "port": 8080,
+    "output": "dist"
+  },
+  "packageManager": "npm"
+}

examples/aurelia-ts/aurelia_project/environments/dev.ts

@@ -0,0 +1,4 @@
+export default {
+  debug: true,
+  testing: true
+};

examples/aurelia-ts/aurelia_project/environments/prod.ts

@@ -0,0 +1,4 @@
+export default {
+  debug: false,
+  testing: false
+};

examples/aurelia-ts/aurelia_project/environments/stage.ts

@@ -0,0 +1,4 @@
+export default {
+  debug: true,
+  testing: false
+};

examples/aurelia-ts/aurelia_project/generators/attribute.json

@@ -0,0 +1,4 @@
+{
+  "name": "attribute",
+  "description": "Creates a custom attribute class and places it in the project resources."
+}

examples/aurelia-ts/aurelia_project/generators/attribute.ts

@@ -0,0 +1,38 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class AttributeGenerator {
+  constructor(private project: Project, private options: CLIOptions, private ui: UI) { }
+
+  async execute() {
+    const name = await this.ui.ensureAnswer(
+      this.options.args[0],
+      'What would you like to call the custom attribute?'
+    );
+
+    let fileName = this.project.makeFileName(name);
+    let className = this.project.makeClassName(name);
+
+    this.project.attributes.add(
+      ProjectItem.text(`${fileName}.ts`, this.generateSource(className))
+    );
+
+    await this.project.commitChanges();
+    await this.ui.log(`Created ${fileName}.`);
+  }
+
+  generateSource(className) {
+    return `import {autoinject} from 'aurelia-framework';
+
+@autoinject()
+export class ${className}CustomAttribute {
+  constructor(private element: Element) { }
+
+  valueChanged(newValue, oldValue) {
+    //
+  }
+}
+`;
+  }
+}

examples/aurelia-ts/aurelia_project/generators/binding-behavior.json

@@ -0,0 +1,4 @@
+{
+  "name": "binding-behavior",
+  "description": "Creates a binding behavior class and places it in the project resources."
+}

examples/aurelia-ts/aurelia_project/generators/binding-behavior.ts

@@ -0,0 +1,37 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class BindingBehaviorGenerator {
+  constructor(private project: Project, private options: CLIOptions, private ui: UI) { }
+
+  async execute() {
+    const name = await this.ui.ensureAnswer(
+      this.options.args[0],
+      'What would you like to call the binding behavior?'
+    );
+
+    let fileName = this.project.makeFileName(name);
+    let className = this.project.makeClassName(name);
+
+    this.project.bindingBehaviors.add(
+      ProjectItem.text(`${fileName}.ts`, this.generateSource(className))
+    );
+
+    await this.project.commitChanges();
+    await this.ui.log(`Created ${fileName}.`);
+  }
+
+  generateSource(className) {
+    return `export class ${className}BindingBehavior {
+  bind(binding, source) {
+    //
+  }
+
+  unbind(binding, source) {
+    //
+  }
+}
+`
+  }
+}

examples/aurelia-ts/aurelia_project/generators/component.json

@@ -0,0 +1,4 @@
+{
+  "name": "component",
+  "description": "Creates a custom component class and template (view model and view), placing them in the project source folder (or optionally in sub folders)."
+}

examples/aurelia-ts/aurelia_project/generators/component.ts

@@ -0,0 +1,50 @@
+import { inject } from 'aurelia-dependency-injection';
+import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
+
+var path = require('path');
+
+@inject(Project, CLIOptions, UI)
+export default class ElementGenerator {
+  constructor(private project: Project, private options: CLIOptions, private ui: UI) { }
+
+  async execute() {
+    const name = await this.ui.ensureAnswer(
+      this.options.args[0],
+      'What would you like to call the component?'
+    );
+
+    const subFolders = await this.ui.ensureAnswer(
+      this.options.args[1],
+      'What sub-folder would you like to add it to?\nIf it doesn\'t exist it will be created for you.\n\nDefault folder is the source folder (src).', "."
+    );
+
+    let fileName = this.project.makeFileName(name);
+    let className = this.project.makeClassName(name);
+
+    this.project.root.add(
+      ProjectItem.text(path.join(subFolders, fileName + '.ts'), this.generateJSSource(className)),
+      ProjectItem.text(path.join(subFolders, fileName + '.html'), this.generateHTMLSource(className))
+    );
+
+    await this.project.commitChanges();
+    await this.ui.log(`Created ${name} in the '${path.join(this.project.root.name, subFolders)}' folder`);
+  }
+
+  generateJSSource(className) {
+    return `export class ${className} {
+  message: string;
+
+  constructor() {
+    this.message = 'Hello world';
+  }
+}
+`
+  }
+
+  generateHTMLSource(className) {
+    return `<template>
+  <h1>\${message}</h1>
+</template>
+`
+  }
+}

examples/aurelia-ts/aurelia_project/generators/element.json

@@ -0,0 +1,4 @@
+{
+  "name": "element",
+  "description": "Creates a custom element class and template, placing them in the project resources."
+}

examples/aurelia-ts/aurelia_project/generators/element.ts

@@ -0,0 +1,45 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class ElementGenerator {
+  constructor(private project: Project, private options: CLIOptions, private ui: UI) { }
+
+  async execute() {
+    const name = await this.ui.ensureAnswer(
+      this.options.args[0],
+      'What would you like to call the custom element?'
+    );
+
+    let fileName = this.project.makeFileName(name);
+    let className = this.project.makeClassName(name);
+
+    this.project.elements.add(
+      ProjectItem.text(`${fileName}.ts`, this.generateJSSource(className)),
+      ProjectItem.text(`${fileName}.html`, this.generateHTMLSource(className))
+    );
+
+    await this.project.commitChanges();
+    await this.ui.log(`Created ${fileName}.`);
+  }
+
+  generateJSSource(className) {
+    return `import {bindable} from 'aurelia-framework';
+
+export class ${className} {
+  @bindable value;
+
+  valueChanged(newValue, oldValue) {
+    //
+  }
+}
+`;
+  }
+
+  generateHTMLSource(className) {
+    return `<template>
+  <h1>\${value}</h1>
+</template>
+`;
+  }
+}

examples/aurelia-ts/aurelia_project/generators/generator.json

@@ -0,0 +1,4 @@
+{
+  "name": "generator",
+  "description": "Creates a generator class and places it in the project generators folder."
+}