Merge pull request #425 from holochain/fix/svelte-client-race-condition

Fix race condition in Svelte template
holochain · Dec 5, 2024 · a1cf975 · a1cf975
2 parents bf8826d + 4434b58
commit a1cf975
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 32 deletions.
diff --git a/...role_name}}/{{coordinator_zome_manifest.name}}/{{pascal_case collection_name}}.svelte.hbs b/...role_name}}/{{coordinator_zome_manifest.name}}/{{pascal_case collection_name}}.svelte.hbs
@@ -11,11 +11,12 @@ import type {
   HolochainError,
 } from '@holochain/client';
 import { SignalType } from '@holochain/client'
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import {{pascal_case referenceable.name}}Detail from './{{pascal_case referenceable.name}}Detail.svelte';
 import type { {{pascal_case coordinator_zome_manifest.name}}Signal } from './types';
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 
 let hashes: Array<{{referenceable.hash_type}}> = [];
 let loading = false;
@@ -32,6 +33,7 @@ onMount(async () => {
       throw new Error(`The author input is required for the {{pascal_case collection_name}} element`);
     }
   {{/if}}
+  client = await appClientContext.getClient();
   await fetch{{pascal_case (plural referenceable.name)}}();
   client.on('signal', signal => {
     if (!(SignalType.App in signal)) return;

diff --git a/...ame}}/{{coordinator_zome_manifest.name}}/Create{{pascal_case entry_type.name}}.svelte.hbs b/...ame}}/{{coordinator_zome_manifest.name}}/Create{{pascal_case entry_type.name}}.svelte.hbs
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher, getContext, onMount } from 'svelte';
 import type { AppClient, Record, EntryHash, AgentPubKey, ActionHash, DnaHash, HolochainError } from '@holochain/client';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import type { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from './types';
 {{#uniq_lines}}
   {{#each entry_type.fields}}
@@ -13,7 +13,8 @@ import type { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (e
 {{/uniq_lines}}
 
 const dispatch = createEventDispatcher();
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 
 {{#each entry_type.fields}}
   {{#if widget }}
@@ -38,7 +39,7 @@ export let {{camel_case field_name}}{{#if (eq cardinality "single")}}!{{/if}}: {
 $: {{#each entry_type.fields}}{{camel_case field_name}}{{#unless @last}}, {{/unless}}{{/each}};
 $: is{{pascal_case entry_type.name}}Valid = true{{#each entry_type.fields}}{{#if widget}}{{#if (eq cardinality "single")}} && {{> (concat field_type.type "/" widget "/is-valid") variable_to_validate=(camel_case field_name) }}{{/if}}{{#if (eq cardinality "vector")}} && {{camel_case field_name}}.every(e => {{> (concat field_type.type "/" widget "/is-valid") variable_to_validate="e" }}){{/if}}{{/if}}{{/each}};
 
-onMount(() => {
+onMount(async () => {
 {{#each entry_type.fields}}
   {{#if (not widget) }}
     {{#if (ne cardinality "option")}}
@@ -48,6 +49,7 @@ onMount(() => {
     {{/if}}
   {{/if}}
 {{/each}}
+  client = await appClientContext.getClient();
 });
 
 async function create{{pascal_case entry_type.name}}() {

diff --git a/...lural ..¡entry_type.name)}}For{{pascal_case linked_from.name}}.svelte{{¡if}}{{¡each}}.hbs b/...lural ..¡entry_type.name)}}For{{pascal_case linked_from.name}}.svelte{{¡if}}{{¡each}}.hbs
@@ -12,11 +12,12 @@ import type {
   SignalType,
 } from '@holochain/client';
 import { SignalType } from '@holochain/client';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import type { {{pascal_case ../entry_type.name}}, {{pascal_case ../coordinator_zome_manifest.name}}Signal } from './types';
 import {{pascal_case ../entry_type.name}}Detail from './{{pascal_case ../entry_type.name}}Detail.svelte';
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 
 let hashes: Array<ActionHash> | undefined = [];
 let loading: boolean;
@@ -30,7 +31,7 @@ onMount(async () => {
   if ({{camel_case linked_from.singular_arg}} === undefined) {
     throw new Error(`The {{camel_case linked_from.singular_arg}} input is required for the {{pascal_case (plural ../entry_type.name)}}For{{pascal_case linked_from.name}} element`);
   }
-
+  client = await appClientContext.getClient();
   await fetch{{pascal_case (plural ../entry_type.name)}}();
 
   client.on('signal', async signal => {

diff --git a/..._manifest.name}}/{{#if crud.update}}Edit{{pascal_case entry_type.name}}.svelte{{¡if}}.hbs b/..._manifest.name}}/{{#if crud.update}}Edit{{pascal_case entry_type.name}}.svelte{{¡if}}.hbs
@@ -2,7 +2,7 @@
 import { createEventDispatcher, getContext, onMount } from 'svelte';
 import type { AppClient, Record, EntryHash, AgentPubKey, DnaHash, ActionHash, HolochainError } from '@holochain/client';
 import { decode } from '@msgpack/msgpack';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import type { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from './types';
 {{#uniq_lines}}
   {{#each entry_type.fields}}
@@ -13,7 +13,8 @@ import type { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (e
   {{/each}}
 {{/uniq_lines}}
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 const dispatch = createEventDispatcher();
 
 export let currentRecord!: Record;
@@ -35,7 +36,7 @@ let {{camel_case field_name}}: Array<{{> (concat field_type.type "/type")}} | un
 $: {{#each (filter entry_type.fields "widget")}}{{camel_case field_name}}{{#unless @last}}, {{/unless}}{{/each}};
 $: is{{pascal_case entry_type.name}}Valid = true{{#each entry_type.fields}}{{#if widget}}{{#if (eq cardinality "single")}} && {{> (concat field_type.type "/" widget "/is-valid") variable_to_validate=(camel_case field_name) }}{{/if}}{{#if (eq cardinality "vector")}} && {{camel_case field_name}}.every(e => {{> (concat field_type.type "/" widget "/is-valid") variable_to_validate="e" }}){{/if}}{{/if}}{{/each}};
 
-onMount(() => {
+onMount(async () => {
   if (!currentRecord) {
     throw new Error(`The currentRecord input is required for the Edit{{pascal_case entry_type.name}} element`);
   }
@@ -44,6 +45,7 @@ onMount(() => {
     throw new Error(`The original{{pascal_case entry_type.name}}Hash input is required for the Edit{{pascal_case entry_type.name}} element`);
   }
 {{/if}}
+client = await appClientContext.getClient();
 });
 
 async function update{{pascal_case entry_type.name}}() {

diff --git a/...ame}}/{{coordinator_zome_manifest.name}}/{{pascal_case entry_type.name}}Detail.svelte.hbs b/...ame}}/{{coordinator_zome_manifest.name}}/{{pascal_case entry_type.name}}Detail.svelte.hbs
@@ -2,7 +2,7 @@
 import { createEventDispatcher, onMount, getContext } from 'svelte';
 import { decode } from '@msgpack/msgpack';
 import type { Record, ActionHash, AppClient, EntryHash, AgentPubKey, DnaHash, HolochainError } from '@holochain/client';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import type { {{pascal_case entry_type.name}}{{#each entry_type.fields}}{{#if (eq field_type.type "Enum")}}, {{field_type.label}}{{/if}}{{/each}} } from './types';
 {{#if crud.update}}
 import Edit{{pascal_case entry_type.name}} from './Edit{{pascal_case entry_type.name}}.svelte';
@@ -16,7 +16,8 @@ import Edit{{pascal_case entry_type.name}} from './Edit{{pascal_case entry_type.
   {{/each}}
 {{/uniq_lines}}
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 const dispatch = createEventDispatcher();
 
 let loading: boolean = false;
@@ -35,6 +36,7 @@ onMount(async () => {
   if ({{camel_case entry_type.name}}Hash === undefined) {
     throw new Error(`The {{camel_case entry_type.name}}Hash input is required for the {{pascal_case entry_type.name}}Detail element`);
   }
+  client = await appClientContext.getClient();
   await fetch{{pascal_case entry_type.name}}();
 });
 

diff --git a/templates/ui-frameworks/svelte/example/ui/src/App.svelte.hbs b/templates/ui-frameworks/svelte/example/ui/src/App.svelte.hbs
@@ -5,27 +5,32 @@
   import AllPosts from './forum/posts/AllPosts.svelte';
   import CreatePost from './forum/posts/CreatePost.svelte';
 
-  import { clientContext } from './contexts';
+  import { type ClientContext, clientContext } from './contexts';
 
   let client: AppClient | undefined;
   let loading = false;
 
-  $: client, loading;
+  const appClientContext = {
+    getClient: async () => {
+      if (!client) {
+        client = await AppWebsocket.connect();
+      }
+      return client;
+    },
+  };
 
   onMount(async () => {
     loading = true;
     try {
-      client = await AppWebsocket.connect();
+      client = await appClientContext.getClient();
     } catch(e) {
       console.error(e)
     } finally {
       loading = false;
     }
   });
 
-  setContext(clientContext, {
-    getClient: () => client,
-  });
+  setContext<ClientContext>(clientContext, appClientContext);
 </script>
 
 <main>

diff --git a/...ural from_referenceable.name)}}For{{pascal_case to_referenceable.name}}.svelte{{¡if}}.hbs b/...ural from_referenceable.name)}}For{{pascal_case to_referenceable.name}}.svelte{{¡if}}.hbs
@@ -11,11 +11,12 @@ import type {
   HolochainError,
 } from '@holochain/client';
 import { SignalType } from '@holochain/client';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import {{pascal_case from_referenceable.name}}Detail from './{{pascal_case from_referenceable.name}}Detail.svelte';
 import type { {{pascal_case coordinator_zome_manifest.name}}Signal } from './types';
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 
 let hashes: Array<{{from_referenceable.hash_type}}> | undefined;
 let loading = false;
@@ -32,6 +33,7 @@ onMount(async () => {
 
   try {
     loading = true;
+    client = await appClientContext.getClient();
     const links: Array<Link> = await client.callZome({
       role_name: '{{dna_role_name}}',
       zome_name: '{{snake_case coordinator_zome_manifest.name}}',

diff --git a/...ural to_referenceable.name)}}For{{pascal_case from_referenceable.name}}.svelte{{¡if}}.hbs b/...ural to_referenceable.name)}}For{{pascal_case from_referenceable.name}}.svelte{{¡if}}.hbs
@@ -11,11 +11,12 @@ import type {
   HolochainError,
 } from '@holochain/client';
 import { SignalType } from '@holochain/client';
-import { clientContext } from '../../contexts';
+import { type ClientContext, clientContext } from '../../contexts';
 import {{pascal_case to_referenceable.name}}Detail from './{{pascal_case to_referenceable.name}}Detail.svelte';
 import type { {{pascal_case coordinator_zome_manifest.name}}Signal } from './types';
 
-const client: AppClient = (getContext(clientContext) as any).getClient();
+let client: AppClient;
+const appClientContext = getContext<ClientContext>(clientContext);
 
 let hashes: Array<{{to_referenceable.hash_type}}> | undefined;
 let loading = false;
@@ -29,7 +30,7 @@ onMount(async () => {
   if (!{{camel_case from_referenceable.singular_arg}}) {
     throw new Error(`The {{camel_case from_referenceable.singular_arg}} input is required for the {{pascal_case (plural to_referenceable.name)}}For{{pascal_case from_referenceable.name}} element`);
   }
-
+  client = await appClientContext.getClient();
   try {
     loading = true;
     const links: Array<Link> = await client.callZome({

diff --git a/templates/ui-frameworks/svelte/web-app/ui/package.json.hbs b/templates/ui-frameworks/svelte/web-app/ui/package.json.hbs
@@ -18,7 +18,7 @@
     "@msgpack/msgpack": "^2.8.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.5.3",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^3.0.0",
     "bestzip": "^2.2.1",
     "rimraf": "^5.0.10",

diff --git a/templates/ui-frameworks/svelte/web-app/ui/src/App.svelte.hbs b/templates/ui-frameworks/svelte/web-app/ui/src/App.svelte.hbs
@@ -7,7 +7,7 @@
 {{/if}}
 
   import logo from './assets/holochainLogo.svg';
-  import { clientContext } from './contexts';
+  import { type ClientContext, clientContext } from './contexts';
 
 {{#if holo_enabled}}
   const IS_HOLO = ['true', '1', 't'].includes(import.meta.env.VITE_APP_IS_HOLO?.toLowerCase())
@@ -21,6 +21,15 @@
   let error: HolochainError | undefined;
   let loading = false;
 
+  const appClientContext = {
+    getClient: async () => {
+      if (!client) {
+        client = await AppWebsocket.connect();
+      }
+      return client;
+    },
+  };
+
   onMount(async () => {
   {{#if holo_enabled}}
     try {
@@ -37,7 +46,7 @@
         });
         (client as WebSdk).signUp({ cancellable: false });
       } else {
-        client = await AppWebsocket.connect();
+        client = await appClientContext.getClient();
         loading = false;
       }
     } catch (e) {
@@ -48,7 +57,7 @@
   {{else}}
     try {
       loading = true;
-      client = await AppWebsocket.connect();
+      client = await appClientContext.getClient();
     } catch (e) {
       error = e as HolochainError;
     } finally {
@@ -57,9 +66,7 @@
   {{/if}}
   });
 
-  setContext(clientContext, {
-    getClient: () => client,
-  });
+  setContext<ClientContext>(clientContext, appClientContext);
 </script>
 
 <main>

diff --git a/templates/ui-frameworks/svelte/web-app/ui/src/contexts.ts.hbs b/templates/ui-frameworks/svelte/web-app/ui/src/contexts.ts.hbs
@@ -1 +1,7 @@
-export const clientContext = 'AppClient';
+import { type AppClient } from "@holochain/client";
+
+export const clientContext = "AppClient";
+
+export type ClientContext = {
+  getClient: () => Promise<AppClient>;
+};