experiments(dui3): super wip work

packages/dui3/components/header/NavBar.vue

@@ -14,10 +14,15 @@
               class="hidden md:inline-block"
             /> -->
             <PortalTarget name="navigation"></PortalTarget>
+            <FormButton size="xs" color="card" @click="$bindings.openDevTools()">
+              Show Dev Tools
+            </FormButton>
           </div>
         </div>
       </div>
     </div>
   </nav>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { $bindings } = useNuxtApp()
+</script>

packages/dui3/lib/accounts/composables/setup.ts

@@ -5,7 +5,9 @@ import { resolveClientConfig } from '~/lib/core/configs/apollo'
 import { Account } from '~/types'
 
 export type DUIAccount = {
+  /** account info coming from the host app */
   accountInfo: Account
+  /** the graphql client; a bit superflous */
   client: ApolloClient<unknown>
 }
 

packages/dui3/plugins/00.bindings.ts

@@ -0,0 +1,43 @@
+import { ICefSharp, IWebViev, WebUiBindingType, MockedBindings } from '~/types'
+
+declare let CefSharp: ICefSharp
+declare let chrome: IWebViev
+declare let WebUIBinding: WebUiBindingType
+
+export default defineNuxtPlugin(async () => {
+  let bindings: WebUiBindingType | undefined = undefined
+
+  try {
+    if (!CefSharp) throw new Error('No global CefSharp object found.')
+    await CefSharp.BindObjectAsync('WebUIBinding')
+    console.info('Bound WebUIBinding object for CefSharp.')
+    bindings = WebUIBinding
+  } catch (e) {
+    console.warn('Failed to bind CefSharp.')
+    console.warn(e)
+  }
+
+  try {
+    if (!chrome.webview) throw new Error('No global Webview2 object found.')
+    bindings = chrome.webview.hostObjects.WebUIBinding
+    console.info('Bound WebUIBinding object for Webview2.')
+    const res = await bindings.sayHi('Test')
+    console.log(res)
+  } catch (e) {
+    console.warn('Failed to bind Webview2.')
+    console.warn(e)
+  }
+
+  // TODO: continue falling back for things like sketchup, rhino mac (which would use shitty url hacking scheme stuff)
+
+  if (!bindings) {
+    console.warn('No bindings found - falling back to mocked bindings.')
+    bindings = MockedBindings
+  }
+
+  return {
+    provide: {
+      bindings
+    }
+  }
+})

packages/dui3/plugins/00.cefPlugin.ts

@@ -1,26 +1,23 @@
-import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
+// import { ICefSharp, WebUiBindingType, MockedBindings } from '~/types'
 
-declare let CefSharp: ICefSharp
-declare let WebUIBinding: WebUiBindingType
+// declare let CefSharp: ICefSharp
+// declare let WebUIBinding: WebUiBindingType
 
 export default defineNuxtPlugin(async () => {
-  let bindings: WebUiBindingType
-
-  try {
-    if (!CefSharp) throw new Error('No global CefSharp object found.')
-    await CefSharp.BindObjectAsync('WebUIBinding')
-    console.info('Bound WebUIBinding object for CefSharp.')
-    bindings = WebUIBinding
-  } catch (e) {
-    console.error('Failed to bind CefSharp, will use mocked bindings.')
-    console.error(e)
-
-    bindings = MockedBindings
-  }
-
-  return {
-    provide: {
-      bindings
-    }
-  }
+  // let bindings: WebUiBindingType
+  // try {
+  //   if (!CefSharp) throw new Error('No global CefSharp object found.')
+  //   await CefSharp.BindObjectAsync('WebUIBinding')
+  //   console.info('Bound WebUIBinding object for CefSharp.')
+  //   bindings = WebUIBinding
+  // } catch (e) {
+  //   console.error('Failed to bind CefSharp, will use mocked bindings.')
+  //   console.error(e)
+  //   bindings = MockedBindings
+  // }
+  // return {
+  //   provide: {
+  //     bindings
+  //   }
+  // }
 })

packages/dui3/plugins/apollo.ts

@@ -2,32 +2,39 @@
 // import { ApolloClients } from '@vue/apollo-composable'
 // import { resolveClientConfig } from '~/lib/core/configs/apollo'
 
-export default defineNuxtPlugin((nuxtApp) => {
-  /**
-   * TODO: You can use `window` here to get credentials for all of the clients
-   * we need from the parent connectors. The following is just an example
-   */
-  // const { $bindings } = useNuxtApp()
-  // const apolloClients = {
-  //   latest: new ApolloClient(
-  //     // Imagine endpoint & token is resolved from window or something
-  //     resolveClientConfig({
-  //       httpEndpoint: 'https://latest.speckle.systems/graphql',
-  //       authToken: () => null
-  //     })
-  //   ),
-  //   xyz: new ApolloClient(
-  //     // Imagine endpoint & token is resolved from window or something
-  //     resolveClientConfig({
-  //       httpEndpoint: 'https://speckle.xyz/graphql',
-  //       authToken: () => null
-  //     })
-  //   )
-  // }
-  // nuxtApp.vueApp.provide(ApolloClients, apolloClients)
-  // return {
-  //   provide: {
-  //     apolloClients
-  //   }
-  // }
+export default defineNuxtPlugin(() => {
+  // Note: as accounts can be refreshed at runtime, i tried as an experiment
+  // moving them to a composable (/lib/accounts/composables/setup.ts)
 })
+
+// export default defineNuxtPlugin((nuxtApp) => {
+//   /**
+//    * TODO: You can use `window` here to get credentials for all of the clients
+//    * we need from the parent connectors. The following is just an example
+//    */
+//   const { $bindings } = useNuxtApp()
+
+//   const apolloClients = {
+//     latest: new ApolloClient(
+//       // Imagine endpoint & token is resolved from window or something
+//       resolveClientConfig({
+//         httpEndpoint: 'https://latest.speckle.systems/graphql',
+//         authToken: () => null
+//       })
+//     ),
+//     xyz: new ApolloClient(
+//       // Imagine endpoint & token is resolved from window or something
+//       resolveClientConfig({
+//         httpEndpoint: 'https://speckle.xyz/graphql',
+//         authToken: () => null
+//       })
+//     )
+//   }
+
+//   nuxtApp.vueApp.provide(ApolloClients, apolloClients)
+//   return {
+//     provide: {
+//       apolloClients
+//     }
+//   }
+// })

packages/dui3/types/index.ts

@@ -21,10 +21,19 @@ export interface ICefSharp {
   BindObjectAsync: (arg: string) => Promise<void>
 }
 
+export interface IWebViev {
+  webview: {
+    hostObjects: {
+      WebUIBinding: WebUiBindingType
+    }
+  }
+}
+
 export type WebUiBindingType = {
   getAccounts: () => Promise<string>
   sayHi: (name: string) => Promise<string>
   getSourceAppName: () => Promise<string>
+  openDevTools: () => Promise<void>
 }
 
 export const MockedBindings: WebUiBindingType = {
@@ -36,5 +45,8 @@ export const MockedBindings: WebUiBindingType = {
   },
   async getSourceAppName() {
     return 'Mocked App'
+  },
+  async openDevTools() {
+    console.log('Open it yourself. I am just a set of mocked bindings!!!')
   }
 }