@poveste/plugin-svelte 0.6.1 → 0.8.0

package/src/helpers.ts

@@ -1,131 +0,0 @@
-import type { HstControlOption } from '@poveste/controls'
-import type { Story, StoryProps, Variant, VariantProps } from '@poveste/shared'
-import type { Component, Snippet } from 'svelte'
-
-export interface SvelteStorySetupApi {
-  app: any
-  story?: Story
-  variant?: Variant
-}
-
-export type SvelteStorySetupHandler = (api: SvelteStorySetupApi) => Promise<void> | void
-
-export function defineSetupSvelte(handler: SvelteStorySetupHandler): SvelteStorySetupHandler {
-  return handler
-}
-
-export const defineSetupSvelte3 = defineSetupSvelte
-export const defineSetupSvelte4 = defineSetupSvelte
-export const defineSetupSvelte5 = defineSetupSvelte
-
-export type StoryState = Record<string, any>
-
-/**
- * Props plus Svelte 5 children.
- *
- * `StoryProps` and `VariantProps` live in `@poveste/shared` and are shared with
- * the Vue plugin, so a Svelte-only `Snippet` cannot be added there — it is
- * intersected in here instead.
- *
- * This is what the move off `SvelteComponentTyped` needed. The class form carried
- * Svelte 4 slot typing, so nested content type-checked implicitly; `Component<P>`
- * has no slots, and Svelte 5 passes children as a prop (#99).
- */
-type WithChildren<P> = P & {
-  children?: Snippet<[{ state: StoryState }]>
-  controls?: Snippet<[{ state: StoryState }]>
-}
-
-/**
- * Story state is owned by poveste, not by the story component.
- *
- * The story is mounted once per slot, so a component-local variable exists twice
- * and cannot be shared. `initState` seeds `variant.state`, which both mounts read
- * and which the sandbox bridge carries across the iframe boundary (#81).
- */
-type WithState<P> = Omit<P, 'source'> & {
-  initState?: () => StoryState
-  /** A literal, or a function of the variant state so the source panel can track the controls. */
-  source?: string | ((state: StoryState) => string)
-}
-
-export interface Hst {
-  // Main built-ins
-  Story: Component<WithState<WithChildren<StoryProps>>>
-  Variant: Component<WithState<WithChildren<VariantProps>>>
-  // Controls
-  // Deliberately permissive. This was previously a bare `SvelteComponentTyped`,
-  // i.e. props `any`; it wraps a Vue control whose default slot renders the label,
-  // and the prop set `Wrap` forwards is not pinned down. Narrowing it is its own
-  // change rather than a silent break.
-  Button: Component<WithChildren<Record<string, any>>>
-  ButtonGroup: Component<{
-    value?: string
-    options: (string | HstControlOption)[]
-    title?: string
-  }>
-  Checkbox: Component<{
-    value?: boolean
-    title: string
-  }>
-  CheckboxList: Component<{
-    value: string[]
-    options: (string | HstControlOption)[]
-    title?: string
-  }>
-  Text: Component<{
-    value?: string
-    title: string
-  }>
-  Number: Component<{
-    value?: number
-    title: string
-    step?: number
-  }>
-  Slider: Component<{
-    value?: number
-    title: string
-    min: number
-    max: number
-    step?: number
-  }>
-  Textarea: Component<{
-    value?: string
-    title: string
-  }>
-  Select: Component<{
-    value?: string
-    title: string
-    options: Record<string, any> | string[] | HstControlOption[]
-  }>
-  Radio: Component<{
-    value?: string
-    options: HstControlOption[]
-    title?: string
-  }>
-  Json: Component<{
-    value: unknown
-    title: string
-  }>
-  Shades: Component<{
-    shades: Record<string, any>
-    getName?: (key: string, color: string) => string
-    search?: string
-  }>
-  TokenList: Component<{
-    tokens: Record<string, string | number | any[] | Record<string, any>>
-    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-  }>
-  TokenGrid: Component<{
-    tokens: Record<string, string | number | any[] | Record<string, any>>
-    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-    colSize?: number
-  }>
-  CopyIcon: Component<{
-    content: string
-  }>
-  ColorSelect: Component<{
-    value?: string
-    title: string
-  }>
-}

package/src/index.node.ts

@@ -1,101 +0,0 @@
-import type { Plugin } from 'poveste'
-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(): Plugin {
-  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/poveste-svelte.svg',
-            light: '@poveste/plugin-svelte/assets/poveste-svelte-text.svg',
-            dark: '@poveste/plugin-svelte/assets/poveste-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')],
-    ] as const
-
-    return aliasEntries
-      .filter(([, replacement]) => existsSync(replacement))
-      .map(([find, replacement]) => ({
-        find,
-        replacement,
-      }))
-  }
-  catch {
-    return []
-  }
-}

