native-sfc 0.0.1 → 0.0.3

package/README.md

@@ -2,6 +2,39 @@
 
 Load a single HTML file as a Web Component.
 
+```html
+<!-- index.html -->
+<my-counter></my-counter>
+<script type="module">
+  import { loadComponent } from "https://esm.sh/native-sfc";
+  loadComponent("my-counter", "./my-counter.html");
+</script>
+```
+
+Use `export default` to declare the component class.
+
+```html
+<!-- my-counter.html -->
+<button @click="setCount(count() + 1)">Count is: {{ count() }}</button>
+<script type="module">
+  import { signal } from "https://esm.sh/native-sfc";
+  export default class MyCounter extends HTMLElement {
+    setup() {
+      const [count, setCount] = signal(0);
+      return { count, setCount };
+    }
+    connectedCallback() {/* TODO */}
+  }
+  // OR
+  import { defineComponent } from "https://esm.sh/native-sfc";
+  export default defineComponent(({ onConnected }) => {
+    const [count, setCount] = signal(0);
+    onConnected(() => {/* TODO */});
+    return { count, setCount };
+   });
+</script>
+```
+
 ## How it works
 
 The component loader fetches everything (HTML, JS, CSS) as text,
@@ -13,22 +46,107 @@ then processes them to create a Web Component.
 4. **Global Styles**: Styles with `global` attribute are moved to the outer document instead of the shadow root
 5. **URL Rewriting**: All relative URLs in `src` and `href` attributes are rewritten to absolute URLs based on the component file location
 
-## API
+## Component API
 
-### `loadComponent(name, url, afterConstructor?)`
+### `loadComponent(name: string, url: string)`
 
 Load a component from a HTML file and register it as a custom element.
 
 - `name`: The custom element name (e.g., `"my-component"`)
 - `url`: The URL to the component HTML file (relative to the importer)
-- `afterConstructor`: Optional callback executed after the component constructor
 
-### `defineComponent(fc)`
+### `defineComponent(setup: ({ onConnected?, onDisconnected? }) => void)`
 
 A helper function for dual-mode component definition:
 
-- When used inside a `loadComponent`-imported module, it defines a web component class
-- When used in normal document context, it runs the function with `document` as root
+- When used inside a `loadComponent`-imported module, it defines a web component class with lifecycle callbacks
+- When used in normal document context, it runs the setup function with `document` as root
+- The setup function receives `{ onConnected, onDisconnected }` callbacks
+- Return an object from setup to expose reactive state to the template
+
+## Signals API
+
+### `signal<T>(initialValue: T): [() => T, (v: T) => void]`
+
+Creates a reactive signal with a getter and setter.
+
+- Returns a tuple: `[getter, setter]`
+- `getter()`: Returns the current value
+- `setter(value)`: Updates the signal value and triggers reactivity
+
+### `computed<T>(fn: () => T): () => T`
+
+Creates a computed value that automatically tracks dependencies.
+
+- `fn`: Function that computes and returns the value
+- Returns a getter function that returns the computed result
+- Automatically updates when dependencies change
+
+### `effect(fn: VoidFunction): VoidFunction`
+
+Creates a reactive effect that runs whenever its dependencies change.
+
+- `fn`: Function to execute
+- Returns a cleanup function to stop the effect
+- Useful for side effects and subscriptions
+
+### `effectScope(fn: VoidFunction): VoidFunction`
+
+Creates an effect scope to batch multiple effects together.
+
+- `fn`: Function containing effect definitions
+- Returns a cleanup function to stop all effects in the scope
+- Useful for organizing related effects
+
+## HTML Template API
+
+### .property
+
+Binds a DOM property to a reactive expression.
+
+```html
+<input .value="someSignal()" />
+```
+
+### :attribute
+
+Binds a DOM attribute to a reactive expression.
+
+```html
+<img :src="imageUrl()" />
+```
+
+### @event
+
+Binds a DOM event to a reactive expression.
+
+```html
+<button @click="handleClick()" />
+```
+
+### {{ expression }}
+
+Embeds a reactive expression inside text content.
+
+```html
+<p>Total: {{ total() }}</p>
+```
+
+### #if="condition"
+
+Conditionally renders an element based on a reactive expression.
+
+```html
+<div #if="isVisible()">This content is visible only if isVisible() is true.</div>
+```
+
+### #for="arrayExpression"
+
+Renders a list of elements based on a reactive array expression.
+
+```html
+<li #for="items().map(item => ({ item }))">{{ item.name }}</li>
+```
 
 ## Limitations
 

