test

Author: dummdidumm

packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<my-app/>';
+		await tick();
+		await tick();
+
+		/** @type {any} */
+		const el = target.querySelector('my-app');
+		const button = el.shadowRoot.querySelector('button');
+		const p = el.shadowRoot.querySelector('my-tracking').shadowRoot.querySelector('p');
+
+		assert.equal(button.innerHTML, '0');
+		assert.equal(p.innerHTML, 'false');
+
+		button.click();
+		await tick();
+
+		assert.equal(button.innerHTML, '1');
+		assert.equal(p.innerHTML, 'false');
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/main.svelte

@@ -0,0 +1,32 @@
+<svelte:options customElement="my-app" />
+
+<script module>
+	class Tracking extends HTMLElement {
+		static observedAttributes = ["count"];
+        tracking = false;
+
+        set count(_) {
+            this.tracking = $effect.tracking();
+            this.render();
+        }
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });tracking
+        }
+
+		render() {
+			this.shadowRoot.innerHTML = `<p>${this.tracking}</p>`;
+		}
+	}
+
+	customElements.define("my-tracking", Tracking);
+</script>
+
+<script>
+	import "./Counter.svelte";
+    let count = $state(0);
+</script>
+
+<button onclick={() => (count += 1)}>{count}</button>
+<my-tracking {count}></my-tracking>