fix(qwik-nx): storybook plugin should not add @qwik-city-sw-register to rollupOptions.external (#218)

Author: dmitry-stepanenko

packages/qwik-nx/src/generators/storybook-configuration/__snapshots__/generator.spec.ts.snap

@@ -1,17 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`storybook-configuration generator should add required targets 1`] = `
-"import { mergeConfig, UserConfig } from 'vite';
+"import { UserConfig } from 'vite';
 import { withNx } from 'qwik-nx/storybook';
-import viteConfig from './../vite.config';
 
 const config = {
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   framework: { name: 'storybook-framework-qwik' },
   async viteFinal(config: UserConfig) {
-    const updatedConfig = mergeConfig(config, viteConfig);
-    return withNx(updatedConfig);
+    return withNx(config);
   },
 };
 

packages/qwik-nx/src/generators/storybook-configuration/files/.storybook/main.__configExtension__.template

@@ -1,6 +1,5 @@
-import { mergeConfig, UserConfig } from 'vite';
+import { UserConfig } from 'vite';
 import { withNx } from 'qwik-nx/storybook';
-import viteConfig from './../vite.config';
 
 const config = {
   stories: [
@@ -10,8 +9,7 @@ const config = {
   addons: ['@storybook/addon-essentials'],
   framework: { name: 'storybook-framework-qwik', },
   async viteFinal(config: UserConfig) {
-    const updatedConfig = mergeConfig(config, viteConfig);
-    return withNx(updatedConfig);
+    return withNx(config<% if(isLib) { %>, true <% } %>);
   },
 };
 

packages/qwik-nx/src/generators/storybook-configuration/generator.ts

@@ -31,7 +31,7 @@ import {
 function addFiles(
   tree: Tree,
   options: StorybookConfigurationGeneratorSchema,
-  { root }: ProjectConfiguration
+  { root, projectType }: ProjectConfiguration
 ) {
   tree.delete(path.join(root, '.storybook/main.js'));
 
@@ -41,6 +41,7 @@ function addFiles(
     offsetFromRoot: offsetFromRoot(root),
     projectRoot: root,
     configExtension: options.tsConfiguration ? 'ts' : 'js',
+    isLib: projectType === 'library',
   };
   generateFiles(tree, path.join(__dirname, 'files'), root, templateOptions);
 

packages/qwik-nx/src/plugins/qwik-nx-vite.plugin.ts

@@ -4,6 +4,7 @@ import {
   QwikVitePluginStub,
 } from './models/qwik-nx-vite';
 import { getVendorRoots } from './utils/get-vendor-roots';
+import { output } from '@nx/devkit';
 
 /**
  * `qwikNxVite` plugin serves as an integration step between Qwik and Nx.
@@ -21,18 +22,28 @@ export function qwikNxVite(options?: QwikNxVitePluginOptions): Plugin {
     enforce: 'pre',
 
     async configResolved(config) {
-      const qwikPlugin = config.plugins.find(
+      const qwikPlugins = config.plugins.filter(
         (p) => p.name === 'vite-plugin-qwik'
-      ) as QwikVitePluginStub;
-      if (!qwikPlugin) {
+      ) as QwikVitePluginStub[];
+      if (!qwikPlugins.length) {
         throw new Error('Missing vite-plugin-qwik');
       }
 
-      const pluginOptions = qwikPlugin.api.getOptions();
+      if (qwikPlugins.length > 1) {
+        output.warn({
+          title:
+            'Multiple instances of "vite-plugin-qwik" found. Check your vite.config!',
+        });
+      }
+
+      for (const qwikPlugin of qwikPlugins) {
+        // it's not expected to have the plugin duplicated, but handling it as an edge case
+        const pluginOptions = qwikPlugin.api.getOptions();
 
-      const vendorRoots = await getVendorRoots(options, pluginOptions);
+        const vendorRoots = await getVendorRoots(options, pluginOptions);
 
-      pluginOptions.vendorRoots.push(...vendorRoots);
+        pluginOptions.vendorRoots.push(...vendorRoots);
+      }
     },
   };
 

packages/qwik-nx/src/plugins/utils/get-vendor-roots.ts

@@ -76,7 +76,7 @@ export async function getVendorRoots(
 
   if (options?.debug) {
     log(
-      'Projects after excluding those not in tsconfig.base.json:',
+      'Final projects list after excluding those not in tsconfig.base.json:',
       projects.map((p) => p.name)
     );
   }

packages/qwik-nx/src/utils/storybook.ts

@@ -11,31 +11,36 @@ import {
  */
 export function withNx(
   config: UserConfig,
+  excludeQwikCitySwRegister = false,
   qwikViteOpts?: QwikVitePluginOptions
 ): UserConfig {
-  const updated: UserConfig = mergeConfig(config, {
-    build: {
-      rollupOptions: {
-        external: ['@qwik-city-sw-register'],
-      },
-    },
-  });
-  updated.plugins = updated.plugins?.flat(10).map((plugin: PluginOption) => {
-    switch ((plugin as any)?.name) {
-      case 'vite-plugin-qwik':
-        // as of now there's no way of extending qwikVite with overridden output paths, thus have to override to completely
-        return qwikVite(qwikViteOpts);
+  const updated: UserConfig = excludeQwikCitySwRegister
+    ? mergeConfig(config, {
+        build: {
+          rollupOptions: {
+            external: ['@qwik-city-sw-register'],
+          },
+        },
+      })
+    : { ...config };
+  return {
+    ...updated,
+    plugins: config.plugins?.flat(10).map((plugin: PluginOption) => {
+      switch ((plugin as any)?.name) {
+        case 'vite-plugin-qwik':
+          // as of now there's no way of extending qwikVite with overridden output paths, thus have to override to completely
+          return qwikVite(qwikViteOpts);
 
-      case 'vite-plugin-qwik-city':
-        // logic below has been copied from "storybook-framework-qwik" plugin
-        // it doesn't work out of the box for Nx applications because base config is not included by storybook if it's not in the root cwd
-        // Qwik-city plugin may be used in apps, but it has mdx stuff that conflicts with Storybook mdx
-        // we'll try to only remove the transform code (where the mdx stuff is), and keep everything else.
-        return { ...plugin, transform: () => null } as PluginOption;
+        case 'vite-plugin-qwik-city':
+          // logic below has been copied from "storybook-framework-qwik" plugin
+          // it doesn't work out of the box for Nx applications because base config is not included by storybook if it's not in the root cwd
+          // Qwik-city plugin may be used in apps, but it has mdx stuff that conflicts with Storybook mdx
+          // we'll try to only remove the transform code (where the mdx stuff is), and keep everything else.
+          return { ...plugin, transform: () => null } as PluginOption;
 
-      default:
-        return plugin;
-    }
-  });
-  return updated;
+        default:
+          return plugin;
+      }
+    }),
+  };
 }