@ape-egg/codecane 0.0.0-stage → 1.1.0

package/ui/components/Story.html

@@ -0,0 +1,105 @@
+<story-panel ontransitionend="event.target === this && codecane.returned()">
+  <panel-tabs stylecheat dark>
+    <tabs primary>
+      <tab active="@[tab === 'about']" onclick="$.tab = 'about'">About</tab>
+      <tab active="@[tab === 'files']" onclick="$.tab = 'files'">Files</tab>
+    </tabs>
+  </panel-tabs>
+  <!-- if tab === 'about' -->
+  <article>
+    <step-status stylecheat dark>
+      <crow justify-between>
+        <small>Step @[timeline.indexOf(page.id) + 1] of @[timeline.length]</small>
+        <!-- if page.untested -->
+        <badge bg-slate text-slate>Untested</badge>
+        <!-- /if -->
+      </crow>
+    </step-status>
+    <!-- if page.convergence && page.convergence.kind === 'seam' -->
+    <story><h1>@[page.title]</h1></story>
+    <!-- else -->
+    <story>@[$.unsafe(page.story)]</story>
+    <!-- /if -->
+    <!-- if page.convergence -->
+    <convergence kind="@[page.convergence.kind]">
+      <h2>@[kinds[page.convergence.kind]]</h2>
+      <!-- if page.convergence.kind === 'seam' -->
+      <p>A seam is a small API that the timelines before it share. Each timeline fills it in where it owns the code, so the steps after it are written once and never ask which timeline they are on.</p>
+      <!-- if page.convergence.requiredBy.length -->
+      <p>Required by @[page.convergence.requiredBy.map(id => steps[id].title).join(', ')]:</p>
+      <ul>
+        <!-- each page.convergence.reasons as reason -->
+        <li>@[reason]</li>
+        <!-- /each -->
+      </ul>
+      <!-- /if -->
+      <!-- else -->
+      <!-- if page.convergence.continues.length -->
+      <p>Continues @[page.convergence.continues.map(id => steps[id].title).join(', ')] together, each timeline on its own.</p>
+      <!-- /if -->
+      <!-- if page.convergence.brought.length -->
+      <p>Brings @[page.convergence.brought.map(id => steps[id].title).join(', ')] onto this timeline.</p>
+      <!-- /if -->
+      <!-- if page.convergence.kind === 'merge' -->
+      <p>Every step replays cleanly and every check passes, so the timelines just join.</p>
+      <!-- /if -->
+      <!-- /if -->
+    </convergence>
+    <!-- /if -->
+    <!-- if page.convergence && page.convergence.kind === 'seam' -->
+    <story>@[$.unsafe(page.story)]</story>
+    <!-- /if -->
+    <!-- if alternatives.length -->
+    <alternatives>
+      <h2>Alternatives</h2>
+      <!-- each alternatives as alternative -->
+      <a href="/@[alternative.address]">@[alternative.title]</a>
+      <!-- /each -->
+    </alternatives>
+    <!-- /if -->
+  </article>
+  <!-- else -->
+  <file-list stylecheat dark>
+    <!-- each [...new Set(page.files.map(file => file.folder))] as folder (page.id + folder) -->
+    <!-- if folder -->
+    <folder>@[folder]</folder>
+    <!-- /if -->
+    <!-- each page.files.filter(file => file.folder === folder) as file (page.id + file.path) -->
+    <file data-path="@[file.path]" aria-current="@[file.path === open ? 'location' : 'false']" onclick="codecane.open('@[file.path]')" onmouseenter="codecane.light('@[file.changedBy]')" onmouseleave="codecane.light()">
+      <span>@[file.path.slice(folder.length)]</span>
+      <!-- if file.owner === page.id && file.overrides -->
+      <badge bg-orange text-orange>Override</badge>
+      <!-- /if -->
+      <!-- if file.owner === page.id && !file.overrides -->
+      <badge bg-green text-green>Added</badge>
+      <!-- /if -->
+      <!-- if file.patchedBy.includes(page.id) -->
+      <badge bg-yellow text-yellow>Modified</badge>
+      <!-- /if -->
+    </file>
+    <!-- /each -->
+    <!-- /each -->
+    <!-- if page.dependencies.length -->
+    <folder>node_modules/</folder>
+    <!-- each page.dependencies as dependency (page.id + dependency) -->
+    <dependency>@[dependency]</dependency>
+    <!-- /each -->
+    <!-- /if -->
+  </file-list>
+  <!-- /if -->
+  <footer>
+    <!-- if page.ahead -->
+    <story>@[$.unsafe(page.ahead)]</story>
+    <!-- /if -->
+    <step-links>
+      <!-- if previous -->
+      <a href="/@[previous.address]" kind="@[previous.kind]">← @[previous.title]</a>
+      <!-- /if -->
+      <!-- if next -->
+      <a href="/@[next.address]" next kind="@[next.kind]">@[next.title] →</a>
+      <!-- else -->
+      <span>Final build</span>
+      <!-- /if -->
+    </step-links>
+  </footer>
+</story-panel>

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')
+}