duto 0.260915.0 → 0.261011.0

package/src/pages/client/app.tsx

@@ -1,123 +1,225 @@
 // @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 {
-  fallbackLocale, locales, messages, routes, routeMap,
-// @ts-ignore
-} from ':duto/i18n'
-// import i18n from '../i18n/client'
-import i18n, { updatePickers } from '../i18n/client'
 
-i18n(fallbackLocale, locales, messages, routes, routeMap)
+import { setThemeAttr, getTheme } from './theme'
 
+setThemeAttr(getTheme())
+
+// @ts-ignore
+import { fallbackLocale, locales, routeMap } from ':duto/i18n'
+// import i18n 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)
+
+// Custom elements
 import EI18n from '../i18n/element'
-import Island from './island'
 import Link from './link'
 
-// import Router from './router'
+for (let [tag, el, opts] of [
+  ['i-i', EI18n],
+  ['i-l', Link, { extends: 'a' }],
+] as [string, new () => HTMLElement, ElementDefinitionOptions?][]) {
+  !customElements.get(tag) && customElements.define(tag, el, opts)
+}
 
 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) { }
+//   }
+// }
+
+// @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
 }
-import { renderRoute } from './router'
-// import { navigate } from 'wouter-preact/use-hash-location'
 
-for (let [tag, el, opts] of [
-  ['i-i', EI18n],
-  ['i-l', Link, { extends: 'a' }],
-  ['i-s', Island],
-] as [string, new () => HTMLElement, ElementDefinitionOptions?][]) {
-  if (!customElements.get(tag))
-    customElements.define(tag, el, opts)
+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
 }
-// Router.load(SRoutes).mount(views)
-
-// render(h(Router, null,
-//   h(() => {
-//     // const __ = useRoute(location.pathname)
-//     document.body.removeAttribute('hidden')
-//     const [, navigate] = useLocation()
-//     // console.log(navigate)
-//     // this.navigate = navigate
-
-//     // TODO: talvez registrar todos os valores pelo id do elemento em uma fila e atualizar nesse tick...
-//     // input, select etc registra um update val e aqui popula..
-//     updatePickers()
-//     return null
-//   }, null),
-//   h(Switch, null,
-//     h(Route, { path: SRoutes.has(location.pathname) ? location.pathname : '/' }),
-//     ...views.map(([path, Component, defs, getProps]) =>
-//     h(Route, {
-//       path,
-//       component: ({ params }: { params: Record<string, string> }) => {
-//         // Trigger async render (updates container imperatively to avoid
-//         // React/Preact hook rules issues with async components)
-
-//         renderRoute(document.body, Component, params, defs, getProps)
-//         // Return null — renderRoute will call render() directly on the container
-//         return null
-//       },
-//     })
-//   ),
-
-// ) ), document.body)
-render(<Router>
+
+
+// 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')
+
     const [location, navigate] = useLocation()
-    window.$duto.location = location
-    window.$duto.navigate = navigate
-    window.$duto.params = useParams()
+    self.$duto.location = location
+    self.$duto.navigate = (to,options) => {
+      to = new URL(to).pathname
+      navigate(to, options)
+    }
+    self.$duto.params = useParams()
+
     const [search, setSearch] = useSearchParams()
-    window.$duto.search = search
-    window.$duto.setSearch = setSearch
+    self.$duto.search = search
+    self.$duto.setSearch = setSearch
 
-    // TODO: talvez registrar todos os valores pelo id do elemento em uma fila e atualizar nesse tick...
-    // input, select etc registra um update val e aqui popula..
     updatePickers()
-
-    // React.useEffect(() => {
-    //   document.body.removeAttribute('hidden');
-    //   navigateRef.current = navigate;
-    //   updatePickers();
-    // }, [navigate]);
-    // return null;
+    self.dispatchEvent(new CustomEvent('d:load'))
   }, null)}
   <Switch>
-    <Route path={SRoutes.has(location.pathname) ? location.pathname : '/'} component={({ params }) => {
-      delete params[0]
-      window.$duto.route = { pattern: location.pathname, params, path: location.pathname }
-    }} />
-    {/* @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/aliases.ts

@@ -1,14 +1,8 @@
 import { join, resolve } from 'node:path'
-import { readFileSync } from 'node:fs'
 import { resolveExtension } from './file'
 
-export function getTsConfig(configPath = './tsconfig.json') {
-  const content = readFileSync(configPath, 'utf8')
-  return JSON.parse(content.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, ''))
-}
-
-export function getAliases(root: string) {
-  const tsconfig = getTsConfig(join(root, './tsconfig.json'))
+export async function getAliases(root: string) {
+  const tsconfig = await import(join(root, './tsconfig.json')) // @ts-ignore
   const compilerOptions = tsconfig.compilerOptions || {}
   const paths = Object.entries(compilerOptions.paths || {})
   const baseUrl = compilerOptions.baseUrl || '.'