diff --git a/.changeset/warm-schools-relax.md b/.changeset/warm-schools-relax.md new file mode 100644 index 000000000..0dffc2e48 --- /dev/null +++ b/.changeset/warm-schools-relax.md @@ -0,0 +1,5 @@ +--- +"@osdk/widget-manifest-vite-plugin": minor +--- + +Support basic manifest in vite serve mode diff --git a/.monorepolint.config.mjs b/.monorepolint.config.mjs index f8c2e4b83..c828c3850 100644 --- a/.monorepolint.config.mjs +++ b/.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 ]; diff --git a/packages/e2e.sandbox.todowidget/foundry.config.json b/packages/e2e.sandbox.todowidget/foundry.config.json new file mode 100644 index 000000000..bee5b8963 --- /dev/null +++ b/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": "" + } + } +} diff --git a/packages/monorepo.cspell/cspell.config.js b/packages/monorepo.cspell/cspell.config.js index e9f9e6860..c45e76ab7 100644 --- a/packages/monorepo.cspell/cspell.config.js +++ b/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", ], diff --git a/packages/widget.vite-plugin/README.md b/packages/widget.vite-plugin/README.md index 0f325b303..3b22956e1 100644 --- a/packages/widget.vite-plugin/README.md +++ b/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 + } + } + ``` diff --git a/packages/widget.vite-plugin/client/app.tsx b/packages/widget.vite-plugin/client/app.tsx new file mode 100644 index 000000000..cd474b0ba --- /dev/null +++ b/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([]); + 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 ( +
+ {(loading.state === "loading" || loading.state === "not-started") && ( + } + /> + )} + {loading.state === "success" && ( + + {" "} + Redirecting you… +
+ } + /> + )} + {loading.state === "failed" && ( + + )} + {/* 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) => ( +