add demo app

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+# 2 space indentation
+indent_style = space
+indent_size = 2

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "extends": "eslint:recommended",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2019,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "rules": {
+    "no-unused-vars": 0,
+    "no-prototype-builtins": 0,
+    "no-console": 0,
+    "getter-return": 0
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true
+  }
+}

.gitignore

@@ -0,0 +1,37 @@
+
+# You may want to customise this file depending on your Operating System
+# and the editor that you use.
+#
+# We recommend that you use a Global Gitignore for files that are not related
+# to the project. (https://help.github.com/articles/ignoring-files/#create-a-global-gitignore)
+
+# OS
+#
+# Ref: https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
+.DS_STORE
+Thumbs.db
+
+# Editors
+#
+# Ref: https://github.com/github/gitignore/blob/master/Global
+# Ref: https://github.com/github/gitignore/blob/master/Global/JetBrains.gitignore
+# Ref: https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore
+.idea
+.chrome
+/*.log
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Dependencies
+node_modules
+
+# Compiled files
+/scripts
+/src/environment.js
+/dist
+/test/coverage-jest

.npmrc

@@ -0,0 +1,2 @@
+# for pnpm, use flat node_modules
+shamefully-hoist=true

.vscode/extensions.json

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

.vscode/launch.json

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

README.md

@@ -1 +1,35 @@
-# au-signaler-issue
+# `au-signaler-issue`
+
+This is to demonstrate an issue when testing Aurelia components which are registered as global resources and using `signal` binding behaviour.
+
+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 `npm start`, then open `http://localhost:8080`
+
+You can change the standard webpack configurations from CLI easily with something like this: `npm start -- --open --port 8888`. However, it is better to change the respective npm scripts or `webpack.config.js` with these options, as per your need.
+
+To enable Webpack Bundle Analyzer, do `npm run analyze` (production build).
+
+To enable hot module reload, do `npm start -- --hmr`.
+
+To change dev server port, do `npm start -- --port 8888`.
+
+To change dev server host, do `npm start -- --host 127.0.0.1`
+
+**PS:** You could mix all the flags as well, `npm start -- --host 127.0.0.1 --port 7070 --open --hmr`
+
+For long time aurelia-cli user, you can still use `au run` with those arguments like `au run --env prod --open --hmr`. But `au run` now simply executes `npm start` command.
+
+## Build for production
+
+Run `npm run build`, or the old way `au build --env prod`.
+
+## Unit tests
+
+Run `au test` (or `au jest`).
+
+To run in watch mode, `au test --watch` or `au jest --watch`.

aurelia_project/aurelia.json

@@ -0,0 +1,30 @@
+{
+  "name": "au-signaler-issue",
+  "type": "project:application",
+  "paths": {
+    "root": "src",
+    "resources": "resources",
+    "elements": "resources/elements",
+    "attributes": "resources/attributes",
+    "valueConverters": "resources/value-converters",
+    "bindingBehaviors": "resources/binding-behaviors"
+  },
+  "transpiler": {
+    "id": "babel",
+    "fileExtension": ".js"
+  },
+  "build": {
+    "options": {
+      "server": "dev",
+      "extractCss": "prod",
+      "coverage": false
+    }
+  },
+  "platform": {
+    "hmr": false,
+    "open": false,
+    "port": 8080,
+    "host": "localhost",
+    "output": "dist"
+  }
+}

aurelia_project/generators/attribute.js

@@ -0,0 +1,44 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class AttributeGenerator {
+  constructor(project, options, ui) {
+    this.project = project;
+    this.options = options;
+    this.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}.js`, this.generateSource(className))
+    );
+
+    await this.project.commitChanges();
+    await this.ui.log(`Created ${fileName}.`);
+  }
+
+  generateSource(className) {
+    return `import {inject} from 'aurelia-framework';
+
+@inject(Element)
+export class ${className}CustomAttribute {
+  constructor(element) {
+    this.element = element;
+  }
+
+  valueChanged(newValue, oldValue) {
+    //
+  }
+}
+`;
+  }
+}

aurelia_project/generators/attribute.json

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

aurelia_project/generators/binding-behavior.js

@@ -0,0 +1,41 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class BindingBehaviorGenerator {
+  constructor(project, options, ui) {
+    this.project = project;
+    this.options = options;
+    this.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}.js`, 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) {
+    //
+  }
+}
+`
+  }
+}

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."
+}

aurelia_project/generators/component.js

@@ -0,0 +1,51 @@
+import { inject } from 'aurelia-dependency-injection';
+import { Project, ProjectItem, CLIOptions, UI } from 'aurelia-cli';
+import path from 'path';
+
+@inject(Project, CLIOptions, UI)
+export default class ElementGenerator {
+  constructor(project, options, ui) {
+    this.project = project;
+    this.options = options;
+    this.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 "." relative to 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 + '.js'), 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} {
+  constructor() {
+    this.message = 'Hello world';
+  }
+}
+`
+  }
+
+  generateHTMLSource(className) {
+    return `<template>
+  <h1>\${message}</h1>
+</template>
+`
+  }
+}

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)."
+}

aurelia_project/generators/element.js

@@ -0,0 +1,49 @@
+import {inject} from 'aurelia-dependency-injection';
+import {Project, ProjectItem, CLIOptions, UI} from 'aurelia-cli';
+
+@inject(Project, CLIOptions, UI)
+export default class ElementGenerator {
+  constructor(project, options, ui) {
+    this.project = project;
+    this.options = options;
+    this.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}.js`, 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>
+`;
+  }
+}

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."
+}