duto 0.0.0 → 0.260906.0

package/src/pages/compiler/constants.ts

@@ -0,0 +1,24 @@
+export const PAGE_RE = /\/pages\/.*\.(tsx?|jsx?)$/i
+export const EXT_RE = /\.(tsx?|jsx?)$/i
+export const DYNAMIC_RE = /\[/
+export const INTERNAL_RE = /(?:.*\/)?_?(layout|error|template|loading)\.(tsx?|jsx?)$/i
+export const LAYOUT_RE = /(?:.*\/)?_?(layout)\.(tsx?|jsx?)$/i
+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 IMPORT_RE = /import\s+(?:type\s+)?(?:[\w*\s{},]+from\s+)?['"]([^'"]+)['"]/g
+export const IMPORT_RE = /(?:\/\/.*|\/\*[\s\S]*?\*\/)|import\s+(?:type\s+)?(?:[\w*\s{},]+from\s+)?['"]([^'"]+)['"]/g
+export const BROWSER_ONLY = [
+  'preact', '@preact/signals',
+  'react', 'react-dom',
+  'wouter', 'wouter-preact',
+  'framer-motion', 'gsap', 'three',
+]
+export const BROWSER_ONLY_SET = new Set(BROWSER_ONLY)
+
+export const LAYOUT_NAMES = ['_layout', 'layout']
+export const NF_NAMES = ['404', 'not-found']
+export const FILE_EXTENSIONS = ['tsx', 'ts', 'jsx', 'js'] as const
+export const CONFIG_EXTENSIONS = ['json', 'toml', 'yaml'] as const
+export const EXTENSIONS = [...FILE_EXTENSIONS, ...CONFIG_EXTENSIONS] as const

package/src/pages/compiler/file.ts

@@ -0,0 +1,60 @@
+import { extname, join } from 'node:path'
+import { existsSync } from 'node:fs'
+import { EXTENSIONS, FILE_EXTENSIONS } from './constants'
+import type { Metadata } from '@/types'
+
+const extensionCache = new Map<string, string | null>()
+export function resolveExtension(filePath: string): string | null {
+  const cacheKey = extname(filePath)
+    ? filePath.slice(0, -extname(filePath).length)
+    : filePath
+
+  const cached = extensionCache.get(cacheKey)
+  if (cached !== undefined) return cached
+
+  const result = resolveExtensionUncached(filePath)
+  extensionCache.set(cacheKey, result)
+  return result
+}
+
+export function resolveExtensionUncached(filePath: string): string | null {
+  if (extname(filePath))
+    return existsSync(filePath) ? filePath : null
+
+  for (const ext of EXTENSIONS) {
+    const direct = `${filePath}.${ext}`
+    if (existsSync(direct)) return direct
+
+    const index = join(filePath, `index.${ext}`)
+    if (existsSync(index)) return index
+  }
+
+  return null
+}
+
+export function findFileByName(meta: Metadata, dir: string, baseName: string): string | null {
+  for (const extension of FILE_EXTENSIONS) {
+    const candidate = join(meta.root, 'pages', dir, `_${baseName}.${extension}`)
+    if (existsSync(candidate))
+      return candidate
+  }
+
+  return null
+}
+
+// export function fileWhitoutExt(filePath: string): string {
+//   const parsed = parse(filePath)
+//   let name = parsed.name
+//   while (name.includes('.'))
+//     name = name.replace(/\.[^/.]+`$/, '')
+
+//   return join(parsed.dir, name)
+// }
+
+// export async function ensureDir(dir: string): Promise<void> {
+//   try {
+//     await access(dir)
+//   } catch (error) {
+//     await mkdir(dir, { recursive: true })
+//   }
+// }

package/src/pages/compiler/index.ts

@@ -0,0 +1,307 @@
+import { mkdir } from 'node:fs/promises'
+import { join, dirname } from 'node:path'
+import { getLayouts, parsePage, resolveStaticOutputPath } from './meta'
+
+import { h } from 'preact'
+import { render } from 'preact-render-to-string'
+import minify from '@minify-html/node'
+
+import type { ResolvedConfig } from 'vite'
+import { DOCTYPE_RE } from './constants'
+import { getAsset, getChunk, normalizeId } from './assets'
+
+import type { IRoute, Metadata, RouteParams, StaticProps, SummaryMetadata } from './types'
+
+
+// import i18n from '../client/i18n'
+import { setLocale } from '../i18n/client'
+import { log, substep } from 't0n/log'
+
+
+
+import { promisify } from 'node:util'
+import { brotliCompress } from 'node:zlib'
+
+const brCompress = promisify(brotliCompress);
+
+
+export const selfCloseEmptyTags = (html: string, tagName: string) => html.replace(new RegExp(`<${tagName}\\b([^>]*?)>\\s*</${tagName}>`, 'g'), (_, attrs) => `<${tagName}${attrs} />`)
+
+export async function renderPage(
+  meta: Metadata,
+  config: ResolvedConfig,
+  page: IRoute
+ ) {
+  const {
+    mod, islands,
+    hasGetProps, hasGetStaticProps,
+    isClientOnly,
+  } = await parsePage(page, meta)
+  // const {
+  //   mod, islands,
+  //   hasGetProps, hasGetStaticProps,
+  //   isClientOnly,
+  // } = page
+
+  if (!mod?.default) {
+    console.warn(`No default export in ${page.filePath} — skipping`)
+    return
+  }
+
+  // console.log(page.filePath)
+  // console.error('hasGetProps:', hasGetProps)
+  // console.error('hasGetStaticProps:', hasGetStaticProps)
+  // console.error('isClientOnly:', isClientOnly)
+
+  if (page.isInternal || page.is404 || (page.isDynamic && !hasGetStaticProps)) {
+    meta.summary.set('/'+ page.fileName, {
+      type: 2,
+      path: '/'+ page.fileName,
+      size: 0,
+      sizeBr: 0,
+      sizeJS: 0,
+    })
+    // meta.routes.set(page.fullFilePath, page)
+    return
+  }
+
+  // console.log(meta.routes.size)
+  // meta.routes.set(page.filePath, page)
+
+  const { filePath, pattern, params } = page
+
+  let props = []
+  if (hasGetStaticProps) {
+    let sProps = []
+    try {
+      const _sProps = await Promise.resolve(mod.getStaticProps!())
+      sProps = Array.isArray(_sProps) ? _sProps : [_sProps]
+    } catch (e) {
+      return console.error(`getStaticProps failed in ${filePath}: ${e}`)
+    }
+
+    for (const entry of sProps) {
+      const _props = {
+        routeParams: {},
+        pageProps: {},
+      } as {
+        routeParams: RouteParams,
+        pageProps: StaticProps,
+      }
+
+      for (const [k, v] of Object.entries(entry as Record<string, unknown>)) {
+        if (k in params) {
+          _props.routeParams[k] = v as string | string[]
+        } else {
+          _props.pageProps[k] = v
+        }
+      }
+
+      props.push(_props)
+    }
+  } else {
+    props.push({ routeParams: {}, pageProps: {} })
+  }
+
+  const layouts = await getLayouts(meta, page.filePath)
+
+  for (const prop of props) {
+    const allProps = { ...prop.pageProps, ...prop.routeParams }
+
+    // @ts-ignore
+    // i18n(allProps?.locale || meta.i18n.fallbackLocale, meta.i18n.locales, meta.i18n.messages, meta.i18n.routes, meta.i18n.routeMap)
+    allProps?.locale && setLocale(allProps?.locale || meta.i18n.fallbackLocale)
+
+    const pathname = resolveStaticOutputPath(page, prop.routeParams)
+    // TODO: melhorar isso para impedir erros do wouter e afins
+    // @ts-ignore
+    global.location = { pathname: '/'+ (pathname === 'index' ? '' : pathname) }
+    // @ts-ignore
+    global.window = { $duto: {
+      sroutes: meta.spages,
+      navigate: {},
+      route: { pattern: page.pattern, params: prop.routeParams, path: global.location.pathname },
+    } }
+
+    let html = ''
+
+    // if (!isClientOnly) { // TODO: fazer funcionar com `use client`
+      try {
+        let el = h(mod.default, allProps as any)
+        for (const layout of layouts)
+          el = h(layout.mod.default, null, el)
+
+        html = render(el)
+      } catch (e) {
+        console.error(`  SSR render failed for ${filePath}: ${e}`)
+        console.warn(e)
+        html = ''
+      }
+    // }
+
+    // TODO: refatorar isso... aqui dentro já é o SSG
+    const needsClient = hasGetProps || !!isClientOnly || islands.length > 0
+
+    // console.error(page.fileName)
+    // console.error('needsClient: ', needsClient)
+
+    const assets = []
+    for (const [depPath, dep] of meta.map.get(page.fullFilePath)!.deps)
+      assets.push(normalizeId(dep.path))
+
+
+    html = buildHtml(assets, html) //, needsClient, allProps, pattern, islands)
+    // html = selfCloseEmptyTags(String(minify.minify(
+    //   Buffer.from(buildHtml(assets, html, needsClient, allProps, pattern, islands)),
+    //   {}
+    //   // options != null ? options : {},
+    // )), 'i-i')
+
+    const outFile = join(
+      config.root,
+      config.build.outDir,
+      pathname +'.html'
+    )
+    const outHTML = minify.minify(
+      Buffer.from(html),
+      {}
+      // options != null ? options : {},
+    )
+    await mkdir(dirname(outFile), {recursive: true})
+    // await writeFile(outFile, outHTML, 'utf-8')
+    await Bun.write(outFile, outHTML)
+
+    const key = '/'+ pathname
+    if (page.isDynamic) {
+      const _key = '/'+ page.fileName
+      if (!meta.summary.has(_key)) {
+        const ddata = {
+          path: _key,
+          size: page.content.length,
+          sizeBr: (await brCompress(page.content)).length,
+          sizeJS: 0, // TODO
+        }
+        meta.summary.set(_key, { type: 1, children: new Map<string, SummaryMetadata>(), ...ddata})
+        meta.summary.set(_key + 2, { type: 2, ...ddata})
+      }
+
+      const summary = meta.summary.get(_key)!
+      summary.children?.set(key, {
+        type: 0,
+        path: key,
+        size: outHTML.length,
+        sizeBr: (await brCompress(outHTML)).length,
+        sizeJS: 0,
+      })
+
+    } else {
+      meta.summary.set(key, {
+        type: 0,
+        path: key,
+        size: outHTML.length,
+        sizeBr: (await brCompress(outHTML)).length,
+        sizeJS: 0,
+      })
+    }
+
+  }
+}
+
+function buildHtml(
+  _assets: string[],
+  html: string,
+  // needsClient: boolean,
+  // props?: StaticProps,
+  // routePattern?: string,
+  // islands?: Island[],
+): string {
+  if (!(html.includes('<body') || html.includes('<html') || html.includes('<head')))
+    html = wrapHtml(html)
+
+  if (!DOCTYPE_RE.test(html))
+    html = '<!DOCTYPE html>'+ html
+
+//   const pageProps = needsClient
+//     ? `<script>
+// window.__PROPS__ = ${JSON.stringify(props ?? {})};
+// </script>`
+//     : ''
+
+  const assets = [
+    ':duto/client/app.tsx',
+    // ..._assets,
+  ]
+
+  const prepend = assets.map(asset => {
+    const href = getAsset(asset)
+    return href ? `<link href="${href}" rel=stylesheet>` : null
+  }).filter(Boolean).join('')
+    // + `<style>d-b,d-p,i-d,i-s{display:contents}</style>`
+    // + `<style>d,d-slot,d-s-slot{display:contents}</style>`
+
+//     d>*,d-slot>*,d-s-slot>*{display:revert}
+
+// d {
+//   display: block;
+//   box-sizing: border-box;
+// }
+
+// /* Herda todos os estilos padrão de div */
+// d:not([hidden]) {
+//   display: block;
+// }
+
+// /* Remove qualquer comportamento de display:contents */
+// d, d-slot, d-s-slot {
+//   display: block !important;
+// }
+
+//   d *,
+//   d-slot *,
+//   d-s-slot * {
+//     visibility: visible !important;
+//     opacity: 1 !important;
+//   }
+//     </style>
+
+//     <script>class DDiv extends HTMLElement {
+//     constructor() {
+//       super();
+//     }
+//   }
+
+//   if (typeof customElements !== 'undefined' && !customElements.get('d')) {
+//     customElements.define('d', DDiv);
+//   }</script>
+
+  if (html.includes('</head>')) {
+    html = html.replace('</head>', prepend +'</head>')
+  } else if (html.includes('<head>')) {
+    html = html.replace('<head>', '<head>'+ prepend)
+  } else {
+    html = prepend + html
+  }
+
+  // const append = pageProps + assets.map(file => {
+  const append = assets.map(file => {
+    const src = getChunk(file)
+    return src ? `<script src="${src}" type=module></script>` : null
+  }).filter(Boolean).join('')
+
+  if (html.includes('</body>'))
+    return html.replace('</body>', `${append}</body>`)
+
+  return html + append
+}
+
+export function wrapHtml(content: string) {
+  return `<html>
+  <head>
+    <meta charset=utf-8>
+    <meta content="width=device-width,initial-scale=1" name=viewport>
+  </head>
+  <body hidden>
+    ${content}
+  </body>
+</html>`
+}

package/src/pages/compiler/island.ts

@@ -0,0 +1,108 @@
+import { h } from 'preact'
+import { renderToString } from 'preact-render-to-string'
+import { IMPORT, newID } from 't0n'
+
+import { getEntry } from './assets'
+import { makeByteToCharMap, extractPropsFromJSX } from './ast'
+
+import type { ImportUsage, IslandMeta } from './types'
+
+function serializeProps(props: Record<string, unknown>) {
+  return JSON.stringify(props)
+}
+
+function htmlEncodeProps(serialized: string) {
+  return serialized
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+async function renderIslandSSR(
+  component: unknown,
+  props: Record<string, unknown>,
+  children?: unknown,
+): Promise<string> {
+  try {
+    return renderToString(h(component as never, props as never, children as never))
+  } catch {
+    return ''
+  }
+}
+
+function buildIslandTag(meta: IslandMeta) {
+  return `<i-s id="${meta.id}" url="${getEntry(meta.url)}"${meta.export === 'default' ? '' : ` export="${meta.export}"`}${meta.props === '{}' ? '' : ` props="${meta.props}"`}>${meta.ssrHtml}</i-s>`
+}
+
+/**
+ * Replaces in "sourceCode" each occurrence of imported components
+ * from "importSource" by hydrator-compatible <island> tags.
+ *
+ * @param sourceCode TSX source code
+ * @param importSource The target module (e.g. '@/components/counter2')
+ * @param opts Resolution callbacks
+ * @returns Code with replacements applied
+ */
+export async function replaceIslands(
+  code: string,
+  usages: ImportUsage[],
+) {
+  if (!usages.length) return code
+
+  const b2c = makeByteToCharMap(code)
+  const toChar = (byteOffset: number) => b2c[byteOffset - 1]
+
+  const replacements: Array<{ start: number; end: number; replacement: string }> = []
+
+  for (const importUsage of usages) {
+    const component = await IMPORT(importUsage.source, importUsage.imported)
+
+    // schedule removal of the import declaration (replacement with an empty string)
+    replacements.push({
+      start: toChar(importUsage.importStart),
+      end: toChar(importUsage.importEnd),
+      replacement: '',
+    })
+
+    // schedule the replacement of each JSX usage with `<island>`
+    for (const usage of importUsage.usages) {
+      if (usage.type !== 'jsx') continue
+
+      const props = extractPropsFromJSX(usage.node)
+      const ssrHtml = await renderIslandSSR(component, props)
+
+      const island = buildIslandTag({
+        id: newID(),
+        url: importUsage.source,
+        export: importUsage.imported,
+        props: htmlEncodeProps(serializeProps(props)),
+        ssrHtml,
+      })
+
+      replacements.push({
+        start: toChar(usage.start),
+        end: toChar(usage.end),
+        replacement: island,
+      })
+    }
+  }
+
+  if (!replacements.length) return code
+
+  replacements.sort((a, b) => a.start - b.start)
+
+  const parts: string[] = []
+  let cursor = 0
+
+  for (const { start, end, replacement } of replacements) {
+    if (start < cursor) continue // overlapped, discards
+    if (start > cursor) parts.push(code.slice(cursor, start))
+    parts.push(replacement)
+    cursor = end
+  }
+
+  if (cursor < code.length) parts.push(code.slice(cursor))
+
+  return parts.join('').replace(/\n{3,}/g, '\n\n')
+}