duto 0.261001.0 → 0.261011.0

package/src/pages/client/app.tsx

@@ -1,14 +1,30 @@
 // @ts-ignore
 import ':duto/hmr'
 
-import { render, hydrate, h } from 'preact'
+import { render, h, type ComponentChild } from 'preact'
+import { flushSync, useLayoutEffect, useState } from 'preact/compat'
 import { Switch, Route, Router } from 'wouter-preact'
 import { useLocation, useParams, useSearchParams, } from 'wouter-preact'
+import type { AroundNavHandler } from 'wouter-preact'
+import type { Params, StaticProps, View } from '#/compiler/types'
+
+
+import { setThemeAttr, getTheme } from './theme'
+
+setThemeAttr(getTheme())
 
 // @ts-ignore
 import { fallbackLocale, locales, routeMap } from ':duto/i18n'
 // import i18n from '../i18n/client'
-import i18n, { updatePickers } from '../i18n/client'
+import i18n, {
+  detect, isPrefixed,
+  getLocale, setLocale,
+  cache, cached,
+  r, redirect,
+  route,
+  d, t, tl,
+  updatePickers,
+} from '../i18n/client'
 
 await i18n(fallbackLocale, locales, {}, {}, routeMap)
 
@@ -24,31 +40,172 @@ for (let [tag, el, opts] of [
 }
 
 import {
-  views, SRoutes,
+  views,
 // @ts-ignore
 } from ':duto'
 // @ts-ignore
 import ':root/styles'
 
 
-// window.$duto = {
-//   sroutes: SRoutes,
-//   location: '/',
-//   navigate: {},
-//   params: {},
-//   search: {},
-//   setSearch: {},
+// var props = {}
+// const propKey = "props"
+// const script = document.currentScript || ('function' == typeof document.querySelector ? document.querySelector(`script[${propKey}]`) : void 0)
+// if (script) {
+//   const opts = script.getAttribute(propKey)
+//   if (opts) {
+//     try {
+//       props = JSON.parse(opts)
+//     } catch (e) { }
+//   }
 // }
-import { renderRoute } from './router'
 
-render(<Router>
+// @ts-ignore
+self.$duto = self.$duto || {}
+// @ts-ignore
+Object.assign(self.$duto, {
+  // props,
+  // location: '/',
+  // navigate: {},
+  // params: {},
+  // search: {},
+  // setSearch: {},
+  i18n: {
+    detect, isPrefixed,
+    getLocale, setLocale,
+    cache, cached,
+    r, redirect,
+    route,
+    d, t, tl,
+  },
+})
+
+
+function normalizeParams(
+  raw: Record<string, string>,
+  paramDefs: Params
+): Record<string, string | string[] | undefined> {
+  const result: Record<string, string | string[] | undefined> = {}
+  for (const def of paramDefs) {
+    const val = raw[def.name]
+    if (def.catchAll) {
+      result[def.name] = val
+        ? val.split('/').filter(Boolean)
+        : def.optional ? undefined : []
+    } else {
+      result[def.name] = val === undefined && def.optional ? undefined : val
+    }
+  }
+  return result
+}
+
+async function resolveRoute(
+  [, Component, defs, getProps, layouts]: View,
+  rawParams: Record<string, string>,
+) {
+  let props: StaticProps = defs ? normalizeParams(rawParams, defs) : { ...rawParams },
+    sProps = null
+
+  if (typeof Component === 'string') {
+    const mod = await import(/* @vite-ignore */ Component)
+    Component = mod.default
+    getProps = getProps === 1 ? mod.getProps : 0
+    sProps = mod.props ?? null
+  }
+
+  // @ts-ignore
+  // const sProps = self.$duto?.props
+  // if (sProps && typeof sProps === 'object') { // @ts-ignore
+  //   self.$duto.props = null
+  //   Object.assign(props, sProps)
+  // } else
+
+  if (typeof getProps === 'function') {
+    try {
+      props = {
+        ...(await getProps(props as Record<string, string | string[] | undefined>, sProps)),
+        ...props
+      }
+    } catch (e) {
+      console.error('[ssg] getProps failed:', e)
+    }
+  } else if (sProps && typeof sProps === 'object' && !Array.isArray(sProps)) {
+    Object.assign(props, sProps)
+  }
+
+  let el = h(Component, props as any)
+  for (const layout of [layouts ?? []].flat())
+    el = h(layout, null, el)
+
+  return el
+}
+
+const promises = new Map<string, Promise<ComponentChild>>()
+const resolved = new Map<string, ComponentChild>()
+let last: ComponentChild = null
+
+const keyOf = (view: View, params: Record<string, string>) => view[0] + '|' + JSON.stringify(params)
+function load(view: View, params: Record<string, string>) {
+  const key = keyOf(view, params)
+  if (!promises.has(key)) {
+    promises.set(key, resolveRoute(view, params).then((el) => {
+      resolved.set(key, el)
+      return el
+    }))
+  }
+  return promises.get(key)
+}
+
+function View({ view, params }: { view: View, params: Record<string, string>}) {
+  const { 0: _wild, ...clean } = params
+  const key = keyOf(view, clean)
+
+  const [loaded, setLoaded] = useState(() => resolved.get(key) ?? last)
+  const el = resolved.get(key) ?? loaded
+  if (resolved.has(key)) last = el
+
+  useLayoutEffect(() => {
+    let cancelled = false
+    self.$duto.route = { pattern: view[0], params: clean, path: location.pathname }
+
+    load(view, clean).then(el => {
+      if (cancelled) return
+      last = el
+      setLoaded(el)
+      // self.dispatchEvent(new CustomEvent('d:load'))
+    })
+    return () => { cancelled = true }
+  }, [key])
+
+  return el
+}
+
+
+// enable view transitions for navigation
+const aroundNav: AroundNavHandler = (navigate, to, options) => {
+  // feature detection for browsers that dont support View Transitions
+  if (!document.startViewTransition)
+    return navigate(to, options)
+
+  // only use view transitions if explicitly requested
+  options?.transition
+   ? document.startViewTransition(() => flushSync(() => navigate(to, options)))
+   : navigate(to, options)
+}
+
+// clean prerendered content
+while (document.body.firstChild)
+  document.body.removeChild(document.body.firstChild)
+
+render(<Router aroundNav={aroundNav}>
   {h(() => {
     document.body.removeAttribute('hidden')
-    self.$duto = self.$duto || {}
-    self.$duto.sroutes = SRoutes
+
     const [location, navigate] = useLocation()
     self.$duto.location = location
-    self.$duto.navigate = navigate
+    self.$duto.navigate = (to,options) => {
+      to = new URL(to).pathname
+      navigate(to, options)
+    }
     self.$duto.params = useParams()
 
     const [search, setSearch] = useSearchParams()
@@ -56,21 +213,13 @@ render(<Router>
     self.$duto.setSearch = setSearch
 
     updatePickers()
+    self.dispatchEvent(new CustomEvent('d:load'))
   }, null)}
   <Switch>
-    {/* @ts-ignore */}
-    {...views.map(([path, Component, defs, getProps, layouts]) => (
-      <Route path={path} component={({ params }: { params: Record<string, string> }) => {
-        // Trigger async render (updates container imperatively to avoid
-        // React/Preact hook rules issues with async components)
-
-        delete params[0]
-        window.$duto.route = { pattern: path, params, path: location.pathname }
-
-        renderRoute(document.body, Component, params, defs, getProps, layouts)
-        // Return null — renderRoute will call render() directly on the container
-        return null
-      }} />
+    {views.map(v => (
+      <Route key={v[0]} path={v[0]}>
+        {(params) => <View view={v} params={params} />}
+      </Route>
     ))}
   </Switch>
 </Router>, document.body)

package/src/pages/client/link.ts

@@ -1,3 +1,10 @@
+self.addEventListener('d:navigate', e => {
+  const el = (e as CustomEvent<HTMLAnchorElement>).detail
+
+  console.warn('d:navigate', el)
+  if (el.href) self.$duto.navigate?.(el.href)
+})
+
 export default class Link extends HTMLAnchorElement {
   static observedAttributes = [
     'href',
@@ -12,7 +19,6 @@ export default class Link extends HTMLAnchorElement {
 
   constructor() {
     super()
-
     this.addEventListener('click', this.#onClick)
   }
 
@@ -21,50 +27,18 @@ export default class Link extends HTMLAnchorElement {
   }
 
   #onClick = (e: MouseEvent) => {
-    // Respeita comportamento padrão
     if (
-      e.defaultPrevented
+      e.defaultPrevented // respects default behavior
       || this.target === '_blank'
-      || e.metaKey
-      || e.ctrlKey
-      || e.shiftKey
-      || e.altKey
+      // allow ctrl/cmd+click to open in new tab normally
+      || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey
       || e.button !== 0
-    ) {
-      return
-    }
-    // Allow ctrl/cmd+click to open in new tab normally
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
-    // e.preventDefault()
-    if ((e.target as HTMLAnchorElement).hasAttribute('href'))
-      window.dispatchEvent(new CustomEvent('d:navigate', { detail: e.target }))
+    ) return
 
-    // Exemplo: interceptar navegação SPA
-    // event.preventDefault()
-    // router.push(this.href)
-  }
+    e.preventDefault()
+    if (this.hasAttribute('href'))
+      self.dispatchEvent(new CustomEvent('d:navigate', { detail: this }))
 
-  // Proxy opcional para facilitar typings
-  get url() {
-    return new URL(this.href)
+    // TODO: scroll from #hash to elements
   }
 }
-
-
-window.addEventListener('d:navigate', e => {
-  const el = (e as CustomEvent<HTMLAnchorElement>).detail
-
-  console.warn('d:navigate', el)
-  // if (href) _navigate?.(href)
-  // _navigate?.('/haha-2')
-})
-
-// const links = document.querySelectorAll('a[d]')
-// for (const link of links) { // @ts-ignore
-//   link.addEventListener('click', (e: MouseEvent) => {
-//     // Allow ctrl/cmd+click to open in new tab normally
-//     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
-//     e.preventDefault()
-//     window.dispatchEvent(new CustomEvent('d:navigate', { detail: e.target }))
-//   })
-// }

package/src/pages/client/storage.ts

@@ -6,7 +6,7 @@ interface IStoreChange<TValue> {
   old: TValue | null,
 }
 
-type IStoreListener<TValue> = (change: IStoreChange<TValue>) => void
+export type IStoreListener<TValue> = (change: IStoreChange<TValue>) => void
 
 /**
  * Store reativo que encapsula o localStorage.

package/src/pages/client/theme.ts

@@ -0,0 +1,49 @@
+import { local, type IStoreListener } from './storage'
+
+export type Theme = 'auto' | 'dark' | 'light'
+
+const key = 'theme'
+const themes = ['dark', 'light']
+const match = () => matchMedia('(prefers-color-scheme: dark)')
+export const preferredColorScheme = () => match().matches ? 'dark' : 'light'
+export const setThemeAttr = (theme: Theme) => {
+  if (theme == 'auto') theme = preferredColorScheme()
+  document.documentElement.classList.toggle('dark', theme == 'dark')
+}
+
+const isValid = (val: string) => themes.includes(val)
+export const getTheme = () => {
+  const val = local.get<string>(key) || ''
+  return isValid(val) ? val : 'auto'
+}
+export const setTheme = (theme: Theme) => {
+  setThemeAttr(theme)
+  isValid(theme)
+    ? local.set(key, theme)
+    : local.remove(key)
+}
+
+export const onThemeChange = (e: IStoreListener<any>) => {
+  const mm = match()
+	mm.addEventListener('change', e)
+  return [local.subscribe(key, e), () => mm.removeEventListener('change', e)]
+}
+
+// export function updatePickers(theme = storedTheme || 'auto') {
+//   document.querySelectorAll('.theme-select').forEach(el => {
+//     const select = el.querySelector('select')
+//     if (select) select.value = theme
+//     const tmpl = document.querySelector(`#theme-icons`)
+//     const newIcon = tmpl && tmpl.content.querySelector('.' + theme)
+//     if (newIcon) {
+//       const oldIcon = el.querySelector('svg.label-icon')
+//       if (oldIcon) oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes)
+//     }
+//   })
+// }
+
+// <template id="theme-icons">
+// 	<Icon name="lucide:sun" class="light" />
+// 	<Icon name="lucide:moon-star" class="dark" />
+// 	<Icon name="lucide:swatch-book" class="auto" />
+// </template>

package/src/pages/compiler/constants.ts

@@ -7,6 +7,8 @@ export const DOCTYPE_RE = /<!doctype html/i
 
 // export const USE_CLIENT_RE = /^[\s\r\n]*["']use client["'](?=[\s\r\n]|$)/m
 export const USE_CLIENT_RE = /^(?:\s|\/\/.*\n|\/\*[\s\S]*?\*\/)*["']use client["'](?=\s|;|$)/
+export const USE_RAW_RE = /^(?:\s|\/\/.*\n|\/\*[\s\S]*?\*\/)*["']use raw["'](?=\s|;|$)/
+export const USE_HTML_RE = /^(?:\s|\/\/.*\n|\/\*[\s\S]*?\*\/)*["']use html["'](?=\s|;|$)/
 
 export const LAYOUT_NAMES = ['_layout', 'layout']
 export const NF_NAMES = ['404', 'not-found']

package/src/pages/compiler/index.ts

@@ -7,10 +7,9 @@ import { h } from 'preact'
 import { render } from 'preact-render-to-string'
 import minify from '@minify-html/node'
 
-import { JSJSON } from 't0n'
 import { DOCTYPE_RE } from './constants'
 import { getAsset, getChunk } from './assets'
-import { getLayouts, resolveStaticOutputPath } from './meta'
+import { resolveStaticOutputPath } from './meta'
 import { setLocale } from '../i18n/client'
 
 import type { ResolvedConfig } from 'vite'
@@ -26,13 +25,14 @@ export async function renderPage(
  ) {
   const {
     mod,
+    layouts,
     hasGetProps, hasGetStaticProps,
-    isClientOnly,
+    useClient,
   } = page
   if (!mod?.default)
     return console.warn(`No default export in ${page.filePath} — skipping`)
 
-  if (page.isInternal || page.is404 || (page.isDynamic && !hasGetStaticProps))
+  if (page.isInternal || (!page.useRaw && !page.useHtml && page.is404) || (page.isDynamic && !hasGetStaticProps))
     return meta.summary.set('/'+ page.fileName, { type: 2, path: '/'+ page.fileName, size: 0, sizeBr: 0, sizeJS: 0 })
 
   const { filePath, pattern, params } = page
@@ -70,42 +70,52 @@ export async function renderPage(
     props.push({ routeParams: {}, pageProps: {} })
   }
 
-  const layouts = await getLayouts(meta, page.filePath)
-
+  const sProps = []
   for (const prop of props) {
     const allProps = { ...prop.pageProps, ...prop.routeParams }
+    Object.keys(allProps).length && sProps.push(allProps)
 
     // @ts-ignore
-    allProps?.locale && setLocale(allProps?.locale || meta.i18n.fallbackLocale)
+    allProps?.locale && await setLocale(allProps?.locale || meta.i18n.fallbackLocale)
 
     const pathname = resolveStaticOutputPath(page, prop.routeParams)
+
+    // Shims
     // TODO: melhorar isso para impedir erros do wouter e afins
     // @ts-ignore
     global.location = { pathname: '/'+ (pathname === 'index' ? '' : pathname) }
+    global.location.href = global.location.pathname
     // @ts-ignore
-    global.window = { $duto: {
-      sroutes: meta.spages,
-      navigate: {},
-      route: { pattern: page.pattern, params: prop.routeParams, path: global.location.pathname },
-    } }
+    global.window = {
+      location: global.location,
+      $duto: {
+        navigate: {},
+        route: { pattern: page.pattern, params: prop.routeParams, path: global.location.pathname },
+      }
+    }
 
     let html = ''
 
-    // if (!isClientOnly) { // TODO: fazer funcionar com `use client`
+    if (!useClient) {
       try {
         let el = h(mod.default, allProps as any)
         for (const layout of layouts)
           el = h(layout.mod.default, null, el)
 
+        // @ts-ignore
+        const shell = mod?.Html || mod?.html || mod?.HTML
+        // @ts-ignore
+        if (shell) el = h(shell, allProps, el)
+
         html = render(el)
       } catch (e) {
         console.error(`  SSR render failed for ${filePath}: ${e}`)
         console.warn(e)
         html = ''
       }
-    // }
+    }
 
-    html = buildHtml(html, Object.keys(allProps).length ? allProps : undefined)
+    html = buildHtml(page, html, Object.keys(allProps).length ? allProps : undefined)
 
     const outFile = join(config.root, config.build.outDir, pathname +'.html')
     const outHTML = meta.minify ? minify.minify(Buffer.from(html), {}) : html
@@ -144,16 +154,22 @@ export async function renderPage(
         sizeJS: 0,
       })
     }
-
   }
+
+  if (sProps.length)
+    page.props = sProps.length < 2 ? sProps[0] : sProps
 }
 
 function buildHtml(
+  page: IRoute,
   html: string,
-  props?: StaticProps,
+  props: StaticProps = {},
 ): string {
+  if (page.useRaw) return html
   if (!(html.includes('<body') || html.includes('<html') || html.includes('<head')))
     html = wrapHtml(html)
+  else
+    html = html.replace('<body', '<body hidden')
 
   if (!DOCTYPE_RE.test(html))
     html = '<!DOCTYPE html>'+ html
@@ -164,7 +180,8 @@ function buildHtml(
 
   const prepend = assets.map(asset => {
     const href = getAsset(asset)
-    return href ? `<link href="${href}" rel=stylesheet>` : null
+    // return href ? `<link rel="stylesheet" href="${href}">` : null
+    return href ? `<link rel="preload" href="${href}" as="style" onload="this.rel='stylesheet'">` : null
   }).filter(Boolean).join('')
 
   if (html.includes('</head>')) {
@@ -175,9 +192,13 @@ function buildHtml(
     html = prepend + html
   }
 
-  const append = (props ? `<script>(self.$duto=self.$duto||{}).props=${JSJSON(props)}</script>` : '') + assets.map(file => {
+  if (page.useHtml) props.__raw = true
+
+  // const append = (Object.keys(props).length ? `<script>(self.$duto=self.$duto||{}).props=${JSJSON(props)}</script>` : '') + assets.map(file => {
+  const append = assets.map(file => {
     const src = getChunk(file)
-    return src ? `<script src="${src}" type=module></script>` : null
+    return src ? `<script type=module src="${src}"></script>` : null
+    // return src ? `<script type=module src="${src}"${(Object.keys(props).length ? ` props='${JSON.stringify(props)}'` : '')}></script>` : null
   }).filter(Boolean).join('')
 
   if (html.includes('</body>'))

package/src/pages/compiler/meta.ts

@@ -1,15 +1,9 @@
-// https://github.com/cloudflare/vinext/blob/main/packages/vinext/src/routing/utils.ts
-
-// https://github.com/cloudflare/vinext/blob/adfc2236cba5f7cde63f32f6fb35c0d892428376/packages/vinext/src/build/prerender.ts#L203
-// https://github.com/cloudflare/vinext/blob/main/packages/vinext/src/entries/pages-client-entry.ts
-// https://github.com/cloudflare/vinext/blob/main/packages/vinext/src/shims/ALS-ARCHITECTURE.md
-
 import { dirname, extname } from 'node:path'
 
 import { getEnv, JSJSON, newID } from 't0n'
 
 import { getAliases } from './aliases'
-import { DYNAMIC_RE, INTERNAL_RE, LAYOUT_RE, NF_NAMES, FILE_EXTENSIONS } from './constants'
+import { DYNAMIC_RE, INTERNAL_RE, LAYOUT_RE, NF_NAMES, FILE_EXTENSIONS, USE_RAW_RE, USE_HTML_RE } from './constants'
 import { scan } from '@/utils'
 
 import { USE_CLIENT_RE } from './constants'
@@ -23,13 +17,10 @@ import type {
   SummaryMetadata,
 } from './types'
 
-
-// TODO: https://github.com/cloudflare/vinext/blob/adfc2236cba5f7cde63f32f6fb35c0d892428376/packages/vinext/src/routing/file-matcher.ts#L90
 export async function getPages(meta: Metadata) {
   const nf = new Map<string, IRoute>()
   const layouts = new Map<string, IRoute>()
   const pages = new Map<string, IRoute>()
-  const spages = new Set<string>()
   const routes: IRoute[] = []
 
   for await (const [file, path, mod] of scan(meta.dir, FILE_EXTENSIONS)) {
@@ -59,7 +50,9 @@ export async function getPages(meta: Metadata) {
       layouts: [],
       hasGetStaticProps: typeof mod.getStaticProps === 'function',
       hasGetProps: typeof mod.getProps === 'function',
-      isClientOnly: USE_CLIENT_RE.test(content),
+      useClient: USE_CLIENT_RE.test(content),
+      useRaw: USE_RAW_RE.test(content),
+      useHtml: USE_HTML_RE.test(content),
     }
 
     if (LAYOUT_RE.test(path)) {
@@ -77,31 +70,13 @@ export async function getPages(meta: Metadata) {
     if (!page.isInternal)
       pages.set(file, page)
 
-    if (!page.isInternal)
+    if (!page.isInternal && !page.useRaw && !page.useHtml)
       routes.push(page)
-
-    if (!page.isInternal) {
-      if (page.isDynamic && page.hasGetStaticProps) {
-        try {
-          const _props = await page.mod.getStaticProps?.()
-          const props = Array.isArray(_props) ? _props : [_props]
-          for (const prop of props)
-            spages.add('/'+resolveStaticOutputPath(page, prop as any))
-
-        } catch(e) {
-          console.log('errro', e)
-        }
-      } else if (!page.isDynamic) {
-        spages.add(page.pattern)
-      }
-    }
-
   }
 
   meta.nf = nf
   meta.layouts = layouts
   meta.pages = pages
-  meta.spages = spages
   meta.routes = await sortRoutes(meta, routes)
 }
 
@@ -140,7 +115,6 @@ ${Array.from(meta.layouts.values()).map(l => `\nimport Layout${l.importName} fro
 
 export const views = [${meta.routes.map(r => `['${r.pattern}',${r.is404 ? 'Page'+ r.importName : `'${r.fullFilePath}'`},${Object.keys(r.params).length ? JSJSON(Object.entries(r.params).map(([_,v]) => v)) : '0'}${r.hasGetProps ? (r.is404 ? `,getProps${r.importName}` : `,1`) : (r.layouts.length ? ',0': '')}${r.layouts.length ? ',[' + Object.entries(r.layouts).map(([_,l]) => 'Layout'+l.importName) +']' : ''}]`).join(',')}]
 
-export const SRoutes = new Set(${JSJSON([...meta.spages])})
 `
 
   return meta
@@ -153,6 +127,8 @@ export const SRoutes = new Set(${JSJSON([...meta.spages])})
 
 
 // //////////////////////////////////////////////////////////////////////////////////////////
+// https://github.com/cloudflare/vinext/blob/main/packages/vinext/src/routing/utils.ts
+
 type RouteMeta = {
   staticSegments: number,
   dynamicSegments: number,