duto 0.260906.0 → 0.261001.0

package/src/pages/cli/utils.ts

@@ -0,0 +1,126 @@
+import { IMPORT, Datte } from 't0n'
+import { join } from 'pathe'
+import { gray, green, yellow, red, cyan } from 't0n/color'
+import type { UserConfig } from 'vite'
+
+import { resolveExtension } from '#/compiler/file'
+import config from '#/compiler/vite-plugin'
+import { _root } from '@/utils'
+import { match, match404 } from '#/compiler/routes'
+import type { Metadata, PluginOptions } from '#/compiler/types'
+import { EXTENSIONS_LIST } from '#/compiler/constants'
+
+export async function getConfig(name = 'config'): Promise<UserConfig & PluginOptions> {
+  let opts = {} as UserConfig
+  const file = resolveExtension(name)
+  if (file) opts = await IMPORT(join(_root, file), 'default')
+  return config(opts)
+}
+
+const statusColorMap = new Map([
+  [5, red],
+  [4, yellow],
+  [3, cyan],
+])
+
+const getStatusColor = (status: number) => (statusColorMap.get(Math.floor(status / 100)) ?? green)(String(status))
+
+const clients = new Set<Bun.ServerWebSocket<void>>()
+export function reload() {
+  for (const ws of clients) {
+    if (ws.readyState === WebSocket.OPEN)
+      ws.send('reload')
+  }
+}
+
+export function preview(
+  meta: Metadata,
+  host: string = '0.0.0.0',
+  port: number = 4173
+) {
+  return Bun.serve({
+    hostname: host,
+    port,
+
+    websocket: {
+      open(ws) {
+        clients.add(ws)
+      },
+      close(ws) {
+        clients.delete(ws)
+      },
+      message() {},
+    },
+    async fetch(req, server) {
+      const start = performance.now()
+
+      const url = new URL(req.url)
+      const path = decodeURIComponent(url.pathname)
+      const headers = {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET',
+        'Access-Control-Allow-Headers': '*',
+      }
+
+      if (req.method === 'OPTIONS')
+        return new Response(null, { status: 204, headers })
+
+      if (req.headers.get('upgrade') === 'websocket'
+          && req.headers.get('sec-websocket-protocol') === 'duto') {
+        server.upgrade(req)
+        return
+      }
+
+      let status = 500
+      let route: string | undefined
+      let matched: Bun.MatchedRoute | null | undefined
+
+      try {
+        let res: Response
+        const dist = 'dist' // TODO: get from configs
+
+        let file = Bun.file(join(_root, dist, path))
+
+        if (await file.exists()) {
+          res = new Response(file)
+        } else {
+          matched = match(path)
+          route = matched?.name || match404(meta, path)
+          res = new Response(null, { status: 404 })
+
+          for (const asset of [
+            path,
+            join(path, 'index'),
+            'index',
+          ]) {
+            file = Bun.file(join(_root, dist, asset +'.html'))
+
+            if (await file.exists()) {
+              res = new Response(file)
+              break
+            }
+          }
+        }
+
+        status = res.status
+        return res
+      } catch (err) {
+        status = 500
+        throw err
+      } finally {
+        if (EXTENSIONS_LIST.has(path.split('.').pop()!.toLowerCase())) {
+        } else if (route || matched) {
+          const elapsed = `${Math.max(1, Math.ceil(performance.now() - start))}ms`
+
+          console.log([
+            gray(Datte.dateTime()),
+            getStatusColor(status),
+            path,
+            route && route !== path ? gray(route) : '',
+            gray(elapsed),
+          ].filter(Boolean).join(' '))
+        }
+      }
+    },
+  })
+}

package/src/pages/client/app.tsx

@@ -1,24 +1,27 @@
 // @ts-ignore
-import ':duto/client/hmr'
+import ':duto/hmr'
 
 import { render, hydrate, h } from 'preact'
 import { Switch, Route, Router } from 'wouter-preact'
 import { useLocation, useParams, useSearchParams, } from 'wouter-preact'
 
