updating example and adding canvas

rodydavis · May 22, 2021 · 9d8b41b · 9d8b41b
1 parent 6838ca5
commit 9d8b41b
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 0.5.0
+
+- Fixing render call to swap nodes
+- Updating example to include canvas
+
 ## 0.4.5
 
 - Adding examples for css styles

diff --git a/README.md b/README.md
@@ -180,12 +180,12 @@ https://www.w3schools.com/TAGS/default.ASP
 ### Class Approach
 
 ```js
-import { ObjectDom, Div, H1, Button, Row, render } from "object-dom";
+import { ObjectDom, Div, H1, Button, Row, Canvas } from "object-dom";
 
 export class MyApp extends ObjectDom {
   render = () => {
     return new Div({
-      children: [new H1({ text: "Counter Example" }), new Counter()],
+      children: [new H1({ text: "Counter Example" }), new Counter(), new CanvasExample()],
     });
   };
 }
@@ -226,6 +226,27 @@ class Counter extends ObjectDom {
   }
 }
 
+class CanvasExample extends ObjectDom {
+  render() {
+    return new Canvas({
+      style: { width: "200px", height: "200px" },
+      onCreate: (node) => {
+        const canvas = node as HTMLCanvasElement;
+        const ctx = canvas.getContext("2d")!;
+
+        // Create gradient
+        var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
+        grd.addColorStop(0, "red");
+        grd.addColorStop(1, "white");
+
+        // Fill with gradient
+        ctx.fillStyle = grd;
+        ctx.fillRect(10, 10, 150, 80);
+      },
+    });
+  }
+}
+
 render(new MyApp(), document.body.querySelector("#root"));
 ```
 

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/my-app.ts b/demo/src/my-app.ts
@@ -1,10 +1,10 @@
 // @ts-ignore
-import { ObjectDom, Div, H1, Button, Row } from "object-dom";
+import { ObjectDom, Div, H1, Button, Row, Canvas } from "object-dom";
 
 export class MyApp extends ObjectDom {
   render = () => {
     return new Div({
-      children: [new H1({ text: "Counter Example" }), new Counter()],
+      children: [new H1({ text: "Counter Example" }), new Counter(), new CanvasExample()],
     });
   };
 }
@@ -45,23 +45,23 @@ class Counter extends ObjectDom {
   }
 }
 
