sets up SPA for further diagnosis

package.json

@@ -12,7 +12,7 @@
     "@rdfjs/formats-common": "^3.1.0",
     "@rdfjs/parser-jsonld": "^2.1.0",
     "@rdfjs/parser-n3": "^2.0.1",
-    "@rdfjs/serializer-turtle": "^1.0.1",
+    "@rdfjs/serializer-turtle": "^1.1.1",
     "rdf-ext": "^2.2.0",
     "rdf-validate-shacl": "^0.4.5"
   },

packages/spa/package.json

@@ -15,10 +15,12 @@
     "rollup": "^3.15.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-polyfill-node": "^0.12.0",
     "rollup-plugin-svelte": "^7.1.2",
     "svelte": "^3.55.0"
   },
   "dependencies": {
+    "@docmaps/etl": "^0.1.1",
     "@source-data/render-rev": "github:source-data/render-rev",
     "@spider-ui/global-event-registry": ">= 0.2.3",
     "docmaps-sdk": "^0.5.0",

packages/spa/rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
 import css from 'rollup-plugin-css-only';
 
 const production = !process.env.ROLLUP_WATCH;
@@ -48,6 +49,8 @@ export default {
 		// a separate file - better for performance
 		css({ output: 'bundle.css' }),
 
+		nodePolyfills(),
+
 		// If you have external dependencies installed from
 		// npm, you'll most likely need these plugins. In
 		// some cases you'll need additional configuration -

packages/spa/src/App.svelte

@@ -8,14 +8,11 @@
   let renderRevElement;
 
   onMount(() => {
-    renderRevElement = document.createElement('render-rev')
+    renderRevElement = document.getElementById('renderrev')
   });
 
-  function fetchData() {
-    configureForDoiString(renderRevElement, inputDoi);
-    if (placeholder) {
-      placeholder.appendChild(renderRevElement);
-    }
+  async function fetchData() {
+    await configureForDoiString(renderRevElement, inputDoi);
   }
 </script>
 
@@ -28,7 +25,9 @@
   />
   <!-- Your other markup and code -->
   <button on:click="{fetchData}">Fetch Data</button>
-  <div id="result" bind:this="{placeholder}"></div>
+  <div id="result" bind:this="{placeholder}">
+    <render-rev id="renderrev" options={{display: {}}}></render-rev>
+  </div>
 </main>
 
 <style>

packages/spa/src/utils.js

@@ -1,52 +1,32 @@
-// import { fetchPublicationByDoi, CrossrefClient } from 'ts-etl'
-// import * as D from 'docmaps-sdk'
-// import { either } from 'fp-ts/lib/Either'
-//
-// export async function fetchData() {
-// 	// Create a CrossrefClient instance
-// 	const client = new CrossrefClient();
-//
-// 	// Create a DocmapPublisherT instance (replace with appropriate values)
-// 	const publisher = new D.DocmapPublisherT(/*...publisher values...*/);
-//
-//   const result: ErrorOrDocmap = await fetchPublicationByDoi(
-//     client,
-//     publisher,
-//     inputUrl
-//   );
-//
-//   either.fold(
-//     (error) => {
-//       // Handle the error case (e.g., display an error message)
-//       console.error('Error:', error);
-//     },
-//     (docmap: D.DocmapT[]) => {
-//       // Handle the success case
-//       const resultArea = document.getElementById('resultArea');
-//       const renderRev = document.createElement('render-rev');
-//       renderRev.setAttribute('source', JSON.stringify(docmap));
-//       resultArea.appendChild(renderRev);
-//     }
-//   )(result);
-// }
+import { ItemCmd, Client as CrossrefClient } from '@docmaps/etl'
+import util from 'util'
+import {isLeft} from 'fp-ts/lib/Either'
 
-export function configureForDoiString(rev, str) {
+export async function configureForDoiString(rev, str) {
 
   let config = {
     display: {
       publisherName: name => name.toUpperCase(),
     }
   }
 
-  try {
-    const url = new URL(str);
-    config["docmapsUrl"] = (_) => str;
-  } catch (e) {
-    config["doi"] = str;
-  }
-  console.log('running with', rev, str)
+  const result = await ItemCmd(
+    [str],
+    {
+      source: {
+	preset: 'crossref-api',
+	client: CrossrefClient,
+      },
+      publisher: {},
+    }
+  );
 
-  rev.configure({
-    ...config,
-  });
+  if (isLeft(result)) {
+    console.log(util.inspect(result.left, {depth: 7}))
+  } else {
+    rev.configure({
+      ...config,
+      docmaps: result.right,
+    });
+  }
 }