refactor(storylite): use context instead of virtual modules

package.json

@@ -12,6 +12,7 @@
     "build": "turbo build",
     "changeset": "changeset",
     "changeset.apply": "changeset version && pnpm i --no-frozen-lockfile && git add .",
+    "changeset.publish": "pnpm changeset.release",
     "changeset.release": "pnpm build && pnpm publint && changeset publish",
     "clear-cache": "rm -rf packages/*/.turbo && rm -rf packages/*/.next && jest --clearCache",
     "dev": "turbo run build && turbo run dev --no-deps --no-cache --parallel --concurrency 20",

packages/examples/react/app.tsx

@@ -3,10 +3,18 @@ import '@storylite/storylite/dist/index.css'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import { StoryLiteRouter } from '@storylite/storylite'
+import { StoryLiteApp } from '@storylite/storylite'
+import stories from 'virtual:storylite-stories'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <StoryLiteRouter />
+    <StoryLiteApp
+      stories={stories}
+      config={{
+        title: 'My Storylite',
+        defaultStory: 'index',
+        stylesheets: [],
+      }}
+    />
   </React.StrictMode>,
 )

packages/examples/react/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["stories", "src", "*.ts", "*.tsx"],
   "compilerOptions": {
     "jsx": "react-jsx",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "react", "react-dom", "@storylite/storylite/dist/virtual-modules.d.ts"]
   }
 }

packages/examples/react/vite.config.ts

@@ -15,9 +15,7 @@ export default defineConfig({
   },
   plugins: [
     storylitePlugin({
-      title: 'StoryLite - React', // Sidebar title
       stories: 'stories/**/*.stories.tsx', // relative to the CWD
-      defaultStory: 'index', // index page file prefix, e.g. index = index.stories.tsx
     }),
     react(),
   ],

packages/storylite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storylite/storylite",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A lightweight alternative to StoryBook, built on top of Vite⚡️",
   "license": "MIT",
   "type": "module",

packages/storylite/src/router.tsx → packages/storylite/src/app.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import { ActionFunction, createHashRouter, LoaderFunction, RouterProvider } from 'react-router-dom'
 
+import { StoryliteDataContext } from './context/StoriesDataContext'
 import MainLayout from './layouts/MainLayout'
 import Error404, { Layout as ErrorLayout } from './pages/404'
 import * as IndexPage from './pages/index'
 import * as SandboxDashboardPage from './pages/sandbox/dashboard'
 import * as SandboxStoryIndex from './pages/sandbox/stories/$story'
 import * as SandboxExportedStory from './pages/sandbox/stories/$story/$export_name'
 import * as ExportedStory from './pages/stories/$story/$export_name'
+import { StoryLiteAppConfig, StoryModulesMap } from './types'
 
 type PageType = {
   default?: React.FC
@@ -99,8 +101,12 @@ const router = createHashRouter(
   })),
 )
 
