Zenn
Open8

Eclipsa | Xely

Deno
Babel
Vite
Hono
eclipsa
nakasyounakasyou
export interface RouteEntry {
  filePath: string
  honoPath: string
}
export const createRoutes = async (root: string): Promise<RouteEntry[]> => {
  const appDir = path.join(root, 'app')
  const result = []
  for await (const entry of fg.stream(path.join(root, '/**/+page.tsx'))) {
    const relativePath = path.relative(appDir, entry.toString())
    result.push({
      filePath: entry.toString(),
      honoPath: filePathToHonoPath(relativePath)
    })
  }
  return result
}
nakasyounakasyou

やりたいこと:

const Header = component$(() => <div>Hello</div>)

export default component$(() => {
  const count = useSignal(0)
  return <div>
    <Header />
    <button>Count: {count.value}</button>
  <div>
})

to

const templ_0 = template('<div>Hello</div>')
const Header = component$(() => templ_0.clone())

const templ_1 = template('<div><button>Count: </button></div>')
export default component$(() => {
  const count = useSignal(0)
  ...
})
nakasyounakasyou

アイデア: Graphical Functional Dependence Analysis (†𝑮𝑭𝑫𝑨†)

import { addFunction } from 'xx-module'
export const component(() => {
  const add = (a, b) => addFunction(a, b)
  const sub = async (a, b) => {
    return add(a, -b)
  }

  const click0 = async () => {
    alert(await sub(2, 1))
  }

  return <>
    <button onClick$={click0}>Button 0</button>
  </>
})

は、次のように解析される:

  • component default
    • button:onClick$ => async clicked
    • clicked => async sub
    • sub => sync add
    • add => module addFunction

また、これは、以下のように最適化される

  • component default
    • button:onClick$ => clicked
      • Preload: subClick, sub, add

関数が依存する変数/関数の集合をUとするとき、Uの要素Eが

  • 全て中身がawaitキーワードをつけて呼ばれているなら
    • await 時に Dynamic Import 処理をつける
  • でなければ
    • チャンクの一番上に Static Import としてつける
nakasyounakasyou

アイデア: Resumableにおいて、Signalではなく変数をシリアライズする

component$(() => {
  let a = 0
  a ++
  return <>{a}</>
})

が

// compile target: SSR
component$(() => {
  var _vars = {
    get a() {
      return a
    },
    set a(v) {
      a = v
    }
  }
  let a = 0
  a ++
  return componentResult(_vars, <>{a}</>)
})

に