@bubblydoo/uxp-test-framework-plugin 0.0.2

package/src/main.tsx

@@ -0,0 +1,238 @@
+import { tests } from "TESTS";
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ErrorView } from "./components/ErrorView";
+import { Test } from "@bubblydoo/uxp-test-framework-base";
+
+type TestResult = {
+  status: "idle" | "success" | "error" | "pending";
+  isIdle: boolean;
+  isSuccess: boolean;
+  isPending: boolean;
+  error: any;
+};
+
+const TestResultsContext = createContext<{
+  set(test: Test, result: TestResult): void;
+  get(test: Test): TestResult | undefined;
+  delete(test: Test): void;
+}>(null!);
+
+export const App = () => {
+  const [queryClient] = useState(() => new QueryClient());
+  const [testResultsCache, setTestResults] = useState(
+    () => new Map<Test, any>()
+  );
+  const testResults = useMemo(
+    () => ({
+      set: (test: Test, result: TestResult) =>
+        setTestResults((prev) => new Map(prev).set(test, result)),
+      get: (test: Test) => testResultsCache.get(test),
+      delete: (test: Test) => {
+        setTestResults((prev) => {
+          const copy = new Map(prev);
+          copy.delete(test);
+          return copy;
+        });
+      },
+    }),
+    [testResultsCache]
+  );
+
+  return (
+    <>
+      <main className="text-white overflow-y-auto">
+        <QueryClientProvider client={queryClient}>
+          <TestResultsContext.Provider value={testResults}>
+            <TestView tests={tests} />
+          </TestResultsContext.Provider>
+        </QueryClientProvider>
+      </main>
+    </>
+  );
+};
+
+async function runTest(test: Test): Promise<void> {
+  try {
+    await test.run.call(undefined, { name: test.name });
+  } catch (e) {
+    if (!(e instanceof Error)) {
+      console.error(`Test ${test.name} threw a non-Error (${typeof e}): ${e}`);
+    }
+    throw e;
+  }
+}
+
+function usePromiseStatus<T>(promise: Promise<T> | null): TestResult {
+  const [success, setSuccess] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [isPending, setIsPending] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!promise) {
+      return;
+    }
+    setIsPending(true);
+    promise
+      .then((result) => {
+        setSuccess(true);
+      })
+      .catch((e) => {
+        setError(e);
+      })
+      .finally(() => {
+        setIsPending(false);
+      });
+  }, [promise]);
+
+  const result: TestResult = useMemo(
+    () => ({
+      status: success
+        ? "success"
+        : error
+        ? "error"
+        : isPending
+        ? "pending"
+        : "idle",
+      isIdle: !promise,
+      isSuccess: success,
+      error,
+      isPending,
+    }),
+    [success, error, isPending, promise]
+  );
+
+  return result;
+}
+
+const stableIdleResult: TestResult = {
+  status: "idle",
+  isIdle: true,
+  isSuccess: false,
+  isPending: false,
+  error: null,
+};
+
+function useTestResult(test: Test): { mutate: () => void; result: TestResult } {
+  const [promise, setPromise] = useState<Promise<void> | null>(null);
+  const testResults = useContext(TestResultsContext);
+  const mutate = useCallback(() => {
+    testResults.delete(test);
+    setPromise(runTest(test));
+  }, [test, testResults]);
+  const promiseResult = usePromiseStatus(promise);
+  useEffect(() => {
+    if (promiseResult.status !== "idle") {
+      testResults.set(test, promiseResult);
+    }
+  }, [promiseResult]);
+  const globalResult =
+    promiseResult.status !== "idle"
+      ? promiseResult
+      : testResults.get(test) ?? stableIdleResult;
+  return {
+    mutate,
+    result: globalResult,
+  };
+}
+
+function TestView({ tests }: { tests: Test[] }) {
+  const resultContext = useContext(TestResultsContext);
+  const runAllTests = useCallback(async () => {
+    for (const test of tests) {
+      console.log(`Running test ${test.name}`);
+      // await runTest(test);
+      resultContext.set(test, {
+        status: "pending",
+        isIdle: false,
+        isSuccess: false,
+        isPending: true,
+        error: null,
+      });
+      try {
+        await runTest(test);
+        resultContext.set(test, {
+          status: "success",
+          isIdle: false,
+          isSuccess: true,
+          isPending: false,
+          error: null,
+        });
+      } catch (e) {
+        resultContext.set(test, {
+          status: "error",
+          isIdle: false,
+          isSuccess: false,
+          isPending: false,
+          error: e,
+        });
+      }
+    }
+  }, []);
+
+  return (
+    <div className="px-2">
+      <h1 className="text-white text-xl bold mb-1">Tests</h1>
+      <button
+        onClick={runAllTests}
+        className="bg-white text-black rounded-md p-1"
+      >
+        Run All Tests
+      </button>
+      {tests.map((test, i) => {
+        if (!test) return;
+        return <OneTest test={test} key={i} />;
+      })}
+    </div>
+  );
+}
+
+function OneTest(props: { test: Test }) {
+  const { test } = props;
+
+  const { mutate, result } = useTestResult(test);
+
+  return (
+    <div
+      key={test.name}
+      className="p-2 border border-white rounded-md mt-2 w-full"
+    >
+      <div className="flex flex-row">
+        <div className="text-base mr-2 flex-1">{test.name}</div>
+        <button
+          disabled={result.isPending}
+          key={test.name}
+          onClick={() => mutate()}
+          className="bg-white text-black rounded-md p-1"
+        >
+          Run Test
+        </button>
+      </div>
+      <div>
+        Result: {result.status} <TestResultEmoji result={result} />
+        {result.error && (
+          <div className="pt-2">
+            <ErrorView error={result.error} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TestResultEmoji({ result }: { result: TestResult }) {
+  return result.error
+    ? "❌"
+    : result.isSuccess
+    ? "✅"
+    : result.isPending
+    ? "⏳"
+    : "❔";
+}

package/src/tests.d.ts

@@ -0,0 +1,5 @@
+declare module "TESTS" {
+  type Test = import("@bubblydoo/uxp-test-framework-base").Test;
+
+  export const tests: Test[];
+}

package/tailwind.config.js

@@ -0,0 +1,15 @@
+import path from "path";
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    __dirname + "/index.html",
+    __dirname + "/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ['create-vite-config.ts'],
+  format: "esm",
+  target: "node20",
+  // dts: true,
+  external: ["vite", "vite-uxp-plugin", "@vitejs/plugin-react", "autoprefixer", "vite-tsconfig-paths"],
+  clean: true,
+  outDir: "dist",
+})

package/uxp.config.ts

@@ -0,0 +1,109 @@
+import { UXP_Manifest, UXP_Config } from "vite-uxp-plugin";
+
+const extraPrefs = {
+  hotReloadPort: 8080,
+  copyZipAssets: ["public-zip/*"],
+  uniqueIds: true,
+};
+
+type CreateManifestOpts = {
+  id: string;
+  name: string;
+  version: string;
+};
+
+const createUxpManifest: (opts: CreateManifestOpts) => UXP_Manifest = ({
+  id,
+  name,
+  version,
+}) => {
+  return {
+    id,
+    name,
+    version,
+    main: "index.html",
+    manifestVersion: 6,
+    host: [
+      {
+        app: "PS",
+        minVersion: "24.2.0",
+      },
+    ],
+    entrypoints: [
+      {
+        type: "panel",
+        id: `${id}.main`,
+        label: {
+          default: name,
+        },
+        minimumSize: { width: 230, height: 200 },
+        maximumSize: { width: 2000, height: 2000 },
+        preferredDockedSize: { width: 230, height: 300 },
+        preferredFloatingSize: { width: 450, height: 400 },
+        icons: [
+          {
+            width: 23,
+            height: 23,
+            path: "icons/dark.png",
+            scale: [1, 2],
+            theme: ["darkest", "dark", "medium"],
+          },
+          {
+            width: 23,
+            height: 23,
+            path: "icons/light.png",
+            scale: [1, 2],
+            theme: ["lightest", "light"],
+          },
+        ],
+      },
+    ],
+    featureFlags: {
+      enableAlerts: true,
+    },
+    requiredPermissions: {
+      localFileSystem: "fullAccess",
+      launchProcess: {
+        schemes: ["https", "slack", "file", "ws"],
+        extensions: [".xd", ".psd", ".bat", ".cmd", ""],
+      },
+      network: {
+        domains: [
+          `ws://localhost:${extraPrefs.hotReloadPort}`, // Required for hot reload
+        ],
+      },
+      clipboard: "readAndWrite",
+      webview: {
+        allow: "yes",
+        allowLocalRendering: "yes",
+        domains: "all",
+        enableMessageBridge: "localAndRemote",
+      },
+      ipc: {
+        enablePluginCommunication: true,
+      },
+      allowCodeGenerationFromStrings: true,
+    },
+    icons: [
+      {
+        width: 48,
+        height: 48,
+        path: "icons/plugin-icon.png",
+        scale: [1, 2],
+        theme: ["darkest", "dark", "medium", "lightest", "light", "all"],
+        species: ["pluginList"],
+      },
+    ],
+  };
+};
+
+export const createUxpConfig: (opts: CreateManifestOpts) => UXP_Config = ({
+  id,
+  name,
+  version,
+}) => {
+  return {
+    manifest: createUxpManifest({ id, name, version }),
+    ...extraPrefs,
+  } as UXP_Config;
+};