@bndynet/vue-site 1.3.0 → 1.3.2

package/README.md

@@ -85,6 +85,7 @@ Add `"dev": "vue-site dev"` (or `vs dev`) in `package.json` scripts if you like.
 | `readme` | Raw Home content if no `README.md` |
 | `links` | Header links: Lucide `icon` + `link`, optional `title` (`LocalizedString`) |
 | `shell` | Shell action area config (`ShellConfig`) — see [Shell actions](#shell-actions-shellactions) |
+| `icons` | Lucide icon registry. Generated automatically by the CLI; provide manually only when calling `createSiteApp` without the CLI |
 | `pages` | `StandalonePage[]` — full-screen routes outside the `nav` tree (no top bar/sidebar/footer) |
 | `auth` | Central authorization policy (`AuthConfig`) — see [Per-page authorization](#per-page-authorization-auth) |
 | `router` | History mode (`RouterConfig`) — `hash` (default) or HTML5 `web`; see [Router history](#router-history-router) |
@@ -101,7 +102,7 @@ Add `"dev": "vue-site dev"` (or `vs dev`) in `package.json` scripts if you like.
 | `icon` | [Lucide](https://lucide.dev/icons) name |
 | `page` | Page content. Simplest is a **file-path string** like `'./pages/AdminView.vue'` or `'./README.md'` (auto-loads per-locale siblings, falls back to the base file). Also accepts a loader (`() => import('./Page.vue')` / `() => import('./page.md?raw')`) or a `localizedPage(...)` result. See [Per-locale page content](#per-locale-page-content) and [Advanced page loaders](#advanced-page-loaders) |
 | `path` | Route path (derived from `label`'s default-locale value if omitted; stays stable across languages) |
-| `layout` | Page content width: `'default'` keeps the standard centered reading width, `'wide'` uses a wider centered canvas, `'full'` fills the available parent container. Ignored for groups and links. |
+| `layout` | Page content width: `'default'` keeps the standard centered reading width, `'wide'` uses a wider centered canvas, `'full'` fills the available parent container with no framework padding. Ignored for groups and links. |
 | `children` | Nested group |
 | `link` | Render as a hyperlink (internal route path or external URL) instead of a page route |
 | `visible` | `() => boolean \| Promise<boolean>`, awaited once at startup. Return `false` to hide the item from the nav and skip its route (not reachable by direct URL). A hidden parent hides its subtree; a group with no remaining children is pruned. Not reactive to later changes. |
@@ -131,6 +132,29 @@ export default defineConfig({
 })
 ```
 
+### Icon registry
+
+The CLI scans configured Lucide icon names in `nav`, `links`, `i18n.locales`, and `theme.extraThemes`
+and generates an icon registry automatically. Only the icons referenced by the config are bundled.
+
+When using the library directly without the CLI, pass the registry yourself:
+
+```typescript
+import Home from 'lucide-vue-next/dist/esm/icons/home.js'
+import BookOpen from 'lucide-vue-next/dist/esm/icons/book-open.js'
+
+createSiteApp({
+  title: 'My Site',
+  icons: {
+    home: Home,
+    'book-open': BookOpen,
+  },
+  nav: [
+    { label: 'Home', icon: 'home', page: () => import('./README.md?raw') },
+  ],
+})
+```
+
 ### `ThemeConfig`
 
 Built-in themes are `light`, `dark`, plus the always-on extras `sepia` and `ocean` (shown in the switcher for every site). Set `theme: false` on `SiteConfig` to disable theming entirely.
@@ -531,7 +555,7 @@ app.mount('#app')
 
 Use a top-level `await` in your entry (or an async IIFE): `createSiteApp` is async and **awaits** `configureApp` when it returns a `Promise`. If you set optional `bootstrap` in config, that module loads before the app is created; if you omit `bootstrap`, that step is skipped.
 
-Exports: `createSiteApp`, `defineConfig`, `useTheme`, `useSiteConfig`, `useLocale`, `useLocalize`, `tk`, `resolveLocalized`, `resolveField`, `resolveMessage`, `mergeCatalog`, `flattenMessages`, `isMessageRef`, `localizedPage`, `builtinMessages`, `themeRefKey`, `localeRefKey`. Types: `SiteConfig`, `SiteEnvConfig`, `SiteViteConfig`, `SiteExternalLink`, `ShellConfig`, `ShellAction`, `ShellActionLoader`, `NavItem`, `StandalonePage`, `PageLayout`, `AuthRule`, `AuthContext`, `AuthConfig`, `RouterConfig`, `ThemeConfig`, `ThemeOption`, `ThemePaletteVars`, `ResolvedNavItem`, `I18nConfig`, `LocaleOption`, `LocaleCode`, `LocalizedString`, `MessageRef`, `MessageTree`, `MessageCatalog`, `PageLoader`, `LocalizedPageOptions`.
+Exports: `createSiteApp`, `defineConfig`, `useTheme`, `useSiteConfig`, `useLocale`, `useLocalize`, `tk`, `resolveLocalized`, `resolveField`, `resolveMessage`, `mergeCatalog`, `flattenMessages`, `isMessageRef`, `localizedPage`, `builtinMessages`, `themeRefKey`, `localeRefKey`. Types: `SiteConfig`, `SiteEnvConfig`, `SiteViteConfig`, `SiteExternalLink`, `ShellConfig`, `ShellAction`, `ShellActionLoader`, `NavItem`, `StandalonePage`, `PageLayout`, `AuthRule`, `AuthContext`, `AuthConfig`, `RouterConfig`, `ThemeConfig`, `ThemeOption`, `ThemePaletteVars`, `ResolvedNavItem`, `I18nConfig`, `LocaleOption`, `LocaleCode`, `LocalizedString`, `IconRegistry`, `MessageRef`, `MessageTree`, `MessageCatalog`, `PageLoader`, `LocalizedPageOptions`.
 
 ### Theme in Vue pages (`useTheme`)
 

package/README.zh.md

@@ -99,7 +99,7 @@ npx vue-site build --base /app/
 | `icon` | [Lucide](https://lucide.dev/icons) 图标名 |
 | `page` | 页面内容。最简单的是一个**文件路径字符串**，如 `'./pages/AdminView.vue'` 或 `'./README.md'`（自动加载各语言的同名文件，找不到时回退到基础文件）。也接受加载器（`() => import('./Page.vue')` / `() => import('./page.md?raw')`）或 `localizedPage(...)` 的返回值。见[按语言区分的页面内容](#按语言区分的页面内容)与[高级页面加载器](#高级页面加载器) |
 | `path` | 路由路径（省略时从 `label` 的默认语言值派生；切换语言时保持稳定） |
-| `layout` | 页面内容宽度：`'default'` 保持标准居中阅读宽度，`'wide'` 使用更宽的居中画布，`'full'` 填满可用父容器。对分组和链接无效。 |
+| `layout` | 页面内容宽度：`'default'` 保持标准居中阅读宽度，`'wide'` 使用更宽的居中画布，`'full'` 以无框架内边距的方式填满可用父容器。对分组和链接无效。 |
 | `children` | 嵌套分组 |
 | `link` | 渲染为超链接（内部路由路径或外部 URL），而非页面路由 |
 | `visible` | `() => boolean \| Promise<boolean>`，在启动时等待执行一次。返回 `false` 会从导航中隐藏该条目并跳过其路由（无法通过直接 URL 访问）。被隐藏的父项会隐藏其整个子树；没有剩余子项的分组会被剪除。对后续变化不具响应性。 |

package/bin/vue-site.mjs

@@ -14,17 +14,29 @@ import fs from 'fs'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 const pkgDir = resolve(__dirname, '..')
-const require = createRequire(import.meta.url)
 const FRAMEWORK_PACKAGE = '@bndynet/vue-site'
 const frameworkEntry = resolve(pkgDir, 'dist/index.es.js')
 const frameworkStyle = resolve(pkgDir, 'dist/style.css')
 
-function resolvePkgDir(pkg) {
-  return dirname(require.resolve(`${pkg}/package.json`))
+function resolvePkgDir(pkg, from = import.meta.url) {
+  return dirname(createRequire(from).resolve(`${pkg}/package.json`))
+}
+
+function toVitePath(file) {
+  return file.replace(/\\/g, '/')
 }
 
 const vuePath = resolvePkgDir('vue')
 const vueRouterPath = resolvePkgDir('vue-router')
+const lucidePath = resolvePkgDir('lucide-vue-next')
+const elementPlusPath = resolvePkgDir('element-plus')
+const elementPlusPackage = resolve(elementPlusPath, 'package.json')
+const elementPlusIconsPath = resolvePkgDir('@element-plus/icons-vue', elementPlusPackage)
+const dayjsPath = resolvePkgDir('dayjs', elementPlusPackage)
+const lucideAliasPath = toVitePath(lucidePath)
+const elementPlusAliasPath = toVitePath(elementPlusPath)
+const elementPlusIconsAliasPath = toVitePath(elementPlusIconsPath)
+const dayjsAliasPath = toVitePath(dayjsPath)
 const cwd = process.cwd()
 /** Lets `import('../file.md?raw')` work when `site.config` lives in a subfolder (README next to cwd). In-repo, ../ often falls under pkgDir; from npm install it does not, so we allow cwd's parent explicitly. */
 const cwdParent = resolve(cwd, '..')
@@ -113,6 +125,8 @@ const VIRTUAL_ENTRY = 'virtual:vue-site-entry'
 const RESOLVED_ENTRY = '\0' + VIRTUAL_ENTRY
 const VIRTUAL_PACKAGE = 'virtual:vue-site-package'
 const RESOLVED_PACKAGE = '\0' + VIRTUAL_PACKAGE
+const VIRTUAL_ICONS = 'virtual:vue-site-icons'
+const RESOLVED_ICONS = '\0' + VIRTUAL_ICONS
 
 function parseRepositoryUrl(pkg) {
   const r = pkg.repository
@@ -240,6 +254,7 @@ function buildBootstrapScript({ siteConfig, siteConfigSpecifier }) {
     `import '${FRAMEWORK_PACKAGE}/style.css'`,
     `import siteConfig from '${siteConfigSpecifier}'`,
     `import { repositoryUrl } from '${VIRTUAL_PACKAGE}'`,
+    `import { iconRegistry } from '${VIRTUAL_ICONS}'`,
     ``,
     `// Auto-discover translations: /locales/<code>.json -> { [code]: { ...messages } }.`,
     `const __localeFiles = import.meta.glob('/locales/*.json', { eager: true, import: 'default' })`,
@@ -295,6 +310,7 @@ function buildBootstrapScript({ siteConfig, siteConfigSpecifier }) {
     `    ...(hasThemeQuery ? { theme: { ...(siteConfig.theme || {}), default: resolvedTheme } } : {}),`,
     `    packageRepository: repositoryUrl,`,
     `    baseUrl: import.meta.env.BASE_URL,`,
+    `    icons: { ...iconRegistry, ...(siteConfig.icons || {}) },`,
     `  })`,
     `  app.mount('#app')`,
     `})()`,
@@ -512,13 +528,149 @@ function configSugarPlugin() {
   }
 }
 
-function vueSitePlugin(entryCode, htmlTemplate) {
+const BUILTIN_ICON_NAMES = [
+  'sun',
+  'moon',
+  'palette',
+  'languages',
+  'github',
+  'coffee',
+  'waves',
+]
+
+function normalizeLucideIconName(name) {
+  const trimmed = String(name ?? '').trim()
+  if (!trimmed) return ''
+  return trimmed
+    .replace(/^lucide[\s_-]?/i, '')
+    .replace(/[\s_-]?icon$/i, '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase()
+}
+
+function toPascalIconName(name) {
+  return normalizeLucideIconName(name)
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+function readLucideIconExportMap() {
+  const map = new Map()
+  const entry = resolve(lucidePath, 'dist/esm/lucide-vue-next.js')
+  const code = fs.readFileSync(entry, 'utf-8')
+  const re = /export\s+\{([^}]+)\}\s+from\s+['"]\.\/icons\/([^'"]+)['"]/g
+  let match
+
+  while ((match = re.exec(code))) {
+    const exports = match[1]
+    const file = match[2]
+    for (const part of exports.split(',')) {
+      const alias = /default\s+as\s+([A-Za-z0-9_$]+)/.exec(part.trim())?.[1]
+      if (alias) map.set(alias, file)
+    }
+  }
+
+  return map
+}
+
+const lucideIconExportMap = readLucideIconExportMap()
+
+function addIconName(set, value) {
+  if (typeof value !== 'string') return
+  const name = value.trim()
+  if (name) set.add(name)
+}
+
+function collectNavIconNames(set, nav = []) {
+  for (const item of nav) {
+    addIconName(set, item?.icon)
+    collectNavIconNames(set, item?.children ?? [])
+  }
+}
+
+function collectIconNames(siteConfig = {}) {
+  const names = new Set(BUILTIN_ICON_NAMES)
+  const themeConfig =
+    siteConfig.theme && typeof siteConfig.theme === 'object'
+      ? siteConfig.theme
+      : undefined
+
+  collectNavIconNames(names, siteConfig.nav ?? [])
+
+  for (const link of siteConfig.links ?? []) {
+    addIconName(names, link?.icon)
+  }
+  for (const locale of siteConfig.i18n?.locales ?? []) {
+    addIconName(names, locale?.icon)
+  }
+  for (const theme of themeConfig?.extraThemes ?? []) {
+    addIconName(names, theme?.icon)
+  }
+
+  return [...names]
+}
+
+function buildIconRegistryCode(siteConfig) {
+  const imports = []
+  const entries = []
+  const imported = new Map()
+  const addedEntries = new Set()
+
+  for (const name of collectIconNames(siteConfig)) {
+    const normalized = normalizeLucideIconName(name)
+    if (!normalized) continue
+
+    const pascal = toPascalIconName(name)
+    const iconSource =
+      lucideIconExportMap.get(pascal) ??
+      lucideIconExportMap.get(`${pascal}Icon`) ??
+      `${normalized}.js`
+    const iconFile = resolve(lucidePath, 'dist/esm/icons', iconSource)
+
+    if (!fs.existsSync(iconFile)) {
+      console.warn(
+        `[vue-site] Icon "${name}" was not found in lucide-vue-next. It will render empty.`,
+      )
+      continue
+    }
+
+    let local = imported.get(normalized)
+    if (!local) {
+      local = `Icon${imported.size}`
+      imported.set(normalized, local)
+      imports.push(
+        `import ${local} from ${JSON.stringify(
+          `lucide-vue-next/dist/esm/icons/${iconSource}`,
+        )}`,
+      )
+    }
+
+    for (const key of new Set([name, normalized])) {
+      if (addedEntries.has(key)) continue
+      addedEntries.add(key)
+      entries.push(`  ${JSON.stringify(key)}: ${local},`)
+    }
+  }
+
+  return [
+    ...imports,
+    `export const iconRegistry = {`,
+    ...entries,
+    `}`,
+  ].join('\n')
+}
+
+function vueSitePlugin(entryCode, htmlTemplate, iconRegistryCode) {
   return [
     {
       name: 'vue-site:virtual-entry',
       resolveId(id) {
         if (id === VIRTUAL_ENTRY) return RESOLVED_ENTRY
         if (id === VIRTUAL_PACKAGE) return RESOLVED_PACKAGE
+        if (id === VIRTUAL_ICONS) return RESOLVED_ICONS
       },
       load(id) {
         if (id === RESOLVED_ENTRY) return entryCode
@@ -526,6 +678,7 @@ function vueSitePlugin(entryCode, htmlTemplate) {
           const url = readPackageRepositoryUrl()
           return `export const repositoryUrl = ${JSON.stringify(url)}`
         }
+        if (id === RESOLVED_ICONS) return iconRegistryCode
       },
     },
     {
@@ -664,6 +817,7 @@ async function buildViteConfig(options = {}) {
   }
 
   const entryCode = buildEntryCode(siteConfig)
+  const iconRegistryCode = buildIconRegistryCode(siteConfig)
   const htmlTemplate = buildHtmlShell(
     `<script type="module" src="/@id/__x00__${VIRTUAL_ENTRY}"></script>`,
     siteConfig,
@@ -718,7 +872,7 @@ async function buildViteConfig(options = {}) {
       }),
       vue(vueOpts),
       ...watchedScssPlugin,
-      ...vueSitePlugin(entryCode, htmlTemplate),
+      ...vueSitePlugin(entryCode, htmlTemplate, iconRegistryCode),
       ...(userPlugins || []),
     ],
     resolve: {
@@ -736,6 +890,38 @@ async function buildViteConfig(options = {}) {
           find: 'vue-router',
           replacement: resolve(vueRouterPath, 'dist/vue-router.mjs'),
         },
+        {
+          find: /^lucide-vue-next$/,
+          replacement: toVitePath(resolve(lucidePath, 'dist/esm/lucide-vue-next.js')),
+        },
+        {
+          find: /^lucide-vue-next\//,
+          replacement: `${lucideAliasPath}/`,
+        },
+        {
+          find: /^element-plus$/,
+          replacement: toVitePath(resolve(elementPlusPath, 'es/index.mjs')),
+        },
+        {
+          find: /^element-plus\//,
+          replacement: `${elementPlusAliasPath}/`,
+        },
+        {
+          find: /^@element-plus\/icons-vue$/,
+          replacement: toVitePath(resolve(elementPlusIconsPath, 'dist/index.js')),
+        },
+        {
+          find: /^@element-plus\/icons-vue\//,
+          replacement: `${elementPlusIconsAliasPath}/`,
+        },
+        {
+          find: /^dayjs$/,
+          replacement: dayjsAliasPath,
+        },
+        {
+          find: /^dayjs\//,
+          replacement: `${dayjsAliasPath}/`,
+        },
       ],
     },
     optimizeDeps: {
@@ -743,6 +929,11 @@ async function buildViteConfig(options = {}) {
       // Keep it out of dependency pre-bundling so Vite does not instantiate
       // `dist/index.es.js` once via /@fs and again via node_modules/.vite.
       exclude: [FRAMEWORK_PACKAGE],
+      // Element Plus imports dayjs from ESM files, but dayjs itself ships as
+      // CommonJS. Force Vite's CJS interop for the package while letting
+      // discovered `dayjs/*` plugin imports be optimized normally.
+      include: ['dayjs'],
+      needsInterop: ['dayjs'],
     },
     server: {
       open: true,

package/dist/components/DynamicIcon.vue.d.ts

@@ -1,6 +1,8 @@
-type __VLS_Props = {
+declare const _default: import('vue').DefineComponent<{
     name: string;
     size?: number;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    name: string;
+    size?: number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/index.d.ts

@@ -9,5 +9,5 @@ export { builtinMessages } from './i18n-messages';
 export { useSiteConfig } from './composables/useSiteConfig';
 export { builtinThemePalettes } from './theme/presets';
 export { ElMessage, ElMessageBox, ElNotification, } from 'element-plus';
-export type { SiteConfig, SiteEnvConfig, SiteViteConfig, SiteExternalLink, ShellConfig, ShellAction, ShellActionLoader, NavItem, StandalonePage, PageLayout, AuthRule, AuthContext, AuthConfig, RouterConfig, ThemeConfig, ThemeOption, ThemePaletteVars, ResolvedNavItem, LocaleCode, LocalizedString, MessageRef, MessageTree, LocaleOption, I18nConfig, PageLoader, } from './types';
+export type { SiteConfig, SiteEnvConfig, SiteViteConfig, SiteExternalLink, ShellConfig, ShellAction, ShellActionLoader, NavItem, StandalonePage, PageLayout, AuthRule, AuthContext, AuthConfig, RouterConfig, ThemeConfig, ThemeOption, ThemePaletteVars, ResolvedNavItem, LocaleCode, LocalizedString, IconRegistry, MessageRef, MessageTree, LocaleOption, I18nConfig, PageLoader, } from './types';
 export declare function defineConfig(config: SiteConfig): SiteConfig;