duto 0.0.0 → 0.260808.0

package/src/cli/utils.ts

@@ -0,0 +1,146 @@
+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 '@/file'
+import config from '@/vite-plugin'
+import { _root } from '@/utils'
+import { match, match404 } from '@/routes'
+import type { Metadata, PluginOptions } from '@/types'
+import { getMetadata } from '@/meta'
+
+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)
+}
+
+// export const formatTime = (ms: number) => {
+//   if (ms < 1000) return `${ms}ms`
+//   return `${(ms / 1000).toFixed(2)}s`
+// }
+export const formatTime = (ms: number) => {
+  if (ms < 0.001) return `${(ms * 1_000_000).toFixed(2)}ns`
+  if (ms < 1) return `${(ms * 1000).toFixed(2)}µs`
+  if (ms < 1000) return `${ms.toFixed(2)}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`
+  return `${Math.floor(ms / 60000)}m ${((ms % 60000) / 1000).toFixed(1)}s`
+}
+
+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()) {
+          // route = path
+          res = new Response(file)
+        } else {
+          matched = match(path)
+
+          // console.log(matched)
+          route = matched?.name || match404(meta, path)
+
+          res = new Response(null, { status: 404 })
+
+          // for (const asset of path !== '/' && matched && matched.kind === 'exact' ? [
+          //   path,
+          //   join(path, 'index'),
+          // ] : ['index']) {
+          for (const asset of [
+            path,
+            join(path, 'index'),
+            'index',
+          ]) {
+            file = Bun.file(join(_root, dist, asset +'.html'))
+
+            if (await file.exists()) {
+              // if (route === '/' || !route) route = asset
+              res = new Response(file)
+              break
+            }
+          }
+        }
+
+        status = res.status
+        return res
+      } catch (err) {
+        status = 500
+        throw err
+      } finally {
+        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/client/app.tsx

@@ -0,0 +1,123 @@
+// @ts-ignore
+import ':duto/client/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 i18n from '../i18n/client'
+import i18n, { updatePickers } from '../i18n/client'
+
+i18n(fallbackLocale, locales, messages, routes, routeMap)
+
+import EI18n from '../i18n/element'
+import Island from './island'
+import Link from './link'
+
+// import Router from './router'
+
+import {
+  views, SRoutes,
+// @ts-ignore
+} from ':duto'
+// @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
+//       },
+//     })
+//   ),
+
+// ) ), document.body)
+render(<Router>
+  {h(() => {
+    document.body.removeAttribute('hidden')
+    const [location, navigate] = useLocation()
+    window.$duto.location = location
+    window.$duto.navigate = navigate
+    window.$duto.params = useParams()
+    const [search, setSearch] = useSearchParams()
+    window.$duto.search = search
+    window.$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> }) => {
+        // 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
+      }} />
+    ))}
+  </Switch>
+</Router>, document.body)

package/src/client/hmr.ts

@@ -0,0 +1,13 @@
+let hmr: WebSocket | null = null
+const url = `ws${location.protocol === 'https:' ? 'ws' : ''}://${location.host}`
+
+const connect = () => {
+  hmr = new WebSocket(url, 'duto')
+  hmr.onmessage = ({ data }) => data === 'reload' && location.reload()
+  hmr.onerror = () => hmr?.close()
+}
+const reconect = () => (!hmr || hmr?.readyState === WebSocket.CLOSED) && location.reload()
+connect()
+document.addEventListener('visibilitychange', () => document.visibilityState === 'visible' && reconect())
+window.addEventListener('focus', reconect)
+window.addEventListener('pageshow', reconect)

package/src/client/island.ts

