fix(svelte): make ref and chart props optional (#1612)

packages/angular/package.json

@@ -37,21 +37,21 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.3",
+    "@angular-devkit/build-angular": "^16.1.4",
     "@angular-eslint/builder": "^16.0.3",
     "@angular-eslint/eslint-plugin": "^16.0.3",
     "@angular-eslint/eslint-plugin-template": "^16.0.3",
     "@angular-eslint/schematics": "^16.0.3",
     "@angular-eslint/template-parser": "^16.0.3",
-    "@angular/animations": "^16.1.3",
-    "@angular/cli": "^16.1.3",
-    "@angular/common": "^16.1.3",
-    "@angular/compiler": "^16.1.3",
-    "@angular/compiler-cli": "^16.1.3",
-    "@angular/core": "^16.1.3",
-    "@angular/forms": "^16.1.3",
-    "@angular/platform-browser": "^16.1.3",
-    "@angular/platform-browser-dynamic": "^16.1.3",
+    "@angular/animations": "^16.1.4",
+    "@angular/cli": "^16.1.4",
+    "@angular/common": "^16.1.4",
+    "@angular/compiler": "^16.1.4",
+    "@angular/compiler-cli": "^16.1.4",
+    "@angular/core": "^16.1.4",
+    "@angular/forms": "^16.1.4",
+    "@angular/platform-browser": "^16.1.4",
+    "@angular/platform-browser-dynamic": "^16.1.4",
     "@babel/core": "^7.22.8",
     "@carbon/icons-angular": "^11.2.2",
     "@stackblitz/sdk": "^1.9.0",

packages/core/package.json

@@ -82,7 +82,7 @@
     "homepage": "https://carbon-design-system.github.io/carbon-charts/"
   },
   "dependencies": {
-    "@carbon/colors": "^11.16.0",
+    "@carbon/colors": "^11.17.0",
     "@carbon/telemetry": "~0.1.0",
     "@carbon/utils-position": "^1.1.4",
     "carbon-components": "^10.58.3",
@@ -111,9 +111,9 @@
   "devDependencies": {
     "@babel/core": "^7.22.8",
     "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^11.15.0",
-    "@carbon/styles": "^1.32.0",
-    "@carbon/themes": "^11.20.0",
+    "@carbon/layout": "^11.16.0",
+    "@carbon/styles": "^1.33.0",
+    "@carbon/themes": "^11.21.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@stackblitz/sdk": "^1.9.0",
     "@storybook/addon-essentials": "^7.0.26",
@@ -145,7 +145,7 @@
     "storybook": "^7.0.26",
     "typedoc": "^0.24.8",
     "typescript": "^5.1.6",
-    "vite": "^4.4.1",
+    "vite": "^4.4.2",
     "vite-plugin-dts": "^2.3.0",
     "vitest": "^0.33.0"
   },

packages/react/package.json

@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@carbon/charts": "workspace:*",
-    "@carbon/icons-react": "^11.21.0",
+    "@carbon/icons-react": "^11.22.0",
     "@carbon/telemetry": "~0.1.0"
   },
   "peerDependencies": {
@@ -93,8 +93,8 @@
     "storybook": "^7.0.26",
     "style-loader": "^3.3.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.1",
-    "vite-plugin-dts": "^3.1.0",
+    "vite": "^4.4.2",
+    "vite-plugin-dts": "^3.1.1",
     "webpack": "5.88.1"
   },
   "publishConfig": {

packages/svelte/package.json

@@ -75,7 +75,7 @@
     "svelte-check": "^3.4.5",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
-    "vite": "^4.4.1"
+    "vite": "^4.4.2"
   },
   "publishConfig": {
     "access": "public"

packages/svelte/src/lib/BaseChart.svelte

@@ -2,14 +2,17 @@
 	import { onMount, afterUpdate, onDestroy, createEventDispatcher } from 'svelte'
 	import type { Charts, ChartOptions, ChartTabularData } from '@carbon/charts'
 
+	const chartHolderCssClass = 'cds--chart-holder'
 	export let data: ChartTabularData = []
-	export let options: ChartOptions // AlluvialChartOptions, BarChartOptions, etc.
+	export let options: ChartOptions = {} // AlluvialChartOptions, BarChartOptions, etc.
+
 	export let Chart: new (
 		ref: HTMLDivElement,
 		{ options, data }: { options: ChartOptions; data: ChartTabularData }
-	) => Charts
-	export let chart: Charts // instance of the class passed to the Chart property
-	export let ref: HTMLDivElement // reference to chart's div so parent can manipulate it
+	) => Charts | undefined = undefined
+	export let chart: Charts | null = null // instance of the class passed to the Chart property
+	export let ref: HTMLDivElement | null = null // reference to chart's div so parent can manipulate it
+	export let id = `chart-${Math.random().toString(36)}` // id for chart holder element
 
 	const dispatch = createEventDispatcher()
 
@@ -37,9 +40,12 @@
 	onDestroy(() => {
 		if (chart) {
 			dispatch('destroy')
-			chart.destroy()
+			// Almost the same as core's Chart.destroy() but without getting rid of the chart holder
+			chart.components.forEach((component) => component.destroy())
+			chart.model.set({ destroyed: true }, { skipUpdate: true })
+			chart = null
 		}
 	})
 </script>
 
-<div bind:this={ref} class="chart-container" {...$$restProps} />
+<div {id} bind:this={ref} class={chartHolderCssClass} {...$$restProps} />

packages/svelte/src/lib/index.ts

@@ -24,6 +24,40 @@ import TreeChart from './TreeChart.svelte'
 import TreemapChart from './TreemapChart.svelte'
 import WordCloudChart from './WordCloudChart.svelte'
 
+// Republish essential types from core so it's not a required dependency
+export type {
+	ChartTabularData,
+	AlluvialChartOptions,
+	AreaChartOptions,
+	BarChartOptions,
+	BoxplotChartOptions,
+	BubbleChartOptions,
+	BulletChartOptions,
+	ChoroplethChartOptions,
+	CirclePackChartOptions,
+	ComboChartOptions,
+	DonutChartOptions,
+	GaugeChartOptions,
+	HeatmapChartOptions,
+	HistogramChartOptions,
+	LineChartOptions,
+	LollipopChartOptions,
+	MeterChartOptions,
+	PieChartOptions,
+	RadarChartOptions,
+	ScatterChartOptions,
+	StackedAreaChartOptions,
+	TreeChartOptions,
+	TreemapChartOptions,
+	WorldCloudChartOptions
+} from '@carbon/charts'
+
+// Commonly-used enums
+export {
+	Alignments,
+	ScaleTypes 
+} from '@carbon/charts'
+
 export {
 	AlluvialChart,
 	AreaChart,

packages/vue/package.json

@@ -64,8 +64,8 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.0.26",
     "typescript": "^5.1.6",
-    "vite": "^4.4.1",
-    "vite-plugin-dts": "^3.1.0",
+    "vite": "^4.4.2",
+    "vite-plugin-dts": "^3.1.1",
     "vue-tsc": "^1.8.4"
   },
   "publishConfig": {