ripple 0.2.57 → 0.2.59

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.57",
+  "version": "0.2.59",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/1-parse/index.js

@@ -293,7 +293,7 @@ function RipplePlugin(config) {
         node.block = this.parseBlock();
         node.handler = null;
 
-		if (this.value === 'pending') {
+        if (this.value === 'pending') {
           this.next();
           node.pending = this.parseBlock();
         } else {
@@ -432,7 +432,9 @@ function RipplePlugin(config) {
               // '}'
               if (
                 ch === 125 &&
-                (this.#path.length === 0 || this.#path.at(-1)?.type === 'Component')
+                (this.#path.length === 0 ||
+                  this.#path.at(-1)?.type === 'Component' ||
+                  this.#path.at(-1)?.type === 'Element')
               ) {
                 return original.readToken.call(this, ch);
               }
@@ -487,8 +489,10 @@ function RipplePlugin(config) {
             if (attr.name.type === 'JSXIdentifier') {
               attr.name.type = 'Identifier';
             }
-            if (attr.value.type === 'JSXExpressionContainer') {
-              attr.value = attr.value.expression;
+            if (attr.value !== null) {
+              if (attr.value.type === 'JSXExpressionContainer') {
+                attr.value = attr.value.expression;
+              }
             }
           }
         }

package/src/compiler/phases/2-analyze/index.js

@@ -409,7 +409,7 @@ const visitors = {
 
                 attr.metadata.delegated = delegated_event;
               }
-            } else {
+            } else if (attr.value !== null) {
               visit(attr.value, state);
             }
           }

package/src/compiler/phases/3-transform/index.js

@@ -470,6 +470,11 @@ const visitors = {
           if (attr.name.type === 'Identifier') {
             const name = attr.name.name;
 
+            if (attr.value === null) {
+              handle_static_attr(name, true);
+              continue;
+            } 
+
             if (attr.value.type === 'Literal' && name !== 'class') {
               handle_static_attr(name, attr.value.value);
               continue;

package/tests/__snapshots__/basic.test.ripple.snap

@@ -1,5 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`basic > handles boolean attributes with no prop value provides 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <button
+      disabled=""
+    >
+      Button
+    </button>
+    <input
+      checked=""
+      type="checkbox"
+    />
+  </div>
+  
+</div>
+`;
+
 exports[`basic > render semi-dynamic text 1`] = `
 <div>
   <div>

package/tests/__snapshots__/for.test.ripple.snap

@@ -1,5 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`for statements > correctly handles intermediate statements in for block 1`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles intermediate statements in for block 2`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    <div>
+      <div>
+        4
+      </div>
+      <div>
+        4
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
 exports[`for statements > render a simple dynamic array 1`] = `
 <div>
   <!---->

package/tests/basic.test.ripple

@@ -1246,4 +1246,16 @@ describe('basic', () => {
 		flushSync();
 		expect(countSpan.textContent).toBe('1');
 	});
+
+	it('handles boolean attributes with no prop value provides', () => {
+		component App() {
+			<div class="container">
+				<button onClick={() => console.log("clicked!")} disabled>{"Button"}</button>
+				<input type="checkbox" checked />
+			</div>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
 });

package/tests/for.test.ripple

@@ -56,4 +56,33 @@ describe('for statements', () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it('correctly handles intermediate statements in for block', () => {
+		component App() {
+			const items = new TrackedArray(1, 2, 3);
+
+			<div>
+				for (const item of items) {
+					<div>
+						<div>{item}</div>
+						const some_text = item;
+						<div>{some_text}</div>
+					</div>
+				}
+			</div>
+
+			<button onClick={() => items.push(items.length + 1)}>{"Add Item"}</button>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+		
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+	})
 });