Merge pull request #2 from react18-tools/optimize

Optimize

Author: mayank1513

.changeset/lazy-doors-give.md

@@ -0,0 +1,5 @@
+---
+"react-mouse-trails": patch
+---
+
+Pause the render loop when not required.

.changeset/pre.json

@@ -0,0 +1,16 @@
+{
+  "mode": "exit",
+  "tag": "optimize",
+  "initialVersions": {
+    "@example/nextjs": "0.0.0",
+    "@example/vite": "0.0.0",
+    "react-mouse-trails": "0.0.1",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/shared": "0.0.1",
+    "@repo/scripts": "0.0.0"
+  },
+  "changesets": [
+    "lazy-doors-give"
+  ]
+}

lib/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-mouse-trails
 
+## 0.0.2-optimize.0
+
+### Patch Changes
+
+- 18657b1: Pause the render loop when not required.
+
 ## 0.0.1
 
 ### Patch Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "react-mouse-trails",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2-optimize.0",
   "description": "A lightweight WebGL-based React component for creating a mouse trail effect.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/client/mouse-trail/mouse-trail.tsx

@@ -3,6 +3,7 @@ import styles from "./mouse-trail.module.scss";
 import { trails } from "../../utils";
 
 export interface MouseTrailProps extends HTMLProps<HTMLCanvasElement> {
+  /** Trail color tuple RGB color values - 0.0 to 1.0 */
   rgb?: [number, number, number];
 }
 
@@ -17,7 +18,6 @@ export const MouseTrail = ({ className, rgb, ...props }: MouseTrailProps) => {
   useEffect(() => {
     const canvas = canvasRef.current;
     const gl = canvas?.getContext("webgl");
-    console.log({ canvas, gl });
     if (!gl || !canvas) return;
     const onResize = () => {
       canvas.width = innerWidth;

lib/src/utils.ts

@@ -38,7 +38,7 @@ export const trails = (
       /* v8 ignore next */
       gl.deleteShader(shader);
       /* v8 ignore next */
-      throw new Error(`Could not compile WebGL shader. \n\n" ${info}`);
+      throw new Error("Could not compile WebGL shader. \n\n" + info); // skipcq: JS-0246
       /* v8 ignore next */
     }
     return shader;
@@ -80,18 +80,13 @@ export const trails = (
   const positionBuffer = createBuffer();
   const timeBuffer = createBuffer();
 
+  let runningAnim = false;
   let positions: number[] = [];
   let fades: number[] = [];
-  canvas.addEventListener("mousemove", (event: MouseEvent) => {
-    const x = (event.clientX / canvas.width) * 2 - 1;
-    const y = (event.clientY / canvas.height) * -2 + 1;
-
-    positions.unshift(x, y);
-    fades.unshift(1);
-  });
 
-  /** Start render loop */
+  /** The render loop */
   const render = () => {
+    runningAnim = true;
     fades = fades.map(fade => fade / 1.1);
     positions = positions.filter((_, index) => fades[index] > 0.001);
     fades = fades.filter(fade => fade > 0.01);
@@ -107,8 +102,16 @@ export const trails = (
 
     gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2);
 
-    requestAnimationFrame(render);
+    positions.length ? requestAnimationFrame(render) : (runningAnim = false);
   };
   gl.clearColor(0.0, 0.0, 0.0, 0.0);
-  render();
+
+  canvas.addEventListener("mousemove", (event: MouseEvent) => {
+    const x = (event.clientX / canvas.width) * 2 - 1;
+    const y = (event.clientY / canvas.height) * -2 + 1;
+
+    positions.unshift(x, y);
+    fades.unshift(1);
+    !runningAnim && render();
+  });
 };

lib/tsup.config.ts

@@ -2,20 +2,36 @@ import { defineConfig, type Options } from "tsup";
 import react18Plugin from "esbuild-plugin-react18";
 import cssPlugin from "esbuild-plugin-react18-css";
 import { rdiPlugin } from "esbuild-plugin-rdi";
+import fs from "fs";
 
 export default defineConfig(
   (options: Options) =>
     ({
       format: ["cjs", "esm"],
       target: "es2019",
-      entry: ["./src/index.ts"],
+      entry: ["./src"],
       sourcemap: false,
       clean: !options.watch,
       bundle: true,
       minify: !options.watch,
       esbuildPlugins: [
+        {
+          name: "minify",
+          setup(build) {
+            if (options.watch) return;
+            build.onLoad({ filter: /utils\.ts$/, namespace: "file" }, args => {
+              const text = fs.readFileSync(args.path, "utf8");
+              const contents = text
+                .replace(/if \(!gl[^}]*}/gm, "")
+                .replace(/;\s*if \(![^;]*;/gm, "!;")
+                .replace(/`[^`]*`/gm, match => match.replace(/\s+/g, " ").trim())
+                .trim();
+              return { contents, loader: "ts" };
+            });
+          },
+        },
         react18Plugin({ disableJSXRequireDedup: true }),
-        cssPlugin({ generateScopedName: "[folder]__[local]" }),
+        cssPlugin({ generateScopedName: "rt_[local]" }),
         rdiPlugin(),
       ],
       ...options,

packages/shared/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @repo/shared
 
+## 0.0.2-optimize.0
+
+### Patch Changes
+
+- Updated dependencies [18657b1]
+  - [email protected]
+
 ## 0.0.1
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.1",
+  "version": "0.0.2-optimize.0",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",