@bubblydoo/uxp-test-framework-plugin 0.0.8 → 0.0.9

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bubblydoo/uxp-test-framework-plugin",
-  "version": "0.0.8",
   "type": "module",
-  "license": "MIT",
+  "version": "0.0.9",
   "author": "Hans Otto Wirtz <hansottowirtz@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/bubblydoo/uxp-toolkit/tree/main/packages/uxp-test-framework-plugin",
   "repository": {
     "type": "git",
     "url": "https://github.com/bubblydoo/uxp-toolkit.git"
   },
-  "homepage": "https://github.com/bubblydoo/uxp-toolkit/tree/main/packages/uxp-test-framework-plugin",
   "exports": {
     "./cli": {
       "types": "./dist-vite/cli.d.ts",
@@ -21,20 +21,19 @@
   },
   "files": [
     "dist-vite",
-    "src-plugin",
-    "index.html"
+    "index.html",
+    "src-plugin"
   ],
   "peerDependencies": {
-    "@bubblydoo/uxp-toolkit": "0.0.8"
+    "@bubblydoo/uxp-toolkit": "0.0.9"
   },
   "dependencies": {
     "chokidar": "^5.0.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.9.3",
-    "vite": "^6.4.1",
-    "tailwindcss": "^3.4.17"
+    "vite": "^6.4.1"
   },
   "devDependencies": {
-    "@adobe/cc-ext-uxp-types": "https://github.com/justintaylor-dev/cc-ext-uxp-types.git",
     "@babel/preset-typescript": "^7.28.5",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
@@ -42,7 +41,6 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@tanstack/react-query": "^5.90.20",
     "@types/node": "^20.8.7",
-    "@types/photoshop": "^25.0.2",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@types/ws": "^8.5.8",
@@ -64,11 +62,14 @@
     "vite-uxp-plugin": "^1.2.5",
     "ws": "^8.14.2",
     "zod": "^4.3.6",
+    "@adobe-uxp-types/photoshop": "0.1.0",
+    "@adobe-uxp-types/uxp": "0.1.0",
     "@bubblydoo/tsconfig": "0.0.3",
     "@bubblydoo/uxp-polyfills": "0.0.4",
-    "@bubblydoo/uxp-test-framework-base": "0.0.4"
+    "@bubblydoo/uxp-test-framework-base": "0.0.5"
   },
   "scripts": {
-    "build": "rm -rf dist-vite && pnpm exec rollup -c && cp cli.d.ts dist-vite/cli.d.ts"
+    "build": "rm -rf dist-vite && pnpm exec rollup -c && cp cli.d.ts dist-vite/cli.d.ts",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src-plugin/bolt-uxp-ws-listener.ts

@@ -1,19 +1,21 @@
-import { uxpEntrypointsSchema } from "@bubblydoo/uxp-toolkit";
-import { entrypoints } from "uxp";
+/* eslint-disable no-console */
+import { uxpEntrypointsSchema } from '@bubblydoo/uxp-toolkit';
+import { entrypoints } from 'uxp';
 
 const manifestId = uxpEntrypointsSchema.parse(entrypoints)._pluginInfo.id;
 
 declare global {
+  // eslint-disable-next-line vars-on-top
   var BOLT_UXP_HOT_RELOAD_PORT: number;
 }
 
-const prefix = "[⚡ Bolt Hot Reload]";
+const prefix = '[⚡ Bolt Hot Reload]';
 
 const log = console.log.bind(console, prefix);
 
-const listenForHotReload = () => {
-  if (typeof BOLT_UXP_HOT_RELOAD_PORT === "undefined") {
-    log("BOLT_UXP_HOT_RELOAD_PORT is not defined");
+function listenForHotReload() {
+  if (typeof BOLT_UXP_HOT_RELOAD_PORT === 'undefined') {
+    log('BOLT_UXP_HOT_RELOAD_PORT is not defined');
     return;
   }
   const reconnect = (reason: string) => {
@@ -23,17 +25,17 @@ const listenForHotReload = () => {
     setTimeout(listenForHotReload, 3000);
   };
   const ws = new WebSocket(`ws://localhost:${BOLT_UXP_HOT_RELOAD_PORT}`);
-  ws.onclose = () => reconnect("closed");
+  ws.onclose = () => reconnect('closed');
   ws.onmessage = (event) => {
     const data = JSON.parse(event.data);
-    if (data.id === manifestId && data.status === "updated") {
-      log("Hot reloading...");
+    if (data.id === manifestId && data.status === 'updated') {
+      log('Hot reloading...');
       location.reload();
     }
   };
   ws.onopen = () => {
-    log("Connected to server");
+    log('Connected to server');
   };
-};
+}
 
 listenForHotReload();

package/src-plugin/components/ErrorView.tsx

@@ -1,16 +1,17 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { BasicStackFrame, copyToClipboard, getBasicStackFrameAbsoluteFilePath, parseUxpErrorSourcemaps } from "@bubblydoo/uxp-toolkit";
+import type { BasicStackFrame } from '@bubblydoo/uxp-toolkit';
+import { copyToClipboard, getBasicStackFrameAbsoluteFilePath, parseUxpErrorSourcemaps } from '@bubblydoo/uxp-toolkit';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 declare const __UNSOURCEMAPPED_HEADER_LINES__: number;
 
-const UNSOURCEMAPPED_HEADER_LINES =
-  typeof __UNSOURCEMAPPED_HEADER_LINES__ === "number"
+const UNSOURCEMAPPED_HEADER_LINES
+  = typeof __UNSOURCEMAPPED_HEADER_LINES__ === 'number'
     ? __UNSOURCEMAPPED_HEADER_LINES__
     : 0;
 
 export function ErrorView({ error }: { error: Error }) {
   const sourcemappedError = useQuery({
-    queryKey: ["sourcemappedError", error],
+    queryKey: ['sourcemappedError', error],
     queryFn: async () => {
       return await parseUxpErrorSourcemaps(error, {
         unsourcemappedHeaderLines: UNSOURCEMAPPED_HEADER_LINES,
@@ -35,7 +36,10 @@ export function ErrorView({ error }: { error: Error }) {
       <div className="p-2">
         <div>Sourcemapped error:</div>
         {copyMutation.error && (
-          <>Copy error: {errorToString(copyMutation.error)}</>
+          <>
+            Copy error:
+            {errorToString(copyMutation.error)}
+          </>
         )}
         {sourcemappedError.isPending && (
           <div>⏳ Loading sourcemapped error...</div>
@@ -45,15 +49,24 @@ export function ErrorView({ error }: { error: Error }) {
         )}
         {sourcemappedError.data && (
           <div className="text-red-500 whitespace-pre-wrap">
-            {error.name}: {error.message}
+            {error.name}
+            :
+            {error.message}
             {sourcemappedError.data.map((frame, i) => (
               <div key={i}>
-                {frame.functionName} @{" "}
+                {frame.functionName}
+                {' '}
+                @
+                {' '}
                 <span
                   className="underline"
                   onClick={() => copyMutation.mutate(frame)}
                 >
-                  {frame.fileName}:{frame.lineNumber}:{frame.columnNumber}
+                  {frame.fileName}
+                  :
+                  {frame.lineNumber}
+                  :
+                  {frame.columnNumber}
                 </span>
               </div>
             ))}

package/src-plugin/index-react.tsx

@@ -1,13 +1,13 @@
-import "@bubblydoo/uxp-polyfills";
-import "./bolt-uxp-ws-listener";
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
 
-import "./index.css";
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { App } from './main';
+import '@bubblydoo/uxp-polyfills';
+import './bolt-uxp-ws-listener';
 
-import { App } from "./main";
+import './index.css';
 
-ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

package/src-plugin/lib/resolvePath.ts

@@ -1,17 +1,19 @@
-import { resolve as nativeResolve } from "path";
+// eslint-disable-next-line unicorn/prefer-node-protocol
+import { resolve as nativeResolve } from 'path';
 
-/** for some reason native path.resolve in UXP returns a URL object
+/**
+ * for some reason native path.resolve in UXP returns a URL object
  * this function converts it to a string
  */
 export function pathResolve(...pathSegments: string[]): string {
   const urlOrString = nativeResolve(...pathSegments) as URL | string;
-  if (typeof urlOrString === "string") {
+  if (typeof urlOrString === 'string') {
     return urlOrString;
   }
   if (isUrl(urlOrString)) {
     return urlOrString.toString();
   }
-  throw new Error("Unexpected URL object");
+  throw new Error('Unexpected URL object');
 }
 
 function isUrl(urlOrString: any): urlOrString is URL {

package/src-plugin/main.tsx

@@ -1,39 +1,40 @@
-import { tests } from "TESTS";
-import React, {
+import type { Test } from '@bubblydoo/uxp-test-framework-base';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import * as React from 'react';
+import {
   createContext,
+  use,
   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";
+} from 'react';
+import { tests } from 'TESTS';
+import { ErrorView } from './components/ErrorView';
 
-type TestResult = {
-  status: "idle" | "success" | "error" | "pending";
+interface 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;
+  set: (test: Test, result: TestResult) => void;
+  get: (test: Test) => TestResult | undefined;
+  delete: (test: Test) => void;
 }>(null!);
 
-export const App = () => {
+export function App() {
   const [queryClient] = useState(() => new QueryClient());
   const [testResultsCache, setTestResults] = useState(
-    () => new Map<Test, any>()
+    () => new Map<Test, any>(),
   );
   const testResults = useMemo(
     () => ({
       set: (test: Test, result: TestResult) =>
-        setTestResults((prev) => new Map(prev).set(test, result)),
+        setTestResults(prev => new Map(prev).set(test, result)),
       get: (test: Test) => testResultsCache.get(test),
       delete: (test: Test) => {
         setTestResults((prev) => {
@@ -43,26 +44,27 @@ export const App = () => {
         });
       },
     }),
-    [testResultsCache]
+    [testResultsCache],
   );
 
   return (
     <>
       <main className="text-white overflow-y-auto">
         <QueryClientProvider client={queryClient}>
-          <TestResultsContext.Provider value={testResults}>
+          <TestResultsContext value={testResults}>
             <TestView tests={tests} />
-          </TestResultsContext.Provider>
+          </TestResultsContext>
         </QueryClientProvider>
       </main>
     </>
   );
-};
+}
 
 async function runTest(test: Test): Promise<void> {
   try {
     await test.run.call(undefined, { name: test.name });
-  } catch (e) {
+  }
+  catch (e) {
     if (!(e instanceof Error)) {
       console.error(`Test ${test.name} threw a non-Error (${typeof e}): ${e}`);
     }
@@ -95,25 +97,25 @@ function usePromiseStatus<T>(promise: Promise<T> | null): TestResult {
   const result: TestResult = useMemo(
     () => ({
       status: success
-        ? "success"
+        ? 'success'
         : error
-        ? "error"
-        : isPending
-        ? "pending"
-        : "idle",
+          ? 'error'
+          : isPending
+            ? 'pending'
+            : 'idle',
       isIdle: !promise,
       isSuccess: success,
       error,
       isPending,
     }),
-    [success, error, isPending, promise]
+    [success, error, isPending, promise],
   );
 
   return result;
 }
 
 const stableIdleResult: TestResult = {
-  status: "idle",
+  status: 'idle',
   isIdle: true,
   isSuccess: false,
   isPending: false,
@@ -122,19 +124,19 @@ const stableIdleResult: TestResult = {
 
 function useTestResult(test: Test): { mutate: () => void; result: TestResult } {
   const [promise, setPromise] = useState<Promise<void> | null>(null);
-  const testResults = useContext(TestResultsContext);
+  const testResults = use(TestResultsContext);
   const mutate = useCallback(() => {
     testResults.delete(test);
     setPromise(runTest(test));
   }, [test, testResults]);
   const promiseResult = usePromiseStatus(promise);
   useEffect(() => {
-    if (promiseResult.status !== "idle") {
+    if (promiseResult.status !== 'idle') {
       testResults.set(test, promiseResult);
     }
   }, [promiseResult]);
-  const globalResult =
-    promiseResult.status !== "idle"
+  const globalResult
+    = promiseResult.status !== 'idle'
       ? promiseResult
       : testResults.get(test) ?? stableIdleResult;
   return {
@@ -144,13 +146,13 @@ function useTestResult(test: Test): { mutate: () => void; result: TestResult } {
 }
 
 function TestView({ tests }: { tests: Test[] }) {
-  const resultContext = useContext(TestResultsContext);
+  const resultContext = use(TestResultsContext);
   const runAllTests = useCallback(async () => {
     for (const test of tests) {
       console.log(`Running test ${test.name}`);
       // await runTest(test);
       resultContext.set(test, {
-        status: "pending",
+        status: 'pending',
         isIdle: false,
         isSuccess: false,
         isPending: true,
@@ -159,15 +161,16 @@ function TestView({ tests }: { tests: Test[] }) {
       try {
         await runTest(test);
         resultContext.set(test, {
-          status: "success",
+          status: 'success',
           isIdle: false,
           isSuccess: true,
           isPending: false,
           error: null,
         });
-      } catch (e) {
+      }
+      catch (e) {
         resultContext.set(test, {
-          status: "error",
+          status: 'error',
           isIdle: false,
           isSuccess: false,
           isPending: false,
@@ -187,7 +190,8 @@ function TestView({ tests }: { tests: Test[] }) {
         Run All Tests
       </button>
       {tests.map((test, i) => {
-        if (!test) return;
+        if (!test)
+          return null;
         return <OneTest test={test} key={i} />;
       })}
     </div>
@@ -216,7 +220,11 @@ function OneTest(props: { test: Test }) {
         </button>
       </div>
       <div>
-        Result: {result.status} <TestResultEmoji result={result} />
+        Result:
+        {' '}
+        {result.status}
+        {' '}
+        <TestResultEmoji result={result} />
         {result.error && (
           <div className="pt-2">
             <ErrorView error={result.error} />
@@ -229,10 +237,10 @@ function OneTest(props: { test: Test }) {
 
 function TestResultEmoji({ result }: { result: TestResult }) {
   return result.error
-    ? "❌"
+    ? '❌'
     : result.isSuccess
-    ? "✅"
-    : result.isPending
-    ? "⏳"
-    : "❔";
+      ? '✅'
+      : result.isPending
+        ? '⏳'
+        : '❔';
 }

package/src-plugin/tests.d.ts

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