@@ -0,0 +1,136 @@
+import hydrator from '../preact/client'
+
+const propTypes: { [k: string]: (value: any) => any } = {
+  0: (value) => reviveObject(value),
+  1: (value) => reviveArray(value),
+  2: (value) => new RegExp(value),
+  3: (value) => new Date(value),
+  4: (value) => new Map(reviveArray(value)),
+  5: (value) => new Set(reviveArray(value)),
+  6: (value) => BigInt(value),
+  7: (value) => new URL(value),
+  8: (value) => new Uint8Array(value),
+  9: (value) => new Uint16Array(value),
+  10: (value) => new Uint32Array(value),
+  11: (value) => Number.POSITIVE_INFINITY * value,
+}
+
+// Not using JSON.parse reviver because it's bottom-up but we want top-down
+const reviveTuple = (raw: any): any => {
+  const [type, value] = raw
+  return type in propTypes ? propTypes[type](value) : undefined
+}
+
+const reviveArray = (raw: any): any => (raw as Array<any>).map(reviveTuple)
+const reviveObject = (raw: any): any => {
+  if (typeof raw !== 'object' || raw === null) return raw
+  return Object.fromEntries(Object.entries(raw).map(([key, value]) => [key, reviveTuple(value)]))
+}
+
+// 🌊🏝🌴
+export default class Island extends HTMLElement {
+  public Component: any
+  private _hydrated = false
+  static observedAttributes = ['props']
+
+  connectedCallback() {
+    if (!this.hasAttribute('await-children') || document.readyState === 'interactive' || document.readyState === 'complete') {
+      this.build()
+      return
+    }
+
+    setTimeout(() => {
+      this.build()
+    }, 0)
+  }
+
+  disconnectedCallback() {
+  	// document.removeEventListener('d:after-swap', this.unmount);
+  	// document.addEventListener('d:after-swap', this.unmount, { once: true });
+
+    this.unmount()
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (this.Component) {
+      // console.log(`[AttributeChanged] O atributo "${name}" mudou de "${oldValue}" para "${newValue}".`, this)
+      this._hydrated = false
+      this.hydrate()
+    }
+  }
+
+  async build() {
+    const componentModule = await import(this.getAttribute('url')!)
+    const componentExport = this.getAttribute('export') || 'default'
+    if (!componentExport.includes('.')) {
+      this.Component = componentModule[componentExport]
+    } else {
+      this.Component = componentModule
+      for (const part of componentExport.split('.'))
+        this.Component = this.Component[part]
+    }
+
+    await this.hydrate()
+  }
+
+  // hydrate = async () => {
+   async hydrate() {
+    // Make sure the island is mounted on the DOM before hydrating. It could be unmounted
+    // when the parent island hydrates and re-creates this island.
+    if (!this.isConnected || this._hydrated) return
+
+    // Wait for parent island to hydrate first so we hydrate top-down. The `ssr` attribute
+    // represents that it has not completed hydration yet.
+    const parent = this.parentElement?.closest('i-s')
+    if (parent) {
+      parent.addEventListener('d:hydrate', this.hydrate, { once: true })
+      return
+    }
+
+    const slotted = this.querySelectorAll('d-b')
+    const slots: Record<string, string> = {};
+    // Always check to see if there are templates.
+    // This happens if slots were passed but the client component did not render them
+    const templates = this.querySelectorAll('template[d-template]')
+    for (const template of templates) {
+      const closest = template.closest(this.tagName)
+      if (!closest?.isSameNode(this)) continue
+      slots[template.getAttribute('d-template') || 'default'] = template.innerHTML
+      template.remove()
+    }
+    for (const slot of slotted) {
+      const closest = slot.closest(this.tagName)
+      if (!closest?.isSameNode(this)) continue
+      slots[slot.getAttribute('name') || 'default'] = slot.innerHTML
+    }
+
+    let props: Record<string, unknown>
+
+    try {
+      props = this.hasAttribute('props') ? reviveObject(JSON.parse(this.getAttribute('props')!)) : {}
+    } catch (e) {
+      let componentName: string = this.getAttribute('url') || '<unknown>'
+      const componentExport = this.getAttribute('export')
+
+      if (componentExport)
+        componentName += ` (export ${componentExport})`
+
+      console.error(
+        `[hydrate] Error parsing props for component ${componentName}`,
+        this.getAttribute('props'),
+        e,
+      )
+      throw e
+    }
+
+    // @ts-ignore
+    await hydrator(this, this.Component, props, slots)
+
+    this._hydrated = true
+    this.dispatchEvent(new CustomEvent('d:hydrate'))
+  }
+
+  unmount() {
+    if (!this.isConnected) this.dispatchEvent(new CustomEvent('d:unmount'))
+  }
+}

package/src/client/link.ts

@@ -0,0 +1,70 @@
+export default class Link extends HTMLAnchorElement {
+  static observedAttributes = [
+    'href',
+    'target',
+    'download',
+    'rel',
+    'hreflang',
+    'referrerpolicy',
+    'ping',
+    'type',
+  ]
+
+  constructor() {
+    super()
+
+    this.addEventListener('click', this.#onClick)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.#onClick)
+  }
+
+  #onClick = (e: MouseEvent) => {
+    // Respeita comportamento padrão
+    if (
+      e.defaultPrevented
+      || this.target === '_blank'
+      || 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 }))
+
+    // Exemplo: interceptar navegação SPA
+    // event.preventDefault()
+    // router.push(this.href)
+  }
+
+  // Proxy opcional para facilitar typings
+  get url() {
+    return new URL(this.href)
+  }
+}
+
+
+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 }))
+//   })
+// }