fix(stackblitz/vue): workaround for stackblitz bug (#1742)

carbon-design-system · Feb 5, 2024 · def9bc5 · def9bc5
1 parent d895712
commit def9bc5
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "packageManager": "yarn@4.0.2",
   "prettier": "./prettier.config.mjs",
   "devDependencies": {
-    "@nrwl/devkit": "^18.0.0",
+    "@nrwl/devkit": "^18.0.1",
     "@storybook/addon-essentials": "~7.6.12",
     "@storybook/addon-interactions": "~7.6.12",
     "@storybook/addon-links": "~7.6.12",

diff --git a/packages/core/src/demo/utils/package-versions.ts b/packages/core/src/demo/utils/package-versions.ts
@@ -9,16 +9,19 @@ export const version = {
 	d3: core.dependencies['d3'] as string,
 	d3Cloud: core.dependencies['d3-cloud'] as string,
 	d3Sankey: core.dependencies['d3-sankey'] as string,
-	angular: '17.1.2', // angular.dependencies['@angular/core'] as string, // temporary StackBlitz issue
+	angular: 'latest', // angular.dependencies['@angular/core'] as string, // temporary StackBlitz issue
 	react: react.dependencies['react'] as string,
 	rxjs: angular.dependencies['rxjs'] as string,
-	svelteVite: '^2.4.6' as string,
-	svelteTsConfig: '^5.0.2' as string,
+	svelteVite: svelte.devDependencies['@sveltejs/vite-plugin-svelte'] as string,
+	svelteTsConfig: 'latest' as string,
 	svelte: svelte.devDependencies['svelte'] as string,
 	svelteCheck: svelte.devDependencies['svelte-check'] as string,
 	tslib: angular.dependencies['tslib'] as string,
 	typescript: angular.dependencies['typescript'] as string,
 	vite: core.devDependencies['vite'] as string,
 	vue: vue.dependencies['vue'] as string,
+	vueTsc: vue.devDependencies['vue-tsc'] as string,
+	vueTypeScript: vue.devDependencies['typescript'] as string,
+	vueVitePlugin: vue.devDependencies['@vitejs/plugin-vue'] as string,
 	zoneJs: angular.dependencies['zone.js'] as string
 }
diff --git a/packages/core/src/demo/utils/stackblitz/vue.ts b/packages/core/src/demo/utils/stackblitz/vue.ts
@@ -12,6 +12,13 @@ export function buildVueExample(demo: Demo): Project {
 		vue: version.vue
 	}
 
+	const devDependencies: Record<string, string> = {
+		'@vitejs/plugin-vue': version.vueVitePlugin,
+		typescript: version.vueTypeScript,
+		vite: version.vite, 
+		'vue-tsc': version.vueTsc
+	}
+
 	const indexHtml = `<!DOCTYPE html>
 <html lang="en">
   <head>
@@ -28,29 +35,24 @@ export function buildVueExample(demo: Demo): Project {
   </head>
   <body>
     <div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
   </body>
 </html>`
 
-	const appVue = `<template>
-<div id="app" class="p-1">
-  <${demo.chartType.vue} :data="data" :options="options" />
-</div>
-</template>
-
-<script>
-import data from './data.js';
-import options from './options.js';
-
-export default {
-  data() {
-    return {
-      data,
-      options
-    };
-  }
-};
+	const appVue = `<script setup lang="ts">
+	import { ref } from 'vue'
+	import chartData from './data.ts'
+	import chartOptions from './options.ts'
+	const data = ref(chartData)
+	const options = ref(chartOptions)
 </script>
 
+<template>
+  <div id="app" class="p-1">
+    <${demo.chartType.vue} :data :options />
+  </div>
+</template>
+
 <style>
 @import '@carbon/charts-vue/styles.css';
 .p-1 {
@@ -71,25 +73,85 @@ app.mount('#app')
 		name: 'carbon-charts-vue-example',
 		description: 'Carbon Charts Vue Example',
 		version: '0.0.0',
+		type: 'module',
 		scripts: {
-			serve: 'vue-cli-service serve',
-			build: 'vue-cli-service build',
-			lint: 'vue-cli-service lint'
+			dev: 'vite',
+			build: 'vue-tsc && vite build',
+			preview: 'vite preview'
 		},
-		dependencies
+		dependencies,
+		devDependencies
 	}
 
+	const tsConfigJson = `{
+		"compilerOptions": {
+			"target": "ES2020",
+			"useDefineForClassFields": true,
+			"module": "ESNext",
+			"lib": ["ES2020", "DOM", "DOM.Iterable"],
+			"skipLibCheck": true,
+	
+			/* Bundler mode */
+			"moduleResolution": "bundler",
+			"allowImportingTsExtensions": true,
+			"resolveJsonModule": true,
+			"isolatedModules": true,
+			"noEmit": true,
+			"jsx": "preserve",
+	
+			/* Linting */
+			"strict": true,
+			"noUnusedLocals": true,
+			"noUnusedParameters": true,
+			"noFallthroughCasesInSwitch": true,
+		},
+		"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+		"references": [{ "path": "./tsconfig.node.json" }]
+	}`
+
+		const tsConfigNodeJson = `{
+			"compilerOptions": {
+				"composite": true,
+				"skipLibCheck": true,
+				"module": "ESNext",
+				"moduleResolution": "bundler",
+				"allowSyntheticDefaultImports": true
+			},
+			"include": ["vite.config.ts"]
+	}`
+
+		const viteConfigTs = `import { defineConfig } from 'vite'
+		import { fileURLToPath } from 'url'
+		import vue from '@vitejs/plugin-vue'
+		
+		// https://vitejs.dev/config/
+		export default defineConfig({
+			resolve: {
+				alias: {
+					'@': fileURLToPath(new URL('./src', import.meta.url)),
+					vue: 'vue/dist/vue.esm-bundler.js'
+				}
+			},
+			plugins: [vue()],
+		})		
+	`
+
 	return {
-		template: 'vue' as ProjectTemplate,
+		template: 'node' as ProjectTemplate,
 		title: 'Carbon Charts Vue Example',
-		dependencies,
+		// dependencies,
 		files: {
-			'public/index.html': indexHtml,
+			'index.html': indexHtml,
 			'src/App.vue': appVue,
-			'src/data.js': objectToString(demo.data),
-			'src/main.js': mainJs,
-			'src/options.js': objectToString(demo.options),
-			'package.json': JSON.stringify(packageJson, null, 2)
+			'src/data.ts': objectToString(demo.data),
+			'src/main.ts': mainJs,
+			'src/options.ts': objectToString(demo.options),
+			'src/vite-env.d.ts': `/// <reference types="vite/client" />
+			`,
+			'package.json': JSON.stringify(packageJson, null, 2),
+			'tsconfig.json': tsConfigJson,
+			'tsconfig.node.json': tsConfigNodeJson,
+			'vite.config.ts': viteConfigTs
 		}
 	}
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2168,7 +2168,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/charts-monorepo@workspace:."
   dependencies:
-    "@nrwl/devkit": "npm:^18.0.0"
+    "@nrwl/devkit": "npm:^18.0.1"
     "@storybook/addon-essentials": "npm:~7.6.12"
     "@storybook/addon-interactions": "npm:~7.6.12"
     "@storybook/addon-links": "npm:~7.6.12"
@@ -3727,12 +3727,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrwl/devkit@npm:18.0.0, @nrwl/devkit@npm:^18.0.0":
-  version: 18.0.0
-  resolution: "@nrwl/devkit@npm:18.0.0"
+"@nrwl/devkit@npm:18.0.1, @nrwl/devkit@npm:^18.0.1":
+  version: 18.0.1
+  resolution: "@nrwl/devkit@npm:18.0.1"
   dependencies:
-    "@nx/devkit": "npm:18.0.0"
-  checksum: 04424fd42db8c680704345d74fbfe7823e319706890ec33c508f04ea94f4e80119f38595ed452dffd3bb01d488cc55bf580be03e2b363e2e21eae007937eac9e
+    "@nx/devkit": "npm:18.0.1"
+  checksum: b4000d35c478159ed109337b9ddab345b412a6d3cad5c9673e16dc0f1224edafc401ccb2ee75fe2b04a30cdbef4d1e1c7c63743b9dfa9531a0053e99529338bf
   languageName: node
   linkType: hard
 
@@ -3792,11 +3792,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nx/devkit@npm:18.0.0":
-  version: 18.0.0
-  resolution: "@nx/devkit@npm:18.0.0"
+"@nx/devkit@npm:18.0.1":
+  version: 18.0.1
+  resolution: "@nx/devkit@npm:18.0.1"
   dependencies:
-    "@nrwl/devkit": "npm:18.0.0"
+    "@nrwl/devkit": "npm:18.0.1"
     ejs: "npm:^3.1.7"
     enquirer: "npm:~2.3.6"
     ignore: "npm:^5.0.4"
@@ -3806,7 +3806,7 @@ __metadata:
     yargs-parser: "npm:21.1.1"
   peerDependencies:
     nx: ">= 16 <= 18"
-  checksum: 843fdc91a06d670ba077bbcf28ebaf03190d50207d4152d9ee2248576801985a8b48a968ede9983b7b6f755c51237a0bb79c8de438e2d5fab7e6ae1ba7af87ae
+  checksum: 0472d00296b737bbfaf224000b58e22579f8d6cbe9018190031ddb568ca9be50a3f152c0c4d59e80abc8b4bd3eba9cbf419df2457d91c0a12deb6bf3694edd81
   languageName: node
   linkType: hard