@ape-egg/codecane 0.0.0-stage → 1.0.0

package/ui/components/Timeline.html

@@ -0,0 +1,25 @@
+<header @[fold] stylecheat dark away="@[fullscreen && !returning]">
+  <a href="/" aria-current="@[root ? 'page' : 'false']"><strong>@[name]</strong></a>
+  <ol style="grid-template-rows: @[rows]">
+    <!-- each cells as cell (cell.key) -->
+    <li style="grid-area: @[cell.lane + 1] / @[cell.depth + 1] / span @[cell.span]" @[cell.shown]>
+      <!-- if cell.follows -->
+      <arrow>→</arrow>
+      <!-- /if -->
+      <a href="/@[cell.address]" onclick="codecane.pick(event, '@[cell.id]', @[cell.lane], @[cell.span])" aria-current="@[page.id === cell.id ? 'step' : 'false']" kind="@[steps[cell.id].kind ?? '']" @[cell.lit]>
+        <!-- if steps[cell.id].kind -->
+        <join aria-hidden="true">Y</join>
+        <!-- /if -->
+        <!-- if steps[cell.id].kind !== 'seam' -->
+        @[steps[cell.id].title]
+        <!-- /if -->
+      </a>
+      <!-- if cell.forks -->
+      <button fork title="@[cell.forks] timelines fork after @[steps[cell.id].title]" aria-expanded="@[fold && through === cell.id ? 'true' : 'false']" onclick="codecane.fold('@[cell.id]')"><split aria-hidden="true">Y</split>@[cell.forks]</button>
+      <!-- /if -->
+    </li>
+    <!-- /each -->
+  </ol>
+  <logotext-codecane><a href="https://codecane.korte.kim" target="_blank">code<span>cane</span></a><version>v@[version]</version></logotext-codecane>
+  <button onclick="codecane.expand()" aria-label="Fullscreen" tertiary sm><icon fullscreen></icon></button>
+</header>

package/ui/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>codecane</title>
+  <link rel="stylesheet" href="/node_modules/@ape-egg/codie/codie.css">
+  <link rel="stylesheet" href="/codecane/ui/stylecheat.css">
+  <link rel="stylesheet" href="/codecane/ui/codecane.css">
+  <script type="module" src="/codecane/ui/viewer.js"></script>
+</head>
+<body vibe-fouc>
+  <component src="/codecane/ui/components/Timeline.html"></component>
+  <workspace fullscreen="@[fullscreen]" away="@[fullscreen && !returning]">
+    <component src="/codecane/ui/components/Story.html"></component>
+    <component src="/codecane/ui/components/Stage.html"></component>
+    <component src="/codecane/ui/components/Changes.html"></component>
+  </workspace>
+</body>
+</html>

package/ui/mounted.js

@@ -0,0 +1,73 @@
+const blobs = {}
+const sources = {}
+const blob = (text, type, path) => {
+  const url = blobs[`${path}\n${text}`] ??= URL.createObjectURL(new Blob([text], { type }))
+  sources[url] = path
+  return url
+}
+
+const moduleLinks = /((?:from|import)\s*\(?\s*)(['"])(\.{1,2}\/[^'"]+)\2/g
+const styleLinks = /((?:url\(|@import\s+(?!url\())\s*)(['"]?)([^'")\s;]+)\2/g
+
+const reporter = `{
+  let failed = false
+  const fail = failure => {
+    failed = true
+    parent.postMessage({ codecane: 'failed', ...failure }, origin)
+  }
+  addEventListener('error', event => fail(event instanceof ErrorEvent
+    ? { message: String(event.error ?? event.message), source: event.filename, line: event.lineno }
+    : { message: 'Could not load ' + (event.target.src ?? event.target.href), source: '' }), true)
+  addEventListener('unhandledrejection', ({ reason }) => fail({ message: String(reason), source: '' }))
+  addEventListener('load', () => failed || parent.postMessage({ codecane: 'ran' }, origin))
+}`
+
+export const pathOf = (page, url) => sources[url] ?? (url.startsWith(page.base) ? url.split(/[?#]/)[0].slice(page.base.length) : url)
+
+const sheets = (page, drafts, text) => {
+  const address = path => new URL(path, page.base).href
+  const has = path => page.files.some(file => file.path === path)
+  const styles = {}
+  const styled = path => styles[path] ??= (async () => {
+    const css = drafts[path] ?? await text(path)
+    const targets = Object.fromEntries(await Promise.all([...css.matchAll(styleLinks)].map(async ([, , , link]) => {
+      const target = new URL(link, address(path)).href
+      return [link, pathOf(page, target).endsWith('.css') && has(pathOf(page, target)) ? await styled(pathOf(page, target)) : target]
+    })))
+    return blob(css.replace(styleLinks, (_, lead, quote, link) => `${lead}${quote}${targets[link]}${quote}`), 'text/css', path)
+  })()
+  return { address, has, styled }
+}
+
+export const restyled = (page, drafts, text) => {
+  const { has, styled } = sheets(page, drafts, text)
+  return async href => has(pathOf(page, href)) ? styled(pathOf(page, href)) : href
+}
+
+export const mounted = async (page, drafts, text) => {
+  const { address, has, styled } = sheets(page, drafts, text)
+
+  const modules = Object.fromEntries(Object.keys(drafts).filter(path => path.endsWith('.js')).map(path => [
+    address(path),
+    blob(drafts[path].replace(moduleLinks, (_, lead, quote, link) => `${lead}${quote}${new URL(link, address(path))}${quote}`), 'text/javascript', path),
+  ]))
+
+  const doc = new DOMParser().parseFromString(drafts['index.html'] ?? await text('index.html'), 'text/html')
+  const report = Object.assign(doc.createElement('script'), { textContent: reporter })
+  const base = Object.assign(doc.createElement('base'), { href: page.base })
+  const map = doc.querySelector('script[type="importmap"]') ?? Object.assign(doc.createElement('script'), { type: 'importmap', textContent: '{}' })
+  const { imports, ...rest } = JSON.parse(map.textContent)
+  map.textContent = JSON.stringify({ ...rest, imports: { ...imports, ...modules } })
+  doc.head.prepend(report, base, map)
+
+  await Promise.all([...doc.querySelectorAll('link[rel="stylesheet"][href]')].map(async link => {
+    const path = pathOf(page, new URL(link.getAttribute('href'), page.base).href)
+    if (has(path)) link.setAttribute('href', await styled(path))
+  }))
+  doc.querySelectorAll('script[type="module"][src]').forEach(script => {
+    const target = new URL(script.getAttribute('src'), page.base).href
+    script.setAttribute('src', modules[target] ?? target)
+  })
+
+  return blob(`<!doctype html>\n${doc.documentElement.outerHTML}`, 'text/html', 'index.html')
+}