@bndynet/vue-site 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +11 -2
  2. package/bin/vue-site.mjs +8 -2
  3. package/dist/composables/useTheme.d.ts +6 -2
  4. package/dist/create-app.d.ts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.es.js +7642 -7624
  7. package/dist/types.d.ts +13 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -67,6 +67,8 @@ Add `"dev": "vue-site dev"` (or `vs dev`) in `package.json` scripts if you like.
67
67
  | `links` | Header links: Lucide `icon` + `link`, optional `title` |
68
68
  | `packageRepository` | Usually set by CLI from `package.json`; omit when using `createSiteApp` alone |
69
69
  | `env` | Dev/build options — see below |
70
+ | `bootstrap` | Optional path from site root (e.g. `./bootstrap.ts`) — module loaded once before the Vue app |
71
+ | `configureApp` | Optional `(app) => void` after router install, before `mount` |
70
72
 
71
73
  ### `NavItem`
72
74
 
@@ -106,15 +108,20 @@ import { createSiteApp } from '@bndynet/vue-site'
106
108
  import '@bndynet/vue-site/style.css'
107
109
  import config from './site.config'
108
110
 
109
- createSiteApp(config).mount('#app')
111
+ const app = await createSiteApp(config)
112
+ app.mount('#app')
110
113
  ```
111
114
 
112
- Exports: `createSiteApp`, `defineConfig`, `useTheme`, `useSiteConfig`. Types: `SiteConfig`, `SiteEnvConfig`, `SiteViteConfig`, `SiteExternalLink`, `NavItem`, `ThemeConfig`, `ThemeOption`, `ThemePaletteVars`, `ResolvedNavItem`.
115
+ Use a top-level `await` in your entry (or an async IIFE): `createSiteApp` is async. If you set optional `bootstrap` in config, that module loads before the app is created; if you omit `bootstrap`, that step is skipped.
116
+
117
+ Exports: `createSiteApp`, `defineConfig`, `useTheme`, `useSiteConfig`, `themeRefKey`. Types: `SiteConfig`, `SiteEnvConfig`, `SiteViteConfig`, `SiteExternalLink`, `NavItem`, `ThemeConfig`, `ThemeOption`, `ThemePaletteVars`, `ResolvedNavItem`.
113
118
 
114
119
  ### Theme in Vue pages (`useTheme`)
115
120
 
116
121
  Import `useTheme` from `@bndynet/vue-site`. It returns a reactive `theme` ref (the active theme id, e.g. `light`, `dark`, or an `extraThemes[].id`) plus `setTheme` and `toggleTheme`. The root layout also sets `document.documentElement` attribute `data-theme` and applies CSS variables, so you can style with `var(--color-*)` without JavaScript.
117
122
 
123
+ The theme ref is **provided** by `createSiteApp()` (same Vue runtime as your app), so `watch(theme, …)` works reliably even when another tool would otherwise load a second copy of `vue` from nested `node_modules`.
124
+
118
125
  ```vue
119
126
  <script setup lang="ts">
120
127
  import { watch } from 'vue'
@@ -132,6 +139,8 @@ watch(theme, (next, prev) => {
132
139
  </template>
133
140
  ```
134
141
 
142
+ `watch` only runs when the theme **changes** after your component is set up (for example after the user clicks the theme control). It does not run on the initial value unless you pass `{ immediate: true }`.
143
+
135
144
  ## Upgrade
136
145
 
137
146
  ```bash
package/bin/vue-site.mjs CHANGED
@@ -104,7 +104,10 @@ const entryCode = [
104
104
  `import '${pkgDir.replace(/\\/g, '/')}/dist/style.css'`,
105
105
  `import siteConfig from '/${foundConfig}'`,
106
106
  `import { repositoryUrl } from '${VIRTUAL_PACKAGE}'`,
107
- `createSiteApp({ ...siteConfig, packageRepository: repositoryUrl }).mount('#app')`,
107
+ `;(async () => {`,
108
+ ` const app = await createSiteApp({ ...siteConfig, packageRepository: repositoryUrl })`,
109
+ ` app.mount('#app')`,
110
+ `})()`,
108
111
  ].join('\n')
109
112
 
110
113
  const htmlTemplate = `<!DOCTYPE html>
@@ -324,7 +327,10 @@ import { createSiteApp } from '${pkgDir.replace(/\\/g, '/')}/dist/index.es.js'
324
327
  import '${pkgDir.replace(/\\/g, '/')}/dist/style.css'
325
328
  import siteConfig from './${foundConfig}'
326
329
  import { repositoryUrl } from '${VIRTUAL_PACKAGE}'
327
- createSiteApp({ ...siteConfig, packageRepository: repositoryUrl }).mount('#app')
330
+ ;(async () => {
331
+ const app = await createSiteApp({ ...siteConfig, packageRepository: repositoryUrl })
332
+ app.mount('#app')
333
+ })()
328
334
  </script>
329
335
  </body>
330
336
  </html>`
package/dist/composables/useTheme.d.ts CHANGED
@@ -1,12 +1,16 @@
1
+ import { InjectionKey, Ref } from 'vue';
2
+ /** Use `Symbol.for` so the key matches even if multiple copies of this package are resolved. */
3
+ export declare const themeRefKey: InjectionKey<Ref<string>>;
1
4
  /**
5
+ * @param themeRef — ref created next to `createApp` so it uses the same Vue runtime as the app (fixes `watch(theme)` when npm/Vite dedupes `vue` imperfectly).
2
6
  * @param defaultMode — used when nothing valid is in localStorage
3
7
  * @param themeIds — full list of allowed ids (built-in `light`/`dark` plus any `extraThemes`)
4
8
  * @param palettes — resolved CSS variable maps per id
5
9
  * @param overlay — optional `:root` overrides applied after the active palette
6
10
  */
7
- export declare function initTheme(defaultMode?: string, themeIds?: readonly string[], palettes?: Record<string, Record<string, string>>, overlay?: Record<string, string>): void;
11
+ export declare function initTheme(themeRef: Ref<string>, defaultMode?: string, themeIds?: readonly string[], palettes?: Record<string, Record<string, string>>, overlay?: Record<string, string>): void;
8
12
  export declare function useTheme(): {
9
- theme: import('vue').Ref<string, string>;
13
+ theme: Ref<string, string>;
10
14
  setTheme: (mode: string) => void;
11
15
  toggleTheme: () => void;
12
16
  };
package/dist/create-app.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { SiteConfig } from './types';
2
- export declare function createSiteApp(config: SiteConfig): import('vue').App<Element>;
2
+ export declare function createSiteApp(config: SiteConfig): Promise<import('vue').App<Element>>;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SiteConfig } from './types';
2
2
  export { createSiteApp } from './create-app';
3
- export { useTheme } from './composables/useTheme';
3
+ export { useTheme, themeRefKey } from './composables/useTheme';
4
4
  export { useSiteConfig } from './composables/useSiteConfig';
5
5
  export { builtinThemePalettes } from './theme/presets';
6
6
  export type { SiteConfig, SiteEnvConfig, SiteViteConfig, SiteExternalLink, NavItem, ThemeConfig, ThemeOption, ThemePaletteVars, ResolvedNavItem, } from './types';