[widgets] Add support for JavaScript script tag types (#1003)

palantir · Nov 21, 2024 · 7c13070 · 7c13070
1 parent bbf4647
commit 7c13070
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 22 deletions.
diff --git a/.changeset/rude-spoons-cheer.md b/.changeset/rude-spoons-cheer.md
@@ -0,0 +1,6 @@
+---
+"@osdk/widget-api.unstable": minor
+"@osdk/widget-manifest-vite-plugin": minor
+---
+
+Change manifest to support script types for entrypoint JS
diff --git a/packages/e2e.sandbox.todowidget/src/main.config.ts b/packages/e2e.sandbox.todowidget/src/main.config.ts
@@ -20,11 +20,11 @@ export default defineConfig({
   events: {
     updateHeader: {
       displayName: "Update header",
-      parameterIds: ["headerText"],
+      parameterUpdateIds: ["headerText"],
     },
     updateTodoItems: {
       displayName: "Update todo items",
-      parameterIds: ["todoItems"],
+      parameterUpdateIds: ["todoItems"],
     },
   },
 });
diff --git a/packages/e2e.sandbox.todowidget/src/second.config.ts b/packages/e2e.sandbox.todowidget/src/second.config.ts
@@ -15,7 +15,7 @@ const Config = defineConfig({
   events: {
     updateHeader: {
       displayName: "Update header",
-      parameterIds: ["headerText"],
+      parameterUpdateIds: ["headerText"],
     },
   },
 });

diff --git a/packages/widget.api.unstable/src/config.test.ts b/packages/widget.api.unstable/src/config.test.ts
@@ -147,7 +147,7 @@ describe("WidgetConfig", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test"],
+            parameterUpdateIds: ["test"],
           },
         },
       });
@@ -178,7 +178,7 @@ describe("WidgetConfig", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test4"],
+            parameterUpdateIds: ["test4"],
           },
         },
       });
@@ -210,11 +210,11 @@ describe("WidgetConfig", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test", "test2"],
+            parameterUpdateIds: ["test", "test2"],
           },
           myEvent2: {
             displayName: "My second event",
-            parameterIds: [],
+            parameterUpdateIds: [],
           },
         },
       });
@@ -245,7 +245,7 @@ describe("WidgetConfig", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test", "test2"],
+            parameterUpdateIds: ["test", "test2"],
           },
         },
       });
@@ -280,7 +280,7 @@ describe("WidgetConfig", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test", "test2"],
+            parameterUpdateIds: ["test", "test2"],
           },
         },
       });

diff --git a/packages/widget.api.unstable/src/config.ts b/packages/widget.api.unstable/src/config.ts
@@ -32,7 +32,7 @@ export type ParameterDefinition =
 
 export interface EventDefinition<P extends ParameterConfig> {
   displayName: string;
-  parameterIds: Array<ParameterId<P>>;
+  parameterUpdateIds: Array<ParameterId<P>>;
 }
 
 export type ParameterConfig = Record<string, ParameterDefinition>;
@@ -107,8 +107,8 @@ export type EventId<C extends WidgetConfig<C["parameters"]>> =
 export type EventParameterIdList<
   C extends WidgetConfig<C["parameters"]>,
   K extends EventId<C>,
-> = C["events"][K]["parameterIds"] extends Array<ParameterId<C["parameters"]>>
-  ? C["events"][K]["parameterIds"]
+> = C["events"][K]["parameterUpdateIds"] extends
+  Array<ParameterId<C["parameters"]>> ? C["events"][K]["parameterUpdateIds"]
   : never;
 
 /**

diff --git a/packages/widget.api.unstable/src/manifest.ts b/packages/widget.api.unstable/src/manifest.ts
@@ -44,13 +44,22 @@ export interface WidgetManifestConfigV1 {
   /**
    * List of entrypoint JS files to be loaded, in order. These will be placed on the page in script tags
    */
-  entrypointJs: string[];
+  entrypointJs: Array<{
+    /** Relative path of the JS file to load */
+    path: string;
+
+    /** The type to use in the script tag when loading this JS file */
+    type: "module" | "text/javascript";
+  }>;
 
   /**
    * Any CSS files to be loaded, in order.
    * @optional
    */
-  entrypointCss?: string[];
+  entrypointCss?: Array<{
+    /** Relative path of the CSS file to load */
+    path: string;
+  }>;
 
   /**
    * The map of parameter IDs to their definition

diff --git a/packages/widget.api.unstable/src/messages/widgetMessages.test.ts b/packages/widget.api.unstable/src/messages/widgetMessages.test.ts
@@ -42,11 +42,11 @@ describe("WidgetMessages", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test"],
+            parameterUpdateIds: ["test"],
           },
           myEvent2: {
             displayName: "My Event 2",
-            parameterIds: ["test", "test2"],
+            parameterUpdateIds: ["test", "test2"],
           },
         },
       });
@@ -90,11 +90,11 @@ describe("WidgetMessages", () => {
         events: {
           myEvent: {
             displayName: "My Event",
-            parameterIds: ["test"],
+            parameterUpdateIds: ["test"],
           },
           myEvent2: {
             displayName: "My Event 2",
-            parameterIds: ["test", "test2"],
+            parameterUpdateIds: ["test", "test2"],
           },
         },
       });

diff --git a/packages/widget.vite-plugin/README.md b/packages/widget.vite-plugin/README.md
@@ -44,11 +44,11 @@ export default defineConfig({
   events: {
     updateHeader: {
       displayName: "Update header",
-      parameterIds: ["headerText"],
+      parameterUpdateIds: ["headerText"],
     },
     updateTodoItems: {
       displayName: "Update todo items",
-      parameterIds: ["todoItems"],
+      parameterUpdateIds: ["todoItems"],
     },
   },
 });

diff --git a/packages/widget.vite-plugin/src/plugin.ts b/packages/widget.vite-plugin/src/plugin.ts
@@ -213,9 +213,14 @@ export function FoundryWidgetVitePlugin(options: Options = {}): Plugin {
             );
           }
           const widgetConfig: WidgetManifestConfig = {
-            entrypointJs: [chunk.fileName],
+            entrypointJs: [{
+              path: chunk.fileName,
+              type: "module",
+            }],
             entrypointCss: chunk.viteMetadata?.importedCss.size
-              ? [...chunk.viteMetadata.importedCss]
+              ? [...chunk.viteMetadata.importedCss].map((css) => ({
+                path: css,
+              }))
               : [],
             rid: entrypointFileIdToConfigMap[chunk.facadeModuleId].rid,
             version: packageJsonFile.version ?? "0.0.0",