@poveste/plugin-svelte 0.1.0

package/dist/commands/generate-story.server.js

@@ -0,0 +1,52 @@
+import fs from 'node:fs';
+import launchEditor from 'launch-editor';
+import path from 'pathe';
+export default {
+    id: 'histoire:plugin-svelte:generate-story',
+    label: 'Generate Svelte story from component',
+    icon: 'https://svelte.dev/favicon.png',
+    searchText: 'generate create',
+    async serverAction(params) {
+        const targetFile = path.join(path.dirname(params.component), params.fileName);
+        if (fs.existsSync(targetFile)) {
+            throw new Error(`File ${targetFile} already exists`);
+        }
+        const { component, componentName, isTs } = await getComponentInfo(params.component);
+        const content = `<script${isTs ? ' lang="ts"' : ''}>
+  ${isTs
+            ? `import type { Hst } from '@poveste/plugin-svelte'\n  
+  `
+            : ''}import ${componentName} from './${component}'
+
+  export let Hst${isTs ? ': Hst' : ''}
+</script>
+  
+<Hst.Story>
+  <Hst.Variant title="Default">
+    <${componentName} />
+
+    <svelte:fragment slot="controls">
+      <!-- Put controls here -->
+    </svelte:fragment>
+  </Hst.Variant>
+</Hst.Story>
+`;
+        await fs.promises.writeFile(targetFile, content, 'utf-8');
+        launchEditor(targetFile);
+    },
+    clientSetupFile: '@poveste/plugin-svelte/dist/commands/generate-story.client.js',
+};
+async function isComponentTs(component) {
+    const componentContent = await fs.promises.readFile(component, 'utf-8');
+    return componentContent.includes('lang="ts"');
+}
+async function getComponentInfo(file) {
+    const component = path.basename(file);
+    const componentName = component.replace(path.extname(component), '');
+    const isTs = await isComponentTs(file);
+    return {
+        component,
+        componentName,
+        isTs,
+    };
+}

package/dist/helpers.d.ts

@@ -0,0 +1,87 @@
+import type { HstControlOption } from '@poveste/controls';
+import type { Story, StoryProps, Variant, VariantProps } from '@poveste/shared';
+import type { SvelteComponentTyped } from 'svelte';
+export interface SvelteStorySetupApi {
+    app: any;
+    story?: Story;
+    variant?: Variant;
+}
+export type SvelteStorySetupHandler = (api: SvelteStorySetupApi) => Promise<void> | void;
+export declare function defineSetupSvelte(handler: SvelteStorySetupHandler): SvelteStorySetupHandler;
+export declare const defineSetupSvelte3: typeof defineSetupSvelte;
+export declare const defineSetupSvelte4: typeof defineSetupSvelte;
+export declare const defineSetupSvelte5: typeof defineSetupSvelte;
+export interface Hst {
+    Story: typeof SvelteComponentTyped<StoryProps>;
+    Variant: typeof SvelteComponentTyped<VariantProps>;
+    Button: typeof SvelteComponentTyped;
+    ButtonGroup: typeof SvelteComponentTyped<{
+        value?: string;
+        options: (string | HstControlOption)[];
+        title?: string;
+    }>;
+    Checkbox: typeof SvelteComponentTyped<{
+        value?: boolean;
+        title: string;
+    }>;
+    CheckboxList: typeof SvelteComponentTyped<{
+        value: string[];
+        options: (string | HstControlOption)[];
+        title?: string;
+    }>;
+    Text: typeof SvelteComponentTyped<{
+        value?: string;
+        title: string;
+    }>;
+    Number: typeof SvelteComponentTyped<{
+        value?: number;
+        title: string;
+        step?: number;
+    }>;
+    Slider: typeof SvelteComponentTyped<{
+        value?: number;
+        title: string;
+        min: number;
+        max: number;
+        step?: number;
+    }>;
+    Textarea: typeof SvelteComponentTyped<{
+        value?: string;
+        title: string;
+    }>;
+    Select: typeof SvelteComponentTyped<{
+        value?: string;
+        title: string;
+        options: Record<string, any> | string[] | HstControlOption[];
+    }>;
+    Radio: typeof SvelteComponentTyped<{
+        value?: string;
+        options: HstControlOption[];
+        title?: string;
+    }>;
+    Json: typeof SvelteComponentTyped<{
+        value: unknown;
+        title: string;
+    }>;
+    Shades: typeof SvelteComponentTyped<{
+        shades: Record<string, any>;
+        getName?: (key: string, color: string) => string;
+        search?: string;
+    }>;
+    TokenList: typeof SvelteComponentTyped<{
+        tokens: Record<string, string | number | any[] | Record<string, any>>;
+        getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
+    }>;
+    TokenGrid: typeof SvelteComponentTyped<{
+        tokens: Record<string, string | number | any[] | Record<string, any>>;
+        getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
+        colSize?: number;
+    }>;
+    CopyIcon: typeof SvelteComponentTyped<{
+        content: string;
+    }>;
+    ColorSelect: typeof SvelteComponentTyped<{
+        value?: string;
+        title: string;
+    }>;
+}

