pixedi 1.0.0

package/src/shared/types/index.ts

@@ -0,0 +1,11 @@
+export type Image = {
+  id: string;
+  author: string;
+  title: string;
+  width: number;
+  height: number;
+  ext: string;
+  fileName: string;
+  thumbnail: string;
+  original: string;
+};

package/src/test/setup.ts

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+
+vi.stubGlobal("createImageBitmap", vi.fn());
+vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockReturnValue("");
+
+if (!globalThis.ImageBitmap) {
+  class ImageBitmapMock {
+    close() {}
+  }
+
+  vi.stubGlobal("ImageBitmap", ImageBitmapMock);
+}

package/src/virtual-css-injected-by-js.d.ts

@@ -0,0 +1,8 @@
+declare module "virtual:css-injected-by-js" {
+  interface CSSInjectionOptions {
+    target?: HTMLElement | ShadowRoot;
+  }
+
+  export function injectCSS(options?: CSSInjectionOptions): void;
+  export function removeCSS(options?: CSSInjectionOptions): void;
+}

package/src/widget.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { injectCSS, removeCSS } from "virtual:css-injected-by-js";
+import type { FuncSaveArgs } from "@/shared/components/ImageEditor/types";
+import { ImageEditor } from "@/shared/components/ImageEditor";
+
+type WidgetTheme = "light" | "dark";
+
+interface WidgetOptions {
+  containerId: string;
+  image: string;
+  onSave: FuncSaveArgs;
+  onBack: () => void;
+  theme?: WidgetTheme;
+}
+
+interface ImageEditorWidgetInstance {
+  destroy: () => void;
+}
+
+interface ImageEditorWidget {
+  init: (options: WidgetOptions) => ImageEditorWidgetInstance | undefined;
+}
+
+interface ActiveWidget {
+  root: ReactDOM.Root;
+  shadowRoot: ShadowRoot;
+  mountElement: HTMLDivElement;
+  container: HTMLElement;
+  previousTheme: string | null;
+}
+
+declare global {
+  interface Window {
+    ImageEditorWidget?: ImageEditorWidget;
+  }
+}
+
+let activeWidget: ActiveWidget | null = null;
+
+const destroyActiveWidget = () => {
+  if (!activeWidget) {
+    return;
+  }
+
+  activeWidget.root.unmount();
+  removeCSS({ target: activeWidget.shadowRoot });
+  activeWidget.mountElement.remove();
+
+  if (activeWidget.previousTheme === null) {
+    activeWidget.container.removeAttribute("data-theme");
+  } else {
+    activeWidget.container.setAttribute(
+      "data-theme",
+      activeWidget.previousTheme,
+    );
+  }
+
+  activeWidget = null;
+};
+
+const ImageEditorWidget: ImageEditorWidget = {
+  init: (options) => {
+    const container = document.getElementById(options.containerId);
+    if (!container) return;
+
+    destroyActiveWidget();
+
+    let shadowRoot = container.shadowRoot;
+    if (!shadowRoot) {
+      try {
+        shadowRoot = container.attachShadow({ mode: "open" });
+      } catch {
+        return;
+      }
+    }
+
+    const previousTheme = container.getAttribute("data-theme");
+    container.setAttribute("data-theme", options.theme ?? "light");
+
+    injectCSS({ target: shadowRoot });
+
+    const mountElement = document.createElement("div");
+    shadowRoot.append(mountElement);
+
+    const root = ReactDOM.createRoot(mountElement);
+    activeWidget = {
+      root,
+      shadowRoot,
+      mountElement,
+      container,
+      previousTheme,
+    };
+
+    root.render(
+      <React.StrictMode>
+        <ImageEditor
+          image={options.image}
+          onSave={options.onSave}
+          onBack={options.onBack}
+        />
+      </React.StrictMode>,
+    );
+
+    return {
+      destroy: () => {
+        if (activeWidget?.root === root) {
+          destroyActiveWidget();
+        }
+      },
+    };
+  },
+};
+
+if (typeof window !== "undefined") {
+  window.ImageEditorWidget = ImageEditorWidget;
+}
+
+export default ImageEditorWidget;

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist/lib",
+    "rootDir": "."
+  },
+  "include": ["src/shared/components/ImageEditor/**/*"],
+  "exclude": [
+    "src/shared/components/ImageEditor/**/*.stories.tsx",
+    "src/shared/components/ImageEditor/**/*.stories.ts",
+    "src/shared/components/ImageEditor/**/*.test.tsx",
+    "src/shared/components/ImageEditor/**/*.test.ts",
+    "src/shared/components/ImageEditor/**/*.spec.tsx",
+    "src/shared/components/ImageEditor/**/*.spec.ts"
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.ts

@@ -0,0 +1,24 @@
+import path from "path";
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    outDir: "dist/app",
+    minify: true,
+  },
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+  },
+});

package/vite.lib.config.ts

@@ -0,0 +1,33 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+
+export default defineConfig({
+  plugins: [react(), cssInjectedByJsPlugin()],
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    outDir: "dist/lib",
+    emptyOutDir: false,
+    lib: {
+      entry: "src/shared/components/ImageEditor/ImageEditor.tsx",
+      name: "Pixedi",
+      fileName: (format) => `index.${format === "es" ? "js" : "umd.js"}`,
+      formats: ["es", "umd"],
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});

package/vite.widget.config.ts

@@ -0,0 +1,39 @@
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    cssInjectedByJsPlugin({
+      attributes: { "data-image-editor-widget": "" },
+    }),
+  ],
+  publicDir: false,
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    outDir: "dist/widget",
+    emptyOutDir: false,
+    minify: "oxc",
+    lib: {
+      entry: "src/widget.tsx",
+      name: "ImageEditorWidget",
+      formats: ["umd"],
+    },
+    rolldownOptions: {
+      output: {
+        comments: { legal: false },
+        entryFileNames: "pixedi-widget.js",
+        assetFileNames: "[name].[ext]",
+      },
+    },
+  },
+});

package/wrangler.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "pixedi",
+  "pages_build_output_dir": "dist"
+}