Fix shadow_dom_target not ready in non-svelthree 'container' compon…

…ents, close #72 This will add / append shadow DOM elements correctly, even for svelthree-components inside non-svelthree 'wrapper' components.
vatro · Jun 16, 2022 · 42c17a8 · 42c17a8
1 parent 07120b0
commit 42c17a8
Show file tree

Hide file tree

Showing 14 changed files with 476 additions and 236 deletions.
diff --git a/src/components/AmbientLight.svelte b/src/components/AmbientLight.svelte
@@ -19,7 +19,7 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -193,26 +193,34 @@ AmbientLight cannot be used to cast shadows as it doesn't have a direction. Posi
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "AmbientLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > AmbientLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 

diff --git a/src/components/CubeCamera.svelte b/src/components/CubeCamera.svelte
@@ -40,7 +40,7 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -415,26 +415,34 @@ Renders a CubeMap for usage with **non-PBR** materials which have an `.envMap` p
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && camera && !shadow_dom_target) {
+	$: if (shadow_root_el && camera && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "CubeCamera"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > CubeCamera > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 

diff --git a/src/components/DirectionalLight.svelte b/src/components/DirectionalLight.svelte
@@ -33,7 +33,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -222,26 +222,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "DirectionalLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > DirectionalLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 

diff --git a/src/components/Empty.svelte b/src/components/Empty.svelte
@@ -39,7 +39,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -221,15 +221,16 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 	/** Specify the component / three.js object instance to act as an HTML `<a>` element. */
 	export let link: LinkProp = undefined
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && empty && !shadow_dom_target) {
+	$: if (shadow_root_el && empty && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			if (button) {
 				shadow_dom_target = document.createElement("button")
 
@@ -249,12 +250,19 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 			shadow_dom_target.dataset.kind = "Empty"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > Empty > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}
 

diff --git a/src/components/HemisphereLight.svelte b/src/components/HemisphereLight.svelte
@@ -20,7 +20,7 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 <script lang="ts">
 	import type { Scene } from "three"
 
-	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext } from "svelte"
+	import { beforeUpdate, onMount, afterUpdate, onDestroy, getContext, setContext, tick } from "svelte"
 	import { get_current_component } from "svelte/internal"
 	import { self as _self } from "svelte/internal"
 	import { c_rs, c_lc, c_mau, c_dev, verbose_mode, get_comp_name } from "../utils/SvelthreeLogger"
@@ -195,26 +195,34 @@ svelthree uses svelte-accmod, where accessors are always `true`, regardless of `
 
 	// accessability -> shadow dom element
 
-	/**
-	 *  IMPORTANT  TODO  TOFIX   \
-	 * if we're combining components into a non-svelthree component, like e.g. a `Car`
-	 * component, there will be no `shadow_dom_target` or `shadow_root_el!
-	 */
+	/** Shadow DOM element created by the component, needed for accessability features, event propagation etc. */
 	export let shadow_dom_target: SvelthreeShadowDOMElement = undefined
 
-	$: if (shadow_root_el && light && !shadow_dom_target) {
+	$: if (shadow_root_el && light && !shadow_dom_target) create_shadow_dom_target()
+
+	async function create_shadow_dom_target() {
 		if (browser) {
+			// DUCKTAPE  `getContext()` wrong order fix, see [#72](https://github.com/vatro/svelthree/issues/72)
+			await tick()
+
 			shadow_dom_target = document.createElement("div")
 
 			shadow_dom_target.dataset.kind = "HemisphereLight"
 			if (name) shadow_dom_target.dataset.name = name
 
-			const shadow_target: SvelthreeShadowDOMElement = our_parent
-				? our_parent.userData.svelthreeComponent.shadow_dom_target
-				: shadow_root_el
+			const parent_shadow_dom_target = our_parent?.userData.svelthreeComponent.shadow_dom_target
+			const shadow_target: SvelthreeShadowDOMElement = parent_shadow_dom_target || shadow_root_el
 
-			// see  TODO  above
-			if (shadow_target) shadow_target.appendChild(shadow_dom_target)
+			if (shadow_target) {
+				shadow_target.appendChild(shadow_dom_target)
+			} else {
+				console.error(
+					"SVELTHREE > HemisphereLight > create_shadow_dom_target > Wasn't able to append shadow DOM element, no 'shadow_target'!",
+					{ shadow_target },
+					{ parent_shadow_dom_target },
+					{ our_parent }
+				)
+			}
 		}
 	}