Expose preview URL over GraphQL

lemonmade · Aug 23, 2022 · b3fc611 · b3fc611
1 parent 997b59a
commit b3fc611
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 26 deletions.
diff --git a/.changeset/curly-ligers-act.md b/.changeset/curly-ligers-act.md
@@ -0,0 +1,5 @@
+---
+'@watching/cli': patch
+---
+
+Expose preview URL over GraphQL
diff --git a/app/features/Developer/Console/graphql/DeveloperConsoleQuery.graphql b/app/features/Developer/Console/graphql/DeveloperConsoleQuery.graphql
@@ -30,15 +30,18 @@ query DeveloperConsole {
             startedAt
           }
         }
-        # supports {
-        #   name
-        #   module
-        #   conditions {
-        #     series {
-        #       handle
-        #     }
-        #   }
-        # }
+        extends {
+          target
+          module
+          preview {
+            url
+          }
+          conditions {
+            series {
+              handle
+            }
+          }
+        }
       }
     }
   }

diff --git a/packages/cli/source/commands/develop/develop.ts b/packages/cli/source/commands/develop/develop.ts
@@ -38,7 +38,11 @@ import {
   rootOutputDirectory,
   ensureRootOutputDirectory,
 } from '../../utilities/build';
-import {targetForExtension} from '../../utilities/open';
+import {
+  previewUrl,
+  addConnectSearchParam,
+  DEFAULT_PREVIEW_PATH,
+} from '../../utilities/preview';
 
 import {
   loadLocalApp,
@@ -53,8 +57,6 @@ import {createRollupConfiguration} from '../../utilities/rollup';
 import {run, createQueryResolver} from './graphql';
 import type {Builder, BuildState} from './types';
 
-const DEFAULT_OPEN_PATH = '/app/developer/console';
-
 export async function develop({ui, proxy}: {ui: Ui; proxy?: string}) {
   const app = await loadLocalApp();
 
@@ -143,7 +145,10 @@ export async function develop({ui, proxy}: {ui: Ui; proxy?: string}) {
       }
 
       if (key.name === 'enter' || key.name === 'return') {
-        await openUrl(watchUrl(DEFAULT_OPEN_PATH));
+        await open(
+          addConnectSearchParam(watchUrl(DEFAULT_PREVIEW_PATH), localSocketUrl)
+            .href,
+        );
       }
 
       if (key.sequence === '/' || key.sequence === '?') {
@@ -209,18 +214,12 @@ export async function develop({ui, proxy}: {ui: Ui; proxy?: string}) {
     extension: LocalExtension,
     extensionPoint?: LocalExtensionPointSupport,
   ) {
-    const target = await targetForExtension(extension, extensionPoint);
-    const url = watchUrl(target ?? DEFAULT_OPEN_PATH);
-    await openUrl(url);
-  }
+    const url = await previewUrl(extension, {
+      extensionPoint,
+      serverUrl: localSocketUrl,
+    });
 
-  async function openUrl(url: URL) {
-    const newUrl = new URL(url);
-    newUrl.searchParams.set(
-      'connect',
-      new URL('/connect', localSocketUrl).href,
-    );
-    await open(newUrl.href);
+    await open(url.href);
   }
 }
 

diff --git a/packages/cli/source/commands/develop/graphql.ts b/packages/cli/source/commands/develop/graphql.ts
@@ -5,6 +5,7 @@ import {
   createQueryResolver as createQueryResolverForSchema,
 } from '@lemonmade/graphql-live';
 
+import {previewUrl} from '../../utilities/preview';
 import type {LocalApp, LocalExtension} from '../../utilities/app';
 
 import type {Schema} from './schema';
@@ -67,6 +68,16 @@ export function createQueryResolver(
           object('ClipsExtensionPointSupport', {
             target: extensionPoint.target,
             module: extensionPoint.module,
+            preview: object('ClipsExtensionPointPreview', {
+              url: async (_, {rootUrl}) => {
+                const url = await previewUrl(extension, {
+                  extensionPoint,
+                  serverUrl: rootUrl,
+                });
+
+                return url.href;
+              },
+            }),
             conditions:
               extensionPoint.conditions?.map((condition) =>
                 object('ClipsExtensionPointSupportCondition', {

diff --git a/packages/cli/source/commands/develop/schema.graphql b/packages/cli/source/commands/develop/schema.graphql
@@ -49,9 +49,14 @@ type ClipsExtensionPointSupportCondition {
   series: ClipsExtensionPointSupportSeriesCondition
 }
 
+type ClipsExtensionPointPreview {
+  url: Url!
+}
+
 type ClipsExtensionPointSupport {
   target: ClipsExtensionPoint!
   module: String!
+  preview: ClipsExtensionPointPreview!
   conditions: [ClipsExtensionPointSupportCondition!]!
 }
 

diff --git a/packages/cli/source/utilities/open.ts → packages/cli/source/utilities/preview.ts b/packages/cli/source/utilities/open.ts → packages/cli/source/utilities/preview.ts
@@ -1,4 +1,6 @@
 import {type ExtensionPoint} from '@watching/clips';
+
+import {watchUrl} from './url';
 import {type LocalExtension, type LocalExtensionPointSupport} from './app';
 
 const TARGET_MAP: Record<
@@ -10,9 +12,32 @@ const TARGET_MAP: Record<
   'WatchThrough.Details.RenderAccessory': () => '/app/watchthrough/.random',
 };
 
-export async function targetForExtension(
+export const DEFAULT_PREVIEW_PATH = '/app/developer/console';
+
+export async function previewUrl(
+  extension: LocalExtension,
+  {
+    serverUrl,
+    extensionPoint,
+  }: {serverUrl: URL; extensionPoint?: LocalExtensionPointSupport},
+) {
+  const target = await targetForExtension(extension, extensionPoint);
+  const previewUrl = watchUrl(target ?? DEFAULT_PREVIEW_PATH);
+  return addConnectSearchParam(previewUrl, serverUrl);
+}
+
+export function addConnectSearchParam(url: URL, serverUrl: URL) {
+  const connectUrl = new URL('/connect', serverUrl);
+  connectUrl.protocol = connectUrl.protocol.replace(/^http/, 'ws');
+
+  url.searchParams.set('connect', connectUrl.href);
+
+  return url;
+}
+
+async function targetForExtension(
   extension: LocalExtension,
-  extensionPoint: LocalExtensionPointSupport | undefined = extension.extends[0],
+  extensionPoint = extension.extends[0],
 ) {
   if (extensionPoint == null) return undefined;
   return extensionPoint