duto 0.261001.0 → 0.261012.0

package/src/pages/compiler/index.ts

@@ -7,32 +7,32 @@ 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'
 import type { IRoute, Metadata, RouteParams, StaticProps, SummaryMetadata } from './types'
+import type { DutoOptions } from './bun-plugin'
 
 
 const brCompress = promisify(brotliCompress)
 
 export async function renderPage(
   meta: Metadata,
-  config: ResolvedConfig,
+  config: DutoOptions,
   page: IRoute
  ) {
   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,44 +70,54 @@ 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 outFile = join(config.root, config.outDir, pathname +'.html')
     const outHTML = meta.minify ? minify.minify(Buffer.from(html), {}) : html
     await mkdir(dirname(outFile), {recursive: true})
     await Bun.write(outFile, outHTML)
@@ -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,

package/src/pages/compiler/types.ts

@@ -1,10 +1,8 @@
-// import type { ComponentType, FunctionComponent, VNode } from 'preact'
-import type { Platform } from '$/cli/types'
 import type { FunctionComponent, VNode } from 'preact'
+import type { Platform } from '$/cli/types'
 
 export type PluginOptions = {
   root?: string,
-  // Directory to scan for pages, relative to Vite root. Default: "./pages"
   pagesDir?: string,
 }
 
@@ -43,8 +41,7 @@ export type Metadata = {
   aliases: Record<string, string>,
   layouts: Map<string, IRoute>, // all layouts
   nf: Map<string, IRoute>, // all 404
-  pages: Map<string, IRoute>, // all
-  spages: Set<string>, // ssg pages
+  pages: Map<string, IRoute>, // all pages
   routes: Routes, // client-side
   // routes: Map<string, IRoute>, // client-side
   i18n: I18nMetadata,
@@ -64,15 +61,17 @@ export type PageModule<P = {}> = {
  * getStaticProps — build-only.
  * For static pages (no dynamic segments): returns a single props object.
  * For dynamic pages: returns an array of { [routeParam]: value, ...props }
- *
  */
 export type GetStaticProps =
   | (() => StaticProps | Promise<StaticProps>)
   | (() => StaticProps[] | Promise<StaticProps[]>)
 export type StaticProps = Record<string, unknown>
 
-export type GetProps = (params: RouteParams) => StaticProps | Promise<StaticProps>
 export type RouteParams = Record<string, string | string[] | undefined>
+export type GetProps = (params: RouteParams) => StaticProps | Promise<StaticProps>
+export type Params = Record<string, RouteParams>
+
+export type View = [string, Page, Params | 0, GetProps | 0 | 1 | null, Page[]]
 
 export type Routes = IRoute[]
 export type IRoute = {
@@ -80,34 +79,25 @@ export type IRoute = {
   mod: PageModule,
   hasGetStaticProps: boolean,
   hasGetProps: boolean,
-  isClientOnly: boolean,
+  useClient: boolean,
+  useRaw: boolean,
+  useHtml: boolean,
   layouts: IRoute[],
   importName: string,
 
+  props?: StaticProps,
+
   ////////////////////////////
 
   fileExt: string,
   fileName: string,
-  /** Original file path relative to pages dir, e.g. `blog/[slug].tsx` */
-  filePath: string,
+  filePath: string, // Original file path relative to pages dir, e.g. `blog/[slug].tsx`
   fullFilePath: string,
-  /** Wouter-compatible pattern, e.g. `/blog/:slug` */
-  pattern: string,
-  /** Params extracted from the path segments */
-  params: Record<string, RouteParam>,
-  // params: RouteParam[],
-	/**
-	 * Similar to the "params" field, but with more associated metadata. For example, for `/site/[blog]/[...slug].tsx`, the segments are:
-	 *
-	 * 1. `{ content: 'site', dynamic: false, spread: false }`
-	 * 2. `{ content: 'blog', dynamic: true, spread: false }`
-	 * 3. `{ content: '...slug', dynamic: true, spread: true }`
-	 */
-	// segments: RoutePart[][]; // alternativa ao "params"
+  pattern: string, // Wouter-compatible pattern, e.g. `/blog/:slug`
+  params: Params,
   is404: boolean,
-  /** True if this route has any dynamic segments */
+
   isDynamic: boolean,
-  /** True if this route are internal */
   isInternal: boolean,
 }
 

package/src/pages/components/link.tsx

@@ -1,4 +1,4 @@
-import { Link as WouterLink, useLocation } from 'wouter-preact'
+import { useLocation } from 'wouter-preact'
 import type { LinkProps } from 'wouter-preact'
 
 const isExternalUrl = (href?: string) =>
@@ -12,27 +12,19 @@ export const Link = ({
   href = to,
   ...rest
 }: LinkProps) => {
-  const isExternal = isExternalUrl(rest.href = href)
-  const isSRoute = window?.$duto?.sroutes?.has(href)
-
-  if (isExternal) {
+  if (isExternalUrl(rest.href = href)) {
     rest.target = '_blank'
     rest.rel = 'noopener noreferrer'
+  } else {
+    rest.is = 'i-l'
   }
 
-  if (!href || isExternal || isSRoute) {
-    const [pathname] = useLocation()
-    const baseClass = typeof rest.class === 'string' || !rest?.class
-      ? (rest.class || '') as string
-      : ''
-    rest.class = baseClass + (pathname === href ? ' active' : '')
-
-    !href && (delete rest.href)
-    return <a is='i-l' {...rest} />
-  }
-
-  if (typeof rest.class === 'string' || !rest?.class)
-    rest.className = a => (rest.class || '') + (a ? ' active' : '')
+  const [pathname] = useLocation()
+  const baseClass = typeof rest.class === 'string' || !rest?.class
+    ? (rest.class || '') as string
+    : ''
+  rest.class = baseClass + (pathname === href ? ' active' : '')
 
-  return <WouterLink is='i-l' {...rest} />
+  !href && (delete rest.href)
+  return <a {...rest} />
 }

package/src/pages/i18n/client.ts

@@ -1,6 +1,5 @@
 import { h, type JSX } from 'preact'
 import { local } from '#/client/storage'
-import { navigate } from '..'
 
 const accepted = (lang: string | undefined, locales: string[] = [], fallback: string) => lang && locales.includes(lang) ? lang : fallback
 
@@ -41,7 +40,7 @@ const getAccepted = (lang: string, locales: string[] = [], defaultLocale = '') =
   return defaultLocale
 }
 
-const detect = (locales: string[], defaultLocale: string) => {
+export const detect = (locales: string[], defaultLocale: string) => {
   if (!defaultLocale) defaultLocale = 'en'
   if (typeof window === 'undefined') return defaultLocale
 
@@ -125,7 +124,7 @@ export const cached = () => local.get('lang') as string || ''
 export const updateWidth = (el: HTMLSelectElement) => {
   if (el) {
     const option = el.querySelector(`option[value="${el.value}"]`) as HTMLOptionElement
-    const length = option.textContent.split(' ')[0]?.length || 0
+    const length = option?.textContent.split(' ')[0]?.length || 0
     el.style.width = (length * 15.7)+ 'px'
   }
 }
@@ -153,7 +152,7 @@ export const r = (key: string, lang?: string) => {
   const path = '/'+ lang + (key ? '/'+ route(key, lang) : '')
 
   if (!location.pathname.endsWith(path))
-    navigate(path)
+    self.$duto?.navigate(path)
 
   // return '/' + lang + '/' + (key in _routes[lang] ? _routes[lang][key] : key)
 }

package/src/pages/index.ts

@@ -1,27 +1,10 @@
 export {
-  Redirect,
-  useLocation, useParams, useSearch, useSearchParams,
-  matchRoute,
-} from 'wouter-preact'
-
-export {
-  t, r, d,
-  getLocale, setLocale,
-  isPrefixed,
+  route, r, redirect,
+  t, tl, d,
+  getLocale, setLocale, isPrefixed,
 } from './i18n/client'
 
 export { local } from './client/storage'
 
-export const navigate = <S = any>(
-  to: string | URL,
-  options?: { replace?: boolean; state?: S; transition?: boolean }
-) => {
-  if (window?.$duto?.sroutes?.has(to)) {
-    location.pathname = to
-    return
-  }
-
-  window?.$duto?.navigate || useLocation()[1](to, options)
-}
-
+export * from './client/theme'
 export { Link } from './components/link'

package/src/server/app.ts

@@ -10,6 +10,7 @@ import { isDev } from './utils/environment'
 import { getVerb } from './utils'
 import { registerMiddleware, resolveHandle, resolveMw } from './handle'
 
+const NFHandler = () => response.notFound()
 async function EHandler(e: Error | HTTPResponseError) {
   console.error(e)
 
@@ -74,7 +75,7 @@ export default function createApp<E extends Env>(options?: ServerOptions<E>) {
 
   // @ts-ignore
   app.onError(options?.onError || EHandler)
-  app.notFound(options?.notFound || response.notFound)
+  app.notFound(options?.notFound || NFHandler)
 
   if (options?.init) options.init(app)
 

package/src/pages/client/router.ts

@@ -1,63 +0,0 @@
-import { render, h } from 'preact'
-import type { Page, GetProps, IRoute } from '#/compiler/types'
-
-function normalizeParams(
-  raw: Record<string, string>,
-  paramDefs: IRoute['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
-}
-
-export async function renderRoute(
-  container: HTMLElement,
-  Component: Page,
-  rawParams: Record<string, string>,
-  paramDefs?: IRoute['params'] | 0,
-  getProps?: GetProps | 0 | 1,
-  layouts?: Page[]
-) {
-  while (document.body.firstChild)
-    document.body.removeChild(document.body.firstChild)
-
-  let props: Record<string, unknown> = paramDefs ? normalizeParams(rawParams, paramDefs) : rawParams
-
-  if (typeof Component === 'string') {
-    const mod = await import(Component)
-    Component = mod.default
-    getProps = getProps === 1 ? mod.getProps : 0
-  }
-
-  // @ts-ignore
-  const sProps = self.$duto?.props
-  if (typeof sProps === 'object' && sProps !== null) {
-    Object.assign(props, sProps)
-  } else if (typeof getProps === 'function') {
-    try { // TODO: melhorar tipagem do props
-      const fetched = await Promise.resolve(getProps(props as Record<string, string | string[] | undefined>))
-      props = { ...fetched, ...props }
-    } catch (e) {
-      console.error('[ssg] getProps failed:', e)
-    }
-  }
-
-
-  let el = h(Component, props as any)
-
-  const _layouts = layouts ? (Array.isArray(layouts) ? layouts : [layouts]) : []
-  for (const layout of _layouts)
-    el = h(layout, null, el)
-
-  render(el, container)
-  // render(h(Component, props as any), container)
-}