feat: auto host mount dev server when running in a codespace (#26)

* feat: auto host mount dev server when running in a codespace also clarify some documentation to consistently expect `pnpm` as a package manager / task runner. `npm` _should_ work equivalently in most cases, but being consistent might help prevent unexpected surprises. * tweak README path to data * add cite component * chore: bump rollup versions, resolve some rollup warnings and clean out some cruft from the boilerplate rollup config * feat: build the viewer using vite (#29) --------- Co-authored-by: Steven Clontz <steven.clontz@gmail.com>
pi-base · May 7, 2023 · a69804a · a69804a
1 parent 5ed174a
commit a69804a
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 619 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -5,16 +5,17 @@
   },
   "onCreateCommand": "pnpm install && pnpm run --filter core build",
   "postAttachCommand": {
-    "compile": "pnpm run --filter compile dev"
+    "compile": "pnpm run --filter compile dev",
+    "viewer": "pnpm run --filter viewer dev --host"
   },
   "forwardPorts": [
-    8080
+    5173
   ],
   "postCreateCommand": "git clone https://github.com/pi-base/data.git",
   "customizations": {
     "codespaces": {
       "openFiles": [
-        "doc/codespaces/welcome.md"
+        "README.md"
       ],
       "repositories": {
         "pi-base/data": {
@@ -25,7 +26,9 @@
       }
     },
     "vscode": {
-      "extensions": [],
+      "extensions": [
+        "svelte.svelte-vscode"
+      ],
       "settings": {}
     }
   }

diff --git a/README.md b/README.md
@@ -1,27 +1,30 @@
 🎉 Welcome to your Codespace
 
-# Compiling a bundle locally
+Shortly after your codespace starts, you should see three running background
+processes –
 
-Your codespace starts a `compile process` process which watches
-`/workspaces/data` and serves its contents at `localhost:3141/refs/heads/(:branch)`,
-consistent with the production S3 API.
+- `compile` – watches `/workspaces/web/data` and serves its contents at
+  `localhost:3141/refs/heads/(:branch)`, consistent with the production S3 API.
+- `viewer` – watches and servers `/workspaces/web/packages/viewer`, rebuilding
+  and reloading on changes.
 
-Once the server has started and the first build has finished, you can verify the
-result by running
+Note that changes to `packages/core` do not currently automatically trigger a 
+rebuild of the package and its dependencies.
 
-```bash
-$ curl -s localhost:3141/refs/heads/master | jq '.version'
-```
+# Usage
 
-# Running the viewer
+## Viewing the Web UI
 
-```bash
-# in packages/viewer
-# compile .js and .css assets
-npm run build
+As the viewer starts up, you may see an `Open in Browser` popup. You can always
+access the browser preview by going to the `Ports` tab, and clicking the 
+`Open in Browser` globe icon for port `8080`.
 
-# serve assets and expose them externally
-npm run start -- --host
+## Checking Compiled Data
+
+In a console run
+
+```bash
+$ curl -s localhost:3141/refs/heads/master | jq '.version'
 ```
 
 ## Troubleshooting

diff --git a/bin/build b/bin/build
@@ -3,6 +3,9 @@
 # This scripts is primarily used during Cloudflare deploys, to generate the 
 # static assets that are served by Cloudflare.
 
+export VITE_BRANCH=$CF_PAGES_BRANCH 
+export VITE_VERSION=$CF_PAGES_COMMIT_SHA
+
 # Cloudflare does not include pnpm in their build image, so we need to install
 # it ourselves, and make sure it installs packages somewhere that Cloudflare caches.
 #
@@ -15,3 +18,10 @@ pnpm run build
 
 cd ../viewer
 pnpm run build
+
+# Temporarily copy vite's default output to the current Cloudflare Pages 
+# previously configured directory.
+#
+# TODO: remove this after re-pointing Cloudflare's config.
+rm -rf public
+cp -r dist public
diff --git a/packages/core/src/Parser.ts b/packages/core/src/Parser.ts
@@ -13,10 +13,10 @@ import { unnest } from './Parser/unnest.js'
  * Full parser chain translating Markdown to HTML, including rendering math and
  * custom π-base syntax extensions.
  */
-export function parser(): Processor<Node<Data>, Node<Data>, Node<Data>, void> {
+export function parser(link = true): Processor<Node<Data>, Node<Data>, Node<Data>, void> {
   return unified()
     .use(remarkParse)
-    .use(links)
+    .use(link ? links : () => x => x) // FIXME
     .use(unnest)
     .use(remarkMath)
     .use(remarkRehype)

diff --git a/packages/viewer/public/index.html → packages/viewer/index.html b/packages/viewer/public/index.html → packages/viewer/index.html
@@ -27,7 +27,7 @@
 	<link rel='stylesheet' href='/build/vendor.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 
-	<script defer src='/build/bundle.js'></script>
+	<script type="module" src="/src/main.ts"></script>
 </head>
 
 <body>

diff --git a/packages/viewer/package.json b/packages/viewer/package.json
@@ -3,11 +3,12 @@
   "private": true,
   "version": "1.0.0",
   "license": "ISC",
+  "type": "module",
   "scripts": {
-    "build": "rollup -c",
+    "build": "vite build",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "dev": "rollup -c -w",
+    "dev": "vite",
     "start": "sirv public --single",
     "test": "vitest",
     "test:cov": "vitest --coverage",
@@ -33,29 +34,19 @@
     "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.2.0",
     "@tsconfig/svelte": "^3.0.0",
     "@types/hyperscript": "0.0.4",
     "@types/katex": "^0.16.0",
     "@types/page": "^1.8.0",
     "@types/unist": "^2.0.3",
     "cypress": "^12.7.0",
-    "rollup": "^3.18.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-css-only": "^4.3.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-svelte": "^7.1.4",
     "svelte": "^3.55.1",
     "svelte-check": "^1.0.0",
     "svelte-preprocess": "^5.0.1",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
+    "vite": "^4.3.5",
     "vitest": "^0.29.2",
     "wait-on": "^7.0.1"
   }

diff --git a/packages/viewer/rollup.config.mjs b/packages/viewer/rollup.config.mjs
diff --git a/packages/viewer/src/components/App.svelte b/packages/viewer/src/components/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import 'katex/dist/katex.min.css'
+  // import 'katex/dist/katex.min.css'
   import 'bootstrap/dist/css/bootstrap.min.css'
 
   import { Router } from 'svelte-routing'

diff --git a/packages/viewer/src/components/Home.svelte b/packages/viewer/src/components/Home.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Link } from 'svelte-routing'
+  import Cite from './Shared/Cite.svelte'
 
   import { contributingUrl } from '../constants'
 </script>
@@ -104,3 +105,4 @@
     </li>
   </ul>
 </main>
+<Cite/>
diff --git a/packages/viewer/src/components/Search/Search.svelte b/packages/viewer/src/components/Search/Search.svelte
@@ -8,6 +8,7 @@
   import Results from './Results.svelte'
   import List from '../Spaces/List.svelte'
   import Age from '../Shared/Age.svelte'
+  import Cite from '../Shared/Cite.svelte'
 
   const text = writable('')
   const rawFormula = writable('')
@@ -30,6 +31,13 @@
 
   urlSearchParam('text', text)
   urlSearchParam('formula', rawFormula)
+
+  let title:string
+  $: if ($rawFormula.length > 0) {
+    title = `π-Base, Search for \`${$rawFormula}\``
+  } else {
+    title = "π-Base, Explore"
+  }
 </script>
 
 <div class="row">
@@ -51,6 +59,7 @@
         suggest={$suggest}
         {formula} />
     </div>
+    <Cite {title}/>
   </div>
   <div class="col-8">
     {#if $text || $formula}

diff --git a/packages/viewer/src/components/Shared/Cite.svelte b/packages/viewer/src/components/Shared/Cite.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  let url = ``;
+  onMount(() => url = window.location.href);
+  export let title: string|undefined = undefined;
+</script>
+
+<div class="text-center p-2">
+  <small>
+    Cite as:
+    <span class="text-muted">
+      The pi-Base Community.
+      {#if title}
+        <cite>{title}.</cite>
+      {:else}
+        <cite>π-Base, a community database of topological counterexamples.</cite>
+      {/if}
+      Available at: {url}
+      (Accessed: {new Date().toISOString().split('T')[0]}).
+    </span>
+  </small>
+</div>
diff --git a/packages/viewer/src/components/Shared/render-utils.ts b/packages/viewer/src/components/Shared/render-utils.ts
@@ -2,7 +2,7 @@ import { parser } from '@pi-base/core'
 // TODO
 // import { truncate } from './Display'
 
-const full = parser()
+const full = parser(false)
 // const truncated = parser().use([truncate])
 
 export async function render(body: string, truncate: boolean = false) {

diff --git a/packages/viewer/src/constants.ts b/packages/viewer/src/constants.ts
@@ -3,6 +3,6 @@ export const contributingUrl =
   `https://github.com/pi-base/data/blob/${mainBranch}/CONTRIBUTING.md`
 
 export const build = {
-  branch: '__buildBranch__',
-  version: '__buildVersion__'
+  branch: import.meta.env.VITE_BRANCH || 'unknown',
+  version: import.meta.env.VITE_VERSION || 'unknown',
 }
diff --git a/packages/viewer/tsconfig.json b/packages/viewer/tsconfig.json
@@ -5,7 +5,6 @@
     "cypress/**/*"
   ],
   "exclude": [
-    "rollup.config.js",
     "node_modules/*",
     "__sapper__/*",
     "public/*"
@@ -16,11 +15,13 @@
     "strict": true,
     "types": [
       "node",
-      "cypress"
+      "cypress",
+      "vite/client"
     ],
     "typeRoots": [
       "src/types",
       "node_modules/@types"
     ],
+    "module": "es2022"
   }
 }