feat(svelte): manually query DOM for chart holder element as fallback

In the rollup configuration, we explicitly define svelte as an external dependency for UMD/ESM targets.

Author: metonym

Diff for: packages/svelte/rollup.config.js

@@ -18,7 +18,7 @@ export default [
 			resolve(),
 			terser()
 		],
-		external: ["@carbon/charts"]
+		external: ["svelte", "@carbon/charts"]
 	},
 	{
 		input: "./src/index.js",
@@ -28,9 +28,8 @@ export default [
 		},
 		plugins: [
 			svelte(),
-			resolve(),
-			terser()
+			resolve()
 		],
-		external: ["@carbon/charts"]
+		external: ["svelte", "@carbon/charts"]
 	}
 ];

Diff for: packages/svelte/src/BaseChart.svelte

@@ -6,17 +6,33 @@
   import { onMount, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
+  const id = "chart-" + Math.random().toString(36);
 
   let ref = undefined;
   let chart = undefined;
 
   onMount(() => {
-    chart = new Chart(ref, { data, options });
-    dispatch("load", chart);
+    /**
+     * CodeSandbox does not resolve Svelte components from the `svelte` package.json entry.
+     * This causes `bind:ref` to be `undefined`; the chart can't mount to the element.
+     * 
+     * We fallback to manually querying the DOM for the chart holder element because
+     * CodeSandbox does not use uncompiled Svelte source code.
+     * 
+     * See https://github.com/sveltejs/svelte/issues/2937
+     */
+    const element = ref || document.getElementById(id);
+
+    if (element) {
+      chart = new Chart(element, { data, options });
+      dispatch("load", chart);
+    }
 
     return () => {
-      chart.destroy();
-      dispatch("destroy");
+      if (chart) {
+        chart.destroy();
+        dispatch("destroy");
+      }
     };
   });
 
@@ -27,4 +43,4 @@
   }
 </script>
 
-<div {...$$restProps} bind:this={ref} on:load on:update on:destroy />
+<div {...$$restProps} bind:this={ref} {id} />