package/dist/helpers.js

@@ -0,0 +1,6 @@
+export function defineSetupSvelte(handler) {
+    return handler;
+}
+export const defineSetupSvelte3 = defineSetupSvelte;
+export const defineSetupSvelte4 = defineSetupSvelte;
+export const defineSetupSvelte5 = defineSetupSvelte;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './helpers.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './helpers.js';

package/dist/index.node.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'poveste';
+export declare function HstSvelte(): Plugin;
+export * from './helpers.js';

package/dist/index.node.js

@@ -0,0 +1,90 @@
+import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'pathe';
+import { defaultColors } from 'poveste';
+import generateStoryCommand from './commands/generate-story.server.js';
+import { listComponentFiles } from './util/list-components.js';
+import { disableStoryComponentHmr } from './util/story-hmr.js';
+export function HstSvelte() {
+    return {
+        name: '@poveste/plugin-svelte',
+        defaultConfig() {
+            const svelteClientAliases = getSvelteClientAliases();
+            return {
+                supportMatch: [
+                    {
+                        id: 'svelte',
+                        patterns: ['**/*.svelte'],
+                        pluginIds: ['svelte4'],
+                    },
+                ],
+                theme: {
+                    colors: {
+                        primary: defaultColors.orange,
+                    },
+                    logo: {
+                        square: '@poveste/plugin-svelte/assets/histoire-svelte.svg',
+                        light: '@poveste/plugin-svelte/assets/histoire-svelte-text.svg',
+                        dark: '@poveste/plugin-svelte/assets/histoire-svelte-text.svg',
+                    },
+                },
+                viteIgnorePlugins: [
+                    'vite-plugin-sveltekit-compile',
+                ],
+                vite: svelteClientAliases.length
+                    ? {
+                        plugins: [
+                            disableStoryComponentHmr(),
+                        ],
+                        resolve: {
+                            alias: svelteClientAliases,
+                        },
+                    }
+                    : {
+                        plugins: [
+                            disableStoryComponentHmr(),
+                        ],
+                    },
+            };
+        },
+        supportPlugin: {
+            id: 'svelte4',
+            moduleName: '@poveste/plugin-svelte',
+            setupFn: ['setupSvelte3', 'setupSvelte4', 'setupSvelte5'],
+            importStoryComponent: (file, index) => `import Comp${index} from ${JSON.stringify(file.moduleId)}`,
+        },
+        commands: [
+            generateStoryCommand,
+        ],
+        async onDevEvent(api) {
+            switch (api.event) {
+                case 'listSvelteComponents': {
+                    return listComponentFiles(api.payload.search, api.getConfig().storyMatch);
+                }
+            }
+        },
+    };
+}
+export * from './helpers.js';
+function getSvelteClientAliases() {
+    try {
+        const require = createRequire(join(process.cwd(), 'package.json'));
+        const sveltePackagePath = require.resolve('svelte/package.json');
+        const svelteDir = dirname(sveltePackagePath);
+        const aliasEntries = [
+            [/^svelte$/, join(svelteDir, 'src/index-client.js')],
+            [/^svelte\/legacy$/, join(svelteDir, 'src/legacy/legacy-client.js')],
+            [/^svelte\/store$/, join(svelteDir, 'src/store/index-client.js')],
+            [/^svelte\/reactivity$/, join(svelteDir, 'src/reactivity/index-client.js')],
+        ];
+        return aliasEntries
+            .filter(([, replacement]) => existsSync(replacement))
+            .map(([find, replacement]) => ({
+            find,
+            replacement,
+        }));
+    }
+    catch {
+        return [];
+    }
+}

