native-sfc 0.0.2 → 0.0.3

package/README.md

@@ -11,6 +11,8 @@ Load a single HTML file as a Web Component.
 </script>
 ```
 
+Use `export default` to declare the component class.
+
 ```html
 <!-- my-counter.html -->
 <button @click="setCount(count() + 1)">Count is: {{ count() }}</button>
@@ -21,8 +23,15 @@ Load a single HTML file as a Web Component.
       const [count, setCount] = signal(0);
       return { count, setCount };
     }
-    connectedCallback() {}
+    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>
 ```
 

package/dist/index.bundled.js

@@ -2071,6 +2071,7 @@ ${code}`,
   on
 };
 Object.preventExtensions(config);
+var bind = (fn, thisArg) => fn.bind(thisArg);
 
 // src/rewriter.ts
 async function rewriteModule(code, sourceUrl) {
@@ -2222,6 +2223,15 @@ var EffectScope = class {
   }
 };
 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);
@@ -2374,11 +2384,15 @@ function reactiveNodes(nodes, context) {
     const ctx = typeof context === "object" ? Object.assign({}, context, additionalContext) : additionalContext;
     const keys = Object.keys(ctx);
     const values = Object.values(ctx);
-    const func = new Function(...keys, `return ${expr.trimStart()}`);
-    return func(...values);
+    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 nodes2) {
+    for (const node of Array.from(nodes2)) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
         const ifAttr = element.getAttribute("#if");
@@ -2447,7 +2461,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              Reflect.set(element, propName, value);
+              untrack(() => Reflect.set(element, propName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith(":")) {
@@ -2455,7 +2469,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              element.setAttribute(attrName, value);
+              untrack(() => element.setAttribute(attrName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith("@")) {
@@ -2486,7 +2500,7 @@ function reactiveNodes(nodes, context) {
               if (part.type === "dynamic") {
                 effect(() => {
                   const value = evalExpr(part.content);
-                  newTextNode.textContent = String(value);
+                  untrack(() => newTextNode.textContent = String(value));
                 });
               }
             }
@@ -2579,26 +2593,30 @@ function defineComponent(setup) {
       _onConnectedEvents = [];
       _onDisconnectedEvents = [];
       setup() {
-        return setup({
-          onConnected: (event) => this._onConnectedEvents.push(event),
-          onDisconnected: (event) => this._onDisconnectedEvents.push(event)
+        const setup22 = bind(setup, this);
+        return setup22({
+          onConnected: (event) => this._onConnectedEvents.push(bind(event, this)),
+          onDisconnected: (event) => this._onDisconnectedEvents.push(bind(event, this))
         });
       }
       connectedCallback() {
         const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-        this._onConnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onConnectedEvents.forEach((cb) => cb(root)));
       }
       disconnectedCallback() {
         const root = this.shadowRoot;
-        this._onDisconnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onDisconnectedEvents.forEach((cb) => cb(root)));
       }
     };
   }
-  return setup({
-    onConnected: (cb) => cb(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")) {
@@ -2687,7 +2705,11 @@ export {
   effect,
   effectScope,
   loadComponent,
-  signal
+  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.cdn.js

@@ -28,6 +28,7 @@ ${code}`,
   on
 };
 Object.preventExtensions(config);
+var bind = (fn, thisArg) => fn.bind(thisArg);
 
 // src/rewriter.ts
 async function rewriteModule(code, sourceUrl) {
@@ -179,6 +180,15 @@ var EffectScope = class {
   }
 };
 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);
@@ -331,11 +341,15 @@ function reactiveNodes(nodes, context) {
     const ctx = typeof context === "object" ? Object.assign({}, context, additionalContext) : additionalContext;
     const keys = Object.keys(ctx);
     const values = Object.values(ctx);
-    const func = new Function(...keys, `return ${expr.trimStart()}`);
-    return func(...values);
+    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 nodes2) {
+    for (const node of Array.from(nodes2)) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
         const ifAttr = element.getAttribute("#if");
@@ -404,7 +418,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              Reflect.set(element, propName, value);
+              untrack(() => Reflect.set(element, propName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith(":")) {
@@ -412,7 +426,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              element.setAttribute(attrName, value);
+              untrack(() => element.setAttribute(attrName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith("@")) {
@@ -443,7 +457,7 @@ function reactiveNodes(nodes, context) {
               if (part.type === "dynamic") {
                 effect(() => {
                   const value = evalExpr(part.content);
-                  newTextNode.textContent = String(value);
+                  untrack(() => newTextNode.textContent = String(value));
                 });
               }
             }
@@ -536,26 +550,30 @@ function defineComponent(setup) {
       _onConnectedEvents = [];
       _onDisconnectedEvents = [];
       setup() {
-        return setup({
-          onConnected: (event) => this._onConnectedEvents.push(event),
-          onDisconnected: (event) => this._onDisconnectedEvents.push(event)
+        const setup22 = bind(setup, this);
+        return setup22({
+          onConnected: (event) => this._onConnectedEvents.push(bind(event, this)),
+          onDisconnected: (event) => this._onDisconnectedEvents.push(bind(event, this))
         });
       }
       connectedCallback() {
         const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-        this._onConnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onConnectedEvents.forEach((cb) => cb(root)));
       }
       disconnectedCallback() {
         const root = this.shadowRoot;
-        this._onDisconnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onDisconnectedEvents.forEach((cb) => cb(root)));
       }
     };
   }
-  return setup({
-    onConnected: (cb) => cb(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")) {
@@ -644,7 +662,11 @@ export {
   effect,
   effectScope,
   loadComponent,
-  signal
+  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

@@ -98,6 +98,9 @@ export type NativeSFCEventsMap = {
 	[K in keyof NativeSFCEvents]: CustomEvent<NativeSFCEvents[K]>;
 };
 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>;
@@ -109,6 +112,7 @@ export declare class NativeSFCError extends Error {
 }
 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 [

package/dist/index.js

@@ -28,6 +28,7 @@ ${code}`,
   on
 };
 Object.preventExtensions(config);
+var bind = (fn, thisArg) => fn.bind(thisArg);
 
 // src/rewriter.ts
 async function rewriteModule(code, sourceUrl) {
@@ -179,6 +180,15 @@ var EffectScope = class {
   }
 };
 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);
@@ -331,11 +341,15 @@ function reactiveNodes(nodes, context) {
     const ctx = typeof context === "object" ? Object.assign({}, context, additionalContext) : additionalContext;
     const keys = Object.keys(ctx);
     const values = Object.values(ctx);
-    const func = new Function(...keys, `return ${expr.trimStart()}`);
-    return func(...values);
+    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 nodes2) {
+    for (const node of Array.from(nodes2)) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
         const ifAttr = element.getAttribute("#if");
@@ -404,7 +418,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              Reflect.set(element, propName, value);
+              untrack(() => Reflect.set(element, propName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith(":")) {
@@ -412,7 +426,7 @@ function reactiveNodes(nodes, context) {
             const expr = attr.value;
             effect(() => {
               const value = evalExpr(expr);
-              element.setAttribute(attrName, value);
+              untrack(() => element.setAttribute(attrName, value));
             });
             element.removeAttribute(attr.name);
           } else if (attr.name.startsWith("@")) {
@@ -443,7 +457,7 @@ function reactiveNodes(nodes, context) {
               if (part.type === "dynamic") {
                 effect(() => {
                   const value = evalExpr(part.content);
-                  newTextNode.textContent = String(value);
+                  untrack(() => newTextNode.textContent = String(value));
                 });
               }
             }
@@ -536,26 +550,30 @@ function defineComponent(setup) {
       _onConnectedEvents = [];
       _onDisconnectedEvents = [];
       setup() {
-        return setup({
-          onConnected: (event) => this._onConnectedEvents.push(event),
-          onDisconnected: (event) => this._onDisconnectedEvents.push(event)
+        const setup22 = bind(setup, this);
+        return setup22({
+          onConnected: (event) => this._onConnectedEvents.push(bind(event, this)),
+          onDisconnected: (event) => this._onDisconnectedEvents.push(bind(event, this))
         });
       }
       connectedCallback() {
         const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-        this._onConnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onConnectedEvents.forEach((cb) => cb(root)));
       }
       disconnectedCallback() {
         const root = this.shadowRoot;
-        this._onDisconnectedEvents.forEach((cb) => cb.call(void 0, root));
+        untrack(() => this._onDisconnectedEvents.forEach((cb) => cb(root)));
       }
     };
   }
-  return setup({
-    onConnected: (cb) => cb(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")) {
@@ -644,7 +662,11 @@ export {
   effect,
   effectScope,
   loadComponent,
-  signal
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-sfc",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "files": [
     "dist"