native-sfc 0.0.1 → 0.0.3

package/dist/index.cdn.js

@@ -1,36 +1,66 @@
 // dependencies loaded from esm.sh
 
 // src/components.ts
-import * as stackTraceParser2 from "https://esm.sh/stacktrace-parser";
+import * as stackTraceParser from "https://esm.sh/stacktrace-parser";
 
 // src/rewriter.ts
-import { parse } from "https://esm.sh/es-module-lexer/js";
-import * as stackTraceParser from "https://esm.sh/stacktrace-parser";
-function rewriteModule(code, sourceUrl) {
-  const [imports] = parse(code);
+import { parse as parseESM } from "https://esm.sh/es-module-lexer/js";
+import { parse as parseStackTrace } from "https://esm.sh/stacktrace-parser";
+
+// 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
+async function rewriteModule(code, sourceUrl) {
+  const [imports] = parseESM(code);
   const rewritableImports = imports.filter((i) => {
     const specifier = code.slice(i.s, i.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);
@@ -42,7 +72,7 @@ async function esm(code, sourceUrl) {
   }
 }
 function getImporterUrl() {
-  const stack = stackTraceParser.parse(new Error().stack);
+  const stack = parseStackTrace(new Error().stack);
   for (const { file } of stack) {
     if (file && file !== import.meta.url) {
       if (file.startsWith("blob:")) {
@@ -69,14 +99,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);
@@ -93,22 +120,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 });
@@ -142,11 +511,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);
@@ -154,7 +523,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);
@@ -165,22 +534,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) {
-  const whoDefineMe = stackTraceParser2.parse(new Error().stack).at(-1).file;
+function defineComponent(setup) {
+  const whoDefineMe = stackTraceParser.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")) {
@@ -263,10 +656,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`)

package/dist/index.d.ts

@@ -32,7 +32,6 @@
  *
  * @param name - The custom element tag name (must contain a hyphen, e.g., "my-component")
  * @param url - URL to the component HTML file (relative to the importer or absolute)
- * @param afterConstructor - Optional callback invoked after component constructor completes
  * @returns The CustomElementConstructor for the registered component
  * @throws {NativeSFCError} If the component name is already registered by external code
  *
@@ -41,18 +40,50 @@
  * await loadComponent('my-button', './components/my-button.html');
  * document.body.innerHTML = '<my-button>Click me</my-button>';
  */
-export declare function loadComponent(name: string, url: string, afterConstructor?: VoidFunction): Promise<CustomElementConstructor>;
+export declare function loadComponent(name: string, url: string): Promise<CustomElementConstructor>;
 /**
- * a dual component definition helper function
- * - when used inside loadComponent-imported module, it defines a web component class
- * - when used in normal document context, it just runs the function with document as root
+ * A dual-purpose component definition helper that adapts behavior based on execution context.
+ *
+ * When used inside a loadComponent-imported module, returns a web component class that
+ * manages lifecycle callbacks (onConnected, onDisconnected) and invokes them with the
+ * component's ShadowRoot. In normal document context, immediately executes the function
+ * with `document` as root.
+ *
+ * @param setup - A function that receives lifecycle callback registration methods
+ *                and returns component state/context.
+ * @returns When used in component context: a CustomElementConstructor class.
+ *          When used in document context: the return value of `setup`.
+ *
+ * @example
+ * // In a component HTML file (loaded via loadComponent):
+ * // <script type="module">
+ * import { defineComponent, signal } from 'native-sfc';
+ *
+ * export default defineComponent(({ onConnected, onDisconnected }) => {
+ *   const nonReactiveState = { count: 0 };
+ *
+ *   onConnected((root) => {
+ *     const button = root.querySelector('button');
+ *     button?.addEventListener('click', () => {
+ *       nonReactiveState.count++;
+ *       console.log('count:', nonReactiveState.count);
+ *     });
+ *   });
+ *
+ *   onDisconnected((root) => {
+ *     console.log('component removed');
+ *   });
+ *
+ *   const [increment, setIncrement] = signal(0);
+ *
+ *   return { increment, setIncrement }; // reactive state can be used in template
+ * });
+ * // </script>
  */
-export declare function defineComponent(fc: (root: Document | ShadowRoot) => void): any;
-export declare class NativeSFCError extends Error {
-	constructor(message: string, options?: ErrorOptions);
-}
-declare let fetch$1: typeof globalThis.fetch;
-export declare function defineFetch(customFetch: typeof fetch$1): void;
+export declare function defineComponent(setup: ({ onConnected, onDisconnected, }: {
+	onConnected: (cb: (root: ShadowRoot | Document) => void) => void;
+	onDisconnected: (cb: (root: ShadowRoot) => void) => void;
+}) => any): unknown;
 export interface NativeSFCEvents {
 	"component-loading": {
 		name: string;
@@ -66,6 +97,28 @@ export interface NativeSFCEvents {
 export type NativeSFCEventsMap = {
 	[K in keyof NativeSFCEvents]: CustomEvent<NativeSFCEvents[K]>;
 };
-export declare function on<K extends keyof NativeSFCEvents>(eventName: K, listener: (ev: NativeSFCEventsMap[K]) => any): () => void;
+declare function on<K extends keyof NativeSFCEvents>(eventName: K, listener: (ev: NativeSFCEventsMap[K]) => any): () => void;
+/**
+ * The global configuration object for the library.
+ */
+export declare const config: {
+	fetch: typeof fetch;
+	rewriteModule: (code: string, sourceUrl: string) => Awaitable<string>;
+	on: typeof on;
+};
+export type Awaitable<T> = T | Promise<T>;
+export declare class NativeSFCError extends Error {
+	constructor(message: string, options?: ErrorOptions);
+}
+export type Getter<T> = () => T;
+export type Setter<T> = (newValue: T) => void;
+export declare function untrack<T>(fn: () => T): T;
+export declare function effectScope(fn?: VoidFunction): VoidFunction;
+export declare function effect(fn: VoidFunction): VoidFunction;
+export declare function signal<T>(initialValue: T): readonly [
+	Getter<T>,
+	Setter<T>
+];
+export declare function computed<T>(fn: () => T): Getter<T>;
 
 export {};