@sg-pattern-engine/react 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,19 @@
+
+> @sg-pattern-engine/react@1.0.0 build /workspace/packages/react
+> tsup src/index.ts --format cjs,esm --dts --clean
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Target: es2020
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js 4.19 KB
+CJS ⚡️ Build success in 63ms
+ESM dist/index.mjs 2.99 KB
+ESM ⚡️ Build success in 64ms
+DTS Build start
+DTS ⚡️ Build success in 2508ms
+DTS dist/index.d.ts  567.00 B
+DTS dist/index.d.mts 567.00 B

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PatternConfig, AlgorithmOutput, Tile, PatternEngine } from '@sg-pattern-engine/core';
+
+interface Props {
+    config: PatternConfig;
+    workerFactory?: () => Worker;
+}
+declare const PatternCanvas: React.FC<Props>;
+
+interface TileResult {
+    output: AlgorithmOutput;
+    tile: Tile;
+}
+declare const usePatternEngine: (workerFactory?: () => Worker, concurrency?: number) => {
+    engine: PatternEngine;
+    generate: (config: PatternConfig) => Promise<TileResult[]>;
+};
+
+export { PatternCanvas, type TileResult, usePatternEngine };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PatternConfig, AlgorithmOutput, Tile, PatternEngine } from '@sg-pattern-engine/core';
+
+interface Props {
+    config: PatternConfig;
+    workerFactory?: () => Worker;
+}
+declare const PatternCanvas: React.FC<Props>;
+
+interface TileResult {
+    output: AlgorithmOutput;
+    tile: Tile;
+}
+declare const usePatternEngine: (workerFactory?: () => Worker, concurrency?: number) => {
+    engine: PatternEngine;
+    generate: (config: PatternConfig) => Promise<TileResult[]>;
+};
+
+export { PatternCanvas, type TileResult, usePatternEngine };

package/dist/index.js

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PatternCanvas: () => PatternCanvas,
+  usePatternEngine: () => usePatternEngine
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/PatternCanvas.tsx
+var import_react2 = require("react");
+var import_core2 = require("@sg-pattern-engine/core");
+var import_renderers = require("@sg-pattern-engine/renderers");
+
+// src/hooks/usePatternEngine.ts
+var import_react = require("react");
+var import_core = require("@sg-pattern-engine/core");
+var import_algorithms = require("@sg-pattern-engine/algorithms");
+var usePatternEngine = (workerFactory, concurrency) => {
+  const [engine] = (0, import_react.useState)(() => {
+    const e = new import_core.PatternEngine();
+    import_algorithms.algorithms.forEach((algo) => e.registerAlgorithm(algo));
+    return e;
+  });
+  const poolRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!workerFactory) return;
+    const poolSize = concurrency ?? (navigator.hardwareConcurrency ?? 4);
+    poolRef.current = new import_core.WorkerPool(
+      workerFactory,
+      poolSize
+    );
+    return () => {
+      poolRef.current?.terminate();
+      poolRef.current = null;
+    };
+  }, [workerFactory, concurrency]);
+  const generate = (0, import_react.useCallback)(async (config) => {
+    const tiles = engine.getTiles(config);
+    const pool = poolRef.current;
+    if (pool) {
+      const outputs = await Promise.all(
+        tiles.map((tile) => pool.execute({ config, tile }))
+      );
+      return outputs.map((output, i) => ({ output, tile: tiles[i] }));
+    } else {
+      const results = [];
+      for (const tile of tiles) {
+        const output = await engine.generateTile(config, tile);
+        results.push({ output, tile });
+      }
+      return results;
+    }
+  }, [engine]);
+  return { engine, generate };
+};
+
+// src/components/PatternCanvas.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PatternCanvas = ({ config, workerFactory }) => {
+  const canvasRef = (0, import_react2.useRef)(null);
+  const loopRef = (0, import_react2.useRef)(null);
+  const { generate } = usePatternEngine(workerFactory);
+  const renderFrame = (0, import_react2.useCallback)(async (frameSeed) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const frameConfig = frameSeed ? { ...config, seed: frameSeed } : config;
+    const results = await generate(frameConfig);
+    const renderer = new import_renderers.CanvasRenderer();
+    results.forEach(({ output, tile }) => {
+      renderer.render(ctx, output, tile, frameConfig);
+    });
+  }, [config, generate]);
+  (0, import_react2.useEffect)(() => {
+    loopRef.current?.stop();
+    if (config.animate) {
+      const loop = new import_core2.AnimationLoop(config);
+      loopRef.current = loop;
+      loop.start(async (frame) => {
+        const speed = config.evolutionSpeed ?? 0.1;
+        const seed = speed >= 1 ? frame.seed : `${config.seed}_${Math.floor(frame.frameIndex * speed)}`;
+        await renderFrame(seed);
+      });
+    } else {
+      renderFrame();
+    }
+    return () => {
+      loopRef.current?.stop();
+    };
+  }, [config, renderFrame]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef, width: config.width, height: config.height });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PatternCanvas,
+  usePatternEngine
+});

