create-rue 0.8.1 → 0.9.7

package/template/base/app/pages/components/Layout.tsx

@@ -2,7 +2,7 @@ import { computed, type FC, ref, useEffect, watch } from '@rue-js/rue'
 import { RouterLink, useRoute } from '@rue-js/router'
 
 const themeStorageKey = 'rue.base.theme'
-const reportHeaderStorageKey = 'rue.base.report.hideHeader'
+const headerToggleRoutes = ['/', '/report', '/todo']
 
 const navItems = [
   { to: '/', label: '首页' },
@@ -80,9 +80,21 @@ const themeLabels: Record<string, string> = {
   sunset: '日落',
 }
 
-const getStoredTheme = () => localStorage.getItem(themeStorageKey) || 'light'
+const getStoredTheme = () => {
+  const storedTheme = localStorage.getItem(themeStorageKey)
+  return storedTheme && themes.includes(storedTheme) ? storedTheme : 'light'
+}
+
+const getHeaderStorageKey = (path: string) => {
+  if (path === '/') {
+    return 'rue.base.header.hide.home'
+  }
+
+  return `rue.base.header.hide.${path.replace(/^\//, '')}`
+}
 
-const getStoredHeaderHidden = () => localStorage.getItem(reportHeaderStorageKey) === '1'
+const getStoredHeaderHidden = (path: string) =>
+  localStorage.getItem(getHeaderStorageKey(path)) === '1'
 
 const applyTheme = (theme: string) => {
   document.documentElement.setAttribute('data-theme', theme)
@@ -91,20 +103,48 @@ const applyTheme = (theme: string) => {
 const ThemePicker: FC = () => {
   const theme = ref(getStoredTheme())
 
+  const applyThemeState = () => {
+    const currentTheme = theme.value
+    const themePicker = document.querySelector<HTMLSelectElement>('[data-base-theme-picker="true"]')
+
+    applyTheme(currentTheme)
+
+    if (themePicker && themePicker.value !== currentTheme) {
+      themePicker.value = currentTheme
+    }
+  }
+
+  const syncStoredTheme = () => {
+    theme.value = getStoredTheme()
+    requestAnimationFrame(applyThemeState)
+  }
+
   useEffect(() => {
-    applyTheme(theme.value)
-  })
+    localStorage.setItem(themeStorageKey, theme.value)
+    requestAnimationFrame(applyThemeState)
+
+    window.addEventListener('storage', syncStoredTheme)
+    window.addEventListener('focus', syncStoredTheme)
+    document.addEventListener('visibilitychange', syncStoredTheme)
+
+    return () => {
+      window.removeEventListener('storage', syncStoredTheme)
+      window.removeEventListener('focus', syncStoredTheme)
+      document.removeEventListener('visibilitychange', syncStoredTheme)
+    }
+  }, [])
 
   watch(
     () => theme.value,
     () => {
-      applyTheme(theme.value)
       localStorage.setItem(themeStorageKey, theme.value)
+      requestAnimationFrame(applyThemeState)
     },
   )
 
   return (
     <select
+      data-base-theme-picker="true"
       aria-label="切换主题"
       className="select select-bordered select-sm w-40"
       onChange={(event: Event) => {
@@ -112,7 +152,7 @@ const ThemePicker: FC = () => {
       }}
     >
       {themes.map((name) => (
-        <option key={name} value={name} selected={theme.value === name}>
+        <option key={name} value={name}>
           {themeLabels[name] || name}
         </option>
       ))}
@@ -123,11 +163,34 @@ const ThemePicker: FC = () => {
 const Header: FC = () => {
   const route = useRoute()
   const currentPath = computed(() => route.get()?.path || '/')
+  const navClass = (path: string) =>
+    `btn btn-sm ${currentPath.get() === path ? 'btn-primary' : 'btn-ghost'}`.trim()
+
+  const applyHeaderNavState = () => {
+    const path = currentPath.get()
+    const navLinks = document.querySelectorAll<HTMLElement>('[data-base-nav-path]')
+
+    navLinks.forEach((link) => {
+      const targetPath = link.dataset.baseNavPath || ''
+      link.className = `btn btn-sm ${path === targetPath ? 'btn-primary' : 'btn-ghost'}`.trim()
+    })
+  }
+
+  watch(
+    () => currentPath.get(),
+    () => {
+      requestAnimationFrame(applyHeaderNavState)
+    },
+  )
+
+  useEffect(() => {
+    requestAnimationFrame(applyHeaderNavState)
+  }, [])
 
   return (
-    <header className="sticky top-0 z-40 border-b border-base-300/70 bg-base-100/85 backdrop-blur">
-      <div className="content-width navbar min-h-0 gap-4 py-3">
-        <div className="navbar-start min-w-0">
+    <header className="sticky top-0 z-40 border-b border-base-300/70 bg-base-100/90 backdrop-blur">
+      <div className="content-width flex flex-wrap items-center gap-3 py-3">
+        <div className="min-w-0 flex-1 md:flex-none">
           <RouterLink to="/" className="flex min-w-0 items-center gap-3">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary text-primary-content shadow-lg shadow-primary/20">
               R
@@ -137,18 +200,19 @@ const Header: FC = () => {
             </div>
           </RouterLink>
         </div>
-        <nav className="navbar-center hidden flex-1 justify-center gap-2 md:flex">
+        <nav className="order-3 flex w-full flex-wrap gap-2 md:order-none md:w-auto md:flex-1 md:justify-center">
           {navItems.map((item) => (
             <RouterLink
               key={item.to}
               to={item.to}
-              className={`btn btn-sm ${currentPath.get() === item.to ? 'btn-primary' : 'btn-ghost'}`}
+              data-base-nav-path={item.to}
+              className={navClass(item.to)}
             >
-              {item.label}
+              <span>{item.label}</span>
             </RouterLink>
           ))}
         </nav>
-        <div className="navbar-end flex items-center gap-2">
+        <div className="flex items-center gap-2 md:ml-auto">
           <ThemePicker />
         </div>
       </div>
@@ -174,26 +238,72 @@ const Footer: FC = () => (
 const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = (props) => (
   <button
     type="button"
-    className="btn btn-circle btn-sm fixed left-3 top-3 z-50 border-base-300 bg-base-100/90 shadow-lg backdrop-blur"
-    aria-label={props.hidden ? '显示顶部导航' : '隐藏顶部导航'}
-    title={props.hidden ? '显示顶部导航' : '隐藏顶部导航'}
+    className="btn btn-circle btn-sm fixed left-3 top-3 z-50 border-base-300 bg-base-100/95 text-base-content shadow-lg backdrop-blur"
+    aria-label={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
+    title={props.hidden ? '显示头部和底部' : '隐藏头部和底部'}
     onClick={props.onToggle}
   >
-    {props.hidden ? '显' : '隐'}
+    {props.hidden ? (
+      <svg
+        viewBox="0 0 24 24"
+        width="16"
+        height="16"
+        aria-hidden="true"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    ) : (
+      <svg
+        viewBox="0 0 24 24"
+        width="16"
+        height="16"
+        aria-hidden="true"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M3 3l18 18" />
+        <path d="M10.6 10.7a3 3 0 0 0 4.2 4.2" />
+        <path d="M9.9 5.1A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a21.7 21.7 0 0 1-4 5.2" />
+        <path d="M6.6 6.7C4.2 8.3 2.7 10.9 2 12c0 0 3.5 7 10 7 1.8 0 3.4-.5 4.8-1.3" />
+      </svg>
+    )}
   </button>
 )
 
 const SiteLayout: FC = (props) => {
   const route = useRoute()
-  const reportHeaderHidden = ref(getStoredHeaderHidden())
   const currentPath = computed(() => route.get()?.path || '/')
-  const isReportRoute = computed(() => currentPath.get() === '/report')
-  const hideHeader = computed(() => isReportRoute.get() && reportHeaderHidden.value)
+  const allowHeaderToggle = computed(() => headerToggleRoutes.includes(currentPath.get()))
+  const reportHeaderHidden = ref(getStoredHeaderHidden(currentPath.get()))
+  const hideHeader = computed(() => allowHeaderToggle.get() && reportHeaderHidden.value)
+
+  watch(
+    () => currentPath.get(),
+    (path) => {
+      reportHeaderHidden.value = allowHeaderToggle.get() ? getStoredHeaderHidden(path) : false
+    },
+  )
 
   watch(
     () => reportHeaderHidden.value,
     () => {
-      localStorage.setItem(reportHeaderStorageKey, reportHeaderHidden.value ? '1' : '0')
+      if (!allowHeaderToggle.get()) {
+        return
+      }
+
+      localStorage.setItem(
+        getHeaderStorageKey(currentPath.get()),
+        reportHeaderHidden.value ? '1' : '0',
+      )
     },
   )
 
@@ -201,7 +311,7 @@ const SiteLayout: FC = (props) => {
     <div className="app-shell">
       <div className="app-surface">
         {!hideHeader.get() && <Header />}
-        {isReportRoute.get() && (
+        {allowHeaderToggle.get() && (
           <HeaderToggleButton
             hidden={hideHeader.get()}
             onToggle={() => {
@@ -209,12 +319,8 @@ const SiteLayout: FC = (props) => {
             }}
           />
         )}
-        <main
-          className={`content-width pb-10 ${hideHeader.get() ? 'pt-6 sm:pt-8' : 'pt-6 sm:pt-8'}`}
-        >
-          {props.children}
-        </main>
-        <Footer />
+        <main className="content-width pb-10 pt-6 sm:pt-8">{props.children}</main>
+        {!hideHeader.get() && <Footer />}
       </div>
     </div>
   )

package/template/base/package.json

@@ -6,33 +6,32 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "typecheck": "tsgo --noEmit",
     "oxlint": "oxlint -c ./.oxlintrc.json .",
     "oxlint-fix": "oxlint -c ./.oxlintrc.json . --fix",
     "format": "oxfmt .",
     "format-check": "oxfmt --check ."
   },
   "dependencies": {
-    "@rue-js/design": "^0.8.1",
-    "@rue-js/jsx-runtime": "^0.8.1",
-    "@rue-js/router": "^0.8.1",
-    "@rue-js/rue": "^0.8.1",
-    "@rue-js/runtime": "^0.8.1",
-    "@rue-js/runtime-vapor": "^0.8.1"
+    "@rue-js/router": "^0.9.7",
+    "@rue-js/rue": "^0.9.7",
+    "daisyui": "^5.7.28",
+    "oxfmt": "^0.66.0",
+    "oxlint": "^1.81.0"
   },
   "devDependencies": {
-    "@rue-js/jsx-dev-runtime": "^0.8.1",
-    "@rue-js/vite-plugin-rue": "^0.8.1",
-    "@swc/core": "^1.15.3",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.17",
-    "@types/node": "^24.10.1",
-    "daisyui": "^5.5.23",
-    "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vite-plugin-wasm": "^3.5.0"
+    "@rue-js/jsx-dev-runtime": "^0.8.21",
+    "@rue-js/vite-plugin-rue": "^0.9.7",
+    "@swc/core": "1.15.47",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.4.1",
+    "@typescript/native-preview": "beta",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-wasm": "^3.6.0"
   },
   "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }

package/template/base/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ES2021"],
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
     "strict": true,
     "skipLibCheck": true,
     "moduleResolution": "bundler",
@@ -11,12 +11,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": false,
-    "types": ["vitest/globals"],
+    "types": ["vite/client", "@rue-js/rue/jsx", "node"],
     "jsx": "react-jsx",
     "jsxImportSource": "@rue-js",
     "declaration": true,
-    "outDir": "./dist",
-    "baseUrl": "."
+    "outDir": "./dist"
   },
   "include": ["app/**/*.ts", "app/**/*.tsx", "app/**/*.d.ts", "vite.config.ts"]
 }

package/template/base/vite.config.ts

@@ -2,27 +2,20 @@ import { defineConfig } from 'vite'
 import VitePluginRue from '@rue-js/vite-plugin-rue'
 import wasm from 'vite-plugin-wasm'
 import tailwindcss from '@tailwindcss/vite'
-import { createRequire } from 'node:module'
 
-const require = createRequire(import.meta.url)
-const runtimeDomEntry = require.resolve('@rue-js/runtime/src/dom.ts')
-
-export default defineConfig({
+export default defineConfig(({ command }) => ({
   resolve: {
-    alias: [
-      {
-        find: '@rue-js/runtime/dom',
-        replacement: runtimeDomEntry,
-      },
-    ],
     conditions: ['import', 'module', 'browser', 'default'],
   },
   plugins: [
     wasm(),
     tailwindcss() as any,
     VitePluginRue({
-      include: ['/app/'],
-      debug: true,
+      debug: command === 'serve',
     }),
   ],
-})
+  server: {
+    port: 5173,
+    strictPort: false,
+  },
+}))

package/template/base/app/env.d.ts

@@ -1 +0,0 @@
-declare const __SSR__: boolean