Refactoring working usage, using web-worker package

README.md

@@ -119,9 +119,9 @@ GOBL Builder makes use of [gobl.cli](https://github.com/invopop/gobl.cli) for
 validating, calculating and building GOBL documents. This is done via a
 versioned WASM binary, distributed on `cdn.gobl.org`.
 
-The version of `gobl.cli` that is used is defined in the [package.json](./package.json) file under the `gobl_cli_version`.
+The version of `gobl.cli` that is used is defined in the [src/lib/worker.ts](./src/lib/worker.ts) file.
 
-To bump the version, update the value of `gobl_cli_version` (e.g. based on the
+To bump the version, update the value of `goblCliVersion` (e.g. based on the
 [latest release of
 `gobl.cli`](https://github.com/invopop/gobl.cli/releases/latest)), then commit
 the changes to GitHub to trigger a new release of `@invopop/gobl-builder` on
@@ -133,4 +133,4 @@ GOBL Builder is licensed under the [Apache-2.0 License](LICENSE).
 
 ---
 
-© 2022 Invopop, Ltd.
+© 2023 Invopop, S.L.

package.json

@@ -30,6 +30,10 @@
  "./editor/EditorProblem.svelte": {
  "svelte": "./dist/editor/EditorProblem.svelte",
  "types": "./dist/editor/EditorProblem.svelte.d.ts"
+ },
+ "./editor/EditorProblem": {
+ "import": "./dist/editor/EditorProblem.js",
+ "types": "./dist/editor/EditorProblem.d.ts"
  }
  },
  "files": [
@@ -78,7 +82,8 @@
  "svelte": "^4.1.2",
  "svelte-floating-ui": "^1.5.3",
  "utf8": "^3.0.0",
- "vscode-json-languageservice": "5.3.5"
+ "vscode-json-languageservice": "5.3.5",
+ "web-worker": "^1.2.0"
  },
  "overrides": {
  "monaco-editor": {

src/lib/GOBLBuilder.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
- import { editor, editorProblems, envelope, envelopeAndEditorJSON, keypair } from "$lib/stores.js";
+ import { editor, envelope, envelopeAndEditorJSON, keypair } from "$lib/gobl/stores.js";
  import MenuBar from "./menubar/MenuBar.svelte";
  import Editor from "./editor/Editor.svelte";
- import { isEnvelope } from "./gobl.js";
+ import { isEnvelope } from "./gobl/index.js";
  import { problemSeverityMap, type EditorProblem } from "./editor/EditorProblem.js";
+ import { editorProblems } from "./editor/store.js";
 
  const dispatch = createEventDispatcher();
 

src/lib/actions/Build.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import * as GOBL from "$lib/gobl.js";
+ import * as GOBL from "$lib/gobl/index.js";
  import { encodeUTF8ToBase64 } from "$lib/encodeUTF8ToBase64.js";
- import { createNotification, Severity } from "$lib/notifications/index.js";
- import { envelope, editor, goblError, type GOBLError } from "$lib/stores.js";
+ import { createNotification } from "$lib/notifications/index.js";
+ import { Severity } from "$lib/gobl/stores.js";
+ import { envelope, editor, goblError, type GOBLError } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/actions/ClearEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import { editor, envelope } from "$lib/stores.js";
+ import { editor, envelope } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/actions/ExportDoc.svelte

@@ -2,7 +2,7 @@
  import { createEventDispatcher } from "svelte";
  import type { SvelteComponent } from "svelte";
 
- import { envelope } from "$lib/stores.js";
+ import { envelope } from "$lib/gobl/stores.js";
  import Modal from "$lib/ui/Modal.svelte";
  import ExportDocContent from "./ExportDocContent.svelte";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";

src/lib/actions/ExportDocContent.svelte

@@ -3,8 +3,9 @@
  import fileSaver from "file-saver";
  import * as CountryList from "country-list";
 
- import { envelope } from "$lib/stores.js";
- import { createNotification, Severity } from "$lib/notifications/index.js";
+ import { envelope } from "$lib/gobl/stores.js";
+ import { createNotification } from "$lib/notifications/index.js";
+ import { Severity } from "$lib/gobl/stores.js";
  import { schemaIconMap } from "$lib/ui/icons/schemaIconMap.svelte";
  import DocIcon from "$lib/ui/DocIcon.svelte";
 
@@ -108,7 +109,7 @@
  {#if previewLoading}
  <svg
  role="status"
- class="w-5 h-5 text-gray-500 animate-spin  fill-gray-300"
+ class="w-5 h-5 text-gray-500 animate-spin fill-gray-300"
  viewBox="0 0 100 101"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"

src/lib/actions/Redo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import { redoAvailable } from "$lib/stores.js";
+ import { redoAvailable } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/actions/Sign.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import * as GOBL from "$lib/gobl.js";
+ import * as GOBL from "$lib/gobl/index.js";
  import { encodeUTF8ToBase64 } from "$lib/encodeUTF8ToBase64.js";
- import { createNotification, Severity } from "$lib/notifications/index.js";
- import { envelope, editor, keypair, goblError, type GOBLError } from "$lib/stores.js";
+ import { createNotification } from "$lib/notifications/index.js";
+ import { Severity } from "$lib/gobl/stores.js";
+ import { envelope, editor, keypair, goblError, type GOBLError } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/actions/Undo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import { undoAvailable } from "$lib/stores.js";
+ import { undoAvailable } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/actions/Validate.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
 
- import * as GOBL from "$lib/gobl.js";
+ import * as GOBL from "$lib/gobl/index.js";
  import { encodeUTF8ToBase64 } from "$lib/encodeUTF8ToBase64.js";
- import { createNotification, Severity } from "$lib/notifications/index.js";
- import { envelope, envelopeIsSigned, editor, goblError, type GOBLError } from "$lib/stores.js";
+ import { createNotification } from "$lib/notifications/index.js";
+ import { Severity } from "$lib/gobl/stores.js";
+ import { envelope, envelopeIsSigned, editor, goblError, type GOBLError } from "$lib/gobl/stores.js";
  import { iconButtonClasses } from "$lib/ui/iconButtonClasses.js";
  import Tooltip from "$lib/ui/Tooltip.svelte";
 

src/lib/editor/Editor.svelte

@@ -8,14 +8,8 @@
 
  import { onDestroy, onMount } from "svelte";
  import { slide } from "svelte/transition";
- import {
- editor,
- editorProblems as problems,
- goblError,
- redoAvailable,
- undoAvailable,
- envelope,
- } from "$lib/stores.js";
+ import { editor, goblError, redoAvailable, undoAvailable, envelope } from "$lib/gobl/stores.js";
+ import { editorProblems as problems } from "./store.js";
  import EditorProblem from "./EditorProblem.svelte";
  import WarningIcon from "$lib/ui/icons/WarningIcon.svelte";
  import ErrorIcon from "$lib/ui/icons/ErrorIcon.svelte";

src/lib/editor/store.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+import type * as monaco from "monaco-editor";
+
+export const editorProblems = writable<monaco.editor.IMarker[]>([]);

src/lib/gobl.ts → src/lib/gobl/index.ts

@@ -1,6 +1,7 @@
-import GOBLWorker from "./worker?worker";
-import { createNotification, type Notification } from "$lib/notifications/index.js";
-import type { GOBLError } from "$lib/stores.js";
+// import GOBLWorker from "./worker?worker";
+import Worker from "web-worker";
+import type { GOBLError, Notification } from "./stores.js";
+import { notifications } from "./stores.js";
 
 type BaseBulkRequest = {
  req_id?: string;
@@ -88,7 +89,8 @@ type InFlightBulkRequest = {
 
 const queue: BulkRequest[] = [];
 const inFlight: Record<string, InFlightBulkRequest> = {};
-const worker = new GOBLWorker();
+//const worker = new GOBLWorker();
+const worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
 
 let reqId = 0;
 let ready = false;
@@ -104,7 +106,7 @@ worker.onmessage = ({ data }: MessageEvent<ReadyMessage | Notification | BulkRes
  }
 
  if ("message" in data) {
- createNotification(data);
+ notifications.set(data);
  return true;
  }
 

src/lib/stores.ts → src/lib/gobl/stores.ts

@@ -1,6 +1,5 @@
 import { derived, writable } from "svelte/store";
-import type * as monaco from "monaco-editor";
-import * as GOBL from "$lib/gobl.js";
+import * as GOBL from "$lib/gobl/index.js";
 
 function createKeypairStore() {
  const { subscribe, set } = writable<GOBL.Keypair | null>(null);
@@ -76,6 +75,30 @@ export const envelopeAndEditorJSON = derived([envelope, editor], ([$envelope, $e
  return [envelopeValue, $editor];
 });
 
+// Severity is used for error messages
+export enum Severity {
+ Info = "info",
+ Error = "error",
+ Success = "success",
+}
+
+// Notification is used for communicating error messages
+export type Notification = {
+ severity: Severity;
+ message: string;
+ context?: string;
+};
+
+function createNotificationStore() {
+ const { subscribe, set } = writable<Notification | null>(null);
+ return {
+ subscribe,
+ set,
+ };
+}
+
+export const notifications = createNotificationStore();
+
 export type GOBLError = {
  message: string;
  code: number;
@@ -90,6 +113,4 @@ function createGOBLErrorStore() {
  };
 }
 
-export const editorProblems = writable<monaco.editor.IMarker[]>([]);
-
 export const goblError = createGOBLErrorStore();

src/lib/worker.ts → src/lib/gobl/worker.ts

@@ -2,9 +2,7 @@ export type {}; // Needed when compiling with `--isolatedModules`.
 
 import "./wasm_exec.js";
 
-// GOBL CLI version defined in package.json
-declare const GOBL_CLI_VERSION: string;
-const goblCliVersion = GOBL_CLI_VERSION;
+const goblCliVersion = "0.64.0";
 
 const wasmUrl = `https://cdn.gobl.org/cli/gobl.${goblCliVersion}.wasm`;
 

src/lib/menubar/EnvelopeHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import { envelope } from "$lib/stores.js";
+ import { envelope } from "$lib/gobl/stores.js";
  $: head = $envelope?.head;
 </script>
 

src/lib/menubar/EnvelopeSignatures.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import { envelope } from "$lib/stores.js";
+ import { envelope } from "$lib/gobl/stores.js";
  $: sigs = $envelope?.sigs;
 </script>
 

src/lib/menubar/MenuBar.svelte

@@ -12,7 +12,7 @@
 
  import ModalBackdrop from "$lib/ui/ModalBackdrop.svelte";
  import Modal from "$lib/ui/Modal.svelte";
- import { envelope, envelopeIsDraft, envelopeIsSigned } from "$lib/stores.js";
+ import { envelope, envelopeIsDraft, envelopeIsSigned } from "$lib/gobl/stores.js";
  import EnvelopeHeader from "./EnvelopeHeader.svelte";
  import EnvelopeSignatures from "./EnvelopeSignatures.svelte";
  import Tooltip from "$lib/ui/Tooltip.svelte";

src/lib/notifications/Notification.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { clsx } from "clsx";
- import { Severity } from "$lib/notifications/index.js";
+ import { Severity } from "$lib/gobl/stores.js";
 
  export let severity: Severity = Severity.Info;
  export let message: string;

src/lib/notifications/Notifications.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
  import { fly } from "svelte/transition";
 
- import type { Notification } from "./index.js";
+ import type { Notification } from "$lib/gobl/stores.js";
  import Alert from "./Notification.svelte";
 
  export let notifications = new Set<Notification>();

src/lib/notifications/index.ts

@@ -1,16 +1,5 @@
 import Notifications from "./Notifications.svelte";
-
-export enum Severity {
- Info = "info",
- Error = "error",
- Success = "success",
-}
-
-export type Notification = {
- severity: Severity;
- message: string;
- context?: string;
-};
+import type { Notification } from "$lib/gobl/stores.js";
 
 const notifications = new Set<Notification>();
 

vite.config.ts

@@ -1,10 +1,34 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import packageJson from "./package.json";
+//import { resolve } from "path";
 
 export default defineConfig({
  plugins: [sveltekit()],
  define: {
  GOBL_CLI_VERSION: JSON.stringify(packageJson.gobl_cli_version),
  },
+ /*
+ build: {
+ // Here we try to compile the gobl stuff into a single source
+ lib: {
+ entry: resolve(__dirname, "lib/gobl/index.ts"),
+ name: "GOBL",
+ fileName: "gobl",
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: ["svelte"],
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {
+ svelte: "Svelte",
+ },
+ inlineDynamicImports: false,
+ },
+ },
+ },
+ */
 });