defer component initialization until after processing so all vars are available

Author: 1cg

src/ext/component.js

@@ -250,20 +250,26 @@ export default function componentPlugin(_hyperscript) {
         customElements.define(tagName, ComponentClass);
     }
 
-    // Register a before-process hook to scan for component definitions
     var registered = new Set();
 
+    // Always strip _ to prevent normal processNode from running it on the template
     _hyperscript.addBeforeProcessHook(function(elt) {
         if (!elt || !elt.querySelectorAll) return;
         elt.querySelectorAll('script[type="text/hyperscript-template"][component]').forEach(function(tmpl) {
-            // Always strip _ to prevent normal processNode from running it on the template
-            var script = tmpl.getAttribute('_') || '';
+            if (tmpl._componentScript != null) return;
+            tmpl._componentScript = tmpl.getAttribute('_') || '';
             tmpl.removeAttribute('_');
+        });
+    });
 
+    // register components after processing so symbols are available
+    _hyperscript.addAfterProcessHook(function(elt) {
+        if (!elt || !elt.querySelectorAll) return;
+        elt.querySelectorAll('script[type="text/hyperscript-template"][component]').forEach(function(tmpl) {
             var tagName = tmpl.getAttribute('component');
             if (!registered.has(tagName) && !customElements.get(tagName)) {
                 registered.add(tagName);
-                registerComponent(tmpl, script);
+                registerComponent(tmpl, tmpl._componentScript || '');
             }
         });
     });

src/parsetree/features/set.js

@@ -30,7 +30,9 @@ export class SetFeature extends Feature {
     }
 
     install(target, source, args, runtime) {
-        this.start && this.start.execute(runtime.makeContext(target, this, target, null));
+        queueMicrotask(() => {
+            this.start && this.start.execute(runtime.makeContext(target, this, target, null));
+        });
     }
 
     static parse(parser) {

test/ext/component.js

@@ -290,4 +290,32 @@ test.describe('the component extension', () => {
 		}).toBe('rgb(11, 22, 33)')
 	})
 
+	test('component reads enclosing scope set by a sibling init on first load', async ({html, find, evaluate}) => {
+		await html(`
+			<script type="text/hyperscript-template" component="test-user-card" _="init set ^user to attrs.data">
+				<h3>${"\x24"}{^user.name}</h3>
+				<p>${"\x24"}{^user.email}</p>
+			</script>
+			<div _="init set $testCurrentUser to { name: 'Carson', email: 'carson@example.com' }">
+				<test-user-card data="$testCurrentUser"></test-user-card>
+			</div>
+		`)
+		await expect.poll(() => find('test-user-card h3').textContent()).toBe('Carson')
+		await expect.poll(() => find('test-user-card p').textContent()).toBe('carson@example.com')
+		await evaluate(() => { delete window.$testCurrentUser })
+	})
+
+	test('component reads a feature-level set from an enclosing div on first load', async ({html, find, evaluate}) => {
+		await html(`
+			<script type="text/hyperscript-template" component="test-plain-card" _="init set ^label to attrs.label">
+				<span>${"\x24"}{^label}</span>
+			</script>
+			<div _="set $testLabel to 'hello'">
+				<test-plain-card label="$testLabel"></test-plain-card>
+			</div>
+		`)
+		await expect.poll(() => find('test-plain-card span').textContent()).toBe('hello')
+		await evaluate(() => { delete window.$testLabel })
+	})
+
 })

www/docs/components.md

@@ -126,6 +126,10 @@ gives you `"$currentUser"` as a string, while `attrs.data` gives you the resolve
 Note that reactive bindings work through the `attrs` object, so you can bind external values to
 internal component state.
 
+{% note "A note on `init immediately`" %}
+Components should avoid using `init immediately` or risk not having reactive effects of initialization code captured properly.
+{% endnote %}
+
 ### Slots {#slots}
 
 `<slot/>` elements let callers pass content into a component. The parent's markup