@poveste/app 0.17.0 → 0.17.1

package/dist/bundled/app.css

@@ -150,7 +150,7 @@ from {
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.__poveste-code-placeholder[data-v-e112aa54] {
+.__poveste-code-placeholder[data-v-ed711d57] {
   color: inherit;
   font-size: inherit;
 }

package/dist/bundled/components/panel/StorySourceCode.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/panel/StorySourceCode.vue
-var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e112aa54"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ed711d57"]]);
 //#endregion
 export { StorySourceCode_default as default };

package/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,10 @@
 import { isDark } from "../../util/dark.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
+import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode } from "../../util/docs.js";
 import { getHighlighter } from "../../util/highlighter.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 import { HstCopyIcon, HstTooltip } from "@poveste/controls";
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
-import { unindent } from "@poveste/shared";
 //#region src/app/components/panel/StorySourceCode.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col" };
 var _hoisted_2 = {
@@ -29,12 +28,8 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const props = __props;
 		const generateSourceCodeFn = shallowRef(null);
 		watchEffect(async () => {
-			const supportPluginId = props.story.file?.supportPluginId;
-			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-			if (clientPlugin) {
-				const pluginModule = await clientPlugin();
-				generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode);
-			}
+			const generate = await loadGenerateSourceCode(props.story);
+			if (generate) generateSourceCodeFn.value = markRaw(generate);
 		});
 		const highlighter = shallowRef();
 		const dynamicSourceCode = ref("");
