Enhance no-renderer-packages rule documentation and implementation

- Updated the documentation for the `no-renderer-packages` rule to include specific framework package suggestions based on the renderer being used.
- Refactored the rule's implementation to utilize a mapping of renderer packages to their corresponding framework packages, improving clarity and maintainability.
- Added additional framework-specific package links in the documentation for better guidance.

Author: ndelangen

docs/rules/no-renderer-packages.md

@@ -10,9 +10,20 @@
 
 This rule prevents importing Storybook renderer packages directly in stories. Instead, you should use framework-specific packages that are designed for your build tool (e.g., Vite, webpack).
 
+The rule will suggest appropriate framework packages based on which renderer you're trying to use:
+
+- For `@storybook/html`: Use `@storybook/html-vite` or `@storybook/html-webpack5`
+- For `@storybook/preact`: Use `@storybook/preact-vite` or `@storybook/preact-webpack5`
+- For `@storybook/react`: Use `@storybook/nextjs`, `@storybook/react-vite`, `@storybook/react-webpack5`, `@storybook/react-native-web-vite`, or `@storybook/experimental-nextjs-vite`
+- For `@storybook/server`: Use `@storybook/server-webpack5`
+- For `@storybook/svelte`: Use `@storybook/svelte-vite`, `@storybook/svelte-webpack5`, or `@storybook/sveltekit`
+- For `@storybook/vue3`: Use `@storybook/vue3-vite` or `@storybook/vue3-webpack5`
+- For `@storybook/web-components`: Use `@storybook/web-components-vite` or `@storybook/web-components-webpack5`
+
 Examples of **incorrect** code for this rule:
 
 ```js
+// Don't import renderer packages directly
 import { something } from '@storybook/react'
 import { something } from '@storybook/vue3'
 import { something } from '@storybook/web-components'
@@ -21,14 +32,16 @@ import { something } from '@storybook/web-components'
 Examples of **correct** code for this rule:
 
 ```js
-import { something } from '@storybook/react-vite'
-import { something } from '@storybook/vue3-webpack5'
-import { something } from '@storybook/web-components-vite'
+// Do use the appropriate framework package for your build tool
+import { something } from '@storybook/react-vite' // For Vite
+import { something } from '@storybook/vue3-webpack5' // For Webpack 5
+import { something } from '@storybook/web-components-vite' // For Vite
+import { something } from '@storybook/nextjs' // For Next.js
 ```
 
 ## When Not To Use It
 
-If you have a specific need to use renderer packages directly in your stories, you can disable this rule. However, it's recommended to use the framework-specific packages as they are optimized for your build tool.
+If you have a specific need to use renderer packages directly in your stories, you can disable this rule. However, it's recommended to use the framework-specific packages as they are optimized for your build tool and provide better integration with your development environment.
 
 ## Further Reading
 
@@ -37,3 +50,6 @@ For more information about Storybook's framework-specific packages and build too
 - [Storybook for React](https://storybook.js.org/docs/react/get-started/install)
 - [Storybook for Vue](https://storybook.js.org/docs/vue/get-started/install)
 - [Storybook for Web Components](https://storybook.js.org/docs/web-components/get-started/install)
+- [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started/install)
+- [Storybook for HTML](https://storybook.js.org/docs/html/get-started/install)
+- [Storybook for Preact](https://storybook.js.org/docs/preact/get-started/install)

lib/rules/no-renderer-packages.ts

@@ -7,36 +7,36 @@ import { CategoryId } from '../utils/constants'
 import { createStorybookRule } from '../utils/create-storybook-rule'
 import { TSESTree } from '@typescript-eslint/utils'
 
-const rendererPackages: Record<string, string> = {
-  '@storybook/html': 'html',
-  '@storybook/polymer': 'polymer',
-  '@storybook/preact': 'preact',
-  '@storybook/react': 'react',
-  '@storybook/server': 'server',
-  '@storybook/svelte': 'svelte',
-  '@storybook/vue': 'vue',
-  '@storybook/vue3': 'vue3',
-  '@storybook/web-components': 'web-components',
-}
+type RendererPackage =
+  | '@storybook/html'
+  | '@storybook/preact'
+  | '@storybook/react'
+  | '@storybook/server'
+  | '@storybook/svelte'
+  | '@storybook/vue3'
+  | '@storybook/web-components'
 
-const frameworkPackages: Record<string, string> = {
-  '@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',
-  '@storybook/html-vite': 'html-vite',
-  '@storybook/html-webpack5': 'html-webpack5',
-  '@storybook/nextjs': 'nextjs',
-  '@storybook/preact-vite': 'preact-vite',
-  '@storybook/preact-webpack5': 'preact-webpack5',
-  '@storybook/react-native-web-vite': 'react-native-web-vite',
-  '@storybook/react-vite': 'react-vite',
-  '@storybook/react-webpack5': 'react-webpack5',
-  '@storybook/server-webpack5': 'server-webpack5',
-  '@storybook/svelte-vite': 'svelte-vite',
-  '@storybook/svelte-webpack5': 'svelte-webpack5',
-  '@storybook/sveltekit': 'sveltekit',
-  '@storybook/vue3-vite': 'vue3-vite',
-  '@storybook/vue3-webpack5': 'vue3-webpack5',
-  '@storybook/web-components-vite': 'web-components-vite',
-  '@storybook/web-components-webpack5': 'web-components-webpack5',
+const rendererToFrameworks: Record<RendererPackage, string[]> = {
+  '@storybook/html': ['@storybook/html-vite', '@storybook/html-webpack5'],
+  '@storybook/preact': ['@storybook/preact-vite', '@storybook/preact-webpack5'],
+  '@storybook/react': [
+    '@storybook/nextjs',
+    '@storybook/react-vite',
+    '@storybook/react-webpack5',
+    '@storybook/react-native-web-vite',
+    '@storybook/experimental-nextjs-vite',
+  ],
+  '@storybook/server': ['@storybook/server-webpack5'],
+  '@storybook/svelte': [
+    '@storybook/svelte-vite',
+    '@storybook/svelte-webpack5',
+    '@storybook/sveltekit',
+  ],
+  '@storybook/vue3': ['@storybook/vue3-vite', '@storybook/vue3-webpack5'],
+  '@storybook/web-components': [
+    '@storybook/web-components-vite',
+    '@storybook/web-components-webpack5',
+  ],
 }
 
 //------------------------------------------------------------------------------
@@ -64,29 +64,12 @@ export = createStorybookRule<Options, MessageIds>({
   },
 
   create(context) {
-    //----------------------------------------------------------------------
-    // Helpers
-    //----------------------------------------------------------------------
-
-    const getSuggestedFrameworkPackages = (rendererName: string): string[] => {
-      const rendererType = rendererPackages[rendererName]
-      if (!rendererType) return []
-
-      return Object.entries(frameworkPackages)
-        .filter(([pkg]) => pkg.includes(rendererType))
-        .map(([pkg]) => pkg)
-    }
-
-    //----------------------------------------------------------------------
-    // Public
-    //----------------------------------------------------------------------
-
     return {
       ImportDeclaration(node: TSESTree.ImportDeclaration) {
         const packageName = node.source.value
 
-        if (typeof packageName === 'string' && rendererPackages[packageName]) {
-          const suggestions = getSuggestedFrameworkPackages(packageName)
+        if (typeof packageName === 'string' && packageName in rendererToFrameworks) {
+          const suggestions = rendererToFrameworks[packageName as RendererPackage]
 
           context.report({
             node,