experiments(dui3): cleanup

packages/dui3/components/header/NavBar.vue

@@ -7,14 +7,8 @@
         <div class="flex items-center">
           <HeaderLogoBlock :active="false" class="mr-0" />
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
-            <!-- <HeaderNavLink
-              to="/"
-              name="Dashboard"
-              :separator="true"
-              class="hidden md:inline-block"
-            /> -->
             <PortalTarget name="navigation"></PortalTarget>
-            <FormButton size="xs" color="card" @click="$bindings.openDevTools()">
+            <FormButton size="xs" color="card" @click="$showDevTools()">
               Show Dev Tools
             </FormButton>
           </div>
@@ -24,5 +18,5 @@
   </nav>
 </template>
 <script setup lang="ts">
-const { $bindings } = useNuxtApp()
+const { $showDevTools } = useNuxtApp()
 </script>

packages/dui3/lib/bindings/definitions/baseBindings.ts

@@ -14,6 +14,11 @@ export interface IBaseBinding {
     event: E,
     callback: IBaseBindingHostEvents[E]
   ) => void
+  /**
+   * Note: this method does not need to be implemented in the .NET host application base bindings,
+   * it is served by the DUI3 bridge.
+   */
+  showDevTools: () => Promise<void>
 }
 
 export interface IBaseBindingHostEvents {
@@ -21,6 +26,7 @@ export interface IBaseBindingHostEvents {
   documentChanged: () => void
 }
 
+// An almost 1-1 mapping of what we need from the Core accounts class.
 export type Account = {
   id: string
   isDefault: boolean

packages/dui3/lib/bindings/definitions/testBindings.ts

@@ -1,7 +1,16 @@
+/**
+ * The name under which this binding will be registered.
+ */
+export const ITestBindingKey = 'testBinding'
+
+/**
+ * A test binding interface to ensure compatbility. Ideally all host environments would implement and register it.
+ */
 export interface ITestBinding {
   sayHi: (name: string, count: number, sayHelloNotHi: boolean) => Promise<string[]>
   goAway: () => Promise<void>
   getComplexType: () => Promise<ComplexType>
+  shouldThrow: () => Promise<void>
   triggerEvent: (eventName: string) => Promise<void>
   on: <E extends keyof ITestBindingEvents>(
     event: E,

packages/dui3/lib/bridge/generic.ts

@@ -35,13 +35,24 @@ export class GenericBridge extends BaseBridge {
 
   private async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
     const preserializedArgs = args.map((a) => JSON.stringify(a))
+
     // NOTE: RunMethod is a call to the .NET side.
     const result = await this.bridge.RunMethod(
       methodName,
       JSON.stringify(preserializedArgs)
     )
 
-    return JSON.parse(result) as unknown
+    const parsed = result ? (JSON.parse(result) as Record<string, unknown>) : null
+
+    if (parsed && parsed['error']) {
+      throw new Error(parsed['error'] as string)
+    }
+
+    return parsed
+  }
+
+  public showDevTools() {
+    this.bridge.ShowDevTools()
   }
 }
 

packages/dui3/lib/bridge/sketchup.ts

@@ -49,22 +49,17 @@ export class SketchupBridge extends BaseBridge {
     ;(globalThis as Record<string, unknown>).bindings = this
   }
 
-  // NOTE: Overriden function for now, need to be checked later payload can be unified or not.
-  // From sketchup we receive beatiful JSON object that we do not need to parse.
-  // This should be checked with .NET
+  // NOTE: Overriden emit as we do not need to parse the data back - the Sketchup bridge already parses it for us.
   emit(eventName: string, payload: string): void {
-    this.emitter.emit(eventName, payload)
+    this.emitter.emit(eventName, payload as unknown as Record<string, unknown>)
   }
 
   public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
-    // NOTE: as we want to have multiple sketchup bindings in the future, we will
-    // most likely change this method to specify which view/plugin/bindings we want.
-    // eslint-disable-next-line camelcase
-    // sketchup.exec({ name: 'getCommands', view_id: this.bindingsName })
     sketchup.getCommands(this.bindingsName)
 
+    //
     try {
       await this.isInitalized
       return true
@@ -148,4 +143,11 @@ export class SketchupBridge extends BaseBridge {
       delete this.requests[requestId]
     }
   }
+
+  public showDevTools() {
+    // eslint-disable-next-line no-alert
+    window.alert(
+      'Sketchup cannot do this. The dev tools menu is accessible via a right click.'
+    )
+  }
 }

packages/dui3/pages/index.vue

@@ -44,9 +44,10 @@ import { graphql } from '~/lib/common/generated/gql'
 import { ServerInfoTestQuery } from '~/lib/common/generated/gql/graphql'
 import { useDocumentInfoSetup } from '~/lib/document-info'
 
+const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
+
 const { $baseBinding } = useNuxtApp()
 const appName = await $baseBinding.getSourceApplicationName()
-const { accounts, refreshAccounts, defaultAccount } = await useAccountsSetup()
 
 const documentInfo = await useDocumentInfoSetup()
 

packages/dui3/pages/test.vue

@@ -21,16 +21,12 @@ import { ComplexType, TestEventArgs } from '~/lib/bindings/definitions/testBindi
 const { $testBindings } = useNuxtApp()
 
 $testBindings.on('emptyTestEvent', () => {
-  setTimeout(() => {
-    console.log('empty test event catched!')
-  }, 500)
+  console.log('empty test event catched!')
 })
 
 $testBindings.on('testEvent', (args: TestEventArgs) => {
-  setTimeout(() => {
-    console.log('test event catched!')
-    console.log(args)
-  }, 500)
+  console.log('test event catched!')
+  console.log(args)
 })
 
 async function triggerEmptyEvent() {

packages/dui3/plugins/00.bindings.ts

@@ -3,7 +3,7 @@ import { IRawBridge } from '~/lib/bridge/definitions'
 
 import { IBaseBinding } from '~/lib/bindings/definitions/baseBindings'
 import { SketchupBridge } from '~/lib/bridge/sketchup'
-import { ITestBinding } from '~/lib/bindings/definitions/testBindings'
+import { ITestBinding, ITestBindingKey } from '~/lib/bindings/definitions/testBindings'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
@@ -18,16 +18,23 @@ declare let globalThis: Record<string, unknown> & {
  * strip or customize functionality from the ui itself.
  */
 export default defineNuxtPlugin(async () => {
-  const testBindings = await tryHoistBinding<ITestBinding>('testBindings')
+  // Registers some default test bindings.
+  const testBindings = await tryHoistBinding<ITestBinding>(ITestBindingKey)
+  // Tries to register some non-existant bindings.
   const nonExistantBindings = await tryHoistBinding<IBaseBinding>('nonExistantBindings')
-
+  // Registers a set of default bindings.
   const baseBinding = await tryHoistBinding<IBaseBinding>('baseBinding')
 
+  const showDevTools = () => {
+    baseBinding.showDevTools()
+  }
+
   return {
     provide: {
       testBindings,
       nonExistantBindings,
-      baseBinding
+      baseBinding,
+      showDevTools
     }
   }
 })