package/dist/index.mjs

@@ -0,0 +1,92 @@
+// src/components/PatternCanvas.tsx
+import { useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { AnimationLoop } from "@sg-pattern-engine/core";
+import { CanvasRenderer } from "@sg-pattern-engine/renderers";
+
+// src/hooks/usePatternEngine.ts
+import { useState, useCallback, useEffect, useRef } from "react";
+import {
+  PatternEngine,
+  WorkerPool
+} from "@sg-pattern-engine/core";
+import { algorithms } from "@sg-pattern-engine/algorithms";
+var usePatternEngine = (workerFactory, concurrency) => {
+  const [engine] = useState(() => {
+    const e = new PatternEngine();
+    algorithms.forEach((algo) => e.registerAlgorithm(algo));
+    return e;
+  });
+  const poolRef = useRef(null);
+  useEffect(() => {
+    if (!workerFactory) return;
+    const poolSize = concurrency ?? (navigator.hardwareConcurrency ?? 4);
+    poolRef.current = new WorkerPool(
+      workerFactory,
+      poolSize
+    );
+    return () => {
+      poolRef.current?.terminate();
+      poolRef.current = null;
+    };
+  }, [workerFactory, concurrency]);
+  const generate = useCallback(async (config) => {
+    const tiles = engine.getTiles(config);
+    const pool = poolRef.current;
+    if (pool) {
+      const outputs = await Promise.all(
+        tiles.map((tile) => pool.execute({ config, tile }))
+      );
+      return outputs.map((output, i) => ({ output, tile: tiles[i] }));
+    } else {
+      const results = [];
+      for (const tile of tiles) {
+        const output = await engine.generateTile(config, tile);
+        results.push({ output, tile });
+      }
+      return results;
+    }
+  }, [engine]);
+  return { engine, generate };
+};
+
+// src/components/PatternCanvas.tsx
+import { jsx } from "react/jsx-runtime";
+var PatternCanvas = ({ config, workerFactory }) => {
+  const canvasRef = useRef2(null);
+  const loopRef = useRef2(null);
+  const { generate } = usePatternEngine(workerFactory);
+  const renderFrame = useCallback2(async (frameSeed) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const frameConfig = frameSeed ? { ...config, seed: frameSeed } : config;
+    const results = await generate(frameConfig);
+    const renderer = new CanvasRenderer();
+    results.forEach(({ output, tile }) => {
+      renderer.render(ctx, output, tile, frameConfig);
+    });
+  }, [config, generate]);
+  useEffect2(() => {
+    loopRef.current?.stop();
+    if (config.animate) {
+      const loop = new AnimationLoop(config);
+      loopRef.current = loop;
+      loop.start(async (frame) => {
+        const speed = config.evolutionSpeed ?? 0.1;
+        const seed = speed >= 1 ? frame.seed : `${config.seed}_${Math.floor(frame.frameIndex * speed)}`;
+        await renderFrame(seed);
+      });
+    } else {
+      renderFrame();
+    }
+    return () => {
+      loopRef.current?.stop();
+    };
+  }, [config, renderFrame]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: config.width, height: config.height });
+};
+export {
+  PatternCanvas,
+  usePatternEngine
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@sg-pattern-engine/react",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@sg-pattern-engine/core": "1.0.0",
+    "@sg-pattern-engine/renderers": "1.0.0",
+    "@sg-pattern-engine/algorithms": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "@types/react": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean"
+  }
+}

