duto 0.261001.0 → 0.261012.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((Component[0] == '/' ? '' : '/')+ 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/ast.ts

@@ -1,6 +1,19 @@
 import { resolve } from 'node:path'
 import { resolveAlias } from './aliases'
 
+const IMPORT_RE = /(?:\/\/[^\n]*|\/\*[\s\S]*?\*\/)|import\s*(?:type\s*)?(?:[^'"]*?from\s*)?['"]([^'"]+)['"]/g
+export function getImports(str: string) {
+  const found: string[] = []
+  let match: RegExpExecArray | null
+  while ((match = IMPORT_RE.exec(str))) {
+    if (match[0].includes('import type') || !match[1]) continue
+
+    found.push(match[1])
+  }
+
+  return found
+}
+
 const resolveImportCache = new Map<string, string>()
 export const resolveImport = (lib: string, importer: string, aliases: Record<string, string>) => {
   if (resolveImportCache.has(lib))

package/src/pages/compiler/bun-plugin.ts

@@ -0,0 +1,245 @@
+import { existsSync, rmSync } from 'node:fs'
+import { cp, mkdir } from 'node:fs/promises'
+import { dirname, extname, join, relative } from 'node:path'
+
+import tailwind from 'bun-plugin-tailwind'
+import { JSJSON } from 't0n'
+
+import { EXT_RE } from './constants'
+import { getChunk, setAsset, setChunk, setEntry } from './assets'
+import { renderPage } from '.'
+import { getImports, removeExports } from './ast'
+import { getMetadata } from './meta'
+import { _pages, _root } from '@/utils'
+
+import type { BunPlugin, BuildArtifact } from 'bun'
+import type { Metadata } from './types'
+
+const VIRTUAL_ID = ':duto'
+const NAMESPACE = 'duto'
+const APP_ID = ':duto/client/app.tsx'
+
+export type DutoOptions = {
+  root: string
+  pagesDir: string
+  outDir: string
+  plugins: BunPlugin[]
+}
+
+export const config = (opts: DutoOptions): DutoOptions => {
+  opts.root ||= _root
+  opts.pagesDir ||= 'pages'
+  opts.outDir ||= 'dist'
+  opts.plugins = [...(opts.plugins || [])]
+  return opts
+}
+
+let metadata: Metadata
+export function meta() {
+  return metadata
+}
+
+const CSS_CANDIDATES = [
+  'style.css',
+  'styles.css',
+  'styles/index.css',
+  'style/index.css',
+  'tailwind.css',
+  'tailwindcss.css',
+  'styles/tailwind.css',
+  'styles/tailwindcss.css',
+]
+
+const REACT_ALIAS: Record<string, string> = {
+  'react': 'preact/compat',
+  'react-dom': 'preact/compat',
+  'react-dom/client': 'preact/compat/client',
+  'react-dom/test-utils': 'preact/test-utils',
+  'react/jsx-runtime': 'preact/jsx-runtime',
+  'react/jsx-dev-runtime': 'preact/jsx-dev-runtime',
+}
+
+const stripExt = (p: string) => p.slice(0, p.length - extname(p).length)
+
+export async function build(opts: DutoOptions) {
+  const conf = config(opts)
+  const outPath = join(conf.root, conf.outDir)
+
+  const PAGES_RE = new RegExp(`/${conf.pagesDir}/.*\\.(tsx?|jsx?)$`, 'i')
+  const stripTarget = new Set(['getStaticProps'])
+
+  metadata = await getMetadata(conf.root, conf.pagesDir)
+
+  const appEntry = join(_pages, 'client', 'app.tsx')
+  setEntry(APP_ID, relative(conf.root, appEntry))
+
+  const routes = metadata.routes.filter(r => !r.is404)
+  const entrypoints = [...routes.map(r => r.fullFilePath), appEntry]
+
+  const sources = new Map(entrypoints.map(e => [relative(conf.root, stripExt(e)), e]))
+
+  const prefix = metadata.minify ? '' : '[name].'
+
+  rmSync(outPath, { recursive: true, force: true })
+  await mkdir(outPath, { recursive: true })
+
+  const result = await Bun.build({
+    entrypoints,
+    root: conf.root,
+    target: 'browser',
+    format: 'esm',
+    splitting: true,
+    minify: metadata.minify,
+    sourcemap: 'none',
+    naming: {
+      entry: '[dir]/[name]-[hash6].[ext]', // used to map output to source
+      chunk: prefix + '[hash6].[ext]',
+      asset: prefix + '[hash6].[ext]',
+    },
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
+    plugins: [
+      ...(conf.plugins || []),
+      tailwind,
+      {
+        name: 'duto',
+        setup(build) {
+          build.onResolve({ filter: /^react(-dom)?(\/|$)/ }, args => {
+            const target = REACT_ALIAS[args.path]
+            if (!target) return
+            return { path: Bun.resolveSync(target, conf.root) }
+          })
+
+          build.onResolve({ filter: /^:root/ }, args => {
+            for (const f of CSS_CANDIDATES) {
+              const path = join(conf.root, f)
+              if (existsSync(path)) return { path }
+            }
+          })
+
+          build.onResolve({ filter: /^:duto/ }, args => {
+            const id = args.path
+
+            if (EXT_RE.test(id) && id.includes('/')) {
+              const path = join(_pages, id.replace(VIRTUAL_ID, ''))
+              return { path }
+            }
+
+            if (id.endsWith('/hmr') && metadata.hmr)
+              return { path: join(_pages, 'client', id.replace(VIRTUAL_ID, '') + '.ts') }
+
+            return { path: id, namespace: NAMESPACE }
+          })
+
+          build.onLoad({ filter: /.*/, namespace: NAMESPACE }, args => ({
+            contents: args.path.endsWith('/i18n') ? metadata.i18n.string : metadata.string,
+            loader: 'ts',
+          }))
+
+          build.onLoad({ filter: PAGES_RE }, async args => {
+            if (args.path.includes('node_modules')) return
+
+            const code = await Bun.file(args.path).text()
+            const stripped = removeExports(args.path, code, stripTarget)
+            if (!stripped || stripped === code) return
+
+            const ext = extname(args.path).slice(1) as 'ts' | 'tsx' | 'js' | 'jsx'
+            return { contents: stripped, loader: ext }
+          })
+        },
+      },
+    ],
+  })
+
+  if (!result.success)
+    throw new AggregateError(result.logs, 'duto: build failed')
+
+  const keyOf = (a: BuildArtifact, fileName: string) => {
+    let noExt = stripExt(fileName).replaceAll('_.._', '..')
+    if (a.hash) noExt = noExt.replace(new RegExp(`-${a.hash}$`), '')
+    return noExt
+  }
+
+  const dirs = new Set<string>()
+  for (const out of result.outputs) {
+    const fileName = out.path.replace(/^\.\//, '').replaceAll('_.._', '..')
+    const dest = metadata.minify ? fileName.split('/').at(-1)!.split('-').at(-1)! : fileName.replace('../../packages/duto/src/pages', '')
+    const filePath = join(outPath, dest)
+    const key = keyOf(out, fileName)
+    const owner = sources.get(key)
+
+    const fileDir = dirname(filePath)
+    if (fileDir !== outPath && !dirs.has(fileDir)) {
+      dirs.add(fileDir)
+      await mkdir(fileDir, { recursive: true })
+    }
+
+    let content = await out.text()
+    if (fileName.endsWith('.css')) {
+      if (owner === appEntry) content += 'i-i{display:contents}'
+      content = content.replace(/\/\*!\s*tailwindcss[^*]*\*\/\s*/g, '')
+
+      setAsset(relative(conf.root, owner ?? fileName), '/'+ dest)
+    } else if (out.kind === 'entry-point' && owner) {
+      setChunk(relative(conf.root, owner),'/'+  dest)
+      // o lookup original usa o caminho relativo ao root
+      // if (owner !== appEntry) setChunk(owner.replace(conf.root, ''), name)
+    }
+
+    const imports = getImports(content)
+    for (const path of imports) {
+      content = content.replaceAll(path, '/'+ path.split('/').at(-1))
+    }
+
+    await Bun.write(filePath, content)
+  }
+
+  for (const [_filePath, page] of metadata.pages)
+    await renderPage(metadata, conf, page)
+
+  rmSync(join(conf.root, 'tmp'), { recursive: true, force: true })
+
+  if (existsSync(join(conf.root, 'public')))
+    await cp(join(conf.root, 'public'), outPath, { recursive: true, force: true })
+
+  const entryPath = join(outPath, getChunk(APP_ID))
+  const entry = Bun.file(entryPath)
+
+  if (await entry.exists()) {
+    let entryContent = await entry.text()
+
+    for (const r of routes) {
+      const rPath = getChunk(r.fullFilePath.replace(conf.root, ''))
+
+      if (r.props) {
+        const rFilePath = join(outPath, rPath)
+        const rText = await Bun.file(rFilePath).text()
+        await Bun.write(rFilePath, `export const props=${JSJSON(r.props)};${rText}`)
+      }
+
+      entryContent = entryContent.replace(r.fullFilePath, rPath)
+    }
+
+    await Bun.write(entryPath, entryContent)
+  }
+
+  // i18n
+  for (const locale of metadata.i18n.locales) {
+    const intlPath = join(conf.root, 'i18n', locale + '.ts')
+    if (!existsSync(intlPath)) continue
+
+    const intlMod = await import(intlPath)
+    await Bun.write(
+      join(outPath, locale + '.js'),
+      `var a=${JSJSON({
+        routes: intlMod.routes ?? intlMod.default?.routes,
+        messages: intlMod.messages ?? intlMod.default?.messages,
+      })};export{a as default}`,
+    )
+  }
+
+  return result
+}
+
+export default config

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']