-import {
-  fallbackLocale, locales, messages, routes, routeMap,
 // @ts-ignore
-} from ':duto/i18n'
+import { fallbackLocale, locales, routeMap } from ':duto/i18n'
 // import i18n from '../i18n/client'
 import i18n, { updatePickers } from '../i18n/client'
 
-i18n(fallbackLocale, locales, messages, routes, routeMap)
+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,
@@ -27,84 +30,34 @@ import {
 // @ts-ignore
 import ':root/styles'
 
-window.$duto = {
-  sroutes: SRoutes,
-  location: '/',
-  navigate: {},
-  params: {},
-  search: {},
-  setSearch: {},
-}
-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)
-}
-// 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
-//       },
-//     })
-//   ),
+// window.$duto = {
+//   sroutes: SRoutes,
+//   location: '/',
+//   navigate: {},
+//   params: {},
+//   search: {},
+//   setSearch: {},
+// }
+import { renderRoute } from './router'
 
-// ) ), document.body)
 render(<Router>
   {h(() => {
     document.body.removeAttribute('hidden')
+    self.$duto = self.$duto || {}
+    self.$duto.sroutes = SRoutes
     const [location, navigate] = useLocation()
-    window.$duto.location = location
-    window.$duto.navigate = navigate
-    window.$duto.params = useParams()
+    self.$duto.location = location
+    self.$duto.navigate = navigate
+    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;
   }, 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> }) => {

package/src/pages/client/router.ts

@@ -1,130 +1,5 @@
 import { render, h } from 'preact'
-// import { render, hydrate, h } from 'preact'
-// import { useLocation, Switch, Route, Router } from 'wouter-preact'
-// import { matchRoute } from 'wouter-preact'
-// import type { Routes, IRoute } from '../types'
-import type { Page, GetProps, IRoute } from '@/types'
-// import { updatePickers } from '../i18n/client'
-
-// type Route = [string, Page, IRoute['params'], GetProps]
-// type Route = [string, Page] | [string, Page, IRoute['params']] | [string, Page, IRoute['params'], GetProps]
-// type Routes = Route[]
-
-
-// type WRouter = {
-//   navigate: ((href: string) => void) | null,
-//   routes: Set<string>,
-//   load: (routes: Set<string>) => WRouter,
-//   has: (path: string) => boolean,
-//   // loaded: () => void,
-//   mount: (routes: Routes) => void,
-//   // App({ container }: {
-//   //   container: HTMLElement;
-//   // }): VNode<Attributes & RouterOptions & {
-//   //     children: ComponentChild;
-//   // }>,
-// }
-
-// export default {
-//   navigate: null,
-//   routes: new Set<string>(),
-//   load(routes: Set<string>) {
-//     this.routes = routes
-//     return this
-//   },
-//   has(path: string) {
-//     return this.routes.has(path)
-//   },
-//   // loaded() {
-//   //   document.body.removeAttribute('hidden')
-//   //   const [, navigate] = useLocation()
-//   //   this.navigate = navigate
-
-//   // },
-//   mount(routes: Routes) {
-//     // ( // If body it was server-rendered — hydrate instead of render
-//     //   document.body.childElementCount > 0
-//     //   ? hydrate
-//     //   : render // @ts-ignore
-//     // )(this.App(routes), document.body)
-
-//     // @ts-ignore
-//     render(this.App(routes), document.body)
-//   },
-
-//   App(routes: Routes, container: HTMLElement = document.body) {
-//     return h(Router, null,
-//       h(() => {
-//         // const __ = useRoute(location.pathname)
-//         // console.log(__)
-//         document.body.removeAttribute('hidden')
-//         const [, navigate] = useLocation()
-//         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,
-
-
-//       // ...[
-//       //   ['/', 'index.tsx'],
-//       //   ['/about', 'about.tsx'],
-//       //   ['/blog/:slug', 'blog/[slug].tsx'],
-//       //   ['/blog/:slug?', 'blog/[[slug]].tsx'],
-//       //   ['/shop/*', 'shop/[...slug].tsx'],
-//       //   ['/shop/*?', 'shop/[[...slug]].tsx'],
-//       //   ['/:authorId/:postId', '[authorId]/[postId].tsx'],
-//       //   ['/*', '404.tsx'],
-//       //   ['/*', 'not-found.tsx'],
-//       //   ['/users/*', 'users/not-found.tsx'],
-//       // ].map(([path, name]) =>
-//       //   h(Route, {
-//       //     key: path,
-//       //     path,
-//       //     component: ({ params }: { params: Record<string, string> }) => {
-
-//       //       renderRoute(container, () => h("div", { class: "p-8" }, h("h1",  { class: "text-white text-xl relative top-2", style: {zIndex:'999', position:'relative', padding: '12px'} }, name), dd(params)), params)
-//       //       // renderRoute(container, () => h("pre", { class: "p-8" }, h("h1", null, JSON.stringify(params))), params)
-//       //       return null
-//       //     },
-//       //   })
-//       // ),
-
-
-//       h(Route, {
-//         path: this.has(location.pathname) ? location.pathname : '/',
-//         component: () => null,
-//       }),
-
-//       ...routes.map(([path, Component, defs, getProps]) =>
-//         h(Route, {
-//           // key: path,
-//           path,
-//           component: ({ params }: { params: Record<string, string> }) => {
-//             // Trigger async render (updates container imperatively to avoid
-//             // React/Preact hook rules issues with async components)
-
-//             renderRoute(container, Component, params, defs, getProps)
-//             // Return null — renderRoute will call render() directly on the container
-//             return null
-//           },
-//         })
-//       ),
-
-//     ) )
-
-
-//   }
-// } as WRouter
-
-/** Captures wouter's navigate() so the duto:navigate event can call it */
-// let _navigate: ((href: string) => void) | null = null
-
-// ─── Page renderer ────────────────────────────────────────────────────────────
+import type { Page, GetProps, IRoute } from '#/compiler/types'
 
 function normalizeParams(
   raw: Record<string, string>,
@@ -148,22 +23,26 @@ export async function renderRoute(
   container: HTMLElement,
   Component: Page,
   rawParams: Record<string, string>,
-  paramDefs?: IRoute['params'],
-  getProps?: GetProps,
+  paramDefs?: IRoute['params'] | 0,
+  getProps?: GetProps | 0 | 1,
   layouts?: Page[]
 ) {
   while (document.body.firstChild)
     document.body.removeChild(document.body.firstChild)
 
-  // const params = normalizeParams(rawParams, paramDefs)
-  // const mod    = await route._import()
-
-  // let props: Record<string, unknown> = { ...params }
-
-
   let props: Record<string, unknown> = paramDefs ? normalizeParams(rawParams, paramDefs) : rawParams
 
-  if (typeof getProps === 'function') {
+  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 }
@@ -172,6 +51,7 @@ export async function renderRoute(
     }
   }
 
+
   let el = h(Component, props as any)
 
   const _layouts = layouts ? (Array.isArray(layouts) ? layouts : [layouts]) : []
@@ -179,151 +59,5 @@ export async function renderRoute(
     el = h(layout, null, el)
 
   render(el, container)
-
- // TODO: melhorar tipagem do props
-  // render(h(Component, props as any), container)
   // render(h(Component, props as any), container)
 }
-
-
-
-
-
-
-
-
-// TODO: remover..
-// function dd(objeto) {
-//   // Transforma o objeto em string JSON formatada com 2 espaços de recuo
-//   const json = JSON.stringify(objeto, null, 2);
-
-//   const renderizarJsonColorido = (textoJson) => {
-//     // Regex para capturar propriedades, strings, números, booleanos, nulls E quebras de linha/espaços explicitamente
-//     const regex = /(\n|\r\n|\s+|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
-//     const partes = [];
-//     let ultimoIndex = 0;
-
-//     textoJson.replace(regex, (match, p1, offset) => {
-//       // Adiciona qualquer texto residual intermediário
-//       if (offset > ultimoIndex) {
-//         partes.push(textoJson.substring(ultimoIndex, offset));
-//       }
-
-//       // Se capturar uma quebra de linha, insere a tag <br /> correspondente
-//       if (match.trim() === '' && (match.includes('\n') || match.includes('\r'))) {
-//         partes.push(h('br', null));
-
-//         // Se após a quebra de linha houver espaços de indentação, renderiza como spans de espaço
-//         const espacos = match.replace(/[\n\r]/g, '');
-//         if (espacos.length > 0) {
-//           partes.push(h('span', { style: { whiteSpace: 'pre' } }, espacos));
-//         }
-//       }
-//       // Se for apenas espaços de recuo (sem quebra de linha)
-//       else if (match.trim() === '') {
-//         partes.push(h('span', { style: { whiteSpace: 'pre' } }, match));
-//       }
-//       // Se for um token de dado, aplica a colorização do Laravel
-//       else {
-//         let estilo = { color: '#bd93f9' }; // Roxo para números
-
-//         if (/^"/.test(match)) {
-//           if (/:$/.test(match)) {
-//             estilo = { color: '#ff79c6', fontWeight: 'bold' }; // Rosa para chaves (keys)
-//           } else {
-//             estilo = { color: '#f1fa8c' }; // Amarelo para strings
-//           }
-//         } else if (/true|false/.test(match)) {
-//           estilo = { color: '#8be9fd' }; // Ciano para booleanos
-//         } else if (/null/.test(match)) {
-//           estilo = { color: '#6272a4', fontStyle: 'italic' }; // Cinza para nulos
-//         }
-
-//         partes.push(h('span', { style: estilo }, match));
-//       }
-
-//       ultimoIndex = offset + match.length;
-//     });
-
-//     if (ultimoIndex < textoJson.length) {
-//       partes.push(textoJson.substring(ultimoIndex));
-//     }
-
-//     return partes;
-//   };
-
-//   // Estilo do container escuro em tela cheia
-//   const estiloContainer = {
-//     background: '#1e1e24', // Grafite escuro elegante
-//     color: '#f8f8f2',
-//     padding: '30px',
-//     fontFamily: '"Fira Code", "Courier New", Courier, monospace',
-//     fontSize: '14px',
-//     lineHeight: '1.6',
-//     overflow: 'auto',
-//     position: 'fixed',
-//     top: 0,
-//     left: 0,
-//     width: '100vw',
-//     height: '100vh',
-//     zIndex: 99,
-//     textAlign: 'left',
-//     boxSizing: 'border-box'
-//   };
-
-//   // Retorna a estrutura h() contendo o bloco quebrado e indentado linha por linha
-//   return h('div', { style: estiloContainer }, renderizarJsonColorido(json));
-// }
-
-
-
-
-
-
-
-
-
-
-// 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
-// }
-
-// async function renderRoute(
-//   route: IRoute,
-//   rawParams: Record<string, string>,
-//   container: HTMLElement
-// ) {
-//   const params = normalizeParams(rawParams, route.params)
-//   const mod    = await route._import()
-
-//   let props: Record<string, unknown> = { ...params }
-
-//   if (typeof mod.getProps === 'function') {
-//     try {
-//       const fetched = await Promise.resolve(mod.getProps(params))
-//       props = { ...fetched, ...params }
-//     } catch (e) {
-//       console.error('[ssg] getProps failed:', e)
-//     }
-//   } else {
-//     // No getProps → re-use SSG props (already in the DOM, nothing to do on first load)
-//     // props = { ...(window.__SSG_PROPS__ ?? {}), ...params }
-//   }
-
-//   render(h(mod.default, props as any), container)
-// }
-

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