package/src/components/PatternCanvas.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { PatternConfig, AnimationLoop } from '@sg-pattern-engine/core';
+import { CanvasRenderer } from '@sg-pattern-engine/renderers';
+import { usePatternEngine } from '../hooks/usePatternEngine';
+
+interface Props {
+  config: PatternConfig;
+  workerFactory?: () => Worker;
+}
+
+export const PatternCanvas: React.FC<Props> = ({ config, workerFactory }) => {
+  const canvasRef    = useRef<HTMLCanvasElement>(null);
+  const loopRef      = useRef<AnimationLoop | null>(null);
+  const { generate } = usePatternEngine(workerFactory);
+
+  const renderFrame = useCallback(async (frameSeed?: string) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const frameConfig = frameSeed ? { ...config, seed: frameSeed } : config;
+    const results = await generate(frameConfig);
+    const renderer = new CanvasRenderer();
+    results.forEach(({ output, tile }) => {
+      renderer.render(ctx, output, tile, frameConfig);
+    });
+  }, [config, generate]);
+
+  useEffect(() => {
+    loopRef.current?.stop();
+    if (config.animate) {
+      const loop = new AnimationLoop(config);
+      loopRef.current = loop;
+      loop.start(async (frame) => {
+        const speed = config.evolutionSpeed ?? 0.1;
+        const seed  = speed >= 1
+          ? frame.seed
+          : `${config.seed}_${Math.floor(frame.frameIndex * speed)}`;
+        await renderFrame(seed);
+      });
+    } else {
+      renderFrame();
+    }
+    return () => { loopRef.current?.stop(); };
+  }, [config, renderFrame]);
+
+  return <canvas ref={canvasRef} width={config.width} height={config.height} />;
+};

package/src/hooks/usePatternEngine.ts

@@ -0,0 +1,66 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  PatternEngine,
+  PatternConfig,
+  Tile,
+  AlgorithmOutput,
+  WorkerPool,
+} from '@sg-pattern-engine/core';
+import { algorithms } from '@sg-pattern-engine/algorithms';
+
+export interface TileResult {
+  output: AlgorithmOutput;
+  tile: Tile;
+}
+
+interface WorkerMessage {
+  config: PatternConfig;
+  tile: Tile;
+}
+
+export const usePatternEngine = (
+  workerFactory?: () => Worker,
+  concurrency?: number
+) => {
+  const [engine] = useState(() => {
+    const e = new PatternEngine();
+    algorithms.forEach(algo => e.registerAlgorithm(algo));
+    return e;
+  });
+
+  const poolRef = useRef<WorkerPool<WorkerMessage, AlgorithmOutput> | null>(null);
+
+  useEffect(() => {
+    if (!workerFactory) return;
+    const poolSize = concurrency ?? (navigator.hardwareConcurrency ?? 4);
+    poolRef.current = new WorkerPool<WorkerMessage, AlgorithmOutput>(
+      workerFactory,
+      poolSize
+    );
+    return () => {
+      poolRef.current?.terminate();
+      poolRef.current = null;
+    };
+  }, [workerFactory, concurrency]);
+
+  const generate = useCallback(async (config: PatternConfig): Promise<TileResult[]> => {
+    const tiles = engine.getTiles(config);
+    const pool  = poolRef.current;
+
+    if (pool) {
+      const outputs = await Promise.all(
+        tiles.map(tile => pool.execute({ config, tile }))
+      );
+      return outputs.map((output, i) => ({ output, tile: tiles[i] }));
+    } else {
+      const results: TileResult[] = [];
+      for (const tile of tiles) {
+        const output = await engine.generateTile(config, tile);
+        results.push({ output, tile });
+      }
+      return results;
+    }
+  }, [engine]);
+
+  return { engine, generate };
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/PatternCanvas';
+export * from './hooks/usePatternEngine';

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "paths": {
+      "@sg-pattern-engine/core": ["../core/dist/index.d.ts"],
+      "@sg-pattern-engine/renderers": ["../renderers/dist/index.d.ts"],
+      "@sg-pattern-engine/algorithms": ["../algorithms/dist/index.d.ts"]
+    }
+  },
+  "include": ["src"]
+}