add tests for vdom jsx parser and fix reconciliation bug

amirgamil · amirgamil · commit f08cab0586b1 · 2021-06-18T23:52:01.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 progress/
 node_modules/
 package-lock.json
-data/
+data/
+dev/
diff --git a/playground/index.html b/playground/index.html
@@ -4,7 +4,9 @@
     </head>
 
     <body>
+        <script src="../src/vdom.js"></script>
         <script src="../src/poseidon.js"></script>
+        <!-- Will eventually replace with one script tag but to prevent constantly copying--> 
         <script src="./main.js"></script>
     </body>
 </html>
diff --git a/playground/main.js b/playground/main.js
@@ -73,16 +73,6 @@ class Form extends Component {
         console.log(this.store);
     }
 
-    styles() {
-        return css`
-            div {
-                background-color: blue;
-                margin: 0;
-                padding-bottom: 10px;
-            }
-        `
-    }
-
     create() {
          return {tag: "div",
                  children: [
@@ -123,20 +113,63 @@ class App extends Component {
         console.log(this.node);
     }
 
+    styles() {
+        return css`
+            div {
+                background-color: yellow;
+                margin: 0;
+                padding-bottom: 10px;
+            }
+        `
+    }
+
     create() {
-        return {
-            tag: "div",
-            attributes: {style: "color: green; "} ,
-            children: [
-                {tag: "h1", 
-                children: [
-                    {
-                        tag: "TEXT_ELEMENT",
-                        nodeValue: "Hello world"
-                    }
-                ]
-                },
-                this.form.node]
+        return vdom`<div className = "test" id ="oi">
+                <h1> Hello world </h1>
+                <img src="../docs/gcd.png />
+                <br/>
+                <input value = "" placeholder = "cheeky" />
+                <p> This looks and feels like <strong>HTML and JSX</strong></p>
+                <a href = "https://google.com">Link</a>
+                <div>
+                    <ul>
+                        <li> Hello </li>
+                        <li> What's up </li>
+                    </ul>
+                    <table style="width:100%">
+                        <tr>
+                            <th>Firstname</th>
+                            <th>Lastname</th>
+                            <th>Age</th>
+                        </tr>
+                        <tr>
+                            <td>Jill</td>
+                            <td>Smith</td>
+                            <td>50</td>
+                        </tr>
+                        <tr>
+                            <td>Eve</td>
+                            <td>Jackson</td>
+                            <td>94</td>
+                        </tr>
+                    </table>
+                </div>
+                </div>`
+        
+            // {
+            // tag: "div",
+            // attributes: {style: "color: green; "} ,
+            // children: [
+            //     {tag: "h1", 
+            //     children: [
+            //         {
+            //             tag: "TEXT_ELEMENT",
+            //             nodeValue: "Hello world"
+            //         }
+            //     ]
+            //     },
+            //     this.form.node]
+            // }
                 // {tag: "button",
                 //  children: [
                 //      {
@@ -145,7 +178,6 @@ class App extends Component {
                 //      }
                 //  ],
                 //  events: {"click": () => this.render()}}]
-        } 
     }
 }
 
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,27 @@
 //eventually put stuff here to require as entry to module 
 const {
-    Component
-} = require("./poseidon.js")
+    Component,
+    List,
+    Atom,
+    ListOf,
+    CollectionStore,
+    CollectionStoreOf,
+    Router,
+    css
+} = require("./poseidon.js")
+
+const {
+    vdom
+} = require("./vdom.js");
+
+const exports = {
+    Component,
+    List,
+    Atom,
+    ListOf,
+    CollectionStore,
+    CollectionStoreOf,
+    Router,
+    css,
+    vdom 
+} = module.exports;
diff --git a/src/poseidon.js b/src/poseidon.js
@@ -11,8 +11,7 @@ const printDOMTree = (node, tabs = "") => {
         return prettyPrint;
     }
 }
- 
- 
+
 function updateDOMProperties(node, prevVNode, nextVNode) {
     //if this is a text node, update the text value
     if (prevVNode.tag == "TEXT_ELEMENT" && nextVNode.tag == "TEXT_ELEMENT") {
@@ -22,7 +21,11 @@ function updateDOMProperties(node, prevVNode, nextVNode) {
     //remove attributes
     Object.keys(prevVNode.attributes || [])
                 .forEach((key, _) => {
-                    node.removeAttribute(key);
+                    //for some special cases like className, need to access the property as a key
+                    //otherwise removeAttribute will not work
+                    //TODO: potentially change this into a map, are there other attributes this need to
+                    //be done for?
+                    key === 'className' ? node.removeAttribute('class') : node.removeAttribute(key);
         });
 
     //remove old event listeners 
@@ -35,6 +38,7 @@ function updateDOMProperties(node, prevVNode, nextVNode) {
     //add attributes
     Object.keys(nextVNode.attributes || [])
             .forEach((key, _) => {
+                //NOTE className not class
                 node[key] = nextVNode.attributes[key];
         });
 
@@ -148,7 +152,7 @@ const renderVDOM = (newVNode, prevVNode, nodeDOM) => {
     var node = normalize(null);
     //same node, only update properties
     if (sameType) {
-        //means we have an element loaded in a list node
+        //means we have an element loaded in a list node since list nodes hand over fully rendered DOM nodes
         if (newVNode.tag === undefined) {
             updateQueue.push({op: REPLACE, details: {dom: nodeDOM, previous: prevVNode, node: newVNode}});
             node = newVNode;
@@ -176,15 +180,26 @@ const renderVDOM = (newVNode, prevVNode, nodeDOM) => {
         //note if the DOM node is undefined, then that node has already been handled i.e. removed or added in a previous iteration
         if (nodeDOM) {
             updateQueue.push({op: DELETE, details: {parent: nodeDOM.parentNode, node: nodeDOM}});
+            //Note we want to to return here (i.e. not perform any work yet) to avoid removing DOM nodes before 
+            //we have processed all of the children (i.e. sibilings of the current node). This means we defer the `performWork` operation
+            //to be called by the parent. Note there is no scenario where we would encounter
+            //an empty newVNode that reaches this block without being called by a parent.
+            return node;
         }
     } else if (prevVNode.tag == "") {
-        //  create new node
+        //Double check: is this bit already implemented?
+        //-----------
+        //uses a similar heuristic to the React diffing algorithm
+        //if the nodes are dif create new node
+        //-----------
+        //create new node
         node = instantiate(newVNode);
         if (nodeDOM) {
             //return child, parent will handle the add to the queue
             return node;
         }
         updateQueue.push({op: APPEND, details: {parent: null, node: node}}); 
+        
     } else {
         //node has changed, so replace
         updateQueue.push({op: REPLACE, details: {dom: nodeDOM, previous: prevVNode, node: newVNode}});
@@ -282,7 +297,6 @@ class Component {
     //helper method for adding component-defined styles 
     addStyle() {
         //write own css parser
-        //guide e.g. https://medium.com/@benjamin.d.johnson/create-a-css-parser-using-template-literals-md-3905905a569e
         const style = document.createElement('style');
         const userStyles = this.styles();
         if (userStyles) {
@@ -304,7 +318,6 @@ class Component {
             } else {
                 cssNode.appendChild(document.createTextNode(text));
             }
-            console.log(cssNode);
             document.getElementsByTagName('head')[0].appendChild(cssNode);
         }
     }
@@ -337,12 +350,15 @@ class Component {
 class Listening {
     constructor() {
         this.handlers = new Set();
+        //represent the current state of the data
+        //used to determine when a change has happened and execute the corresponding handler
+        this.state = null;
     }
-    //represent the current state of the data
-    //used to determine when a change has happened and execute the corresponding handler
-    state; 
     //return summary of state
-    summarize;
+    summarize() {
+        return null;
+    }
+
     //used to listen to and execute handlers on listening to events
     fire() {
         this.handlers.forEach(handler => {
@@ -590,12 +606,19 @@ class Router {
     //connects patterns to callable objects (components or DOM elements to be rendered)
 }
 
-module.exports = {
+const exposed = {
     Component,
     List,
     Atom,
     ListOf,
     CollectionStore,
     CollectionStoreOf,
-    Router
-}
+    Router,
+    css
+}
+
+if (typeof window === 'object') {
+    Object.assign(window, exposed)
+} else {
+    module.exports = exposed;
+}
diff --git a/src/vdom.js b/src/vdom.js
diff --git a/tests/test6jsxparser.js b/tests/test6jsxparser.js

-Original file line number
+Diff line change
 +//jsx like parser written in Javascript for Poseidon's vdom
++
 +//TODO:
 +//Interpolate all template literals with string values and store them in a map
 +//Then build node out, when a string is encountered, go retrieve that value as the tree is being constructed
 +//makes the algorithm more efficient since only one traversal is done
++
++
 +//Reader class to abstract lexing and scanning of a vdom template string
 +class Reader {
 +    constructor(string) {
 +        this.string = string;
 +        this.index = 0;
 +        this.length = string.length;
 +        //set of special characters to return when getNextWord is called
 +        this.specialCharacters = new Set([' ', '=', '<', '>']);
 +    }
++
 +    peek() {
 +        if (this.index < this.length - 1) {
 +            return this.string[this.index + 1];
 +        }
 +        return null;
 +    }
++
 +    //gets the next word, keeps moving forward until until it encounters one of the special tags or a closing '/>'
 +    getNextWord() {
 +        var currIndex = this.index;
 +        var finalIndex = currIndex;
 +        var quoteCount = 0;
 +        while (!this.specialCharacters.has(this.currentChar)) {
 +            //if we have quotes, skip them
 +            //TODO: add more robust type checking we have the same type of quote
 +            if (this.currentChar === '"' || this.currentChar === "'") {
 +                //adjust starting point of returned work if we encounter an opening quote
 +                if (quoteCount === 0) {
 +                    quoteCount++;
 +                    currIndex = this.index + 1;
 +                } else if (quoteCount === 1) {
 +                    finalIndex = this.index - 1;
 +                    break;
 +                }
 +            } else if (this.currentChar === '/') {
 +                //handle special case where next word might be adjacent to a /> tag so return the word before
 +                //this tag
 +                //otherwise, since this is
 +                if (this.peek() === '>') break
 +            } else {
 +                finalIndex = this.index;
 +            }
 +            this.consume();
 +        }
 +        //skip any spaces for future
 +        this.skipSpaces();
 +        return this.string.substring(currIndex, finalIndex + 1);
 +    }
++
 +    get currentChar() {
 +        return this.string[this.index];
 +    }
++
 +    //skip all white spaces and new line characters
 +    skipSpaces() {
 +        while (this.currentChar === " " || this.currentChar === '\n') {
 +            this.consume();
 +        }
 +    }
++
 +    consume() {
 +        return this.string[this.index++];
 +    }
++
 +    //combination of consume and skipping white space since this pattern crops up frequently
 +    skipToNextChar() {
 +        this.consume();
 +        this.skipSpaces();
 +    }
++
 +    //helper method to keep moving pointer until the current char is the provided one
 +    getUntilChar(char) {
 +        const currIndex = this.index;
 +        var finalIndex = currIndex;
 +        while (this.currentChar != char) {
 +            this.consume();
 +            finalIndex = this.index;
 +        }
 +        return this.string.substring(currIndex, finalIndex);
 +    }
++
 +    //keep moving pointer forward until AFTER we encounter a char (i.e pointer now points to character after matching provided)
 +    skipPastChar(char) {
 +        var text = this.getUntilChar(char);
 +        text += this.consume();
 +        this.skipSpaces();
 +        return text;
 +    }
 +}
++
++
 +//recursively loop checking children
 +const parseChildren = (closingTag, reader) => {
 +    try {
 +        let children = [];
 +        //check in the scenario where we have an empty HTML node with no children
 +        if (foundClosingTag(closingTag, reader)) {
 +            return children;
 +        }
 +        reader.skipSpaces();
 +        var nextChild = parseTag(reader);
++
 +        while (nextChild) {
 +            children.push(nextChild);
 +            if (foundClosingTag(closingTag, reader)) break;
 +            nextChild = parseTag(reader);
 +        }
 +        return children;
 +    } catch (e) {
 +        throw e;
 +    }
 +}
++
++
 +//helper method to check if we've encountered the closing tag of a node
 +//return true if we have and false if we have not encountered the closing tag
 +const foundClosingTag = (closingTag, reader) => {
 +    if (reader.currentChar === '<' && reader.peek() === '/') {
 +        //if we encounter closing tag i.e. '</' then end parsing of this tag
 +        reader.skipPastChar('/');
 +        const closingTag = reader.getNextWord();
 +        reader.skipPastChar('>');
 +        if (closingTag !== closingTag) throw 'Error parsing the body of an HTML node!'
 +        return true;
 +    }
 +    return false
 +}
++
++
 +//parse a complete HTML node tag from opening <> to closing </>
 +//TODO: handle special cases like </br> and img
 +const parseTag = (reader) => {
 +    //if the current char is not a < tag, then either we've finished parsing valid tags or this is a text node
 +    if (reader.currentChar !== '<') {
 +        const word = reader.getUntilChar('<');
 +        if (!word) return null;
 +        //otherwise, we've found a text node!
 +        return {tag: "TEXT_ELEMENT", nodeValue: word};
 +    } else if (reader.peek() === '/') {
 +        //just encountered a '</' indicating a closing tag so return
 +        return null;
 +    }
 +    //skip < tag
 +    reader.consume();
 +    const name = reader.getNextWord();
 +    const node = {
 +        tag: name,
 +        children: [],
 +        attributes: {},
 +        events: {}
 +    }
 +    //boolean variable to handle special children and not parse the children
 +    var specialChar = false;
 +    //Match key-value pairs in initial node definition (i.e. from first < to first > tag, recall closing node tag is </)
 +    while (reader.currentChar !== '>') {
 +        const key = reader.getNextWord();
 +        //handle special self-closing tags like <br/> and <img />
 +        if (key === '/' && reader.peek() === '>') {
 +            reader.consume();
 +            specialChar = true;
 +            break;
 +        }
 +        //key on its own is still valid, so check if we need to map to a specific value
 +        if (reader.currentChar !== '=') {
 +            node.attributes[key] = null;
 +            continue;
 +        }
 +        //skip equal sign
 +        reader.skipToNextChar();
 +        //get value associated with this key, TODO: not sure about this bit, what if mapping to a non-template literal like a variable
 +        const value = reader.getNextWord();
 +        //if the key starts with an on, this is an event, so we should save it accordingly
 +        if (key.startsWith("on")) {
 +            node.events[key] = value;
 +        } else {
 +            //otherwise, this is an attribute so add it there
 +            node.attributes[key] = value;
 +        }
 +    }
 +    //skip closing >
 +    //note we don't skip any white-spaces here to perserve integraity when DOM rendering as the vdom was actual html
 +    //more info here- TODO:???
 +    reader.skipToNextChar();
 +    //match actual body of the node
 +    if (!specialChar) node.children = parseChildren(name, reader);
 +    reader.skipSpaces();
 +    //return JSON-formatted vdom node
 +    return node;
 +}
++
++
 +//take advantage of Javascript template literals which gives us a string and a list of interpolated values
 +const vdom = (templates, ...values) => {
 +    //first pass over templates to create JSON AST
 +    //HTML parsing
 +    const reader = new Reader(templates[0]);
 +    //Switch on different tokens
 +    //recursively parse children
 +    try {
 +        for (;;) {
 +            reader.skipSpaces();
 +            switch (reader.currentChar) {
 +                case '<':
 +                    //opening tag, do stuff
 +                    return parseTag(reader);
++
 +                    //loop and map keys to values
 +                    //then recurse on children
 +                case '>':
 +                    //closing tag, do other stuff
 +                case '{':
 +                    //other stuff
 +                case '}':
 +                    //other other stuff
++
 +            }
 +        }
 +    } catch (e) {
 +        console.error(e);
 +    }
++
 +    //populate this
 +    let tag;
 +    let children = [];
 +    let events = [];
 +    let attributes = {};
 +}
++
++
 +//expose reader initially for debugging and testing purposes
 +//named exposedV so different from poseidon since for now have two script tags for the playground
 +const exposedV = {
 +    vdom,
 +    parseTag,
 +    Reader
 +}
 +module.exports = exposedV;
-Original file line number
+Diff line change
 +const {
 +    Component,
 +    List,
 +    Atom,
 +    ListOf,
 +    CollectionStore,
 +    CollectionStoreOf,
 +    css
 +} = require("../src/poseidon.js");
++
 +const {
 +    vdom
 +} = require("../src/vdom.js")
++
++
 +class App extends Component {
 +    init(res) {
 +        this.data = res;
 +    }
 +    styles() {
 +        return css`
 +        .stuff {
 +            margin: 0;
 +        }
 +        `
 +    }
 +    create(res) {
 +        return res;
 +    }
 +}
 +const test = require('ava');
 +const browserEnv = require("browser-env");
 +browserEnv(["document"]);
++
 +test.beforeEach(t => {
 +    let root = document.getElementById("root");
 +    if (!root) {
 +      root = document.createElement("div");
 +      root.id = "root";
 +      document.body.appendChild(root);
 +    }
 +    t.context.root = root;
 +});
++
 +test('testHTMLElementParsing', t => {
 +    const root = t.context.root;
 +    //div with nested elements
 +    const testDiv = vdom`
 +    <div className = "stuff" id = "smt">
 +        <h1> Hello </h1>
 +        <p> What's popping my fellow friend </p>
 +    </div>
 +    `
 +    const app = new App(testDiv);
 +    root.appendChild(app.node);
 +    t.is(root.innerHTML, `<div class="stuff" id="smt"><h1>Hello </h1><p>What's popping my fellow friend </p></div>`);
++
 +    //div with list elements
 +    //intentionally use inconsistent spacing to make sure parser works in all cases
 +    const testList = vdom`
 +        <div className="wrapper">
 +            <ul>
 +                <li>Item 1</li>
 +                <li>Item 2</li>
 +                <li>Item 3</li>
 +            </ul>
 +        </div>
 +    `
 +    app.render(testList);
 +    t.is(root.innerHTML, `<div class="wrapper"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>`);
++
 +    //test special self-closing HTML tags
 +    const selfClosing = vdom`
 +            <div>
 +                <img src="../docs/gcd.png" />
 +                <p> Hello is a break working </p>
 +                <br/>
 +                <input />
 +                <p> Yes it's working</p>
 +            </div>`;
 +    app.render(selfClosing);
 +    t.is(root.innerHTML, `<div><img src="../docs/gcd.png"><p>Hello is a break working </p><br><input><p>Yes it's working</p></div>`)
 +    console.log(app.vdom);
 +    //more HTML tags, strong and a
 +    const strongAndA =  vdom`
 +                <div>
 +                    <p>This looks and feels like <strong>HTML and JSX</strong></p>
 +                    <a href = "https://google.com">Link</a>
 +                </div>
 +                `
 +    app.render(strongAndA);
 +    console.log(root.innerHTML);
 +    t.is(root.innerHTML, `<div><p>This looks and feels like <strong>HTML and JSX</strong></p><a href="https://google.com">Link</a></div>`)
 +});