initial prototype

.gitignore

@@ -0,0 +1,3 @@
+*.js
+*.js.map
+node_modules

index.html

@@ -0,0 +1,11 @@
+<hello-controller>
+  <input data-target="hello.input" type="text" />
+
+  <button data-action="click->hello#greet">
+    Greet
+  </button>
+
+  <span data-target="hello.output"> </span>
+</hello-controller>
+<script src="index.js"></script>
+

index.ts

@@ -0,0 +1,68 @@
+function bindActions(classObject) {
+  const oldConnectedCallback = classObject.prototype.connectedCallback
+  classObject.prototype.connectedCallback = function () {
+    if (oldConnectedCallback) oldConnectedCallback.call(this)
+    for(const binding of this.querySelectorAll('[data-action]')) {
+      const [_, eventName, ctor, method] = (binding.getAttribute('data-action')||'').match(/^(\w+)->(\w+)#(\w+)$/) || []
+      if (ctor.toLowerCase() === classObject.name.toLowerCase()) {
+        this.addEventListener(eventName, ev => this[method](ev))
+      }
+    }
+  }
+}
+
+function controllerElement(classObject) {
+  const name = classObject.name.toLowerCase() + "-controller";
+  bindActions(classObject)
+  if (!window.customElements.get(name)) {
+    window[classObject.name + "Controller"] = classObject;
+    window.customElements.define(name, classObject);
+  }
+}
+
+function target(proto, propertyKey) {
+  Object.defineProperty(proto, propertyKey + "Target", {
+    get: function() {
+      console.log('get target', propertyKey)
+      console.log(`[data-target="${this.constructor.name.toLowerCase() + "." + propertyKey}"]`)
+      const target = this.querySelector(
+        `[data-target="${this.constructor.name.toLowerCase() + "." + propertyKey}"]`
+      );
+      if (!(target instanceof this[propertyKey])) {
+        throw new Error("Invariant: expected target to be instanceof " + this[propertyKey] + " but saw " + target)
+      }
+      Object.defineProperty(this, propertyKey + "Target", {
+        value: target,
+        writable: true
+      });
+      return target;
+    }
+  });
+}
+
+function attribute(proto, propertyKey) {
+  Object.defineProperty(proto, propertyKey, {
+    get() {
+      console.log('get attribute', propertyKey, this)
+      return this.getAttribute("data-" + propertyKey);
+    },
+    set(value) {
+      return this.setAttribute("data-" + propertyKey, value);
+    }
+  });
+}
+
+
+/********************************************************************/
+
+@controllerElement
+class Hello extends HTMLElement {
+  @target input = HTMLInputElement;
+  @target output = HTMLElement;
+
+  @attribute name = "World";
+
+  greet() {
+    this.outputTarget.textContent = `Hello, ${this.inputTarget.value}!`;
+  }
+}

package-lock.json

@@ -0,0 +1,14 @@
+{
+  "name": "vanilla-ts",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "typescript": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "vanilla-ts",
+  "version": "1.0.0",
+  "description": "JavaScript and TypeScript example starter project",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {},
+  "keywords": [
+    "typescript",
+    "javascript"
+  ],
+  "devDependencies": {
+    "typescript": "^3.7.5"
+  }
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "target": "ES2020",
+    "rootDir": "src",
+    "moduleResolution": "node"
+  }
+}