package/dist/util/list-components.d.ts

@@ -0,0 +1 @@
+export declare function listComponentFiles(search?: string, ignore?: string[], limit?: number): Promise<string[]>;

package/dist/util/list-components.js

@@ -0,0 +1,15 @@
+import { globby } from 'globby';
+export async function listComponentFiles(search = '', ignore = [], limit = 10) {
+    let files = await globby('**/*.svelte', {
+        gitignore: true,
+        ignore: [
+            'node_modules',
+            ...ignore,
+        ],
+    });
+    if (search) {
+        const searchText = search.toLowerCase();
+        files = files.filter(file => file.toLowerCase().includes(searchText));
+    }
+    return files.slice(0, limit);
+}

package/dist/util/story-hmr.d.ts

@@ -0,0 +1,7 @@
+export declare function disableStoryComponentHmr(): {
+    name: string;
+    apply: "serve";
+    configResolved(config: {
+        readonly plugins: readonly unknown[];
+    }): void;
+};

package/dist/util/story-hmr.js

@@ -0,0 +1,30 @@
+const storyFileRE = /\.story\.svelte$/;
+export function disableStoryComponentHmr() {
+    return {
+        name: 'histoire:svelte-story-hmr',
+        apply: 'serve',
+        configResolved(config) {
+            for (const plugin of config.plugins) {
+                if (plugin.name !== 'vite-plugin-svelte:config' || plugin.__histoireStoryHmrPatched) {
+                    continue;
+                }
+                const options = plugin.api?.options;
+                if (!options) {
+                    continue;
+                }
+                const originalDynamicCompileOptions = options.dynamicCompileOptions;
+                options.dynamicCompileOptions = async (data) => {
+                    const result = await originalDynamicCompileOptions?.(data);
+                    if (!storyFileRE.test(data.filename)) {
+                        return result;
+                    }
+                    return {
+                        ...result,
+                        hmr: false,
+                    };
+                };
+                plugin.__histoireStoryHmrPatched = true;
+            }
+        },
+    };
+}

package/dist/util/svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SvelteStorySetupApi, SvelteStorySetupHandler } from '../helpers.js';
+type SetupModule = Record<string, unknown>;
+export interface MountedSvelteComponent {
+    app: any;
+    destroy: () => void;
+}
+export interface LegacyStateApi {
+    captureState: () => Record<string, any> | null;
+    injectState: (state: Record<string, any>) => void;
+}
+export declare function mountSvelteComponent(component: any, options: Record<string, any>, mode?: 'auto' | 'client' | 'server-compat'): Promise<MountedSvelteComponent>;
+export declare function getLegacyStateApi(app: any): LegacyStateApi | null;
+export declare function callSetupFunctions(generatedSetup: SetupModule, setup: SetupModule, setupApi: SvelteStorySetupApi, variantSetupApp?: SvelteStorySetupHandler | null): Promise<void>;
+export declare function createWrappedComponent(Wrap: any, controlComponent: any): {
+    (anchorOrOptions: any, props?: any): any;
+    element: any;
+};
+export {};

package/dist/util/svelte.js

