[widgets] Support serving a basic widget manifest in vite serve mode (#…

…1022)

* [widgets] Support serving a basic widget manifest in vite serve mode

* comments

* changeset

* better error message

* handle 204

* cleanup  lockfile

* exclude from mrl

* lint

* drop sampling

.changeset/warm-schools-relax.md

@@ -0,0 +1,5 @@
+---
+"@osdk/widget-manifest-vite-plugin": minor
+---
+
+Support basic manifest in vite serve mode

.monorepolint.config.mjs

@@ -45,6 +45,7 @@ const nonStandardPackages = [
   "@osdk/monorepo.*", // internal monorepo packages
   "@osdk/tests.*",
   "@osdk/widget-client-react.unstable", // uses react
+  "@osdk/widget-manifest-vite-plugin", // has a vite-bundled app + react
   // removed the following from the repo to avoid it being edited
   // "@osdk/shared.client2", // hand written package that only exposes a symbol
 ];

packages/e2e.sandbox.todowidget/foundry.config.json

@@ -0,0 +1,11 @@
+{
+  "foundryUrl": "https://fake.palantirfoundry.com/",
+  "widget": {
+    "rid": "ri.viewregistry..view.fake",
+    "directory": "./dist",
+    "autoVersion": {
+      "type": "git-describe",
+      "tagPrefix": ""
+    }
+  }
+}

packages/monorepo.cspell/cspell.config.js

@@ -147,6 +147,8 @@ const cspell = {
       ignoreWords: [
         // it's an NPM package
         "escodegen",
+        "blueprintjs",
+        "picocolors",
         // used in a RID template literal string
         "viewregistry",
       ],

packages/widget.vite-plugin/README.md

@@ -163,3 +163,20 @@ This vite plugin will then discover both entrypoints and output a combined `.pal
   }
 }
 ```
+
+## Developer mode
+
+The vite plugin also automatically configures developer mode so that you can preview the changes you make locally live on your Foundry environment. For developer mode to work, make sure you follow the following steps:
+
+1. Have a `FOUNDRY_TOKEN` variable that has a token from your Foundry environment stored in it
+1. Have a `foundry.config.json` in the root of your project (where you run vite from), with at minimum the following contents:
+
+   ```json
+   {
+     "foundryUrl": "https://{YOUR_STACK_URL}",
+     "widget": {
+       "rid": "{YOUR_WIDGET_COLLECTION_RID}"
+       // Rest of config
+     }
+   }
+   ```

packages/widget.vite-plugin/client/app.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NonIdealState, Spinner, SpinnerSize } from "@blueprintjs/core";
+import React, { useEffect } from "react";
+
+export const App: React.FC = () => {
+  const [entrypointPaths, setEntrypointPaths] = React.useState<string[]>([]);
+  const [loading, setLoading] = React.useState<
+    | { state: "success" }
+    | { state: "failed"; error: string }
+    | { state: "loading" }
+    | { state: "not-started" }
+  >({ state: "not-started" });
+  useEffect(() => {
+    fetch("./entrypoints")
+      .then((res) => res.json())
+      .then(({ entrypoints }: { entrypoints: string[] }) => {
+        setEntrypointPaths(entrypoints);
+        // Poll the manifest endpoint until all entrypoints have JS files listed for them
+        let poll = window.setInterval(() => {
+          fetch("./manifest")
+            .then((res) => res.json())
+            .then(({ manifest }) => {
+              let clearInterval = true;
+              for (const entrypoint of entrypoints) {
+                if (
+                  manifest[entrypoint] == null
+                  || manifest[entrypoint].length === 0
+                ) {
+                  clearInterval = false;
+                }
+              }
+              if (clearInterval) {
+                window.clearInterval(poll);
+                setLoading({ state: "loading" });
+                // Tell the vite server to start dev mode for the specified entrypoint
+                fetch("./finish", {
+                  // TODO: Actually handle multiple entrypoints
+                  body: JSON.stringify({ entrypoint: entrypoints[0] }),
+                  method: "POST",
+                }).then((res) => {
+                  if (res.status !== 200) {
+                    setLoading({ state: "failed", error: res.statusText });
+                  } else {
+                    setLoading({ state: "success" });
+                    setTimeout(() => {
+                      res
+                        .json()
+                        .then(
+                          (
+                            { redirectUrl },
+                          ) => (window.location.href = redirectUrl),
+                        );
+                    }, 500);
+                  }
+                });
+              }
+            });
+        }, 100);
+      });
+  }, []);
+  return (
+    <div className="body">
+      {(loading.state === "loading" || loading.state === "not-started") && (
+        <NonIdealState
+          title="Generating developer mode manifest…"
+          icon={<Spinner intent="primary" />}
+        />
+      )}
+      {loading.state === "success" && (
+        <NonIdealState
+          title="Started dev mode"
+          icon="tick-circle"
+          description={
+            <div className="description">
+              <Spinner intent="primary" size={SpinnerSize.SMALL} />{" "}
+              Redirecting you…
+            </div>
+          }
+        />
+      )}
+      {loading.state === "failed" && (
+        <NonIdealState
+          title="Failed to start dev mode"
+          icon="error"
+          description={loading.error}
+        />
+      )}
+      {/* To load the entrypoint info, we have to actually load it in the browser to get vite to follow the module graph. Since we know these files will fail, we just load them in iframes set to display: none to trigger the load hook in vite */}
+      {entrypointPaths.map((entrypointPath) => (
+        <iframe key={entrypointPath} src={`/${entrypointPath}`} />
+      ))}
+    </div>
+  );
+};