package/src/index.ts

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

package/src/util/list-components.ts

@@ -1,16 +0,0 @@
-import { globby } from 'globby'
-
-export async function listComponentFiles(search = '', ignore: string[] = [], 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/src/util/story-hmr.ts

@@ -1,52 +0,0 @@
-const storyFileRE = /\.story\.svelte$/
-
-type DynamicCompileOptions = NonNullable<SveltePluginApi['options']>['dynamicCompileOptions']
-
-interface SveltePluginApi {
-  options?: {
-    dynamicCompileOptions?: (data: {
-      filename: string
-      code: string
-      compileOptions: Record<string, any>
-    }) => Partial<Record<string, any>> | void | Promise<Partial<Record<string, any>> | void>
-  }
-}
-
-interface SvelteConfigPlugin {
-  name: string
-  api?: SveltePluginApi
-  __povesteStoryHmrPatched?: boolean
-}
-
-export function disableStoryComponentHmr() {
-  return {
-    name: 'poveste:svelte-story-hmr',
-    apply: 'serve' as const,
-    configResolved(config: { readonly plugins: readonly unknown[] }) {
-      for (const plugin of config.plugins as SvelteConfigPlugin[]) {
-        if (plugin.name !== 'vite-plugin-svelte:config' || plugin.__povesteStoryHmrPatched) {
-          continue
-        }
-
-        const options = plugin.api?.options
-        if (!options) {
-          continue
-        }
-
-        const originalDynamicCompileOptions = options.dynamicCompileOptions as DynamicCompileOptions
-        options.dynamicCompileOptions = async (data) => {
-          const result = await originalDynamicCompileOptions?.(data)
-          if (!storyFileRE.test(data.filename)) {
-            return result
-          }
-
-          return {
-            ...result,
-            hmr: false,
-          }
-        }
-        plugin.__povesteStoryHmrPatched = true
-      }
-    },
-  }
-}

package/src/util/svelte.ts

@@ -1,153 +0,0 @@
-import type { SvelteStorySetupApi, SvelteStorySetupHandler } from '../helpers.js'
-import * as svelte from 'svelte'
-
-type SetupModule = Record<string, unknown>
-
-const setupHookNames = [
-  'setupSvelte3',
-  'setupSvelte4',
-  'setupSvelte5',
-] as const
-
-export interface MountedSvelteComponent {
-  app: any
-  destroy: () => void
-}
-
-export interface LegacyStateApi {
-  captureState: () => Record<string, any> | null
-  injectState: (state: Record<string, any>) => void
-}
-
-function loadSvelteModule(moduleId: string) {
-  return import(/* @vite-ignore */ moduleId)
-}
-
-export async function mountSvelteComponent(
-  component: any,
-  options: Record<string, any>,
-  mode: 'auto' | 'client' | 'server-compat' = 'auto',
-): Promise<MountedSvelteComponent> {
-  if (mode !== 'server-compat') {
-    if (typeof (svelte as any)?.mount === 'function') {
-      const app = (svelte as any).mount(component, options)
-      return {
-        app,
-        destroy: () => {
-          if (typeof (svelte as any).unmount === 'function') {
-            ;(svelte as any).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: any): LegacyStateApi | null {
-  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: SetupModule,
-  setup: SetupModule,
-  setupApi: SvelteStorySetupApi,
-  variantSetupApp?: SvelteStorySetupHandler | null,
-) {
-  for (const hookName of setupHookNames) {
-    const generatedHook = generatedSetup[hookName] as SvelteStorySetupHandler | undefined
-    if (typeof generatedHook === 'function') {
-      await generatedHook(setupApi)
-    }
-
-    const setupHook = setup[hookName] as SvelteStorySetupHandler | undefined
-    if (typeof setupHook === 'function') {
-      await setupHook(setupApi)
-    }
-  }
-
-  if (typeof variantSetupApp === 'function') {
-    await variantSetupApp(setupApi)
-  }
-}
-
-/**
- * Adds `controlComponent` to a props object **without** spreading it.
- *
- * Svelte 5 passes a bound prop as an accessor pair — `bind:value` becomes a
- * `get value()` / `set value(v)` on the props object. Spreading invokes the
- * getter and writes a plain data property, so the setter is dropped and the
- * child's write-back silently goes nowhere: reads keep working, writes stop.
- * That was the whole of #81.
- *
- * Copying the descriptors keeps the setter intact.
- */
-function withControlComponent(props: any, controlComponent: any) {
-  const merged = Object.defineProperties({}, Object.getOwnPropertyDescriptors(props ?? {}))
-  Object.defineProperty(merged, 'controlComponent', {
-    value: controlComponent,
-    enumerable: true,
-    writable: true,
-    configurable: true,
-  })
-  return merged
-}
-
-export function createWrappedComponent(Wrap: any, controlComponent: any) {
-  function ProxyWrap(anchorOrOptions: any, props?: any) {
-    if (new.target) {
-      return new Wrap({
-        ...anchorOrOptions,
-        props: withControlComponent(anchorOrOptions?.props, controlComponent),
-      })
-    }
-
-    return Wrap(anchorOrOptions, withControlComponent(props, controlComponent))
-  }
-
-  if (Wrap?.element) {
-    ProxyWrap.element = Wrap.element
-  }
-
-  return ProxyWrap
-}

package/svelte.config.js

@@ -1,5 +0,0 @@
-import sveltePreprocess from 'svelte-preprocess'
-
-export default {
-  preprocess: sveltePreprocess(),
-}

package/tsconfig.build.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "exclude": [
-    "src/client",
-    "src/collect"
-  ]
-}

package/tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    // Volar
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "rootDir": "src",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "alwaysStrict": true,
-    // Strict
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "outDir": "dist",
-    "removeComments": false,
-    "sourceMap": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "verbatimModuleSyntax": true,
-    "skipLibCheck": true,
-    "preserveWatchOutput": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "generated/**/*",
-    "dist/**/*",
-    "src/**/*.spec.ts"
-  ]
-}

package/vite.config.ts

@@ -1,103 +0,0 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-import fs from 'fs-extra'
-import { globbySync } from 'globby'
-import { defineConfig } from 'vite'
-import pkg from './package.json'
-
-export default defineConfig({
-  plugins: [
-    svelte(),
-    {
-      name: 'poveste:preserve:import.dynamic',
-      enforce: 'pre',
-      transform(code) {
-        if (code.includes('import(')) {
-          return {
-            code: code.replace(/import\(/g, 'import__dyn('),
-          }
-        }
-      },
-      closeBundle() {
-        try {
-          const rawSvelteFiles = globbySync([
-            'src/client/**/*.svelte',
-            'src/collect/**/*.svelte',
-          ])
-          const rawSvelteBasenames = rawSvelteFiles.map(file => file.split('/').pop()?.replace(/\.svelte$/, '')).filter(Boolean)
-
-          for (const file of rawSvelteFiles) {
-            const target = file.replace(/^src\//, 'dist/')
-            fs.ensureDirSync(target.replace(/\/[^/]+$/, ''))
-            fs.copyFileSync(file, target)
-          }
-
-          const files = globbySync('./dist/**/*.js')
-          for (const file of files) {
-            let content = fs.readFileSync(file, 'utf-8')
-            let updated = false
-
-            if (content.includes('import__dyn')) {
-              content = content.replace(/import__dyn\(/g, 'import(/* @vite-ignore */')
-              updated = true
-            }
-
-            if (content.includes('.svelte.js')) {
-              content = content.replace(/\.svelte\.js(["'])/g, '.svelte$1')
-              updated = true
-            }
-
-            for (const basename of rawSvelteBasenames) {
-              const compiledImport = `./${basename}.js`
-              if (content.includes(compiledImport)) {
-                content = content.replaceAll(compiledImport, `./${basename}.svelte`)
-                updated = true
-              }
-            }
-
-            if (updated) {
-              fs.writeFileSync(file, content, 'utf-8')
-            }
-          }
-        }
-        catch (e) {
-          console.error(e)
-        }
-      },
-    },
-  ],
-  build: {
-    emptyOutDir: false,
-    outDir: 'dist',
-    cssCodeSplit: false,
-    rollupOptions: {
-      external: [
-        ...Object.keys(pkg.dependencies).map(dep => new RegExp(`^${dep}(\\/?)`)),
-        ...Object.keys(pkg.peerDependencies).map(dep => new RegExp(`^${dep}(\\/?)`)),
-        /^node:/,
-        /^virtual:/,
-        /^\$/, // Virtual modules
-      ],
-
-      input: [
-        'src/client/index.ts',
-        'src/collect/index.ts',
-      ],
-
-      output: {
-        // manualChunks (id) {
-        //   if (id.includes('node_modules')) {
-        //     return 'vendor'
-        //   }
-        // },
-        entryFileNames: '[name].js',
-        chunkFileNames: '[name].js',
-        assetFileNames: '[name][extname]',
-        // hoistTransitiveImports: false,
-        preserveModules: true,
-        preserveModulesRoot: 'src',
-      },
-      treeshake: false,
-      preserveEntrySignatures: 'strict',
-    },
-  },
-})