Merge pull request #18 from threlte/stl-render-core-prep

Fix memory leak and potential props clash

.changeset/pink-kiwis-flash.md

@@ -0,0 +1,5 @@
+---
+'@threlte/test': patch
+---
+
+Fix memory leak and potential props clash

package.json

@@ -3,6 +3,7 @@
 	"license": "MIT",
 	"version": "0.2.3",
 	"scripts": {
+		"all": "npm run check && npm run lint && npm run test && npm run build",
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",

src/lib/Container.svelte

@@ -14,6 +14,9 @@
 	/** @type {typeof import('svelte').SvelteComponent} */
 	export let component
 
+	/** @type {Record<string, unknown> | undefined} */
+	export let componentProps
+
 	/** @type {import('svelte').SvelteComponent | undefined} */
 	export let ref = undefined
 
@@ -65,5 +68,5 @@
 </script>
 
 <SceneGraphObject object={threlteContext.scene}>
-	<svelte:component this={component} bind:this={ref} {...$$restProps} />
+	<svelte:component this={component} bind:this={ref} {...componentProps} />
 </SceneGraphObject>

src/lib/pure.js

@@ -3,20 +3,18 @@ import Container from './Container.svelte'
 import { Core } from './core.svelte.js'
 
 /**
+ * Check if a value is a plain object.
  *
  * @param {unknown} maybeObj
- * @returns {maybeObj is object}
+ * @returns {maybeObj is Record<string, unknown>}
  */
 const isObject = (maybeObj) => {
-	return typeof maybeObj === 'object' && maybeObj !== null
+	return typeof maybeObj === 'object' && maybeObj !== null && !Array.isArray(maybeObj)
 }
 
 /** @type {Set<HTMLElement>} */
 const targetCache = new Set()
 
-/** @type {Set<HTMLCanvasElement>} */
-const canvasCache = new Set()
-
 /** @type {Set<Svelte.SvelteComponent>} */
 const componentCache = new Set()
 
@@ -28,9 +26,13 @@ const componentCache = new Set()
 /**
  *
  * @param {Record<string, unknown>} options
- * @returns {Record<string, unknown> & { target?: HTMLElement }}
+ * @returns {Record<string, unknown> & { target?: HTMLElement, props?: Record<string, unknown> }}
  */
 const checkProps = (options) => {
+	if (!isObject(options)) {
+		throw new TypeError('Render options must be a plain object')
+	}
+
 	const keys = Object.keys(options)
 	const isProps = !keys.some((option) => {
 		return Core.componentOptions.includes(option)
@@ -43,7 +45,7 @@ const checkProps = (options) => {
 		})
 
 		if (unrecognizedOptions.length > 0) {
-			throw Error(`
+			throw new TypeError(`
           Unknown options were found [${unrecognizedOptions}]. This might happen if you've mixed
           passing in props with Svelte options into the render function. Valid Svelte options
           are [${Core.componentOptions}]. You can either change the prop names, or pass in your
@@ -52,6 +54,10 @@ const checkProps = (options) => {
         `)
 		}
 
+		if (options.props && !isObject(options.props)) {
+			throw new TypeError('`props` option must be a plain object')
+		}
+
 		return options
 	}
 
@@ -95,22 +101,24 @@ export const render = (Component, componentOptions = {}, renderOptions = {}) =>
 
 	/** @type {HTMLCanvasElement} */
 	const canvas = renderOptions.canvas ?? document.createElement('canvas')
-	canvasCache.add(canvas)
 
 	/** @type {any} */
 	const ComponentConstructor = 'default' in Component ? Component.default : Component
 
 	/** @type {any} */
 	const anyContainer = Container
 
+	/** @type {Record<string, unknown> | undefined} */
+	let componentProps = checkedOptions.props
+
 	const component = Core.renderComponent(
 		anyContainer,
 		{
 			...checkedOptions,
 			props: {
-				...(isObject(checkedOptions.props) ? checkedOptions.props : {}),
 				canvas,
 				component: ComponentConstructor,
+				componentProps,
 				userSize: renderOptions.userSize,
 			},
 			target,
@@ -175,7 +183,8 @@ export const render = (Component, componentOptions = {}, renderOptions = {}) =>
 		 * @param {Record<string, unknown>} props
 		 */
 		rerender: async (props) => {
-			Core.updateProps(component, props)
+			componentProps = { ...componentProps, ...props }
+			Core.updateProps(component, { componentProps })
 			await Svelte.tick()
 		},