@poveste/plugin-svelte 0.1.0

package/src/helpers.ts

@@ -0,0 +1,96 @@
+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 function defineSetupSvelte(handler: SvelteStorySetupHandler): SvelteStorySetupHandler {
+  return handler
+}
+
+export const defineSetupSvelte3 = defineSetupSvelte
+export const defineSetupSvelte4 = defineSetupSvelte
+export const defineSetupSvelte5 = defineSetupSvelte
+
+export interface Hst {
+  // Main built-ins
+  Story: typeof SvelteComponentTyped<StoryProps>
+  Variant: typeof SvelteComponentTyped<VariantProps>
+  // Controls
+  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/src/index.node.ts

@@ -0,0 +1,101 @@
+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/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')],
+    ] as const
+
+    return aliasEntries
+      .filter(([, replacement]) => existsSync(replacement))
+      .map(([find, replacement]) => ({
+        find,
+        replacement,
+      }))
+  }
+  catch {
+    return []
+  }
+}

package/src/index.ts

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

package/src/util/list-components.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,52 @@
+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
+  __histoireStoryHmrPatched?: boolean
+}
+
+export function disableStoryComponentHmr() {
+  return {
+    name: 'histoire: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.__histoireStoryHmrPatched) {
+          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.__histoireStoryHmrPatched = true
+      }
+    },
+  }
+}

package/src/util/svelte.ts

@@ -0,0 +1,137 @@
+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)
+  }
+}
+
+export function createWrappedComponent(Wrap: any, controlComponent: any) {
+  function ProxyWrap(anchorOrOptions: any, props?: any) {
+    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/svelte.config.js

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

package/tsconfig.build.json

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

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "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

@@ -0,0 +1,103 @@
+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: 'histoire: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',
+    },
+  },
+})