@@ -0,0 +1,102 @@
+import * as svelte from 'svelte';
+const setupHookNames = [
+    'setupSvelte3',
+    'setupSvelte4',
+    'setupSvelte5',
+];
+function loadSvelteModule(moduleId) {
+    return import(/* @vite-ignore */ moduleId);
+}
+export async function mountSvelteComponent(component, options, mode = 'auto') {
+    if (mode !== 'server-compat') {
+        if (typeof svelte?.mount === 'function') {
+            const app = svelte.mount(component, options);
+            return {
+                app,
+                destroy: () => {
+                    if (typeof svelte.unmount === 'function') {
+                        ;
+                        svelte.unmount(app);
+                    }
+                    else {
+                        app?.$destroy?.();
+                    }
+                },
+            };
+        }
+    }
+    try {
+        // eslint-disable-next-line new-cap
+        const app = new component(options);
+        return {
+            app,
+            destroy: () => {
+                app?.$destroy?.();
+            },
+        };
+    }
+    catch (error) {
+        const legacyModuleId = ['svelte', 'legacy'].join('/');
+        const legacy = await loadSvelteModule(legacyModuleId).catch(() => null);
+        if (typeof legacy?.createClassComponent === 'function') {
+            const app = legacy.createClassComponent({
+                component,
+                ...options,
+            });
+            return {
+                app,
+                destroy: () => {
+                    app?.$destroy?.();
+                },
+            };
+        }
+        throw error;
+    }
+}
+export function getLegacyStateApi(app) {
+    if (typeof app?.$capture_state !== 'function' || typeof app?.$inject_state !== 'function') {
+        return null;
+    }
+    return {
+        captureState: () => app.$capture_state(),
+        injectState: (state) => {
+            app.$inject_state(state);
+        },
+    };
+}
+export async function callSetupFunctions(generatedSetup, setup, setupApi, variantSetupApp) {
+    for (const hookName of setupHookNames) {
+        const generatedHook = generatedSetup[hookName];
+        if (typeof generatedHook === 'function') {
+            await generatedHook(setupApi);
+        }
+        const setupHook = setup[hookName];
+        if (typeof setupHook === 'function') {
+            await setupHook(setupApi);
+        }
+    }
+    if (typeof variantSetupApp === 'function') {
+        await variantSetupApp(setupApi);
+    }
+}
+export function createWrappedComponent(Wrap, controlComponent) {
+    function ProxyWrap(anchorOrOptions, props) {
+        if (new.target) {
+            return new Wrap({
+                ...anchorOrOptions,
+                props: {
+                    ...anchorOrOptions?.props,
+                    controlComponent,
+                },
+            });
+        }
+        return Wrap(anchorOrOptions, {
+            ...props,
+            controlComponent,
+        });
+    }
+    if (Wrap?.element) {
+        ProxyWrap.element = Wrap.element;
+    }
+    return ProxyWrap;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@poveste/plugin-svelte",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Poveste plugin for Svelte 4/5 and SvelteKit support",
+  "author": {
+    "name": "Sorin Gitlan"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/poveste-dev/poveste.git",
+    "type": "git",
+    "directory": "packages/poveste-plugin-svelte"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./client": "./dist/client/index.js",
+    "./collect": "./dist/collect/index.js",
+    ".": "./dist/index.node.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.node.js",
+  "module": "./dist/index.node.js",
+  "types": "./dist/index.node.d.ts",
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0",
+    "poveste": "^0.1.0"
+  },
+  "dependencies": {
+    "change-case": "^5.4.4",
+    "globby": "^14.0.2",
+    "launch-editor": "^2.9.1",
+    "pathe": "^1.1.2",
+    "@poveste/shared": "^0.1.0",
+    "@poveste/controls": "^0.1.0",
+    "@poveste/vendors": "^0.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/node": "^22.10.1",
+    "concurrently": "^9.1.0",
+    "fs-extra": "^11.2.0",
+    "globby": "^14.0.2",
+    "svelte": "5.55.0",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "5.6.3",
+    "vite": "^8.0.0",
+    "poveste": "0.1.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",
+    "build:types": "tsc --declaration --emitDeclarationOnly",
+    "watch": "concurrently \"vite build --watch\" \"tsc -d -P tsconfig.build.json --watch\" \"pnpm run build:types --watch\""
+  }
+}

