build: migrate soba Storybook to Vite

Author: brandonroberts

libs/soba/.storybook/main.ts

@@ -1,33 +1,46 @@
-import type { StorybookConfig } from '@storybook/angular';
-import { resolve } from 'node:path';
-
-const config: StorybookConfig = {
-    stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
-    addons: [
-        '@storybook/addon-essentials',
-        'storybook-addon-deep-controls',
-        '@chromatic-com/storybook'
-    ],
-
-    webpackFinal: async (config) => {
-		config.module?.rules?.push({
-			test: /\.(glsl|vs|fs|vert|frag)$/,
-			exclude: /node_modules/,
-			use: ['raw-loader', 'glslify-loader'],
-			include: resolve(__dirname, '../'),
+import { StorybookConfig } from '@storybook/angular';
+import { StorybookConfigVite } from '@storybook/builder-vite';
+import { UserConfig } from 'vite';
+
+const config: StorybookConfig & StorybookConfigVite = {
+	stories: ['../**/*.mdx', '../**/*.stories.@(js|ts)'],
+	addons: ['@storybook/addon-essentials', 'storybook-addon-deep-controls', '@chromatic-com/storybook'],
+	core: {
+		builder: {
+			name: '@storybook/builder-vite',
+			options: {
+				viteConfigPath: undefined,
+			},
+		},
+	},
+	async viteFinal(config: UserConfig) {
+		// Merge custom configuration into the default config
+		const { mergeConfig } = await import('vite');
+		const { default: angular } = await import('@analogjs/vite-plugin-angular');
+		const { nxViteTsPaths } = await import('@nx/vite/plugins/nx-tsconfig-paths.plugin');
+
+		return mergeConfig(config, {
+			// Add dependencies to pre-optimization
+			optimizeDeps: {
+				include: [
+					'@storybook/angular',
+					'@storybook/angular/dist/client',
+					'@angular/compiler',
+					'@mdx-js/react',
+					'@storybook/blocks',
+					'tslib',
+				],
+			},
+			plugins: [angular({ jit: true, tsconfig: './.storybook/tsconfig.json' }), nxViteTsPaths()],
 		});
-
-		return config;
 	},
 
-    staticDirs: ['./public', './public/cube'],
-
-    framework: {
+	framework: {
 		name: '@storybook/angular',
 		options: {},
 	},
 
-    docs: {}
+	docs: {},
 };
 
 export default config;

libs/soba/project.json

@@ -42,31 +42,22 @@
 			"outputs": ["{options.outputFile}"]
 		},
 		"storybook": {
-			"executor": "@storybook/angular:start-storybook",
+			"executor": "nx:run-commands",
 			"options": {
-				"port": 4400,
-				"configDir": "libs/soba/.storybook",
-				"browserTarget": "soba:build-storybook",
-				"compodoc": false
-			},
-			"configurations": {
-				"ci": {
-					"quiet": true
-				}
+				"cwd": "libs/soba",
+				"command": "storybook dev --port 4400"
 			}
 		},
 		"build-storybook": {
-			"executor": "@storybook/angular:build-storybook",
+			"executor": "nx:run-commands",
 			"outputs": ["{options.outputDir}"],
 			"options": {
-				"outputDir": "dist/storybook/soba",
-				"configDir": "libs/soba/.storybook",
-				"browserTarget": "soba:build-storybook",
-				"compodoc": false
+				"cwd": "libs/soba",
+				"command": "storybook build --output-dir ../../dist/storybook/soba"
 			},
 			"configurations": {
 				"ci": {
-					"quiet": true
+					"command": "storybook build --output-dir ../../dist/storybook/soba --quiet"
 				}
 			}
 		},

libs/soba/vite.config.mts libs/soba/vitest.config.tslibs/soba/vite.config.mts renamed to libs/soba/vitest.config.ts

@@ -10,9 +10,9 @@
 	},
 	"private": true,
 	"devDependencies": {
-		"@analogjs/platform": "^1.7.1",
-		"@analogjs/vite-plugin-angular": "^1.7.1",
-		"@analogjs/vitest-angular": "^1.7.1",
+		"@analogjs/platform": "1.8.0-beta.2",
+		"@analogjs/vite-plugin-angular": "1.8.0-beta.2",
+		"@analogjs/vitest-angular": "1.8.0-beta.2",
 		"@angular-devkit/build-angular": "18.2.0",
 		"@angular-devkit/core": "18.2.0",
 		"@angular-devkit/schematics": "18.2.0",
@@ -46,6 +46,7 @@
 		"@storybook/addon-essentials": "8.2.9",
 		"@storybook/addon-interactions": "8.2.9",
 		"@storybook/angular": "8.2.9",
+		"@storybook/builder-vite": "8.2.9",
 		"@storybook/core-server": "8.2.9",
 		"@storybook/manager-api": "^8.2.9",
 		"@storybook/test": "8.2.9",
@@ -101,8 +102,8 @@
 		"vitest-webgl-canvas-mock": "^1.1.0"
 	},
 	"dependencies": {
-		"@analogjs/content": "^1.7.1",
-		"@analogjs/router": "^1.7.1",
+		"@analogjs/content": "1.8.0-beta.2",
+		"@analogjs/router": "1.8.0-beta.2",
 		"@angular/animations": "18.2.0",
 		"@angular/common": "18.2.0",
 		"@angular/compiler": "18.2.0",