Update README for event data passing

asnewman · Dec 26, 2024 · 179c842 · 179c842
1 parent c27b4ee
commit 179c842
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ The most basic application will look like this:
   <head>
     <meta charset="UTF-8" />
     <title>Example</title>
-    <script src="https://cdn.jsdelivr.net/gh/asnewman/ashjs@v0.0.4/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/asnewman/ashjs@v0.0.5/index.js"></script>
   </head>
   <body class="">
     <div id="ashjs"></div>
@@ -79,7 +79,7 @@ Please remember that I am still building and experimenting with ash.js. If you h
 
 ## Usage
 
-### Targetted re-renders
+### Targetted Re-renders
 
 The simplest way to re-render your UI is by calling the `render()` function. This will re-render the entire page based on the URL and the `routes` you've provided. However, re-rendering the entire page is not performant, so instead, you can pass in an `id` into `render` to selectively re-render a portion of the UI. Make sure you attach an `id` field into the element you need to re-render, like so:
 
@@ -100,6 +100,15 @@ The simplest way to re-render your UI is by calling the `render()` function. Thi
 }
 ```
 
+### Passing Events Data
+
+Pass data to event handlers like so:
+```
+-div()
+--"Current count: ${store.count}"
+--button(onclick='increaseCountBy("1")')
+``` 
+
 ## Development
 
 Build command: `esbuild main.js --bundle --outfile=index.js`
diff --git a/example.html b/example.html
@@ -14,9 +14,9 @@
             -div(id="wrapper")
             --div(id="count")
             ---"Current count: ${store.count}"
-            --button(onclick=increaseCountBy(1))
+            --button(onclick='increaseCountBy("1")')
             ---"Increase count"
-            --button(onclick=increaseCountBy(2))
+            --button(onclick='increaseCountBy("2")')
             ---"Increase count by two"
             --button(onclick="goToCountPage")
             ---"go to count page"
@@ -29,7 +29,8 @@
 
       const store = { count: 0 };
       const events = {
-        increaseCountBy: (data, render) => {
+        increaseCountBy: (rawData, render) => {
+          const data = JSON.parse(rawData)
           const byValue = parseInt(data);
           if (isNaN(byValue)) {
             return;

diff --git a/index.js b/index.js
@@ -184,7 +184,7 @@
           this.cursor++;
           continue;
         }
-        if (this.markup[this.cursor] === '"') {
+        if (this.markup[this.cursor] === '"' || this.markup[this.cursor] === "'") {
           this.tokenizeQuote();
           continue;
         }
@@ -206,9 +206,10 @@
       return this.result;
     }
     tokenizeQuote() {
+      const startingQuoteSymbol = this.markup[this.cursor];
       this.cursor++;
       const strArr = [];
-      while (this.markup[this.cursor] !== '"' && this.cursor < this.markup.length) {
+      while (this.markup[this.cursor] !== startingQuoteSymbol && this.cursor < this.markup.length) {
         strArr.push(this.markup[this.cursor]);
         this.cursor++;
       }
@@ -284,37 +285,28 @@
             throw new Error("Expected = after attribute name");
           }
           this.cursor++;
-          const isWord = this.tokens[this.cursor].type === 7 /* WORD */;
-          const isString = this.tokens[this.cursor].type === 5 /* STRING */;
-          if (!isWord && !isString) {
-            throw new Error("Expected attribute value after =");
-          }
-          const funcName = this.tokens[this.cursor].value;
-          this.cursor++;
-          const isLParen = this.tokens[this.cursor].type === 3 /* L_PAREN */;
-          if (isString || isWord && !isLParen) {
-            tagExpression.attributes[attributeName] = funcName;
-            continue;
-          }
-          this.cursor++;
-          const attributeValue = { name: "", arg: "" };
-          if (this.tokens[this.cursor].type !== 7 /* WORD */ && this.tokens[this.cursor].type !== 5 /* STRING */) {
-            console.log(this.tokens[this.cursor]);
-            throw new Error("Expect arg after (");
-          }
-          tagExpression.attributes[attributeName] = {
+          tagExpression.attributes[attributeName] = this.parseAttributeValue();
+        }
+      }
+      return tagExpression;
+    }
+    parseAttributeValue() {
+      const token = this.tokens[this.cursor];
+      this.cursor++;
+      if (token.type === 5 /* STRING */) {
+        const value = token.value;
+        if (value.includes("(") && value[value.length - 1] === ")") {
+          const parts = value.split("(");
+          return {
             type: 4 /* EVENT_FUNCTION */,
-            name: funcName,
-            arg: this.tokens[this.cursor].value
+            name: parts[0],
+            arg: parts[1].replace(")", "")
           };
-          this.cursor++;
-          if (this.tokens[this.cursor].type !== 4 /* R_PAREN */) {
-            throw new Error("Expected ) after function arg");
-          }
-          this.cursor++;
+        } else {
+          return token.value;
         }
       }
-      return tagExpression;
+      throw new Error("On event function must be a string. Instead found " + JSON.stringify(token));
     }
   };
   var Transformer = class {