chore: Histoire UI development HMR (#341)

histoire-dev · Oct 24, 2022 · 086235d · 086235d
1 parent 1cb3cdc
commit 086235d
Show file tree

Hide file tree

Showing 15 changed files with 103 additions and 83 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -62,6 +62,8 @@ cd examples/vue3
 pnpm run story:dev
 ```
 
+> For the `vue3` example, you can use the `pnpm run dev:hst` command to start the app with a special configuration enabling HMR for the Histoire UI. Especially useful when working on the UI!
+
 4. After you have tested your changes in development mode, build the story apps and test them using the `story:build` and `story:preview` scripts:
 
 ```sh

diff --git a/examples/vue3/package.json b/examples/vue3/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "dev:hst": "HISTOIRE_DEV=true histoire dev",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview --port 4567",
@@ -14,11 +15,12 @@
   "dependencies": {
     "lottie-web": "^5.9.6",
     "pinia": "^2.0.13",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.1.10"
+    "vue": "^3.2.31"
   },
   "devDependencies": {
+    "@histoire/app": "workspace:*",
     "@histoire/plugin-vue": "workspace:*",
+    "@histoire/vendors": "workspace:*",
     "@vitejs/plugin-vue": "^3.0.1",
     "cypress": "^9.5.3",
     "histoire": "workspace:*",

diff --git a/examples/vue3/postcss.config.js b/examples/vue3/postcss.config.js
@@ -1,3 +1,12 @@
-module.exports = {
-  plugins: [],
-}
+module.exports = process.env.HISTOIRE_DEV
+  ? {
+    plugins: [
+      require('postcss-import'),
+      require('tailwindcss/nesting'),
+      require('tailwindcss')('./tailwind.config.cjs'),
+      require('autoprefixer'),
+    ],
+  }
+  : {
+    plugins: [],
+  }
diff --git a/examples/vue3/src/histoire.setup.ts b/examples/vue3/src/histoire.setup.ts
@@ -1,17 +1,13 @@
 import './histoire.css'
 import { defineSetupVue3 } from '@histoire/plugin-vue'
 import { createPinia } from 'pinia'
-import { createI18n } from 'vue-i18n'
 import GlobalComp from './components/GlobalComp.vue'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.provide('demo', 42)
   const pinia = createPinia()
   app.use(pinia)
 
-  const i18n = createI18n()
-  app.use(i18n)
-
   app.component('GlobalComp', GlobalComp)
 
   app.directive('dashed-border', {

diff --git a/examples/vue3/tailwind.config.cjs b/examples/vue3/tailwind.config.cjs
@@ -0,0 +1,2 @@
+const config = require('@histoire/app/tailwind.config.cjs')
+module.exports = config
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@akryum/sheep": "^0.3.3",
+    "@histoire/vendors": "workspace:*",
     "@iconify/vue": "^3.2.1",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",

diff --git a/...toire-app/src/app/style/floating-vue.pcss → .../histoire-app/src/app/style/floating.pcss b/...toire-app/src/app/style/floating-vue.pcss → .../histoire-app/src/app/style/floating.pcss
diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
@@ -2,7 +2,7 @@
 @import 'floating-vue/dist/style.css';
 @import '@histoire/controls/dist/style.css';
 
-@import 'floating-vue.pcss';
+@import 'floating.pcss';
 @import 'transitions.pcss';
 
 *,

diff --git a/packages/histoire-app/src/bundle-main-dev.js b/packages/histoire-app/src/bundle-main-dev.js
@@ -0,0 +1,4 @@
+import './app/style/main.pcss'
+import { mountMainApp } from './app/index'
+
+mountMainApp()
diff --git a/packages/histoire-app/src/bundle-sandbox-dev.js b/packages/histoire-app/src/bundle-sandbox-dev.js
@@ -0,0 +1,2 @@
+import './app/style/sandbox.css'
+import './app/sandbox'
diff --git a/packages/histoire-app/tailwind.config.cjs b/packages/histoire-app/tailwind.config.cjs
@@ -58,7 +58,7 @@ module.exports = {
   ...inheritedConfig,
   prefix: 'htw-',
   content: [
-    './src/**/*.{vue,js,ts,jsx,tsx,md}',
+    path.resolve(__dirname, './src/**/*.{vue,js,ts,jsx,tsx,md}'),
     // Include controls CSS directly
     path.resolve(__dirname, '../histoire-controls/src/**/*.{vue,js,ts,jsx,tsx,md}'),
   ],

diff --git a/packages/histoire-plugin-vue/package.json b/packages/histoire-plugin-vue/package.json
@@ -24,6 +24,12 @@
       "types": "./dist/client/server.d.ts",
       "default": "./dist/bundled/client/server.js"
     },
+    "./client-dev": {
+      "default": "./src/client/client.ts"
+    },
+    "./collect-dev": {
+      "default": "./src/client/server.ts"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/bundled/index.js"

diff --git a/packages/histoire/src/node/alias.ts b/packages/histoire/src/node/alias.ts
@@ -3,6 +3,6 @@ import { createRequire } from 'node:module'
 
 const require = createRequire(import.meta.url)
 
-export const APP_PATH = path.join(path.dirname(require.resolve('@histoire/app/package.json')), 'dist')
+export const APP_PATH = path.join(path.dirname(require.resolve('@histoire/app/package.json')), process.env.HISTOIRE_DEV ? 'src' : 'dist')
 
 export const TEMP_PATH = path.join(process.cwd(), 'node_modules', '.histoire')
diff --git a/packages/histoire/src/node/vite.ts b/packages/histoire/src/node/vite.ts
@@ -58,6 +58,10 @@ export const RESOLVED_MARKDOWN_FILES = `/__resolved__${MARKDOWN_FILES}`
 
 const ID_SEPARATOR = '__-__'
 
+const PLUGINS_HAVE_DEV = [
+  '@histoire/plugin-vue',
+]
+
 export async function mergeHistoireViteConfig (viteConfig: InlineConfig, ctx: Context) {
   if (ctx.config.vite) {
     const command = ctx.mode === 'dev' ? 'serve' : 'build'
@@ -125,7 +129,7 @@ export async function getViteConfigWithPlugins (isServer: boolean, ctx: Context)
             'vue',
           ],
           alias: {
-            'histoire-style': join(APP_PATH, 'style.css'),
+            'histoire-style': join(APP_PATH, process.env.HISTOIRE_DEV ? 'app/style/main.pcss' : 'style.css'),
           },
         },
         optimizeDeps: {
@@ -152,6 +156,11 @@ export async function getViteConfigWithPlugins (isServer: boolean, ctx: Context)
               TEMP_PATH,
               ctx.resolvedViteConfig.root,
               process.cwd(),
+              ...process.env.HISTOIRE_DEV
+                ? [
+                  '../../packages/histoire-vendors',
+                ]
+                : [],
             ],
           },
           watch: {
@@ -341,7 +350,7 @@ if (import.meta.hot) {
       }
 
       if (id === RESOLVED_SUPPORT_PLUGINS_CLIENT) {
-        const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/client`, {
+        const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/client${process.env.HISTOIRE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
           paths: [ctx.root, import.meta.url],
         }))})`)
         return `export const clientSupportPlugins = {
@@ -350,7 +359,7 @@ if (import.meta.hot) {
       }
 
       if (id === RESOLVED_SUPPORT_PLUGINS_COLLECT) {
-        const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/collect`, {
+        const plugins = ctx.supportPlugins.map(p => `'${p.id}': () => import(${JSON.stringify(require.resolve(`${p.moduleName}/collect${process.env.HISTOIRE_DEV && PLUGINS_HAVE_DEV.includes(p.moduleName) ? '-dev' : ''}`, {
           paths: [ctx.root, import.meta.url],
         }))})`)
         return `export const collectSupportPlugins = {
@@ -360,7 +369,7 @@ if (import.meta.hot) {
 
       if (id === RESOLVED_MARKDOWN_FILES) {
         const filesJs = ctx.markdownFiles.map(f => `${JSON.stringify(f.relativePath)}: () => import(${JSON.stringify(`virtual:md:${f.id}`)})`).join(',')
-        return `import { reactive } from ${getInjectedImport('@histoire/vendors/vue')}
+        return `import { reactive } from ${process.env.HISTOIRE_DEV ? `'vue'` : getInjectedImport('@histoire/vendors/vue')}
         export const markdownFiles = reactive({${filesJs}})
         if (import.meta.hot) {
           if (!window.__hst_md_hmr) {
@@ -457,7 +466,7 @@ if (import.meta.hot) {
     }
   }
   </script>
-  <script type="module" src="/@fs/${APP_PATH}/bundle-sandbox.js"></script>
+  <script type="module" src="/@fs/${APP_PATH}/bundle-sandbox${process.env.HISTOIRE_DEV ? '-dev' : ''}.js"></script>
 </body>
 </html>`
           // Apply Vite HTML transforms. This injects the Vite HMR client, and
@@ -489,7 +498,7 @@ if (import.meta.hot) {
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/@fs/${APP_PATH}/bundle-main.js"></script>
+    <script type="module" src="/@fs/${APP_PATH}/bundle-main${process.env.HISTOIRE_DEV ? '-dev' : ''}.js"></script>
   </body>
 </html>`
             // Apply Vite HTML transforms. This injects the Vite HMR client, and
@@ -528,6 +537,43 @@ if (import.meta.hot) {
     })
   }
 
+  if (process.env.HISTOIRE_DEV && !isServer) {
+    plugins.push({
+      name: 'histoire-dev-plugin',
+      config () {
+        // Examples context
+        return {
+          resolve: {
+            alias: [
+              ...[
+                ['floating-vue/dist/style.css', 'node_modules/floating-vue/dist/style.css'],
+                ['floating-vue', 'floating-vue'],
+                ['@iconify/vue', 'iconify'],
+                ['pinia', 'pinia'],
+                ['scroll-into-view-if-needed', 'scroll'],
+                ['vue-router', 'vue-router'],
+                ['@vueuse/core', 'vue-use'],
+                ['vue', 'vue'],
+              ].reduce((acc, [name, entry]) => {
+                acc.push({
+                  find: new RegExp(`^${name.replace(/\//g, '\\/')}$`),
+                  replacement: `@histoire/vendors/${entry}`,
+                })
+                acc.push({
+                  find: new RegExp(`^${name.replace(/\//g, '\\/')}\\/`),
+                  replacement: `@histoire/vendors/${entry}/`,
+                })
+                return acc
+              }, [] as any[]),
+
+              { find: /@histoire\/controls$/, replacement: '@histoire/controls/src/index.ts' },
+            ],
+          },
+        }
+      },
+    })
+  }
+
   return mergeViteConfig(inlineConfig, {
     configFile: false,
     plugins,