Fix local storage warning

Author: hugoattal

packages/histoire/src/node/dom/env.ts

@@ -17,13 +17,15 @@ export function createDomEnv() {
     },
   )
 
+  const restoreStorageGlobals = useStorageGlobals(dom.window)
   const { keys, originals } = populateGlobal(globalThis, dom.window, { bindFunctions: true })
 
   function destroy() {
     keys.forEach(key => delete globalThis[key])
     originals.forEach((v, k) => {
       globalThis[k] = v
     })
+    restoreStorageGlobals()
   }
 
   window.ResizeObserver = window.ResizeObserver || class ResizeObserver {
@@ -58,3 +60,33 @@ export function createDomEnv() {
     destroy,
   }
 }
+
+function useStorageGlobals(window: Window) {
+  const originalLocalStorage = Object.getOwnPropertyDescriptor(globalThis, 'localStorage')
+  const originalSessionStorage = Object.getOwnPropertyDescriptor(globalThis, 'sessionStorage')
+
+  Object.defineProperty(globalThis, 'localStorage', {
+    value: window.localStorage,
+    configurable: true,
+    writable: true,
+  })
+  Object.defineProperty(globalThis, 'sessionStorage', {
+    value: window.sessionStorage,
+    configurable: true,
+    writable: true,
+  })
+
+  return () => {
+    restoreGlobal('localStorage', originalLocalStorage)
+    restoreGlobal('sessionStorage', originalSessionStorage)
+  }
+}
+
+function restoreGlobal(key: 'localStorage' | 'sessionStorage', descriptor?: PropertyDescriptor) {
+  if (descriptor) {
+    Object.defineProperty(globalThis, key, descriptor)
+  }
+  else {
+    delete (globalThis as any)[key]
+  }
+}

packages/histoire/src/node/vite.ts

@@ -30,6 +30,14 @@ const collectInlineDeps = [
   /vite\w*\/dist\/client\/(client|env).mjs/,
 ]
 
+const collectVueAliases = {
+  vue: 'vue/dist/vue.runtime.esm-bundler.js',
+  '@vue/runtime-dom': '@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
+  '@vue/runtime-core': '@vue/runtime-core/dist/runtime-core.esm-bundler.js',
+  '@vue/reactivity': '@vue/reactivity/dist/reactivity.esm-bundler.js',
+  '@vue/shared': '@vue/shared/dist/shared.esm-bundler.js',
+}
+
 export async function mergeHistoireViteConfig(viteConfig: InlineConfig, ctx: Context) {
   if (ctx.config.vite) {
     const command = ctx.mode === 'dev' ? 'serve' : 'build'
@@ -123,14 +131,14 @@ export async function getViteConfigWithPlugins(isServer: boolean, ctx: Context):
         resolve: {
           dedupe: [
             'vue',
+            '@vue/runtime-dom',
+            '@vue/runtime-core',
+            '@vue/reactivity',
+            '@vue/shared',
           ],
           alias: {
             'histoire-style': join(APP_PATH, process.env.HISTOIRE_DEV ? 'app/style/main.pcss' : 'style.css'),
-            ...(isServer
-              ? {
-                  vue: 'vue/dist/vue.runtime.esm-bundler.js',
-                }
-              : {}),
+            ...(isServer ? collectVueAliases : {}),
           },
           ...(isServer
             ? {