add ui

Author: DougAnderson444

Cargo.lock

@@ -0,0 +1,79 @@
+<script>
+	import { onMount, tick } from 'svelte';
+	import * as wurbo from 'wurbo';
+
+	// Import wasm component bytes as a url
+	import wasmURL from '../../../aggregate.wasm?url';
+
+	// get imports from +page.svelte
+	export let importables;
+	export let load;
+
+	/**
+	 * The rendered component as a string of HTML
+	 * @type {string | null}
+	 */
+	let renderedHTML;
+	/**
+	 * The module that loads the WebAssembly component
+	 *
+	 * @type {{ render: (arg0: string) => string | null; listen: () => void; }}
+	 */
+	let mod;
+
+	onMount(async () => {
+		// ensure you are in the Browser environment to rollup your WIT Component
+		// const { load } = await import('rollup-plugin-wit-component');
+
+		let listener = new wurbo.Listener();
+
+		// get your wasm bytes from your storage source
+		let wasmBytes = await fetch(wasmURL).then((res) => res.arrayBuffer());
+
+		// define the import handles you are giving to your component
+		let all_importables = [
+			{ 'component:wurbo/wurbo-in': importables.buildCodeString(listener.namespace) },
+			{
+				'component:wallet/[email protected]': importables.buildGetSeedFunc(
+					'build a test seed from this string'
+				)
+			}
+		];
+
+		// load the import handles into the Wasm component and get the ES module returned
+		mod = await load(wasmBytes, all_importables);
+
+		// call `render` with your inputs for the component
+		let data = {
+			tag: 'all-content',
+			val: {
+				page: { title: 'Use that seed to sign something.' },
+				input: { placeholder: 'Enter a Signable Message here.' }
+			}
+		};
+		renderedHTML = mod.wurboOut.render(data);
+
+		// lisen for events from the component
+		listener.listen(mod);
+	});
+
+	// Once the HTML is rendered and the module is loaded, we can activate the event emitters
+	$: if (renderedHTML && mod)
+		(async () => {
+			// wait for the DOM to reflect the updates first
+			await tick();
+			// once the DOM has our elements loaded, we can activate the event emitters
+			mod.wurboOut.activate();
+		})();
+</script>
+
+<svelte:head>
+	<title>Seed Keeper</title>
+	<script src="https://cdn.tailwindcss.com"></script>
+</svelte:head>
+<div>
+	<h1>Aggregate User Interfaces</h1>
+	{#if renderedHTML}
+		{@html renderedHTML}
+	{/if}
+</div>

examples/sveltekit/src/lib/Aggregate.svelte

@@ -10,6 +10,15 @@ export function buildCodeString(namespace) {
               value: e.target.value,
             }
           };
+          // Build nested Contexts, recursively find all ancestor elements with data-slot attributes, wrap child context as value. 
+          // ie) {tag: slotNameGrandParent, value: {tag: slotNameParent, value: {tag: 'input', val: {value: 'foo'}}}}
+          let el = e.target.closest('[data-slot]');
+          while (el) {
+            ctx = { tag: el.dataset.slot, val: ctx };
+            el = el.closest('[data-slot]');
+          }
+          console.log(ctx);
+
           bc.postMessage(window.${namespace}.render(ctx));
         });
       }`;