From e29152329e02fcc15cba03d0570397d3ec2cadea Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:48:23 +0900
Subject: [PATCH 01/17] x script

---
 package-lock.json | 6 +++---
 package.json      | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 367ed5a..2de15cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10776,9 +10776,9 @@
       }
     },
     "registry-auth-token": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.1.1.tgz",
-      "integrity": "sha512-9bKS7nTl9+/A1s7tnPeGrUpRcVY+LUh7bfFgzpndALdPfXQBfQV77rQVtqgUV3ti4vc/Ik81Ex8UJDWDQ12zQA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.0.tgz",
+      "integrity": "sha512-P+lWzPrsgfN+UEpDS3U8AQKg/UjZX6mQSJueZj3EK+vNESoqBSpBUD3gmu4sF9lOsjXWjF11dQKUqemf3veq1w==",
       "dev": true,
       "requires": {
         "rc": "^1.2.8"
diff --git a/package.json b/package.json
index 0df02b6..f49cc12 100644
--- a/package.json
+++ b/package.json
@@ -35,10 +35,12 @@
     "build": "rollup -c",
     "preversion": "npm test",
     "postversion": "git push origin --tags --no-verify",
-    "test": "jest && tsc spec/types.test.ts --noEmit",
+    "test": "jest && npm run test-types",
+    "test-types": "tsc spec/types.test.ts --noEmit",
     "example/pizza": "webpack --config examples/pizza/webpack.config.js && webpack-dev-server --mode development --hot --watch-stdin --config examples/pizza/webpack.config.js",
     "example/todo": "webpack --config examples/todo/webpack.config.js && webpack-dev-server --mode development --hot --watch-stdin --config examples/todo/webpack.config.js",
     "example/calculator": "webpack --config examples/calculator/webpack.config.js && webpack-dev-server --mode development --hot --watch-stdin --config examples/calculator/webpack.config.js",
+    "x": "webpack --config x/webpack.config.js && webpack-dev-server --mode development --hot --watch-stdin --config x/webpack.config.js",
     "pretest": "npm run build"
   },
   "keywords": [

From 50feb11c2e7c611a315d8a5f2d368b9907801712 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:49:12 +0900
Subject: [PATCH 02/17] upgraded tests

---
 spec/dom.test.js        | 135 +++++++++++++++++++---------------------
 spec/exorciser.test.js  |  39 ++++++++++++
 spec/interfaces.test.js |  48 ++++++++------
 spec/xss.test.js        |  33 ----------
 4 files changed, 130 insertions(+), 125 deletions(-)
 create mode 100644 spec/exorciser.test.js
 delete mode 100644 spec/xss.test.js

diff --git a/spec/dom.test.js b/spec/dom.test.js
index 7b88865..affe62f 100644
--- a/spec/dom.test.js
+++ b/spec/dom.test.js
@@ -2,88 +2,79 @@ import phantom from "../lib/phantom";
 import phantomStore from "./utils/phantomStore";
 
 /*
- * Test Phantom's DOM output
+ * Test Phantom and its interactions with the DOM
  */
 
-test("The PHANTOM element is rendered and wraps around the application", () => {
-  // init phantomElement
-  const { appear } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    return `
-      <div>
-        <h1>PHANTOM</h1>
-      </div>
-      `;
-  }
-  appear();
-
-  const PHANTOMEl = document.body.firstChild;
-
-  expect(PHANTOMEl.id).toBe("PHANTOM");
-});
+describe("Phantom and the DOM", () => {
+  test("The PHANTOM element is rendered and wraps around the application", () => {
+    // init phantomComponent
+    const { appear } = phantom(phantomStore, phantomComponent);
+    function phantomComponent() {
+      return `
+        <div>
+          <h1>PHANTOM</h1>
+        </div>
+        `;
+    }
+    appear();
+
+    const PHANTOMEl = document.body.firstChild;
 
-test("DOM is updated after firing a state change", () => {
-  // init phantomElement
-  const { fire, data, appear } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    const { title } = data();
-    return `
-      <div id="title-div">
-        <h1 data-phantom="${title}" id="title-h1">${title}</h1>
-      </div>
-      `;
-  }
-  appear();
-
-  // add listener
-  document.addEventListener("click", justDoShit);
-  function justDoShit(e) {
-    if (e.target.id === "title-h1") {
-      fire({ type: "TOGGLE_TITLE" });
+    expect(PHANTOMEl.id).toBe("PHANTOM");
+  });
+
+  test("DOM is updated after firing a state change", () => {
+    // init phantomComponent
+    const { fire, data, appear } = phantom(phantomStore, phantomComponent);
+    function phantomComponent() {
+      const { title } = data();
+      return `
+        <div id="title-div">
+          <h1 data-phantom="${title}" id="title-h1">${title}</h1>
+        </div>
+        `;
     }
-  }
 
-  // click title element
-  const toBeSwappedOut = document.getElementById("title-h1");
-  toBeSwappedOut.click();
-  const swappedIn = document.getElementById("title-h1");
+    appear();
 
-  expect(swappedIn.innerHTML).toBe("JUST DO SHIT");
-});
+    // add click listener
+    document.addEventListener("click", justDoShit);
+    function justDoShit(e) {
+      if (e.target.id === "title-h1") {
+        fire({ type: "TOGGLE_TITLE" });
+      }
+    }
+
+    const toBeSwappedOut = document.getElementById("title-h1");
+
+    // simulate click
+    toBeSwappedOut.click();
+
+    const swappedIn = document.getElementById("title-h1");
+
+    expect(swappedIn.innerHTML).toBe("JUST DO SHIT");
+  });
+
+  test("PHANTOM element is properly rendered", () => {
+    // init phantomComponent
+    const { data, appear } = phantom(phantomStore, phantomComponent);
 
-test("PHANTOM DOM is properly rendered", () => {
-  // init phantomElement
-  const { fire, data, appear } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    const { title } = data();
-    return `
-      <div id="title-div">
-        <h1 id="title-h1">${title}</h1>
-      </div>
-      `;
-  }
-
-  appear();
-
-  // add listener
-  document.addEventListener("click", justDoShit);
-  function justDoShit(e) {
-    if (e.target.id === "title-h1") {
-      fire({ type: "TOGGLE_TITLE" });
+    function phantomComponent() {
+      return `
+        <div id="phantom-test"></div>
+        `;
     }
-  }
 
-  // get dom element's innerHTML, trim()
-  const domElementInnerHTML = document
-    .getElementById("PHANTOM")
-    .innerHTML.trim();
+    appear();
 
-  // click title element
-  const titleH1 = document.getElementById("title-h1");
-  titleH1.click();
+    // get dom element's innerHTML, trim()
+    const domElementInnerHTML = document
+      .getElementById("PHANTOM")
+      .innerHTML.trim();
 
-  // get phantomElement's (as returned by phantomElement) HTML, trim()
-  const phantomElementHTML = phantomElement().trim();
+    // get phantomComponent's HTML string, trim()
+    const phantomElementHTML = phantomComponent().trim();
 
-  expect(domElementInnerHTML).toBe(phantomElementHTML);
+    expect(domElementInnerHTML).toBe(phantomElementHTML);
+  });
 });
diff --git a/spec/exorciser.test.js b/spec/exorciser.test.js
new file mode 100644
index 0000000..6841f9e
--- /dev/null
+++ b/spec/exorciser.test.js
@@ -0,0 +1,39 @@
+import phantom from "../lib/phantom";
+import phantomStore from "./utils/phantomStore";
+
+/*
+ * Test the internal Phantom Exorciser and its HTML sanitization vs XSS injection
+ */
+
+describe("The Phantom Exorciser", () => {
+  test("<img src='X' onerror='alert(0)'> is sanitized", () => {
+    // init phantom
+    const { appear } = phantom(phantomStore, phantomComponent);
+
+    // define a component
+    function phantomComponent() {
+      return `
+        <img src='X' onerror='alert(0)'> 
+      `; // ^ dangerous <img> tag
+    }
+
+    const sanitized = `<img src="X">`;
+    const shouldBeSanitized = appear().innerHTML.trim();
+    // ^ appear returns the DOM node. innerHTML is trimmed for control
+
+    expect(shouldBeSanitized).toBe(sanitized);
+  });
+
+  test("Attempting to render <iframe> throws an DOMException", () => {
+    // init phantom
+    const { appear } = phantom(phantomStore, phantomComponent);
+
+    function phantomComponent() {
+      return `
+        <iframe>
+      `; // iframe is a forbidden tag
+    }
+
+    expect(appear).toThrowError(DOMException);
+  });
+});
diff --git a/spec/interfaces.test.js b/spec/interfaces.test.js
index f816b70..28c29db 100644
--- a/spec/interfaces.test.js
+++ b/spec/interfaces.test.js
@@ -3,28 +3,36 @@ import phantomStore from "./utils/phantomStore";
 
 /*
  * Test the Phantom engine's interfaces
+ * > data::returns the current store state
+ * > fire::dispatches an action to the store
+ * > appear::runs the phantom engine
  */
 
-test("the 'fire' interface points to the phantomStore dispatch", () => {
-  const { fire } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    return ``;
-  }
-  expect(fire).toBe(phantomStore.fire);
-});
+describe("Phantom and its interfaces", () => {
+  test("the 'fire' interface points to the phantomStore", () => {
+    // init phantom
+    const { fire } = phantom(phantomStore, phantomComponent);
 
-test("the 'data' interface points to the phantomStore getState", () => {
-  const { data } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    return ``;
-  }
-  expect(data).toBe(phantomStore.data);
-});
+    function phantomComponent() {
+      return ``;
+    }
+
+    expect(fire).toBe(phantomStore.fire);
+  });
+
+  test("the 'data' interface points to the phantomStore", () => {
+    const { data } = phantom(phantomStore, phantomComponent);
+    function phantomComponent() {
+      return ``;
+    }
+    expect(data).toBe(phantomStore.data);
+  });
 
-test("the 'appear' interface returns an HTMLDivElement instance", () => {
-  const { appear } = phantom(phantomStore, phantomElement);
-  function phantomElement() {
-    return ``;
-  }
-  expect(appear() instanceof HTMLDivElement).toBe(true);
+  test("the 'appear' interface returns an HTMLDivElement instance", () => {
+    const { appear } = phantom(phantomStore, phantomComponent);
+    function phantomComponent() {
+      return ``;
+    }
+    expect(appear() instanceof HTMLDivElement).toBe(true);
+  });
 });
diff --git a/spec/xss.test.js b/spec/xss.test.js
deleted file mode 100644
index 4d2943b..0000000
--- a/spec/xss.test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import phantom from "../lib/phantom";
-import phantomStore from "./utils/phantomStore";
-
-/*
- * Test Phantom's HTML sanitization vs XSS injection
- */
-
-test("<img src='X' onerror='alert(0)'> is sanitized", () => {
-  const { appear } = phantom(phantomStore, phantomDOM);
-
-  function phantomDOM() {
-    return `
-      <img src='X' onerror='alert(0)'>
-    `;
-  }
-
-  const sanitized = `<img src="X">`;
-  const shouldBeSanitized = appear().innerHTML.trim();
-
-  expect(shouldBeSanitized).toBe(sanitized);
-});
-
-test("Attempting to render <iframe> throws an DOMException", () => {
-  const { appear } = phantom(phantomStore, phantomDOM);
-
-  function phantomDOM() {
-    return `
-      <iframe>
-    `; // iframe is a forbidden tag
-  }
-
-  expect(appear).toThrowError(DOMException);
-});

From e21dd5cdabe4577491c386016d4cd69b2083afc8 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:49:27 +0900
Subject: [PATCH 03/17] upgraded type tests

---
 spec/types.test.ts | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/spec/types.test.ts b/spec/types.test.ts
index 5281c5b..7e63377 100644
--- a/spec/types.test.ts
+++ b/spec/types.test.ts
@@ -1,29 +1,49 @@
-import { PhantomAction } from "./../src/types/phantomStore";
+import {
+  PhantomAction,
+  PhantomStore,
+  FireFunction,
+} from "./../src/types/phantomStore";
+import { PhantomComponent } from "./../src/types/phantom";
 import phantom, { createPhantomStore } from "../src/index";
 
+/*
+ * Test Phantom's type safety and exported types and interfaces
+ * This test is ran by the Typescript compiler
+ * Ignored by Jest.
+ */
+
 const initialData = {
-  0: "0",
+  zero: "0",
 };
 
 function reducer(state = initialData, action: PhantomAction) {
   switch (action.type) {
+    case 0:
+      return action.payload;
     default:
       return state;
   }
 }
 
-const phantomStore = createPhantomStore(reducer);
-
-const { fire, data, appear } = phantom(phantomStore, phantomComponent);
+const phantomStore: PhantomStore = createPhantomStore(reducer);
 
-function phantomComponent() {
-  const { title } = data();
-  fire({ type: 0, lol: 0 });
+const phantomComponent: PhantomComponent = () => {
+  const { zero } = data();
+  fire({ type: 0, payload: "test" });
   return `
       <div id="title-div">
-        <h1 data-phantom="${title}" id="title-h1">${title}</h1>
+        <h1 data-phantom="${zero}" id="title-h1">${zero}</h1>
       </div>
       `;
-}
+};
+
+const {
+  fire,
+  data,
+  appear,
+}: { fire: FireFunction; data: any; appear: () => HTMLElement } = phantom(
+  phantomStore,
+  phantomComponent
+);
 
 const appearShouldReturnHTMLElement: HTMLElement = appear();

From 009f4d08b0330c845920a9e66c6b8186dec539a8 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:50:03 +0900
Subject: [PATCH 04/17] swapped phantom parameters

---
 src/phantom.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/phantom.ts b/src/phantom.ts
index 6476c38..b2f5b1b 100644
--- a/src/phantom.ts
+++ b/src/phantom.ts
@@ -8,10 +8,10 @@ import {
 
 import phantomExorciser from "./phantomExorciser";
 
-function PHANTOM(
-  phantomStore: PhantomStore,
-  phantomComponent: PhantomComponent
-) {
+const PHANTOM: Phantom = (
+  phantomComponent: PhantomComponent,
+  phantomStore: PhantomStore
+) => {
   let phantomDOM: PhantomDOM = {
     test: {
       tagName: "div",
@@ -178,6 +178,6 @@ function PHANTOM(
     data: phantomStore.data,
     appear: launchDOM,
   };
-}
+};
 
-export default PHANTOM as Phantom;
+export default PHANTOM;

From 9180253f424bb3b42a48ef6b606857f25ec6ea69 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:50:16 +0900
Subject: [PATCH 05/17] upgrade phantom types

---
 src/types/phantom.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/types/phantom.ts b/src/types/phantom.ts
index 1072e81..039a4f9 100644
--- a/src/types/phantom.ts
+++ b/src/types/phantom.ts
@@ -1,8 +1,4 @@
-import {
-  PhantomStoreCreator,
-  PhantomStore,
-  FireFunction,
-} from "./phantomStore";
+import { PhantomStore, FireFunction } from "./phantomStore";
 
 export type PhantomElement = {
   tagName: string;
@@ -21,10 +17,9 @@ export type PhantomDOM = {
 };
 
 export type Phantom = {
-  (phantomStore: PhantomStore, phantomElement: PhantomComponent): {
+  (phantomElement: PhantomComponent, phantomStore: PhantomStore): {
     fire: FireFunction;
     data: () => any;
     appear: () => HTMLElement;
   };
-  createPhantomStore: PhantomStoreCreator;
 };

From 3f98fa71a1f63a8aa4973b7f21fff61073ee0781 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:58:15 +0900
Subject: [PATCH 06/17] adjusted tests w phantom parameter swap

---
 spec/dom.test.js           | 6 +++---
 spec/exorciser.test.js     | 4 ++--
 spec/interfaces.test.js    | 6 +++---
 spec/utils/phantomStore.js | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/spec/dom.test.js b/spec/dom.test.js
index affe62f..6fe25b1 100644
--- a/spec/dom.test.js
+++ b/spec/dom.test.js
@@ -8,7 +8,7 @@ import phantomStore from "./utils/phantomStore";
 describe("Phantom and the DOM", () => {
   test("The PHANTOM element is rendered and wraps around the application", () => {
     // init phantomComponent
-    const { appear } = phantom(phantomStore, phantomComponent);
+    const { appear } = phantom(phantomComponent, phantomStore);
     function phantomComponent() {
       return `
         <div>
@@ -25,7 +25,7 @@ describe("Phantom and the DOM", () => {
 
   test("DOM is updated after firing a state change", () => {
     // init phantomComponent
-    const { fire, data, appear } = phantom(phantomStore, phantomComponent);
+    const { fire, data, appear } = phantom(phantomComponent, phantomStore);
     function phantomComponent() {
       const { title } = data();
       return `
@@ -57,7 +57,7 @@ describe("Phantom and the DOM", () => {
 
   test("PHANTOM element is properly rendered", () => {
     // init phantomComponent
-    const { data, appear } = phantom(phantomStore, phantomComponent);
+    const { data, appear } = phantom(phantomComponent, phantomStore);
 
     function phantomComponent() {
       return `
diff --git a/spec/exorciser.test.js b/spec/exorciser.test.js
index 6841f9e..d3c3849 100644
--- a/spec/exorciser.test.js
+++ b/spec/exorciser.test.js
@@ -8,7 +8,7 @@ import phantomStore from "./utils/phantomStore";
 describe("The Phantom Exorciser", () => {
   test("<img src='X' onerror='alert(0)'> is sanitized", () => {
     // init phantom
-    const { appear } = phantom(phantomStore, phantomComponent);
+    const { appear } = phantom(phantomComponent, phantomStore);
 
     // define a component
     function phantomComponent() {
@@ -26,7 +26,7 @@ describe("The Phantom Exorciser", () => {
 
   test("Attempting to render <iframe> throws an DOMException", () => {
     // init phantom
-    const { appear } = phantom(phantomStore, phantomComponent);
+    const { appear } = phantom(phantomComponent, phantomStore);
 
     function phantomComponent() {
       return `
diff --git a/spec/interfaces.test.js b/spec/interfaces.test.js
index 28c29db..95b4d80 100644
--- a/spec/interfaces.test.js
+++ b/spec/interfaces.test.js
@@ -11,7 +11,7 @@ import phantomStore from "./utils/phantomStore";
 describe("Phantom and its interfaces", () => {
   test("the 'fire' interface points to the phantomStore", () => {
     // init phantom
-    const { fire } = phantom(phantomStore, phantomComponent);
+    const { fire } = phantom(phantomComponent, phantomStore);
 
     function phantomComponent() {
       return ``;
@@ -21,7 +21,7 @@ describe("Phantom and its interfaces", () => {
   });
 
   test("the 'data' interface points to the phantomStore", () => {
-    const { data } = phantom(phantomStore, phantomComponent);
+    const { data } = phantom(phantomComponent, phantomStore);
     function phantomComponent() {
       return ``;
     }
@@ -29,7 +29,7 @@ describe("Phantom and its interfaces", () => {
   });
 
   test("the 'appear' interface returns an HTMLDivElement instance", () => {
-    const { appear } = phantom(phantomStore, phantomComponent);
+    const { appear } = phantom(phantomComponent, phantomStore);
     function phantomComponent() {
       return ``;
     }
diff --git a/spec/utils/phantomStore.js b/spec/utils/phantomStore.js
index 22467f2..9279e6b 100644
--- a/spec/utils/phantomStore.js
+++ b/spec/utils/phantomStore.js
@@ -15,6 +15,6 @@ function reducer(state = data, action) {
   }
 }
 
-const store = createPhantomStore(reducer);
+const phantomStore = createPhantomStore(reducer);
 
-export default store;
+export default phantomStore;

From df17305c71c3218a28653be5fc1b2d878b4b1e69 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Wed, 22 Jul 2020 21:59:22 +0900
Subject: [PATCH 07/17] adjusted  w phantom param swap

---
 spec/types.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/types.test.ts b/spec/types.test.ts
index 7e63377..09686a1 100644
--- a/spec/types.test.ts
+++ b/spec/types.test.ts
@@ -42,8 +42,8 @@ const {
   data,
   appear,
 }: { fire: FireFunction; data: any; appear: () => HTMLElement } = phantom(
-  phantomStore,
-  phantomComponent
+  phantomComponent,
+  phantomStore
 );
 
 const appearShouldReturnHTMLElement: HTMLElement = appear();

From 8ecf2cf98f69ff6848e412e9f05ef8c46fbce654 Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Thu, 23 Jul 2020 09:30:33 +0900
Subject: [PATCH 08/17] add experiments folder to cleanables

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f49cc12..ad8d947 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     }
   },
   "scripts": {
-    "clean": "rimraf lib dist es types",
+    "clean": "rimraf lib dist es types x",
     "build": "rollup -c",
     "preversion": "npm test",
     "postversion": "git push origin --tags --no-verify",

From 1ff3e8642d671146f4d6d26123bfbdab8407173b Mon Sep 17 00:00:00 2001
From: sidiousvic <victor6rene@gmail.com>
Date: Thu, 23 Jul 2020 09:34:59 +0900
Subject: [PATCH 09/17] update tsconfig

---
 tsconfig.json | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 1573490..90bcf9d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,20 +2,19 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "lib": ["dom", "es2017"],
+    "lib": ["dom", "ESNext"],
+    "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "noEmit": false,
     "downlevelIteration": true,
     "sourceMap": true,
     "declaration": true,
     "rootDir": "src",
-    "declarationDir": "./types",
-    "baseUrl": "../",
+    "declarationDir": "types",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "experimentalDecorators": true,

From 4cb8079735bb727813700f47573b7e80b4e3c39e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Fri, 31 Jul 2020 16:41:51 +0900
Subject: [PATCH 10/17] Update CHANGELOG.md

---
 CHANGELOG.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2961875..b877670 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,17 @@ All notable changes to [Phantom](https://github.com/sidiousvic/phantom) will be
 
 ## [Unreleased]
 
-👻
+### 👻 v3.0.0
+- [x] Class—based
+- [x] TS—friendly
+- [x] Avoids innerHTML (XSS safe, no phantomExorciser)
+- [x] User can define component `state` and `children` via class methods.
+- [x] `render` method can define HTML as template strings, no JSX
+- [x] Use custom elements such as `<app><app/>` to wrap component markup
+- [x] Object reference to any component and its state and inner elements. `const {app, child} = Phantom(App)`
+- [x] Provides access to a component's state, e.g. `app.photos` would return App's photos state.
+- [x] **Experimental** potential to provide useful decorators for component methods, such as `@onMount`
+- [x] More goodies to come.
 
 <!-- ## [v0.0.0] — y.m.d
 [v0.0.0]: https://github.com/sidiousvic/phantom/compare/vz.z.z...v0.0.0 -->

From b243e96e79d4a5a8a6973fe6140dd64c72366f60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Sat, 1 Aug 2020 12:15:16 +0900
Subject: [PATCH 11/17] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b877670..5eed1b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ All notable changes to [Phantom](https://github.com/sidiousvic/phantom) will be
 - [x] Object reference to any component and its state and inner elements. `const {app, child} = Phantom(App)`
 - [x] Provides access to a component's state, e.g. `app.photos` would return App's photos state.
 - [x] **Experimental** potential to provide useful decorators for component methods, such as `@onMount`
-- [x] More goodies to come.
+- [x] Decorators to extend user defined classes into PhantomComponents
 
 <!-- ## [v0.0.0] — y.m.d
 [v0.0.0]: https://github.com/sidiousvic/phantom/compare/vz.z.z...v0.0.0 -->

From bbceb214d1bd4ac5891c9781d2dbb4696c566132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Sun, 2 Aug 2020 21:50:47 +0900
Subject: [PATCH 12/17] Update CHANGELOG.md

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5eed1b0..c9bd155 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,6 @@ All notable changes to [Phantom](https://github.com/sidiousvic/phantom) will be
 - [x] Object reference to any component and its state and inner elements. `const {app, child} = Phantom(App)`
 - [x] Provides access to a component's state, e.g. `app.photos` would return App's photos state.
 - [x] **Experimental** potential to provide useful decorators for component methods, such as `@onMount`
-- [x] Decorators to extend user defined classes into PhantomComponents
 
 <!-- ## [v0.0.0] — y.m.d
 [v0.0.0]: https://github.com/sidiousvic/phantom/compare/vz.z.z...v0.0.0 -->

From 19db0a48c393be8363260871973f7f7fd5eb756a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Sat, 22 Aug 2020 22:46:20 +0900
Subject: [PATCH 13/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 16e3180..8a8cc49 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 ### `npm i @sidiousvic/phantom`
 
-<img src="https://i.imgur.com/0o2ZFjo.gif" width="300">
+<img src="https://i.imgur.com/0o2ZFjo.gif" width="250">
 
 #### Phantom lets you build state—reactive UIs using raw HTML strings ejected from functions.
 

From 374a0313354ae572e284e9cfd633a4963a2b0242 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Tue, 3 Nov 2020 20:36:58 +0900
Subject: [PATCH 14/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8a8cc49..432a4ca 100644
--- a/README.md
+++ b/README.md
@@ -281,7 +281,7 @@ The Phantom engine integrates with a store and subscribes to state updates. It s
 
 #### 👩🏾‍🏭 Closer to the DOM _metal_
 
-Frameworks often abstract too much architecture and functionality out of the DOM. They make you yield too much to _their way_ of doing things—events, effects, styling, routing—you have to find the solutions withing _their_ ecosystem.
+Frameworks often abstract too much architecture and functionality out of the DOM. They make you yield too much to _their way_ of doing things—events, effects, styling, routing—you have to find the solutions within _that_ ecosystem.
 
 Phantom only helps with DOM rendering. It's convenient, but close enough to the DOM that you can integrate it with other solutions without using _fibers_, _combiners_ or _adapters_ of any kind.
 

From 21b005fb030f9f4d89eb62e259db3107578b65ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Tue, 23 Feb 2021 07:02:08 +0900
Subject: [PATCH 15/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 432a4ca..d0a079c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # **Phantom**
 
-![](https://github.com/sidiousvic/phantom/workflows/build/badge.svg) [![npm version](https://badge.fury.io/js/%40sidiousvic%2Fphantom.svg)](https://badge.fury.io/js/%40sidiousvic%2Fphantom) [![install size](https://badgen.net/packagephobia/install/@sidiousvic/phantom)](https://packagephobia.com/result?p=%40sidiousvic%2Fphantom)
+![](https://github.com/sidiousvic/phantom/workflows/build/badge.svg) (https://badge.fury.io/js/%40sidiousvic%2Fphantom) [![install size](https://badgen.net/packagephobia/install/@sidiousvic/phantom)](https://packagephobia.com/result?p=%40sidiousvic%2Fphantom)
 
 ### A state—reactive DOM rendering engine for building UIs. 👻
 

From e15fb5f35917d863d7e8b9134329a48fef41b787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20Ren=C3=A9=20Molina=20Rodr=C3=ADguez?=
 <sidiousvic@gmail.com>
Date: Tue, 23 Feb 2021 07:02:26 +0900
Subject: [PATCH 16/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d0a079c..749b320 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # **Phantom**
 
-![](https://github.com/sidiousvic/phantom/workflows/build/badge.svg) (https://badge.fury.io/js/%40sidiousvic%2Fphantom) [![install size](https://badgen.net/packagephobia/install/@sidiousvic/phantom)](https://packagephobia.com/result?p=%40sidiousvic%2Fphantom)
+![](https://github.com/sidiousvic/phantom/workflows/build/badge.svg) [![install size](https://badgen.net/packagephobia/install/@sidiousvic/phantom)](https://packagephobia.com/result?p=%40sidiousvic%2Fphantom)
 
 ### A state—reactive DOM rendering engine for building UIs. 👻
 

From 3d9900ea897f2178195a2dfc0a58cf8856b87188 Mon Sep 17 00:00:00 2001
From: Russell Pacheco <russ1487@gmail.com>
Date: Fri, 28 May 2021 10:03:30 +0900
Subject: [PATCH 17/17] fixed broken link

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 980a46f..07aec85 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,7 +8,7 @@
 
 ### Instructions
 
-`0` **Mind** the [Code of Conduct](./CODEOFCONDUCT.md)  
+`0` **Mind** the [Code of Conduct](./CODE_OF_CONDUCT.md)  
 `1` [**Fork** the repo](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) on GitHub  
 `2` [**Clone** the project](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github) to your machine  
 `3` [**Install** dependencies](https://docs.npmjs.com/cli/install) with `npm i`