chore: use nuxt island to render storybook stories

components/JabRefLogo.stories.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import JabRefLogo from './JabrefLogo.vue'
+import JabRefLogo from './JabrefLogo.island.vue'
 </script>
 
 <template>

components/Storybook.island.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps()
+</script>
+
+<template>
+  <div>
+    Propsu:
+    <pre v-html="JSON.stringify(props, null, 2)" />
+  </div>
+</template>

nuxt.config.ts

@@ -17,6 +17,10 @@ export default defineNuxtConfig({
     global: 'global.ts',
   },
 
+  experimental: {
+    componentIslands: true,
+  },
+
   nitro: {
     // Prevent 'reflect-metadata' from being treeshaked (since we don't explicitly use the import it would otherwise be removed)
     moduleSideEffects: ['reflect-metadata'],

package.json

@@ -72,6 +72,7 @@
     "pinia": "^2.0.35",
     "redis": "^4.6.7",
     "reflect-metadata": "^0.1.13",
+    "storybook-nuxt": "link:storybook-nuxt",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "tsyringe": "^4.7.0",

pages/_storybook/external-iframe.vue

@@ -55,7 +55,6 @@ export function renderToCanvas(
 
   mount(element, { element: domElement, app: useNuxtApp().vueApp })
 }
-
 definePageMeta({ layout: false, alias: '/iframe.html' })
 
 export default defineComponent({

storybook-nuxt/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "storybook-nuxt",
+  "version": "7.0.0-beta.35",
+  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/html-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "node": "./dist/index.cjs",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.cjs",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./html": {
+      "require": "./dist/renderer.cjs",
+      "import": "./dist/renderer.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./html/preview": {
+      "require": "./dist/renderer.cjs",
+      "import": "./dist/renderer.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "e6d5c50c88bc67468a815efc1048b36ebc2d4bdd"
+}

storybook-nuxt/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset.cjs')

storybook-nuxt/preset.ts

@@ -0,0 +1,4 @@
+export const core = {
+  builder: '@storybook/builder-vite',
+  renderer: 'storybook-nuxt/html',
+}

storybook-nuxt/renderer.ts

@@ -0,0 +1,31 @@
+function renderToCanvas(
+  { storyFn, kind, name, showMain, showError, forceRemount },
+  canvasElement
+) {
+  const element = storyFn()
+  showMain()
+  if (typeof element === 'string') {
+    canvasElement.innerHTML = element
+    simulatePageLoad(canvasElement)
+  } else if (element instanceof Node) {
+    if (canvasElement.firstChild === element && forceRemount === false) {
+      return
+    }
+
+    canvasElement.innerHTML = ''
+    canvasElement.appendChild(element)
+    simulateDOMContentLoaded()
+  } else {
+    showError({
+      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}", but got ${JSON.stringify(
+        element
+      )}.`,
+      description: `
+            Did you forget to return the HTML snippet from the story?
+            Use "() => <your snippet or node>" or when defining the story.
+          `,
+    })
+  }
+}
+
+export { renderToCanvas }