@@ -45,11 +40,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			error.value = null;
 			dynamicSourceCode.value = "";
 			try {
-				if (props.variant.source) dynamicSourceCode.value = props.variant.source;
-				else if (props.variant.slots?.().source) {
-					const source = props.variant.slots?.().source()[0].children;
-					if (source) dynamicSourceCode.value = await unindent(source);
-				} else dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant);
+				dynamicSourceCode.value = await getDynamicSourceCode(props.variant, generateSourceCodeFn.value) ?? "";
 			} catch (e) {
 				console.error(e);
 				error.value = e instanceof Error ? e.message : String(e);
@@ -62,8 +53,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const staticSourceCode = ref("");
 		watch(() => [props.story, props.story?.file?.source], async () => {
 			staticSourceCode.value = "";
-			const sourceLoader = props.story.file?.source;
-			if (sourceLoader) staticSourceCode.value = (await sourceLoader()).default;
+			staticSourceCode.value = await getStaticSourceCode(props.story) ?? "";
 		}, { immediate: true });
 		const displayedSourceCode = computed(() => {
 			if (displayedSource.value === "dynamic") return dynamicSourceCode.value;

package/dist/bundled/util/docs.js

@@ -1,18 +1,28 @@
 import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { unindent } from "@poveste/shared";
 //#region src/app/util/docs.ts
-async function getSourceCode(story, variant) {
+/** What the variant declares, or what its framework generates from it; `undefined` when neither has anything. */
+async function getDynamicSourceCode(variant, generate) {
 	if (variant.source) return variant.source;
-	else if (variant.slots?.().source) {
-		const source = variant.slots?.().source()[0].children;
-		if (source) return unindent(source);
-	} else {
-		const supportPluginId = story.file?.supportPluginId;
-		const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-		if (clientPlugin) return (await clientPlugin()).generateSourceCode(variant);
+	const sourceSlot = variant.slots?.().source;
+	if (sourceSlot) {
+		const source = sourceSlot()[0].children;
+		return source ? unindent(source) : void 0;
 	}
+	return await generate?.(variant) || void 0;
+}
+async function getStaticSourceCode(story) {
 	const sourceLoader = story.file?.source;
-	if (sourceLoader) return (await sourceLoader()).default;
+	return sourceLoader ? (await sourceLoader()).default : void 0;
+}
+async function loadGenerateSourceCode(story) {
+	const supportPluginId = story.file?.supportPluginId;
+	const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
+	return clientPlugin ? (await clientPlugin()).generateSourceCode : void 0;
+}
+async function getSourceCode(story, variant) {
+	const generate = async (v) => (await loadGenerateSourceCode(story))?.(v);
+	return await getDynamicSourceCode(variant, generate) || getStaticSourceCode(story);
 }
 //#endregion
-export { getSourceCode };
+export { getDynamicSourceCode, getSourceCode, getStaticSourceCode, loadGenerateSourceCode };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan",
@@ -34,9 +34,9 @@
     "node": ">=24.15.0"
   },
   "dependencies": {
-    "@poveste/controls": "^0.17.0",
-    "@poveste/shared": "^0.17.0",
-    "@poveste/vendors": "^0.17.0",
+    "@poveste/controls": "^0.17.1",
+    "@poveste/shared": "^0.17.1",
+    "@poveste/vendors": "^0.17.1",
     "fuse.js": "^7.0.0",
     "shiki": "^4.4.3"
   },

package/src/__tests__/source-code.spec.ts

@@ -0,0 +1,55 @@
+import type { Story, Variant } from '../app/types'
+import { describe, expect, it, vi } from 'vitest'
+import { getSourceCode } from '../app/util/docs'
+
+const plugin = vi.hoisted(() => ({ generateSourceCode: (() => undefined) as (variant: unknown) => unknown, loads: 0 }))
+
+vi.mock('virtual:$poveste-support-plugins-client', () => ({
+  clientSupportPlugins: {
+    framework: async () => {
+      plugin.loads++
+      return { generateSourceCode: (variant: unknown) => plugin.generateSourceCode(variant) }
+    },
+  },
+}))
+
+const FILE = '<Story title="Grid" />'
+
+function storyWithFile() {
+  return { file: { supportPluginId: 'framework', source: async () => ({ default: FILE }) } } as unknown as Story
+}
+
+describe('getSourceCode with a framework plugin', () => {
+  it('returns the story file when the plugin returns nothing synchronously, as plugin-svelte does', async () => {
+    plugin.generateSourceCode = () => undefined
+
+    const source = await getSourceCode(storyWithFile(), {} as Variant)
+
+    expect(source).toBe(FILE)
+  })
+
+  it('returns the story file when the plugin resolves to an empty string', async () => {
+    plugin.generateSourceCode = async () => ''
+
+    const source = await getSourceCode(storyWithFile(), {} as Variant)
+
+    expect(source).toBe(FILE)
+  })
+
+  it('prefers what the plugin generates', async () => {
+    plugin.generateSourceCode = async () => '<Button />'
+
+    const source = await getSourceCode(storyWithFile(), {} as Variant)
+
+    expect(source).toBe('<Button />')
+  })
+
+  it('returns a variant\'s declared source without loading the plugin', async () => {
+    plugin.loads = 0
+
+    const source = await getSourceCode(storyWithFile(), { source: '<Declared />' } as Variant)
+
+    expect(source).toBe('<Declared />')
+    expect(plugin.loads).toBe(0)
+  })
+})

package/src/app/components/panel/StorySourceCode.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { HighlighterCore } from 'shiki/core'
 import type { Story, Variant } from '../../types'
+import type { GenerateSourceCode } from '../../util/docs'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon, HstTooltip } from '@poveste/controls'
-import { unindent } from '@poveste/shared'
-import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { isDark } from '../../util/dark'
+import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode } from '../../util/docs'
 import { getHighlighter } from '../../util/highlighter'
 import BaseEmpty from '../base/BaseEmpty.vue'
 
@@ -17,14 +17,12 @@ const props = defineProps<{
 
 // `ref(null)` infers `Ref<null>`, so the assignment below and the call further
 // down were both errors about a type nobody meant to declare.
-const generateSourceCodeFn = shallowRef<((variant: Variant) => Promise<string>) | null>(null)
+const generateSourceCodeFn = shallowRef<GenerateSourceCode | null>(null)
 
 watchEffect(async () => {
-  const supportPluginId = props.story.file?.supportPluginId
-  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
-  if (clientPlugin) {
-    const pluginModule = await clientPlugin()
-    generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode)
+  const generate = await loadGenerateSourceCode(props.story)
+  if (generate) {
+    generateSourceCodeFn.value = markRaw(generate)
   }
 })
 
@@ -43,18 +41,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   error.value = null
   dynamicSourceCode.value = ''
   try {
-    if (props.variant.source) {
-      dynamicSourceCode.value = props.variant.source
-    }
-    else if (props.variant.slots?.().source) {
-      const source = props.variant.slots?.().source()[0].children
-      if (source) {
-        dynamicSourceCode.value = await unindent(source)
-      }
-    }
-    else {
-      dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant)
-    }
+    dynamicSourceCode.value = (await getDynamicSourceCode(props.variant, generateSourceCodeFn.value)) ?? ''
   }
   catch (e) {
     console.error(e)
@@ -75,10 +62,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
 const staticSourceCode = ref('')
 watch(() => [props.story, props.story?.file?.source], async () => {
   staticSourceCode.value = ''
-  const sourceLoader = props.story.file?.source
-  if (sourceLoader) {
-    staticSourceCode.value = (await sourceLoader()).default
-  }
+  staticSourceCode.value = (await getStaticSourceCode(props.story)) ?? ''
 }, {
   immediate: true,
 })

package/src/app/components/story/GenericMountStory.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import type { Component } from 'vue'
 import type { Story } from '../../types'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
@@ -13,7 +14,7 @@ const props = defineProps<{
   story: Story
 }>()
 
-const mountComponent = ref(null)
+const mountComponent = ref<Component | null>(null)
 
 watchEffect(async () => {
   const supportPluginId = props.story.file?.supportPluginId

package/src/app/components/story/GenericRenderStory.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import type { Component } from 'vue'
 import type { Story } from '../../types'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
@@ -13,7 +14,7 @@ const props = defineProps<{
   story: Story
 }>()
 
-const mountComponent = ref(null)
+const mountComponent = ref<Component | null>(null)
 
 watchEffect(async () => {
   const supportPluginId = props.story.file?.supportPluginId

package/src/app/util/docs.ts

@@ -1,28 +1,35 @@
+import type { ClientSupportPlugin } from '@poveste/shared'
 import type { Story, Variant } from '../types'
 import { unindent } from '@poveste/shared'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 
-export async function getSourceCode(story: Story, variant: Variant) {
+export type GenerateSourceCode = ClientSupportPlugin['generateSourceCode']
+
+/** What the variant declares, or what its framework generates from it; `undefined` when neither has anything. */
+export async function getDynamicSourceCode(variant: Variant, generate: GenerateSourceCode | undefined): Promise<string | undefined> {
   if (variant.source) {
     return variant.source
   }
-  else if (variant.slots?.().source) {
-    const source = variant.slots?.().source()[0].children
-    if (source) {
-      return unindent(source)
-    }
-  }
-  else {
-    const supportPluginId = story.file?.supportPluginId
-    const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
-    if (clientPlugin) {
-      const pluginModule = await clientPlugin()
-      return pluginModule.generateSourceCode(variant)
-    }
+  const sourceSlot = variant.slots?.().source
+  if (sourceSlot) {
+    const source = sourceSlot()[0].children
+    return source ? unindent(source) : undefined
   }
+  return (await generate?.(variant)) || undefined
+}
 
+export async function getStaticSourceCode(story: Story): Promise<string | undefined> {
   const sourceLoader = story.file?.source
-  if (sourceLoader) {
-    return (await sourceLoader()).default
-  }
+  return sourceLoader ? (await sourceLoader()).default : undefined
+}
+
+export async function loadGenerateSourceCode(story: Story): Promise<GenerateSourceCode | undefined> {
+  const supportPluginId = story.file?.supportPluginId
+  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
+  return clientPlugin ? (await clientPlugin()).generateSourceCode : undefined
+}
+
+export async function getSourceCode(story: Story, variant: Variant): Promise<string | undefined> {
+  const generate: GenerateSourceCode = async v => (await loadGenerateSourceCode(story))?.(v)
+  return (await getDynamicSourceCode(variant, generate)) || getStaticSourceCode(story)
 }

package/src/virtual.d.ts

@@ -4,4 +4,11 @@ declare module 'virtual:$poveste-commands' {
   export const registeredCommands: ClientCommand[]
 }
 
+declare module 'virtual:$poveste-support-plugins-client' {
+  import type { ClientSupportPlugin } from '@poveste/shared'
+  import type { Component } from 'vue'
+
+  export const clientSupportPlugins: Record<string, () => Promise<ClientSupportPlugin<Component>>>
+}
+
 declare module 'virtual:*';