@docsector/docsector-reader 0.3.1 → 0.3.3

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '0.3.1'
+const VERSION = '0.3.2'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -71,7 +71,7 @@ function getTemplatePackageJson (name) {
       serve: 'docsector serve'
     },
     dependencies: {
-      '@docsector/docsector-reader': '^0.3.1',
+      '@docsector/docsector-reader': '^0.3.2',
       '@quasar/extras': '^1.16.12',
       'quasar': '^2.16.6',
       'vue': '^3.5.13',
@@ -673,19 +673,19 @@ const TEMPLATE_GETTING_STARTED_MD = `\
 
 Create a new Docsector documentation project:
 
-\\\`\\\`\\\`bash
+\`\`\`bash
 npx @docsector/docsector-reader init my-docs
 cd my-docs
 npm install
-\\\`\\\`\\\`
+\`\`\`
 
 ## Development Server
 
 Start the development server with hot-reload:
 
-\\\`\\\`\\\`bash
+\`\`\`bash
 npm run dev
-\\\`\\\`\\\`
+\`\`\`
 
 Open **http://localhost:8181** in your browser.
 
@@ -695,25 +695,25 @@ Here's an overview of the project files:
 
 | File / Folder | Description |
 | --- | --- |
-| \\\`docsector.config.js\\\` | Branding, links, languages, and GitHub config |
-| \\\`quasar.config.js\\\` | Quasar/Vite build configuration (via factory) |
-| \\\`src/pages/index.js\\\` | Page registry — defines all documentation pages |
-| \\\`src/pages/boot.js\\\` | Boot metadata for the home page |
-| \\\`src/pages/@/\\\` | Special pages (Home, 404) |
-| \\\`src/pages/guide/\\\` | Guide pages (Markdown files) |
-| \\\`src/i18n/languages/\\\` | Translation files (HJSON format) |
-| \\\`src/css/app.sass\\\` | Custom styles |
-| \\\`public/images/\\\` | Static assets (logo, flags, icons) |
+| \`docsector.config.js\` | Branding, links, languages, and GitHub config |
+| \`quasar.config.js\` | Quasar/Vite build configuration (via factory) |
+| \`src/pages/index.js\` | Page registry — defines all documentation pages |
+| \`src/pages/boot.js\` | Boot metadata for the home page |
+| \`src/pages/@/\` | Special pages (Home, 404) |
+| \`src/pages/guide/\` | Guide pages (Markdown files) |
+| \`src/i18n/languages/\` | Translation files (HJSON format) |
+| \`src/css/app.sass\` | Custom styles |
+| \`public/images/\` | Static assets (logo, flags, icons) |
 
 ## Adding a Page
 
-1. Register the page in \\\`src/pages/index.js\\\`
-2. Create the Markdown file at \\\`src/pages/{type}/{path}.overview.{lang}.md\\\`
+1. Register the page in \`src/pages/index.js\`
+2. Create the Markdown file at \`src/pages/{type}/{path}.overview.{lang}.md\`
 3. The page will automatically appear in the sidebar navigation
 
 ## Customization
 
-Edit \\\`docsector.config.js\\\` to change:
+Edit \`docsector.config.js\` to change:
 
 - **Branding** — logo, name, version
 - **Links** — GitHub, changelog, sponsor
@@ -722,11 +722,11 @@ Edit \\\`docsector.config.js\\\` to change:
 
 ## Building for Production
 
-\\\`\\\`\\\`bash
+\`\`\`bash
 npm run build
-\\\`\\\`\\\`
+\`\`\`
 
-The optimized SPA output will be in \\\`dist/spa/\\\`.
+The optimized SPA output will be in \`dist/spa/\`.
 `
 
 // =============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DMenu.vue

@@ -100,10 +100,7 @@ const getMenuItemHeaderLabel = (meta) => {
   const label = meta.menu.header.label
   if (label[0] === '.') { // Node path
     const path = `_.${meta.type}${label}._`
-    if (te(path)) {
-      return t(path)
-    }
-    return t(path, 'en-US')
+    return t(path)
   }
   return label // String raw
 }

package/src/components/DMenuItem.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const $q = useQuasar()
 const $route = useRoute()
-const { t, te } = useI18n()
+const { t } = useI18n()
 
 const getMenuItemHeaderBackground = () => {
   return $q.dark.isActive ? 'background-color: #1D1D1D !important' : 'background-color: #f5f5f5 !important'
@@ -37,22 +37,14 @@ const getMenuItemHeaderBackground = () => {
 
 const getMenuItemLabel = (item, index) => {
   const path = `_${item.path.replace(/_$/, '').replace(/\//g, '.')}._`
-  if (te(path)) {
-    return t(path)
-  } else {
-    return t(path, 'en-US')
-  }
+  return t(path)
 }
 
 const getMenuItemSubheader = (meta) => {
   const subheader = meta.menu.subheader
   const path = `_.${meta.type}${subheader}._`
 
-  if (te(path)) {
-    return t(path)
-  } else {
-    return t(path, 'en-US')
-  }
+  return t(path)
 }
 
 const getPageStatusText = (status) => {

package/src/quasar.factory.js

@@ -23,7 +23,8 @@
  * @param {Function} [options.extendViteConf] - Additional Vite config extension
  */
 
-import { readFileSync, existsSync } from 'fs'
+import { readFileSync, existsSync, rmSync } from 'fs'
+import { createHash } from 'crypto'
 import { resolve } from 'path'
 import HJSON from 'hjson'
 
@@ -57,6 +58,46 @@ function getPackageRoot (projectRoot) {
   return projectRoot
 }
 
+/**
+ * Create a Vite plugin that watches consumer content files (pages/index.js,
+ * i18n languages, etc.) and forces the Vite dep optimizer to re-run when
+ * they change.
+ *
+ * Why: The router module (`routes.js`) imports consumer content via the
+ * `pages` alias. Vite's dep optimizer pre-bundles the router with the
+ * consumer content inlined, but the optimizer cache hash is based on config
+ * and lockfile only — NOT on consumer source files. So when pages/index.js
+ * changes during development, the optimizer serves stale pre-bundled code
+ * until the cache is manually cleared.
+ *
+ * Fix: When pages/index.js changes, the watcher plugin clears the dep cache,
+ * sets an env flag, and restarts the server. On restart, the config reads the
+ * flag and sets `optimizeDeps.force = true`, which makes Vite generate a new
+ * browserHash — effectively busting the browser module cache.
+ */
+function createPagesWatchPlugin (projectRoot) {
+  const pagesIndex = resolve(projectRoot, 'src', 'pages', 'index.js')
+  return {
+    name: 'docsector-pages-watch',
+    configureServer (server) {
+      server.watcher.on('change', (changedPath) => {
+        if (changedPath === pagesIndex) {
+          server.config.logger.info(
+            '\\x1b[36m[docsector]\\x1b[0m pages/index.js changed — clearing dep cache and restarting...',
+            { timestamp: true }
+          )
+          // Signal the restarted config to force a new optimizer hash
+          process.env.__DOCSECTOR_FORCE_OPTIMIZE = '1'
+          // Delete the stale optimizer cache
+          const cacheDir = resolve(projectRoot, 'node_modules', '.q-cache')
+          rmSync(cacheDir, { recursive: true, force: true })
+          server.restart()
+        }
+      })
+    }
+  }
+}
+
 /**
  * Create the HJSON Vite plugin for loading .hjson files as ES modules.
  */
@@ -145,6 +186,7 @@ export function createQuasarConfig (options = {}) {
 
       vitePlugins: [
         createHjsonPlugin(),
+        createPagesWatchPlugin(projectRoot),
         ...vitePlugins
       ],
 
@@ -152,6 +194,32 @@ export function createQuasarConfig (options = {}) {
         viteConf.resolve = viteConf.resolve || {}
         viteConf.resolve.alias = viteConf.resolve.alias || {}
 
+        // When the pages watcher plugin triggers a restart, it sets this env
+        // flag so we force Vite to generate a fresh browserHash. This busts
+        // the browser's module cache for pre-bundled deps whose content changed.
+        viteConf.optimizeDeps = viteConf.optimizeDeps || {}
+        if (process.env.__DOCSECTOR_FORCE_OPTIMIZE) {
+          delete process.env.__DOCSECTOR_FORCE_OPTIMIZE
+          viteConf.optimizeDeps.force = true
+        }
+
+        // Include a hash of pages/index.js in the optimizer config so that
+        // Vite's configHash (and thus browserHash) changes whenever page
+        // definitions change. This prevents the browser from serving stale
+        // pre-bundled router modules from its module cache.
+        const pagesFile = resolve(projectRoot, 'src', 'pages', 'index.js')
+        if (existsSync(pagesFile)) {
+          const pagesHash = createHash('sha256')
+            .update(readFileSync(pagesFile))
+            .digest('hex')
+            .slice(0, 8)
+          viteConf.optimizeDeps.esbuildOptions = viteConf.optimizeDeps.esbuildOptions || {}
+          viteConf.optimizeDeps.esbuildOptions.define = {
+            ...(viteConf.optimizeDeps.esbuildOptions.define || {}),
+            __DOCSECTOR_PAGES_HASH__: JSON.stringify(pagesHash)
+          }
+        }
+
         // Deduplicate Vue ecosystem packages to prevent dual-instance issues.
         // When the package is installed from NPM, Vue, vue-router, vuex, etc.
         // can end up duplicated (one copy in consumer's node_modules, another
@@ -180,11 +248,15 @@ export function createQuasarConfig (options = {}) {
           'hjson', 'q-colorize-mixin'
         ]
 
-        // Exclude boot files from pre-bundling.
+        // Exclude boot files and the router from pre-bundling.
         // Boot files (especially boot/i18n) import the consumer's src/i18n/index.js
         // which uses import.meta.glob — a compile-time Vite directive that only
         // works in source files. If pre-bundled, the glob calls become dead code
         // and no i18n messages are loaded.
+        // The router is excluded because routes.js imports consumer content via
+        // the `pages` alias. If pre-bundled, consumer content gets embedded in
+        // the optimizer cache whose hash doesn't track source file changes,
+        // causing stale routes after editing pages/index.js.
         viteConf.optimizeDeps.exclude = [
           ...(viteConf.optimizeDeps.exclude || []),
           'boot/i18n', 'boot/store', 'boot/QZoom', 'boot/axios'