package/dist/index.bundled.js

@@ -2050,32 +2050,60 @@ function o() {
   throw Object.assign(Error(`Parse error ${c}:${t.slice(0, n).split("\n").length}:${n - t.lastIndexOf("\n", n - 1)}`), { idx: n });
 }
 
+// src/events.ts
+var eventTarget = new EventTarget();
+function emit(eventName, detail) {
+  const event = new CustomEvent(eventName, { detail });
+  eventTarget.dispatchEvent(event);
+}
+function on(eventName, listener) {
+  eventTarget.addEventListener(eventName, listener);
+  return () => {
+    eventTarget.removeEventListener(eventName, listener);
+  };
+}
+
+// src/config.ts
+var config = {
+  fetch: globalThis.fetch,
+  rewriteModule: (code, sourceUrl) => `import.meta.url=${JSON.stringify(sourceUrl)};
+${code}`,
+  on
+};
+Object.preventExtensions(config);
+var bind = (fn, thisArg) => fn.bind(thisArg);
+
 // src/rewriter.ts
-function rewriteModule(code, sourceUrl) {
+async function rewriteModule(code, sourceUrl) {
   const [imports] = parse2(code);
   const rewritableImports = imports.filter((i2) => {
     const specifier = code.slice(i2.s, i2.e);
-    return !isBrowserUrl(specifier) && !specifier.startsWith("data:");
+    return !isBrowserUrl(specifier);
   });
   for (const importEntry of rewritableImports.reverse()) {
     const specifier = code.slice(importEntry.s, importEntry.e);
     let rewritten = specifier;
     if (specifier.startsWith(".") || specifier.startsWith("/")) {
       rewritten = new URL(specifier, sourceUrl).href;
+    } else if (specifier.startsWith("node:")) {
+      const module = specifier.slice(5);
+      rewritten = `https://raw.esm.sh/@jspm/core/nodelibs/browser/${module}.js`;
+    } else if (specifier.startsWith("npm:")) {
+      rewritten = `https://esm.sh/${specifier.slice(4)}`;
     } else {
       rewritten = `https://esm.sh/${specifier}`;
     }
     code = code.slice(0, importEntry.s) + rewritten + code.slice(importEntry.e);
   }
-  return `import.meta.url=${JSON.stringify(sourceUrl)};
-${code}`;
+  const { rewriteModule: rewriteModule2 } = config;
+  return await rewriteModule2(code, sourceUrl);
 }
 function isBrowserUrl(url) {
-  return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("blob:http://") || url.startsWith("blob:https://") || url.startsWith("data:");
+  return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("blob:http://") || url.startsWith("blob:https://");
 }
 var blobMap = /* @__PURE__ */ new Map();
 async function esm(code, sourceUrl) {
-  code = rewriteModule(code, sourceUrl);
+  code = await rewriteModule(code, sourceUrl);
   const blob = new Blob([code], { type: "text/javascript" });
   const blobUrl = URL.createObjectURL(blob);
   blobMap.set(blobUrl, sourceUrl);
@@ -2114,14 +2142,11 @@ function warn(...args) {
 }
 
 // src/network.ts
-var fetch = globalThis.fetch;
-function defineFetch(customFetch) {
-  fetch = customFetch;
-}
 async function requestText(url, userFriendlySource) {
   return request(url, userFriendlySource).then((res) => res.text());
 }
 async function request(url, userFriendlySource) {
+  const { fetch } = config;
   let response;
   try {
     response = await fetch(url);
@@ -2138,22 +2163,364 @@ async function request(url, userFriendlySource) {
   return response;
 }
 
-// src/events.ts
-var eventTarget = new EventTarget();
-function emit(eventName, detail) {
-  const event = new CustomEvent(eventName, { detail });
-  eventTarget.dispatchEvent(event);
+// src/signals.ts
+var activeEffect = null;
+var jobQueue = [];
+var isFlushPending = false;
+function queueJob(job) {
+  if (!jobQueue.includes(job)) {
+    jobQueue.push(job);
+  }
+  if (!isFlushPending) {
+    isFlushPending = true;
+    Promise.resolve().then(flushJobs);
+  }
 }
-function on(eventName, listener) {
-  eventTarget.addEventListener(eventName, listener);
-  return () => {
-    eventTarget.removeEventListener(eventName, listener);
+function flushJobs() {
+  isFlushPending = false;
+  const jobs = [...jobQueue];
+  jobQueue.length = 0;
+  jobs.forEach((job) => job());
+}
+function cleanup(effect2) {
+  effect2.deps.forEach((dep) => {
+    dep.delete(effect2);
+  });
+  effect2.deps.clear();
+}
+function createReactiveEffect(fn, deps = /* @__PURE__ */ new Set(), options) {
+  const effect2 = fn;
+  effect2.deps = deps;
+  effect2.options = options;
+  return effect2;
+}
+var EffectScope = class {
+  effects = [];
+  active = true;
+  run(fn) {
+    if (!this.active) return;
+    const prevScope = activeScope;
+    activeScope = this;
+    try {
+      return fn();
+    } finally {
+      activeScope = prevScope;
+    }
+  }
+  add(stopFn) {
+    if (this.active) {
+      this.effects.push(stopFn);
+    } else {
+      stopFn();
+    }
+  }
+  stop() {
+    if (this.active) {
+      this.effects.forEach((stop) => stop());
+      this.effects = [];
+      this.active = false;
+    }
+  }
+};
+var activeScope = null;
+function untrack(fn) {
+  const prevEffect = activeEffect;
+  activeEffect = null;
+  try {
+    return fn();
+  } finally {
+    activeEffect = prevEffect;
+  }
+}
+function effectScope(fn) {
+  const scope = new EffectScope();
+  if (fn) scope.run(fn);
+  return () => scope.stop();
+}
+function effect(fn) {
+  const effect2 = createReactiveEffect(
+    () => {
+      cleanup(effect2);
+      const prevEffect = activeEffect;
+      activeEffect = effect2;
+      try {
+        fn();
+      } finally {
+        activeEffect = prevEffect;
+      }
+    },
+    /* @__PURE__ */ new Set(),
+    { scheduler: queueJob }
+  );
+  effect2();
+  const stop = () => {
+    cleanup(effect2);
+  };
+  if (activeScope) {
+    activeScope.add(stop);
+  }
+  return stop;
+}
+function signal(initialValue) {
+  let value = initialValue;
+  const subscribers = /* @__PURE__ */ new Set();
+  const read = () => {
+    if (activeEffect) {
+      subscribers.add(activeEffect);
+      activeEffect.deps.add(subscribers);
+    }
+    return value;
+  };
+  read.toString = () => {
+    throw new NativeSFCError(
+      `signal<<${value}>>: This is a signal reader, you MUST call it to get the value.`
+    );
+  };
+  const write = (newValue) => {
+    if (value !== newValue) {
+      value = newValue;
+      const effectsToRun = new Set(subscribers);
+      effectsToRun.forEach((effect2) => {
+        if (effect2.options?.scheduler) {
+          effect2.options.scheduler(effect2);
+        } else {
+          effect2();
+        }
+      });
+    }
   };
+  write.toString = () => {
+    throw new NativeSFCError(
+      `signal<<${value}>>: This is a signal writer, you MUST call it to set the value.`
+    );
+  };
+  return [read, write];
+}
+function computed(fn) {
+  let value;
+  let dirty = true;
+  let isComputing = false;
+  const runner = () => {
+    if (!dirty) {
+      dirty = true;
+      trigger(subscribers);
+    }
+  };
+  const internalEffect = createReactiveEffect(runner);
+  const subscribers = /* @__PURE__ */ new Set();
+  const trigger = (subs) => {
+    const effectsToRun = new Set(subs);
+    effectsToRun.forEach((effect2) => {
+      if (effect2.options?.scheduler) {
+        effect2.options.scheduler(effect2);
+      } else {
+        effect2();
+      }
+    });
+  };
+  const read = () => {
+    if (isComputing) {
+      throw new NativeSFCError(`Circular dependency detected in computed<<${value}>>`);
+    }
+    if (activeEffect) {
+      subscribers.add(activeEffect);
+      activeEffect.deps.add(subscribers);
+    }
+    if (dirty) {
+      isComputing = true;
+      const prevEffect = activeEffect;
+      activeEffect = internalEffect;
+      cleanup(internalEffect);
+      try {
+        value = fn();
+        dirty = false;
+      } finally {
+        activeEffect = prevEffect;
+        isComputing = false;
+      }
+    }
+    return value;
+  };
+  read.toString = () => {
+    throw new NativeSFCError(
+      `computed<<${value}>>: This is a computed reader, you MUST call it to get the value.`
+    );
+  };
+  return read;
+}
+
+// src/template.ts
+function toCamelCase(str) {
+  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+}
+function parseTextContent(text) {
+  const regex = /\{\{(.+?)\}\}/g;
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({
+        type: "static",
+        content: text.slice(lastIndex, match.index)
+      });
+    }
+    parts.push({
+      type: "dynamic",
+      content: match[1].trim()
+    });
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push({
+      type: "static",
+      content: text.slice(lastIndex)
+    });
+  }
+  return parts;
+}
+function reactiveNodes(nodes, context) {
+  const evalExpr = (expr, additionalContext = {}) => {
+    const ctx = typeof context === "object" ? Object.assign({}, context, additionalContext) : additionalContext;
+    const keys = Object.keys(ctx);
+    const values = Object.values(ctx);
+    try {
+      const func = new Function(...keys, `return ${expr.trimStart()}`);
+      return func(...values);
+    } catch (error) {
+      warn(`Failed to evaluate expression: "${expr}"`, error);
+    }
+  };
+  const recursive = (nodes2) => {
+    for (const node of Array.from(nodes2)) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        const ifAttr = element.getAttribute("#if");
+        if (ifAttr) {
+          if (element.hasAttribute("#for")) {
+            console.warn("Cannot use #if and #for on the same element");
+          }
+          const template = element.cloneNode(true);
+          const parent = element.parentNode;
+          const placeholder = document.createComment("if");
+          parent?.replaceChild(placeholder, element);
+          template.removeAttribute("#if");
+          let renderedNode = null;
+          let cleanup2 = null;
+          effect(() => {
+            const condition = evalExpr(ifAttr);
+            if (condition) {
+              if (!renderedNode) {
+                const clone = template.cloneNode(true);
+                cleanup2 = reactiveNodes([clone], context);
+                placeholder.parentNode?.insertBefore(clone, placeholder.nextSibling);
+                renderedNode = clone;
+              }
+            } else {
+              if (renderedNode) {
+                cleanup2?.();
+                renderedNode.remove();
+                renderedNode = null;
+                cleanup2 = null;
+              }
+            }
+          });
+          continue;
+        }
+        const forAttr = element.getAttribute("#for");
+        if (forAttr) {
+          const template = element.cloneNode(true);
+          const parent = element.parentNode;
+          const placeholder = document.createComment("for");
+          parent?.replaceChild(placeholder, element);
+          template.removeAttribute("#for");
+          let renderedItems = [];
+          effect(() => {
+            const contexts = evalExpr(forAttr);
+            if (!Array.isArray(contexts)) {
+              console.warn("#for expression must return an array");
+              return;
+            }
+            renderedItems.forEach(({ node: node2, cleanup: cleanup2 }) => {
+              cleanup2();
+              node2.remove();
+            });
+            renderedItems = [];
+            contexts.forEach((itemContext) => {
+              const clone = template.cloneNode(true);
+              const cleanup2 = reactiveNodes([clone], { ...context, ...itemContext });
+              placeholder.parentNode?.insertBefore(clone, placeholder.nextSibling);
+              renderedItems.push({ node: clone, cleanup: cleanup2 });
+            });
+          });
+          continue;
+        }
+        for (const attr of Array.from(element.attributes)) {
+          if (attr.name.startsWith(".")) {
+            const propName = toCamelCase(attr.name.slice(1));
+            const expr = attr.value;
+            effect(() => {
+              const value = evalExpr(expr);
+              untrack(() => Reflect.set(element, propName, value));
+            });
+            element.removeAttribute(attr.name);
+          } else if (attr.name.startsWith(":")) {
+            const attrName = attr.name.slice(1);
+            const expr = attr.value;
+            effect(() => {
+              const value = evalExpr(expr);
+              untrack(() => element.setAttribute(attrName, value));
+            });
+            element.removeAttribute(attr.name);
+          } else if (attr.name.startsWith("@")) {
+            const eventName = attr.name.slice(1);
+            const expr = attr.value;
+            const listener = computed(() => (event) => {
+              evalExpr(expr, { event });
+            })();
+            element.addEventListener(eventName, listener);
+            element.removeAttribute(attr.name);
+          }
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const textNode = node;
+        const text = textNode.textContent || "";
+        const parts = parseTextContent(text);
+        if (parts.some((part) => part.type === "dynamic")) {
+          const parentNode = textNode.parentNode;
+          if (parentNode) {
+            const fragment = document.createDocumentFragment();
+            const textNodes = [];
+            for (const part of parts) {
+              const newTextNode = document.createTextNode(
+                part.type === "static" ? part.content : ""
+              );
+              fragment.appendChild(newTextNode);
+              textNodes.push(newTextNode);
+              if (part.type === "dynamic") {
+                effect(() => {
+                  const value = evalExpr(part.content);
+                  untrack(() => newTextNode.textContent = String(value));
+                });
+              }
+            }
+            parentNode.replaceChild(fragment, textNode);
+          }
+        }
+      }
+      if (node.childNodes.length > 0) {
+        recursive(node.childNodes);
+      }
+    }
+  };
+  return effectScope(() => {
+    recursive(nodes);
+  });
 }
 
 // src/components.ts
 var loadedComponentsRecord = /* @__PURE__ */ new Map();
-async function loadComponent(name, url, afterConstructor) {
+async function loadComponent(name, url) {
   const importerUrl = getImporterUrl() || location.href;
   url = new URL(url, importerUrl).href;
   emit("component-loading", { name, url });
@@ -2187,11 +2554,11 @@ async function loadComponent(name, url, afterConstructor) {
     );
   }
   const define = (component2) => {
-    const cec = extendsElement(component2, doc.body.innerHTML, adoptedStyleSheets, afterConstructor);
-    customElements.define(name, cec);
+    const CEC = extendsElement(component2, doc.body.innerHTML, adoptedStyleSheets);
+    customElements.define(name, CEC);
     emit("component-defined", { name, url });
-    loadedComponentsRecord.set(name, { cec, url });
-    return cec;
+    loadedComponentsRecord.set(name, { cec: CEC, url });
+    return CEC;
   };
   if (!component || !defaultExportIsComponent) {
     return define(HTMLElement);
@@ -2199,7 +2566,7 @@ async function loadComponent(name, url, afterConstructor) {
     return define(component);
   }
 }
-function extendsElement(BaseClass = HTMLElement, innerHTML, adoptedStyleSheets, afterConstructor) {
+function extendsElement(BaseClass = HTMLElement, innerHTML, adoptedStyleSheets) {
   return class extends BaseClass {
     constructor(...args) {
       super(innerHTML, adoptedStyleSheets);
@@ -2210,22 +2577,46 @@ function extendsElement(BaseClass = HTMLElement, innerHTML, adoptedStyleSheets,
           shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
         }
       }
-      if (afterConstructor) {
-        afterConstructor.call(this);
+      if ("setup" in this && typeof this.setup === "function") {
+        const context = this.setup();
+        reactiveNodes(this.shadowRoot.childNodes, context);
+      } else {
+        reactiveNodes(this.shadowRoot.childNodes, {});
       }
     }
   };
 }
-function defineComponent(fc) {
+function defineComponent(setup) {
   const whoDefineMe = parse(new Error().stack).at(-1).file;
   if (blobMap.has(whoDefineMe)) {
     return class extends HTMLElement {
+      _onConnectedEvents = [];
+      _onDisconnectedEvents = [];
+      setup() {
+        const setup22 = bind(setup, this);
+        return setup22({
+          onConnected: (event) => this._onConnectedEvents.push(bind(event, this)),
+          onDisconnected: (event) => this._onDisconnectedEvents.push(bind(event, this))
+        });
+      }
       connectedCallback() {
-        fc.call(this, this.shadowRoot || this.attachShadow({ mode: "open" }));
+        const root = this.shadowRoot || this.attachShadow({ mode: "open" });
+        untrack(() => this._onConnectedEvents.forEach((cb) => cb(root)));
+      }
+      disconnectedCallback() {
+        const root = this.shadowRoot;
+        untrack(() => this._onDisconnectedEvents.forEach((cb) => cb(root)));
       }
     };
   }
-  return fc.call(globalThis, document);
+  const setup2 = bind(setup, void 0);
+  const context = setup2({
+    onConnected: (cb) => queueMicrotask(() => cb(document)),
+    onDisconnected: () => {
+    }
+  });
+  reactiveNodes(document.body.childNodes, context);
+  return;
 }
 function filterGlobalStyle(doc) {
   for (const styleElement of doc.querySelectorAll("style")) {
@@ -2308,10 +2699,17 @@ async function evaluateModules(doc, url) {
 }
 export {
   NativeSFCError,
+  computed,
+  config,
   defineComponent,
-  defineFetch,
+  effect,
+  effectScope,
   loadComponent,
-  on
+  signal,
+  untrack
 };
 //! we provide an extra argument to user's component constructor
 //! if the user's constructor does not create a shadow root, we will create one here
+//! we bind `this` to the setup function, so that users can access `this` in setup, and `this` is the component instance
+//! `this` is undefined in normal document context's setup function
+//! make the document.body reactive, just like the web component (defined at `extendsElement`)