Add Environment Check

⚠️ UI Framework

This code will need to be adapted if you did not choose Lit as the UI framework earlier. The logic will remain the same but the code will need to be placed in different files/places.

1. Add Imports

At the top of ui/src/holochain-app.ts, add the following imports:

import { WeaveClient, initializeHotReload, isWeaveContext } from '@theweave/api'; 

2. Add Hot-Reloading

Add code to allow hot-reloading when later running your app in a sandboxed version of Moss.

For this, modify the code in ui/src/holochain-app.ts to insert the following code in the firstUpdated() method:

  async firstUpdated() {
    this.loading = true;

    // This line is assuming that you are using Vite as your dev server. If
    // you are using a different bundler, you may need to adjust the logic
    // to determine whether your Tool is running in dev mode or not.
    const isRunningInDevMode = (import.meta as any).env.DEV;  

    if (isRunningInDevMode) { 
      try { 
        await initializeHotReload(); 
      } catch (e) { 
        console.warn( 
          'Could not initialize applet hot-reloading. This is only expected to work in a Weave context in dev mode.'
        ); 
      } 
    } 

    try {
      this.client = await AppWebsocket.connect();
    } catch (e) {
      console.error(e);
    } finally {
      this.loading = false;
    }

3. Connect WeaveClient in Weave context

Add a check to determine wheter your app is running in a Weave context and if yes, connect the WeaveClient and use the app websocket connection that it contains instead of connecting with the AppWebsocket class.

  async firstUpdated() {
    this.loading = true;

    // insert hot-reloading logic here
    if ((import.meta as any).env.DEV) {
      try {
        await initializeHotReload();
      } catch (e) {
        console.warn(
          'Could not initialize applet hot-reloading. This is only expected to work in a Weave context in dev mode.'
        );
      }
    }

    try {
      this.client = await AppWebsocket.connect(); 
      if (isWeaveContext()) { 
        const weaveClient = await WeaveClient.connect(); 
        if (weaveClient.renderInfo.type !== "applet-view") throw new Error("This Tool does not implement cross-group views yet"); 
        this.client = weaveClient.renderInfo.appletClient; 
      } else { 
        this.client = await AppWebsocket.connect(); 
      } 
    } catch (e) {
      console.error(e);
    } finally {
      this.loading = false;
    }