package/src/client/MountStory.svelte

@@ -0,0 +1,24 @@
+<script>
+import { omitInheritStoryProps } from '@poveste/shared'
+import { getContext, setContext } from 'svelte'
+import MountVariant from './MountVariant.svelte'
+
+const story = getContext('__hstStory')
+let index = { value: 0 }
+setContext('__hstIndex', index)
+setContext('__hstSlots', $$slots)
+
+$: inheritedFromStory = Object.keys(story).filter(key => !omitInheritStoryProps.includes(key)).reduce((acc, key) => {
+  acc[key] = story[key]
+  return acc
+}, {})
+</script>
+
+{#if story.variants.length === 1 && story.variants[0].id === '_default'}
+  <MountVariant {...inheritedFromStory} {...$$restProps} implicit>
+    <slot />
+    <slot name="controls" slot="controls" />
+  </MountVariant>
+{:else}
+  <slot />
+{/if}

package/src/client/MountVariant.svelte

@@ -0,0 +1,47 @@
+<script>
+import { afterUpdate, getContext } from 'svelte'
+
+export let source = null
+export let responsiveDisabled = false
+export let autoPropsDisabled = false
+export let setupApp = null
+export let implicit = false
+
+const story = getContext('__hstStory')
+const index = getContext('__hstIndex')
+const storySlots = getContext('__hstSlots')
+
+const variant = story.variants[index.value]
+index.value++
+
+function updateVariant () {
+  Object.assign(variant, {
+    slots: () => ({
+      default: true,
+      controls: $$slots.controls ?? storySlots.controls,
+    }),
+    source,
+    responsiveDisabled,
+    autoPropsDisabled,
+    setupApp,
+    configReady: true,
+  })
+
+  if (!implicit && !story.meta?.hasVariantChildComponents) {
+    story.meta = story.meta || {}
+    Object.assign(story.meta, {
+      hasVariantChildComponents: true,
+    })
+  }
+}
+updateVariant()
+
+afterUpdate(() => {
+  updateVariant()
+})
+</script>
+
+{#if false}
+<slot />
+<slot name="controls" />
+{/if}

package/src/client/RenderStory.svelte

@@ -0,0 +1,27 @@
+<script>
+import { getContext, setContext } from 'svelte'
+
+const story = getContext('__hstStory')
+const currentVariant = getContext('__hstVariant')
+const slotName = getContext('__hstSlot')
+
+let index = { value: 0 }
+setContext('__hstIndex', index)
+
+export let source = null
+
+$: {
+  if (source != null) {
+    Object.assign(currentVariant, {
+      source,
+    })
+  }
+}
+</script>
+
+{#if slotName === 'controls'}
+  <slot name="controls" />
+{/if}
+{#if slotName === 'default' || story.meta?.hasVariantChildComponents}
+  <slot />
+{/if}

package/src/client/RenderVariant.svelte

@@ -0,0 +1,32 @@
+<script>
+import { getContext } from 'svelte'
+
+const story = getContext('__hstStory')
+const currentVariant = getContext('__hstVariant')
+const slotName = getContext('__hstSlot')
+const index = getContext('__hstIndex')
+
+const variant = story.variants[index.value]
+index.value++
+
+$: shouldRender = currentVariant.id === variant.id
+
+export let source = null
+
+$: {
+  if (source != null) {
+    Object.assign(currentVariant, {
+      source,
+    })
+  }
+}
+</script>
+
+{#if shouldRender}
+  {#if slotName === 'default'}
+    <slot />
+  {/if}
+  {#if slotName === 'controls'}
+    <slot name="controls" />
+  {/if}
+{/if}