From 5be9bc4d58af92d88674894edb228cca6664263f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:00:28 +0000
Subject: [PATCH 1/7] Initial plan


From 020699bad7f805e274f59822eba722eb992793b7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:03:09 +0000
Subject: [PATCH 2/7] Add comprehensive tests for defineComponent() API

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 tests/component.test.ts | 166 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 165 insertions(+), 1 deletion(-)

diff --git a/tests/component.test.ts b/tests/component.test.ts
index 89937e23..31c4c819 100644
--- a/tests/component.test.ts
+++ b/tests/component.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'bun:test';
-import { component, html } from '../src/component/index';
+import { component, defineComponent, html } from '../src/component/index';
 
 describe('component/html', () => {
   it('creates HTML from template literal', () => {
@@ -598,3 +598,167 @@ describe('component/component', () => {
     el.remove();
   });
 });
+
+describe('component/defineComponent', () => {
+  it('returns an HTMLElement subclass', () => {
+    const tagName = `test-define-class-${Date.now()}`;
+    const ElementClass = defineComponent(tagName, {
+      props: {},
+      render: () => html`<div>Test</div>`,
+    });
+
+    expect(ElementClass).toBeDefined();
+    expect(typeof ElementClass).toBe('function');
+    expect(ElementClass.prototype instanceof HTMLElement).toBe(true);
+  });
+
+  it('returned class can be registered with custom tag name', () => {
+    const originalTagName = `test-define-original-${Date.now()}`;
+    const customTagName = `test-define-custom-${Date.now()}`;
+    
+    const ElementClass = defineComponent(originalTagName, {
+      props: {},
+      render: () => html`<div>Test</div>`,
+    });
+
+    // Register with a different tag name
+    customElements.define(customTagName, ElementClass);
+    
+    expect(customElements.get(customTagName)).toBe(ElementClass);
+    
+    const el = document.createElement(customTagName);
+    document.body.appendChild(el);
+    
+    expect(el.shadowRoot).toBeDefined();
+    expect(el.shadowRoot?.innerHTML).toContain('Test');
+    
+    el.remove();
+  });
+
+  it('returned class has correct observedAttributes', () => {
+    const tagName = `test-define-observed-${Date.now()}`;
+    const ElementClass = defineComponent(tagName, {
+      props: {
+        name: { type: String, required: true },
+        count: { type: Number, default: 0 },
+        active: { type: Boolean, default: false },
+      },
+      render: () => html`<div>Test</div>`,
+    });
+
+    const observedAttrs = (ElementClass as typeof HTMLElement & { observedAttributes: string[] }).observedAttributes;
+    expect(observedAttrs).toBeDefined();
+    expect(observedAttrs).toContain('name');
+    expect(observedAttrs).toContain('count');
+    expect(observedAttrs).toContain('active');
+  });
+
+  it('instances have shadow DOM', () => {
+    const tagName = `test-define-shadow-${Date.now()}`;
+    const ElementClass = defineComponent(tagName, {
+      props: {},
+      render: () => html`<div>Shadow Content</div>`,
+    });
+
+    customElements.define(tagName, ElementClass);
+    const el = document.createElement(tagName);
+    document.body.appendChild(el);
+
+    expect(el.shadowRoot).toBeDefined();
+    expect(el.shadowRoot?.mode).toBe('open');
+    expect(el.shadowRoot?.innerHTML).toContain('Shadow Content');
+
+    el.remove();
+  });
+
+  it('attributeChangedCallback triggers re-render', () => {
+    const tagName = `test-define-attr-change-${Date.now()}`;
+    let renderCount = 0;
+    
+    const ElementClass = defineComponent<{ count: number }>(tagName, {
+      props: {
+        count: { type: Number, default: 0 },
+      },
+      render: ({ props }) => {
+        renderCount++;
+        return html`<div>Count: ${props.count}</div>`;
+      },
+    });
+
+    customElements.define(tagName, ElementClass);
+    const el = document.createElement(tagName);
+    document.body.appendChild(el);
+
+    expect(renderCount).toBe(1);
+    expect(el.shadowRoot?.innerHTML).toContain('Count: 0');
+
+    // Trigger attribute change
+    el.setAttribute('count', '42');
+
+    expect(renderCount).toBe(2);
+    expect(el.shadowRoot?.innerHTML).toContain('Count: 42');
+
+    el.remove();
+  });
+
+  it('instances sanitize rendered markup for security', () => {
+    const tagName = `test-define-sanitize-${Date.now()}`;
+    const ElementClass = defineComponent(tagName, {
+      props: {},
+      render: () => html`<div><script>alert('xss')</script>Safe text</div>`,
+    });
+
+    customElements.define(tagName, ElementClass);
+    const el = document.createElement(tagName);
+    document.body.appendChild(el);
+
+    const shadowHTML = el.shadowRoot?.innerHTML ?? '';
+    // Script tags should be stripped by sanitizeHtml
+    expect(shadowHTML).not.toContain('<script>');
+    expect(shadowHTML).not.toContain('alert');
+    expect(shadowHTML).toContain('Safe text');
+
+    el.remove();
+  });
+
+  it('instances apply styles correctly', () => {
+    const tagName = `test-define-styles-${Date.now()}`;
+    const ElementClass = defineComponent(tagName, {
+      props: {},
+      styles: '.test { color: red; }',
+      render: () => html`<div class="test">Styled</div>`,
+    });
+
+    customElements.define(tagName, ElementClass);
+    const el = document.createElement(tagName);
+    document.body.appendChild(el);
+
+    const styleTag = el.shadowRoot?.querySelector('style');
+    expect(styleTag).toBeDefined();
+    expect(styleTag?.textContent).toContain('color: red');
+
+    el.remove();
+  });
+
+  it('can be used to test component in isolation', () => {
+    // This pattern is useful for testing without polluting global registry
+    const ElementClass = defineComponent('test-isolated', {
+      props: {
+        value: { type: String, default: 'default' },
+      },
+      render: ({ props }) => html`<span>${props.value}</span>`,
+    });
+
+    // Use a unique tag for testing
+    const testTag = `test-isolated-${Date.now()}`;
+    customElements.define(testTag, ElementClass);
+
+    const el = document.createElement(testTag);
+    el.setAttribute('value', 'custom');
+    document.body.appendChild(el);
+
+    expect(el.shadowRoot?.innerHTML).toContain('custom');
+
+    el.remove();
+  });
+});

From 70c2e156f3b538719ee063098c2a39b2ed4cac44 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:03:34 +0000
Subject: [PATCH 3/7] Fix notifySubscribers() to use untracked reads to prevent
 dependency pollution

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 src/store/create-store.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/store/create-store.ts b/src/store/create-store.ts
index 8856819e..466dff25 100644
--- a/src/store/create-store.ts
+++ b/src/store/create-store.ts
@@ -2,7 +2,14 @@
  * Store creation logic.
  */
 
-import { batch, computed, signal, type ReadonlySignal, type Signal } from '../reactive/index';
+import {
+  batch,
+  computed,
+  signal,
+  untrack,
+  type ReadonlySignal,
+  type Signal,
+} from '../reactive/index';
 import { notifyDevtoolsStateChange, registerDevtoolsStore } from './devtools';
 import { applyPlugins } from './plugins';
 import { getStore, hasStore, registerStore } from './registry';
@@ -56,9 +63,15 @@ export const createStore = <
    * trigger reactive updates. This differs from frameworks like Pinia that
    * use deep reactivity. To update nested state, replace the entire object.
    *
+   * Uses `untrack()` to prevent accidental dependency tracking when called
+   * from within reactive contexts (e.g., `effect()` or `computed()`).
+   *
    * @internal
    */
-  const getCurrentState = (): S => ({ ...stateProxy });
+  const getCurrentState = (): S =>
+    untrack(() => {
+      return { ...stateProxy };
+    });
 
   /**
    * Notifies subscribers of state changes.

From 46dc7962683abbf84ae1b6472e55750d636ecf15 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:03:57 +0000
Subject: [PATCH 4/7] Fix bq-on directive to use evaluateRaw() for signal
 mutations

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 src/view/directives/on.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/view/directives/on.ts b/src/view/directives/on.ts
index f7bc024b..ee9229c7 100644
--- a/src/view/directives/on.ts
+++ b/src/view/directives/on.ts
@@ -1,4 +1,4 @@
-import { evaluate, evaluateRaw } from '../evaluate';
+import { evaluateRaw } from '../evaluate';
 import type { DirectiveHandler } from '../types';
 
 /**
@@ -24,8 +24,9 @@ export const handleOn = (eventName: string): DirectiveHandler => {
         }
       }
 
-      // Otherwise evaluate as expression (e.g., "handleClick($event)" or "count++")
-      evaluate(expression, eventContext);
+      // Otherwise evaluate as expression using evaluateRaw to allow signal mutations
+      // (e.g., "count.value++" or "handleClick($event)")
+      evaluateRaw(expression, eventContext);
     };
 
     el.addEventListener(eventName, handler);

From 5c65d5543e86f8bac07934e4616fd2a7c4e1c4b0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:04:33 +0000
Subject: [PATCH 5/7] Fix interceptLinks() to handle hash-routing mode
 correctly

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 src/router/links.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/router/links.ts b/src/router/links.ts
index 32d1a142..667003d2 100644
--- a/src/router/links.ts
+++ b/src/router/links.ts
@@ -63,7 +63,17 @@ export const interceptLinks = (container: Element = document.body): (() => void)
     if (anchor.hasAttribute('download')) return;
     if (anchor.origin !== window.location.origin) return; // External link
 
-    const path = anchor.pathname + anchor.search + anchor.hash;
+    // Detect hash-routing mode: links written as href="#/page"
+    // In this case, anchor.hash contains the route path
+    let path: string;
+    if (anchor.hash && anchor.hash.startsWith('#/')) {
+      // Hash-routing mode: extract path from the hash
+      // e.g., href="#/page?foo=bar" → path = "/page?foo=bar"
+      path = anchor.hash.slice(1); // Remove leading #
+    } else {
+      // History mode or regular anchor: use pathname + search + hash
+      path = anchor.pathname + anchor.search + anchor.hash;
+    }
 
     e.preventDefault();
     navigate(path);

From 9991f0740aac3ea59038592cfd3d9eae05c9a4be Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:34:37 +0000
Subject: [PATCH 6/7] Add test coverage for untrack in subscribers,
 hash-routing interception, and signal mutations

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 tests/router.test.ts | 36 ++++++++++++++++++++++++++++++++++++
 tests/store.test.ts  | 34 ++++++++++++++++++++++++++++++++++
 tests/view.test.ts   | 43 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 113 insertions(+)

diff --git a/tests/router.test.ts b/tests/router.test.ts
index 0ac3e263..a76f46ae 100644
--- a/tests/router.test.ts
+++ b/tests/router.test.ts
@@ -1136,6 +1136,42 @@ describe('Router', () => {
       await new Promise((r) => setTimeout(r, 0));
       expect(currentRoute.value.path).toBe('/'); // Should not navigate after cleanup
     });
+
+    it('should handle hash-routing links with href="#/route"', async () => {
+      router = createRouter({
+        routes: [
+          { path: '/', component: () => null },
+          { path: '/some-route', component: () => null },
+          { path: '/page', component: () => null },
+        ],
+        hash: true,
+      });
+
+      // Test hash-routing link with path only
+      container.innerHTML = '<a href="#/some-route">Hash Link</a>';
+      const anchor = container.querySelector('a')!;
+
+      const cleanup = interceptLinks(container);
+
+      const event = new MouseEvent('click', { bubbles: true, cancelable: true });
+      anchor.dispatchEvent(event);
+
+      await new Promise((r) => setTimeout(r, 0));
+      expect(currentRoute.value.path).toBe('/some-route');
+
+      // Test hash-routing link with query parameters
+      container.innerHTML = '<a href="#/page?foo=bar">Hash Link with Query</a>';
+      const anchor2 = container.querySelector('a')!;
+      
+      const event2 = new MouseEvent('click', { bubbles: true, cancelable: true });
+      anchor2.dispatchEvent(event2);
+
+      await new Promise((r) => setTimeout(r, 0));
+      expect(currentRoute.value.path).toBe('/page');
+      expect(currentRoute.value.query).toEqual({ foo: 'bar' });
+
+      cleanup();
+    });
   });
 
   // ============================================================================
diff --git a/tests/store.test.ts b/tests/store.test.ts
index f85e67cd..dad678bf 100644
--- a/tests/store.test.ts
+++ b/tests/store.test.ts
@@ -228,6 +228,40 @@ describe('Store', () => {
 
       expect(states).toEqual([1]);
     });
+
+    it('should not create reactive dependencies when subscription is inside effect', () => {
+      const store = createStore({
+        id: 'counter',
+        state: () => ({ count: 0 }),
+      });
+
+      let effectRunCount = 0;
+      const subscriptionStates: number[] = [];
+
+      // Create subscription inside an effect
+      effect(() => {
+        effectRunCount++;
+        
+        // Subscribe to store inside effect - this should NOT create a dependency
+        // on all store signals due to untrack() wrapping getCurrentState()
+        store.$subscribe((state) => {
+          subscriptionStates.push(state.count as number);
+        });
+      });
+
+      // Effect should run once on creation
+      expect(effectRunCount).toBe(1);
+
+      // Mutate store state
+      store.count = 1;
+      store.count = 2;
+
+      // Subscription should receive updates
+      expect(subscriptionStates).toEqual([1, 2]);
+
+      // Effect should NOT re-run due to store changes (no reactive dependency created)
+      expect(effectRunCount).toBe(1);
+    });
   });
 
   describe('$state', () => {
diff --git a/tests/view.test.ts b/tests/view.test.ts
index 9e4669b1..c6074483 100644
--- a/tests/view.test.ts
+++ b/tests/view.test.ts
@@ -288,6 +288,49 @@ describe('View', () => {
 
       expect(eventType).toBe('click');
     });
+
+    it('should support signal mutations in event expressions', () => {
+      container.innerHTML = `
+        <div>
+          <span bq-text="count"></span>
+          <button id="increment" bq-on:click="count.value++">Increment</button>
+          <button id="decrement" bq-on:click="count.value--">Decrement</button>
+          <button id="add-five" bq-on:click="count.value += 5">Add 5</button>
+        </div>
+      `;
+      const count = signal(0);
+
+      view = mount(container, { count });
+
+      const span = container.querySelector('span')!;
+      const incrementBtn = container.querySelector('#increment')! as HTMLButtonElement;
+      const decrementBtn = container.querySelector('#decrement')! as HTMLButtonElement;
+      const addFiveBtn = container.querySelector('#add-five')! as HTMLButtonElement;
+
+      // Initial value
+      expect(span.textContent).toBe('0');
+      expect(count.value).toBe(0);
+
+      // Test increment
+      incrementBtn.click();
+      expect(count.value).toBe(1);
+      expect(span.textContent).toBe('1');
+
+      // Test increment again
+      incrementBtn.click();
+      expect(count.value).toBe(2);
+      expect(span.textContent).toBe('2');
+
+      // Test decrement
+      decrementBtn.click();
+      expect(count.value).toBe(1);
+      expect(span.textContent).toBe('1');
+
+      // Test compound assignment
+      addFiveBtn.click();
+      expect(count.value).toBe(6);
+      expect(span.textContent).toBe('6');
+    });
   });
 
   describe('bq-for', () => {

From 89c771c505aa479a557697213d26a065faf28ef3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 11:47:21 +0000
Subject: [PATCH 7/7] Fix store reactivity test to properly validate untrack()
 usage

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
---
 tests/store.test.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/tests/store.test.ts b/tests/store.test.ts
index dad678bf..a225cc08 100644
--- a/tests/store.test.ts
+++ b/tests/store.test.ts
@@ -229,38 +229,38 @@ describe('Store', () => {
       expect(states).toEqual([1]);
     });
 
-    it('should not create reactive dependencies when subscription is inside effect', () => {
+    it('should not create reactive dependencies when $state is accessed inside effect', () => {
       const store = createStore({
         id: 'counter',
         state: () => ({ count: 0 }),
       });
 
       let effectRunCount = 0;
-      const subscriptionStates: number[] = [];
+      const stateSnapshots: Array<{ count: number }> = [];
 
-      // Create subscription inside an effect
+      // Access $state inside an effect - this calls getCurrentState()
+      // Without untrack(), this would register the effect as dependent on all store signals
       effect(() => {
         effectRunCount++;
         
-        // Subscribe to store inside effect - this should NOT create a dependency
-        // on all store signals due to untrack() wrapping getCurrentState()
-        store.$subscribe((state) => {
-          subscriptionStates.push(state.count as number);
-        });
+        // Reading $state calls getCurrentState() which is wrapped in untrack()
+        // This should NOT create a dependency on store signals
+        const snapshot = store.$state;
+        stateSnapshots.push(snapshot);
       });
 
       // Effect should run once on creation
       expect(effectRunCount).toBe(1);
+      expect(stateSnapshots).toHaveLength(1);
+      expect(stateSnapshots[0]).toEqual({ count: 0 });
 
       // Mutate store state
-      store.count = 1;
-      store.count = 2;
-
-      // Subscription should receive updates
-      expect(subscriptionStates).toEqual([1, 2]);
+      store.count = 5;
 
       // Effect should NOT re-run due to store changes (no reactive dependency created)
+      // because getCurrentState() is wrapped in untrack()
       expect(effectRunCount).toBe(1);
+      expect(stateSnapshots).toHaveLength(1); // No new snapshots captured
     });
   });