added support for comments to virtual-dom

examples/puper vs Vue vs HTML.md

@@ -52,11 +52,7 @@
 
 - HTML
     ```html
-    <ul>
-        <li v-for="index in list" @click="removeItem(index)">
-            {{list[index]}}
-        </li>
-    </ul>
+    <ul></ul>
 
     <script>
         let list = [

nodemon.json

@@ -1,6 +1,6 @@
 {
     "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/nodemon.json",
-    "ignore": ["./**/src/**/*", "./test/out/**/*"],
+    "watch": ["./src/webpack-loader/**/*"],
     "ext": "js",
     "exec": "webpack",
     "env": {

packages/renderer/.gitignore

@@ -1,2 +1,2 @@
-types/
+./types/*
 out/

packages/renderer/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@pupperjs/renderer",
   "version": "1.0.0",
-  "description": "A reactive template engine based in Pug and Alpine.js",
+  "description": "The pupper.js frontend renderer and state handler.",
   "author": "Matheus Giovani <matheus@ad3com.com.br>",
   "license": "AGPL-3.0",
   "private": false,
   "main": "./out/",
   "scripts": {
     "watch": "npm-run-all -p -r watch:*",
-    "watch:ts": "tsc -watch"
+    "watch:ts": "cross-env NODE_OPTIONS=\"-r tsconfig-paths/register\" tsc -watch"
   },
   "dependencies": {
     "dom2hscript": "^0.2.3",
     "pug": "^3.0.2",
-    "virtual-dom": "^2.1.1"
+    "virtual-dom": "file:./../virtual-dom"
   },
   "types": "./types/",
   "devDependencies": {
     "@types/node": "^16.7.6",
     "@types/virtual-dom": "^2.1.1",
+    "cross-env": "^7.0.3",
     "debug": "^4.3.4",
     "tsc": "^2.0.3",
+    "tsconfig-paths": "^4.0.0",
     "typescript": "^4.4.2",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",

packages/renderer/src/core/vdom/Node.ts

@@ -1,12 +1,9 @@
-import { cloneNode } from "../../model/VirtualDom";
 import { Renderer } from "./Renderer";
 
-import VNode from "virtual-dom/vnode/vnode";
-import VText from "virtual-dom/vnode/vtext";
-
 import h from "virtual-dom/h";
 import diff from "virtual-dom/diff";
-import { patch, VNode } from "virtual-dom";
+import patch from "virtual-dom/patch";
+import VComment from "virtual-dom/vnode/vcomment";
 
 const debug = require("debug")("pupper:vdom:node");
 
@@ -44,6 +41,10 @@ export class PupperNode<TNode extends VirtualDOM.VTree = any> {
             // Initialize the properties
             this.tag = "tagName" in node ? node.tagName : "TEXT";
 
+            if (node instanceof VComment) {
+                this.tag = "!";
+            }
+
             if ("properties" in node) {
                 if ("attrs" in node.properties) {
                     this.attributes = Object.assign(this.attributes, node.properties.attrs);
@@ -265,7 +266,10 @@ export class PupperNode<TNode extends VirtualDOM.VTree = any> {
      * @returns 
      */
     public replaceWithComment() {
-        const comment = new PupperNode(new VNode("COMMENT", {}, []), this.parent, this.renderer);
+        // @ts-ignore
+        const comment = new PupperNode(h.c("!"), this.parent, this.renderer);
+
+        console.log(comment);
 
         this.replaceWith(comment);
 
@@ -444,6 +448,11 @@ export class PupperNode<TNode extends VirtualDOM.VTree = any> {
             return this.node;
         }
 
+        if (this.tag === "!") {
+            this.node = new VComment(this.text);
+            return this.node;
+        }
+
         const properties: Record<string, any> = {
             ...this.attributes,
             ...this.properties,

packages/renderer/src/model/VirtualDom.ts

@@ -23,7 +23,7 @@ export function cloneNode(node: VirtualDOM.VTree | string): VirtualDOM.VTree {
             return new VText(node.text);
         }
 
-        return new VText(node);
+        return new VText(String(node));
     }
 
     return h(node.tagName, node.properties, node.children);

packages/renderer/tsconfig.json

@@ -2,8 +2,12 @@
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "outDir": "./out",
+        "baseUrl": "./src",
         "declarationDir": "./types",
+        "paths": {
+            "@/*": ["./*"]
+        }
     },
-    "include": ["./src/**/*.ts"],
+    "include": ["./src/*.ts", "./src/types/**/*.d.ts"],
     "exclude": ["node_modules"],
 }

webpack.config.js

@@ -21,11 +21,5 @@ module.exports = {
                 use: ["source-map-loader"],
             },
         ]
-    },
-    resolve: {
-        alias: {
-            "pupper.js": __dirname + "/out/"
-        }
-    },
-    mode: "development"
+    }
 }