-const Router = () => {
-  return <RouterProvider router={router} />
+const StoryLiteApp = (props: { config?: StoryLiteAppConfig; stories: StoryModulesMap }) => {
+  return (
+    <StoryliteDataContext.Provider value={{ config: props.config, stories: props.stories }}>
+      <RouterProvider router={router} />
+    </StoryliteDataContext.Provider>
+  )
 }
 
-export default Router
+export default StoryLiteApp

packages/storylite/src/components/Sidebar.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 
 import { Bookmark, MinusSquare, PlusSquare } from 'lucide-react'
-import storyMap from 'storylite-user-stories'
 
+import { useStoryliteStories } from '@/context/StoriesDataContext'
 import { ElementIds, StoryMeta, StoryModule, StoryModulesMapValue } from '@/types'
 
 type SidebarProps = {
@@ -18,8 +18,6 @@ type SidebarItemBaseProps = {
   currentExportName?: string
 }
 
-const minTooltipLength = 16
-
 export default function Sidebar({ title, ...rest }: SidebarProps) {
   const { story, export_name } = useParams()
 
@@ -40,10 +38,12 @@ function SidebarNav({
   currentStoryName?: string
   currentExportName?: string
 }): JSX.Element {
+  const stories = useStoryliteStories()
+
   return (
     <nav className={'SidebarNav'}>
       <ul>
-        {Array.from<[string, StoryModulesMapValue]>(storyMap).map(([storyName, storyData], i) => {
+        {Array.from<[string, StoryModulesMapValue]>(stories).map(([storyName, storyData], i) => {
           return (
             <SidebarListItem
               key={i}
@@ -79,7 +79,7 @@ function SidebarListItem(props: SidebarItemBaseProps): JSX.Element {
     const firstStoryExport = storyData.module[exports[0]]
     const classes = [storyName === currentStoryName ? 'Active' : ''].join(' ')
     const title = firstStoryExport.storyTitle || storyData.meta.title || storyName
-    const tooltip = title.length >= minTooltipLength ? title : undefined
+    const tooltip = typeof title === 'string' ? title : undefined
 
     return (
       <li className={classes} title={tooltip}>
@@ -98,7 +98,7 @@ function SidebarListItem(props: SidebarItemBaseProps): JSX.Element {
     />
   )
   const title = storyData.meta.title || storyName
-  const tooltip = title.length >= minTooltipLength ? title : undefined
+  const tooltip = typeof title === 'string' ? title : undefined
 
   return (
     <li className={'WithNestedList'} title={tooltip}>
@@ -122,7 +122,7 @@ function SidebarNestedList(props: SidebarItemBaseProps): JSX.Element {
           const exportFn = storyData.module[exportName]
           const classes = [exportName === currentExportName ? 'Active' : '', 'InnerList'].join(' ')
           const title = exportFn.storyTitle || exportName
-          const tooltip = title.length >= minTooltipLength ? title : undefined
+          const tooltip = typeof title === 'string' ? title : undefined
 
           return (
             <li key={i} className={classes} title={tooltip}>

packages/storylite/src/components/SidebarTitle.tsx

@@ -1,13 +1,16 @@
 import { Link } from 'react-router-dom'
 
 import { Library } from 'lucide-react'
-import storiesConfig from 'storylite-user-config'
+
+import { useStoryliteConfig } from '@/context/StoriesDataContext'
 
 export default function SidebarTitle() {
+  const config = useStoryliteConfig()
+
   return (
     <div className={'SidebarTitle'}>
       <Link to={'/'}>
-        <Library style={{ verticalAlign: 'middle' }} /> {storiesConfig.title}
+        <Library style={{ verticalAlign: 'middle' }} /> {config.title}
       </Link>
     </div>
   )

packages/storylite/src/components/Story.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
 
-import storyMap from 'storylite-user-stories'
-
+import { useStoryliteStories } from '@/context/StoriesDataContext'
 import { ElementIds, StoryComponent, StoryMeta, StoryModule } from '@/types'
 
 import Toolbar from './Toolbar'
 
 export function Story({ story, exportName }: { story: string; exportName?: string }): JSX.Element {
+  const stories = useStoryliteStories()
+
   const notFound = (
     <StorySandbox story={story} exportName={exportName}>
       <h3>
@@ -19,7 +20,7 @@ export function Story({ story, exportName }: { story: string; exportName?: strin
       </h3>
     </StorySandbox>
   )
-  const storyMapData = storyMap.get(story)
+  const storyMapData = stories.get(story)
 
   if (!storyMapData) {
     return notFound

packages/storylite/src/context/StoriesDataContext.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { StoryLiteAppConfig, StoryModulesMap } from '..'
+
+export type StoryliteDataContextType = {
+  config?: StoryLiteAppConfig
+  stories: StoryModulesMap
+}
+
+export const StoryliteDataContext = React.createContext<StoryliteDataContextType | undefined>(
+  undefined,
+)
+
+export const useStoryliteDataContext = () => {
+  const context = React.useContext(StoryliteDataContext)
+  if (!context) {
+    throw new Error('useStoryliteDataContext must be used within a StoryliteDataProvider')
+  }
+
+  return context
+}
+
+export const useStoryliteData = (): Required<StoryliteDataContextType> => {
+  const { config, stories } = useStoryliteDataContext()
+
+  if (!config) {
+    throw new Error(
+      'useStoryliteData must be used within a StoryliteDataProvider. config is undefined.',
+    )
+  }
+
+  return { config, stories }
+}
+
+export const useStoryliteConfig = (): StoryLiteAppConfig => {
+  const { config } = useStoryliteData()
+
+  return config
+}
+
+export const useStoryliteStories = (): StoryModulesMap => {
+  const { stories } = useStoryliteData()
+
+  return stories
+}
+
+const defaultConfig: StoryLiteAppConfig = {
+  title: 'Storylite',
+  defaultStory: 'index',
+  stylesheets: [],
+}
+
+export const StoryliteDataProvider = ({
+  config,
+  stories,
+  children,
+}: {
+  config?: StoryLiteAppConfig
+  stories: StoryModulesMap
+  children: React.ReactNode
+}) => {
+  const mergedConfig: StoryLiteAppConfig = { ...defaultConfig, ...config }
+
+  return (
+    <StoryliteDataContext.Provider value={{ config: mergedConfig, stories }}>
+      {children}
+    </StoryliteDataContext.Provider>
+  )
+}

packages/storylite/src/index.ts

@@ -1,7 +1,7 @@
 import './styles/index.css'
 
-import StoryLiteRouter from './router'
+import StoryLiteApp from './app'
 
 export * from './types'
 
-export { StoryLiteRouter }
+export { StoryLiteApp }

packages/storylite/src/pages/sandbox/dashboard.tsx

@@ -1,11 +1,12 @@
-import userConfig from 'storylite-user-config'
-
 import { Story } from '@/components/Story'
+import { useStoryliteConfig } from '@/context/StoriesDataContext'
 
 import SandboxLayout from '../../layouts/SandboxLayout'
 
 export default function StoryPage() {
-  return <Story story={userConfig.defaultStory || 'index'} exportName={'Main'} />
+  const config = useStoryliteConfig()
+
+  return <Story story={config.defaultStory || 'index'} exportName={'Main'} />
 }
 
 export const Layout = SandboxLayout

packages/storylite/src/plugins/index.ts

@@ -1,4 +1,4 @@
-import removeTestIdPlugin from './removeTestIdPlugin'
-import storylitePlugin from './storylitePlugin'
+import removeTestIdPlugin from './vite-plugin-remove-testid'
+import storylitePlugin from './vite-plugin-storylite'
 
 export { removeTestIdPlugin, storylitePlugin }