-// class CanvasExample extends ObjectDom {
-//   render() {
-//     return new Canvas({
-//       style: { width: "200px", height: "200px" },
-//       onCreate: (node) => {
-//         const canvas = node as HTMLCanvasElement;
-//         const ctx = canvas.getContext("2d")!;
+class CanvasExample extends ObjectDom {
+  render() {
+    return new Canvas({
+      style: { width: "200px", height: "200px" },
+      onCreate: (node) => {
+        const canvas = node as HTMLCanvasElement;
+        const ctx = canvas.getContext("2d")!;
 
-//         // Create gradient
-//         const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
-//         grd.addColorStop(0, "red");
-//         grd.addColorStop(1, "white");
+        // Create gradient
+        var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
+        grd.addColorStop(0, "red");
+        grd.addColorStop(1, "white");
 
-//         // Fill with gradient
-//         ctx.fillStyle = grd;
-//         ctx.fillRect(10, 10, 150, 80);
-//       },
-//     });
-//   }
-// }
+        // Fill with gradient
+        ctx.fillStyle = grd;
+        ctx.fillRect(10, 10, 150, 80);
+      },
+    });
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "object-dom",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Declarative dom with 1:1 mapping of objects and tags, typed css, reactive updates and no bundler needed.",
   "main": "build/object-dom.umd.js",
   "module": "build/object-dom.es.js",

diff --git a/src/base.ts b/src/base.ts
@@ -31,11 +31,7 @@ export interface NodeProps<T extends HTMLElement = HTMLElement> extends GlobalAt
   children?: NodeArray;
   attributes?: NodeAttrs;
   events?: NodeEvents;
-  // onCreate?: ((node: HTMLElement) => void) | undefined;
-}
-
-export interface ObjectDomProps<T extends HTMLElement = HTMLElement> extends NodeProps<T> {
-  node: T;
+  onCreate?: ((node: HTMLElement) => void) | undefined;
 }
 
 export abstract class ObjectDom<T extends HTMLElement = HTMLElement> {
@@ -56,14 +52,9 @@ export class GlobalDom<T extends HTMLElement> extends ObjectDom<T> {
   _node: HTMLElement;
   _events: { [key: string]: NodeEvent[] } = {};
 
-  constructor(props: ObjectDomProps<T>) {
+  constructor(public props: NodeProps<T>) {
     super();
-    // if (props.onCreate !== undefined) {
-    //   this.onCreate = (n) => {
-    //     props.onCreate!(n);
-    //   };
-    // }
-    this._node = props.node;
+    this._node = props.node!;
     if (props.text) this.text = props.text;
     this.children = [...(props?.children ?? [])];
     this.attributes = {
@@ -252,9 +243,9 @@ export function generateNode(source: GlobalDom<HTMLElement>) {
     if (child instanceof ObjectDom) {
       let childNode = generateNode(child.render());
       child.update = () => {
-        if (childNode) childNode.remove();
-        childNode = generateNode(child.render());
-        result.appendChild(childNode);
+        const _newNode = generateNode(child.render());
+        result?.replaceChild(_newNode, childNode);
+        childNode = _newNode;
       };
       result.appendChild(childNode);
     } else {
@@ -285,6 +276,9 @@ export function generateNode(source: GlobalDom<HTMLElement>) {
       result.addEventListener(type, event.callback, event.options);
     }
   }
+  if (source.props.onCreate) {
+    source.props.onCreate(result);
+  }
   return result;
 }
 

diff --git a/src/transformers/render.ts b/src/transformers/render.ts
@@ -6,9 +6,9 @@ import type { ObjectDom } from "../base";
 export function render(source: ObjectDom<HTMLElement>, target: HTMLElement = document.body) {
   let node = source.render().node;
   source.update = () => {
-    if (node) node.remove();
-    node = source.render().node;
-    target.appendChild(node);
+    const _newNode = source.render().node;
+    target.parentNode?.replaceChild(_newNode, node);
+    node = _newNode;
   };
   target.appendChild(node);
 }
diff --git a/types/base.d.ts b/types/base.d.ts
@@ -14,9 +14,7 @@ export interface NodeProps<T extends HTMLElement = HTMLElement> extends GlobalAt
     children?: NodeArray;
     attributes?: NodeAttrs;
     events?: NodeEvents;
-}
-export interface ObjectDomProps<T extends HTMLElement = HTMLElement> extends NodeProps<T> {
-    node: T;
+    onCreate?: ((node: HTMLElement) => void) | undefined;
 }
 export declare abstract class ObjectDom<T extends HTMLElement = HTMLElement> {
     abstract render(): GlobalDom<T>;
@@ -28,6 +26,7 @@ interface NodeEvent {
     options: boolean | AddEventListenerOptions | undefined;
 }
 export declare class GlobalDom<T extends HTMLElement> extends ObjectDom<T> {
+    props: NodeProps<T>;
     attributes: {
         [key: string]: NodeAttr<string | boolean | number>;
     };
@@ -39,7 +38,7 @@ export declare class GlobalDom<T extends HTMLElement> extends ObjectDom<T> {
     _events: {
         [key: string]: NodeEvent[];
     };
-    constructor(props: ObjectDomProps<T>);
+    constructor(props: NodeProps<T>);
     addAttr(key: string, value: PossibleAttr): void;
     setAttr(key: string, value: AttrType): void;
     addStyle(key: string, value: PossibleStyle): void;