packages/widget.vite-plugin/client/main.css

@@ -0,0 +1,20 @@
+.body {
+    align-items: center;
+    display: flex;
+    height: 100%;
+}
+
+body,
+html {
+    height: 100%;
+}
+
+iframe {
+    display: none;
+}
+
+.description {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}

packages/widget.vite-plugin/client/main.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import "@blueprintjs/core/lib/css/blueprint.css";
+import "./main.css";
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app.js";
+
+const root = document.querySelector("body")!;
+
+createRoot(root).render(
+  <App />,
+);

packages/widget.vite-plugin/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Palantir: Widget dev mode setup</title>
+  </head>
+  <body>
+    <div id="root-container">
+      <div id="root"></div>
+    </div>
+    <script type="module" src="/client/main.tsx"></script>
+  </body>
+</html>

packages/widget.vite-plugin/package.json

@@ -21,6 +21,7 @@
     }
   },
   "scripts": {
+    "build": "tsc --project tsconfig.client.json && vite build",
     "check-attw": "monorepo.tool.attw esm",
     "check-spelling": "cspell --quiet .",
     "clean": "rm -rf lib dist types build tsconfig.tsbuildinfo",
@@ -31,18 +32,27 @@
   "dependencies": {
     "@osdk/widget-api.unstable": "workspace:~",
     "escodegen": "^2.1.0",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.1",
+    "sirv": "^3.0.0"
   },
   "peerDependencies": {
     "vite": "^5.0.0"
   },
   "devDependencies": {
+    "@blueprintjs/core": "^5.16.0",
+    "@blueprintjs/icons": "^5.15.0",
     "@osdk/monorepo.api-extractor": "workspace:~",
     "@osdk/monorepo.tsconfig": "workspace:~",
     "@osdk/monorepo.tsup": "workspace:~",
     "@types/escodegen": "~0.0.10",
     "@types/estree": "^1.0.6",
     "@types/fs-extra": "^11.0.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18",
+    "react-dom": "^18",
     "ts-expect": "^1.3.0",
     "typescript": "~5.5.4",
     "vite": "^5.4.8"
@@ -54,6 +64,7 @@
     "vite-plugin"
   ],
   "files": [
+    "build/client",
     "build/cjs",
     "build/esm",
     "build/browser",

packages/widget.vite-plugin/src/constants.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const PALANTIR_PATH = ".palantir";
+export const SETUP_PATH = `${PALANTIR_PATH}/setup`;