@graphenedata/cli 0.0.13 → 0.0.14

package/dist/ui/internal/LocalApp.svelte

@@ -0,0 +1,40 @@
+<script>
+  import {errorProvider} from './telemetry.ts'
+  import navFiles from 'virtual:nav'
+  import NavSidebar from './NavSidebar.svelte'
+  import PageError from './PageError.svelte'
+
+  // Nav sidebar with HMR support for the virtual file list
+  let navData = $state(navFiles)
+  import.meta.hot?.accept('virtual:nav', mod => navData = mod.default)
+
+  // Track compile errors from both initial load and subsequent HMR failures.
+  // Uses errorProvider so `check` can report compilation errors.
+  let compileError = $state(null)
+  errorProvider('compile', () => compileError ? [compileError] : [])
+  import.meta.hot?.on('vite:error', (payload) => {
+    compileError = payload.err
+    compileError.type = 'compile'
+    compileError.file = payload.err.id
+    Page = null
+  })
+
+  // The md file is dynamically imported, so even if there's a compile error, we'll still load LocalApp and can show the user the issue
+  let Page = $state(null)
+  let pathName = window.location.pathname.replace(/^\//, '') || 'index'
+  if (pathName !== '__ct') {
+    import(/* @vite-ignore */ '/' + pathName + '.md').then(mod => {
+      Page = mod.default
+      compileError = null
+    }).catch(() => {})
+  }
+</script>
+
+<nav id="nav"><NavSidebar files={navData} /></nav>
+<main id="content">
+  {#if compileError}
+    <PageError error={compileError} />
+  {:else if Page}
+    <Page />
+  {/if}
+</main>

package/dist/ui/internal/NavSidebar.svelte

@@ -1,25 +1,22 @@
 <script>
+  import {SvelteSet, SvelteMap} from 'svelte/reactivity'
+
   /** @type {string} */
-  export let currentFile = ''
-  /** @type {string[]} */
-  export let files = []
-  /** @type {((href: string) => void) | undefined} */
-  export let onNavigate = undefined
-  /** @type {string} */
-  export let baseRoute = ''
+  let {currentFile = '', files = [], onNavigate = undefined, baseRoute = ''} = $props()
 
-  let tree = []
-  let flatNodes = []
-  let openFolders = new Set()
-  let treeSignature = ''
-  let lastCurrent = ''
+  let tree = $state([])
+  let flatNodes = $state([])
+  // eslint-disable-next-line svelte/no-unnecessary-state-wrap -- openFolders is reassigned, needs $state
+  let openFolders = $state(new SvelteSet())
+  let treeSignature = $state('')
+  let lastCurrent = $state('')
 
-  $: normalizedFiles = (files || [])
-    .map((file) => file.replace(/^\.\//, '').replace(/\\/g, '/'))
+  let normalizedFiles = $derived((files || [])
+    .map((file) => file.replace(/^\.\//, '').replace(/\\/g, '/')))
 
 
-  $: normalizedCurrent = deriveCurrentFile(currentFile, normalizedFiles, baseRoute)
-  $: currentRoute = normalizedCurrent ? pathToRoute(normalizedCurrent) : '/'
+  let normalizedCurrent = $derived(deriveCurrentFile(currentFile, normalizedFiles, baseRoute))
+  let currentRoute = $derived(normalizedCurrent ? pathToRoute(normalizedCurrent) : '/')
 
   function deriveCurrentFile (_currentFile, _normalizedFiles, _baseRoute) {
     let fromProp = normalizeFilePath(currentFile)
@@ -42,7 +39,7 @@
     return route
   }
 
-  $: {
+  $effect(() => {
     let nextSignature = normalizedFiles.join('|')
     if (nextSignature !== treeSignature) {
       treeSignature = nextSignature
@@ -50,18 +47,18 @@
       flatNodes = flattenTree(tree)
       openFolders = createDefaultOpenFolders(tree, normalizedCurrent)
     }
-  }
+  })
 
-  $: {
+  $effect(() => {
     if (normalizedCurrent !== lastCurrent) {
       openFolders = mergeAncestorFolders(openFolders, normalizedCurrent)
       lastCurrent = normalizedCurrent
     }
-  }
+  })
 
   function toggleFolder (path) {
     if (!path) return
-    let next = new Set(openFolders)
+    let next = new SvelteSet(openFolders)
     if (next.has(path)) next.delete(path)
     else next.add(path)
     openFolders = next
@@ -84,7 +81,7 @@
 
   function buildTree (paths) {
     let root = []
-    let folderMap = new Map()
+    let folderMap = new SvelteMap()
 
     for (let filePath of paths) {
       let cleanPath = filePath.replace(/^\.\//, '').replace(/^\//, '')
@@ -167,16 +164,16 @@
   }
 
   function createDefaultOpenFolders (_treeNodes, currentPath) {
-    let next = new Set()
+    let next = new SvelteSet()
     return mergeAncestorFolders(next, currentPath)
   }
 
   function mergeAncestorFolders (openSet, filePath) {
-    if (!filePath) return new Set(openSet)
+    if (!filePath) return new SvelteSet(openSet)
     let parts = filePath.split('/')
     parts.pop()
     let aggregate = []
-    let next = new Set(openSet)
+    let next = new SvelteSet(openSet)
     for (let part of parts) {
       aggregate.push(part)
       next.add(aggregate.join('/'))
@@ -217,15 +214,15 @@
           class={node.route ? 'folder-row' : 'folder-row clickable'}
           role={node.route ? undefined : 'button'}
           aria-expanded={node.route ? undefined : String(isOpen(node.path, openFolders))}
-          on:click={node.route ? undefined : () => toggleFolder(node.path)}
-          on:keydown={node.route ? undefined : (event) => handleFolderRowKey(event, node.path)}
+          onclick={node.route ? undefined : () => toggleFolder(node.path)}
+          onkeydown={node.route ? undefined : (event) => handleFolderRowKey(event, node.path)}
         >
           <button
             class="toggle"
             type="button"
             data-folder-toggle={node.path}
             aria-expanded={isOpen(node.path, openFolders)}
-            on:click={(event) => { event.stopPropagation(); toggleFolder(node.path) }}
+            onclick={(event) => { event.stopPropagation(); toggleFolder(node.path) }}
             aria-label={(isOpen(node.path, openFolders) ? 'Collapse' : 'Expand') + ' ' + node.label}
           >
             <span class={isOpen(node.path, openFolders) ? 'chevron open' : 'chevron'}>▸</span>
@@ -235,7 +232,7 @@
               href={node.route}
               class={node.route === currentRoute ? 'active' : ''}
               aria-current={node.route === currentRoute ? 'page' : undefined}
-              on:click={(e) => handleLinkClick(e, node.route)}
+              onclick={(e) => handleLinkClick(e, node.route)}
             >
               {node.label}
             </a>
@@ -250,7 +247,7 @@
           href={node.route}
           class={node.path === normalizedCurrent ? 'active' : ''}
           aria-current={node.path === normalizedCurrent ? 'page' : undefined}
-          on:click={(e) => handleLinkClick(e, node.route)}
+          onclick={(e) => handleLinkClick(e, node.route)}
         >
           <span>{node.label}</span>
         </a>

package/dist/ui/internal/PageError.svelte

@@ -0,0 +1,23 @@
+<script>
+  let {error} = $props()
+</script>
+
+<h1>Error loading page</h1>
+<p class="message">{error.message}</p>
+{#if error.frame}<pre>{error.frame}</pre>{/if}
+{#if error.file}<p class="file">{error.file}</p>{/if}
+
+<style>
+  h1 { margin-top: 0; }
+  .message { color: var(--red-700); }
+  pre {
+    background: var(--grey-100);
+    border: 1px solid var(--grey-200);
+    border-radius: 4px;
+    padding: 1rem;
+    overflow-x: auto;
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+  .file { color: var(--grey-500); font-size: 0.875rem; }
+</style>

package/dist/ui/internal/checkSocket.ts

@@ -0,0 +1,48 @@
+// WebSocket connection for the `graphene check` command.
+// Listens for check requests, waits for queries to finish, captures screenshots, and reports errors.
+
+import {getErrors} from './telemetry.ts'
+import {isLoading} from './queryEngine.ts'
+
+let socket: WebSocket | null = null
+connect()
+
+function captureChart (chartTitle: string) {
+  let escaped = window.CSS.escape(chartTitle)
+  let canvas = document.querySelector(`[data-chart-title="${escaped}"] canvas`) as HTMLCanvasElement | null
+  return canvas?.toDataURL('image/png')
+}
+
+async function takeScreenshot () {
+  if (!(window as any).html2canvas) {
+    let html2canvas = await import('@graphenedata/html2canvas')
+    ;(window as any).html2canvas = html2canvas.default
+  }
+  let canvas = await (window as any).html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1, liveDOM: true})
+  return canvas?.toDataURL('image/png')
+}
+
+async function waitForQueriesToFinish () {
+  let startTime = Date.now()
+  while (isLoading() && Date.now() - startTime < 20_000) {
+    await new Promise(resolve => setTimeout(resolve, 100))
+  }
+}
+
+function connect () {
+  let wsUrl = `ws://${window.location.host}/_api/ws`
+  socket = new WebSocket(wsUrl)
+  socket.onclose = () => setTimeout(connect, 2000)
+  socket.onopen = () => socket!.send(JSON.stringify({type: 'register', url: window.location.href}))
+
+  socket.onmessage = async (event) => {
+    let {type, requestId, chart} = JSON.parse(event.data)
+    if (type !== 'check') return
+
+    await waitForQueriesToFinish()
+    let errors = getErrors().map((e: any) => ({type: e.type, message: e.message, id: e.id, file: e.file, line: e.loc?.line, frame: e.frame, from: e.from, to: e.to}))
+    let stillLoading = isLoading()
+    let screenshot = chart ? captureChart(chart) : await takeScreenshot()
+    socket!.send(JSON.stringify({type: 'checkResponse', requestId, errors, stillLoading, screenshot}))
+  }
+}

package/dist/ui/internal/queryEngine.ts

@@ -30,6 +30,7 @@ interface QueryNode {
 let runPending: Promise<void> | null = null
 let params = {} as Record<string, any>
 let queries = [] as QueryNode[]
+let queryResults = {} as Record<string, {rows: any[], fields?: Field[]}>
 
 function registerQuery (name: string, contents: string) {
   queries = queries.filter(q => q.name !== name)
@@ -87,11 +88,16 @@ async function runNode (n: QueryNode) {
 
     if (response.status == 304) { // cache hit. Read it out and use that
       let body = await cacheRead(hash)
-      n.callback(translateData(body, n))
+      let result = translateData(body, n)
+      if (n.source) queryResults[n.source] = {rows: result.rows, fields: body.fields}
+      n.callback(result)
     } else if (response.ok) { // cache miss. write it to the cache, and return the data
       cacheWrite(hash, response.clone()) // clone allows us to write the raw response into the cache
       let body = await response.json()
-      n.callback(translateData(body, n)) // nb that translateData modifies in place for performance
+      let fields = body.fields // grab before translateData mutates
+      let result = translateData(body, n) // nb that translateData modifies in place for performance
+      if (n.source) queryResults[n.source] = {rows: result.rows, fields}
+      n.callback(result)
     } else { // request failed. Record it
       let isJson = response.headers.get('Content-Type') === 'application/json'
       let body = isJson ? await response.json() : await response.text()
@@ -192,4 +198,5 @@ Object.assign(window.$GRAPHENE, {
   query,
   unsubscribe,
   waitForQueries,
+  queryResults,
 })

package/dist/ui/internal/telemetry.ts

@@ -7,6 +7,7 @@ let staticErrors: Error[] = []
 let errorProviders: Record<string, ErrorProvider> = {}
 
 window.addEventListener('error', (event) => {
+  if ((event.error?.message || '').match(/Failed to fetch dynamically imported module.*\.md\?import/)) return
   staticErrors.push(event.error)
 })
 window.addEventListener('unhandledrejection', (event) => {

package/dist/ui/web.js

@@ -1,7 +1,8 @@
-import {getErrors} from './internal/telemetry.ts'
+import './internal/telemetry.ts'
+import './internal/checkSocket.ts'
 import './app.css'
-import {isLoading} from './internal/queryEngine.ts'
-import NavSidebar from './internal/NavSidebarHMR.svelte'
+import {mount} from 'svelte'
+import LocalApp from './internal/LocalApp.svelte'
 
 import Area from './components/Area.svelte'
 import AreaChart from './components/AreaChart.svelte'
@@ -67,55 +68,4 @@ window.$GRAPHENE.components = {
   TextInput,
 }
 
-let socket = null
-
-if (document.getElementById('nav')) {
-  new NavSidebar({target: document.getElementById('nav')})
-}
-
-connectWebSocket()
-
-function captureChart (chartTitle) {
-  let escaped = window.CSS.escape(chartTitle)
-  let canvas = document.querySelector(`[data-chart-title="${escaped}"] canvas`)
-  return canvas?.toDataURL('image/png')
-}
-
-async function takeScreenshot () {
-  if (!window.html2canvas) {
-    let html2canvas = await import('@graphenedata/html2canvas')
-    window.html2canvas = html2canvas.default
-  }
-
-  let canvas = await window.html2canvas(document.body, {useCORS: true, allowTaint: true, scale: 1, liveDOM: true})
-  return canvas?.toDataURL('image/png')
-}
-
-async function waitForQueriesToFinish () {
-  let startTime = Date.now()
-  while (isLoading() && Date.now() - startTime < 20_000) {
-    await new Promise(resolve => setTimeout(resolve, 100))
-  }
-}
-
-function connectWebSocket () {
-  let wsUrl = `ws://${window.location.host}/_api/ws`
-  socket = new WebSocket(wsUrl)
-  socket.onclose = () => setTimeout(connectWebSocket, 2000)
-
-  socket.onopen = () => {
-    socket.send(JSON.stringify({type: 'register', url: window.location.href}))
-  }
-
-  socket.onmessage = async (event) => {
-    let {type, requestId, chart} = JSON.parse(event.data)
-
-    if (type === 'check') {
-      await waitForQueriesToFinish()
-      let errors = getErrors().map(e => ({message: e.message, id: e.id}))
-      let stillLoading = isLoading()
-      let screenshot = chart ? captureChart(chart) : await takeScreenshot()
-      socket.send(JSON.stringify({type: 'checkResponse', requestId, errors, stillLoading, screenshot}))
-    }
-  }
-}
+mount(LocalApp, {target: document.body})

package/package.json

@@ -3,10 +3,10 @@
   "main": "bin.js",
   "type": "module",
   "author": "Graphene Systems Inc",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "Elastic-2.0",
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "files": [
     "dist",
@@ -27,10 +27,9 @@
     "@duckdb/node-api": "1.3.2-alpha.26",
     "@google-cloud/bigquery": "^8.1.1",
     "@graphenedata/html2canvas": "^1.4.1",
-    "@graphenedata/malloy": "0.0.304",
     "@lezer/common": "^1.2.3",
     "@lezer/lr": "^1.4.2",
-    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tidyjs/tidy": "^2.5.2",
     "chalk": "^5.3.0",
     "chokidar": "3.6.0",
@@ -41,16 +40,16 @@
     "dotenv": "^17.2.3",
     "echarts": "^5.5.0",
     "fs-extra": "11.2.0",
-    "glob": "^11.0.3",
+    "glob": "^13.0.1",
     "marked": "^16.3.0",
     "mdsvex": "^0.12.6",
     "nanoid": "3.3.8",
     "sanitize-html": "^2.17.0",
-    "snowflake-sdk": "^2.3.1",
+    "snowflake-sdk": "^2.3.4",
     "ssf": "^0.11.2",
-    "svelte": "4.2.19",
+    "svelte": "5.48.0",
     "unist-util-visit": "4.1.2",
-    "vite": "5.4.14",
+    "vite": "7.3.1",
     "ws": "^8.18.0"
   },
   "devDependencies": {
@@ -58,7 +57,7 @@
     "@types/node": "^20.0.0",
     "@types/sanitize-html": "^2.16.0",
     "@types/ws": "^8.18.1",
-    "esbuild": "^0.21.5",
+    "esbuild": "^0.27.2",
     "vitest": "4.0.15",
     "vscode-languageserver-types": "^3.17.0"
   },

package/dist/ui/internal/NavSidebarHMR.svelte

@@ -1,8 +0,0 @@
-<script>
-  import navData from 'virtual:nav'
-  import NavSidebar from './NavSidebar.svelte'
-
-  export let currentFile = ''
-</script>
-
-<NavSidebar files={navData} {currentFile} />