@shopify/klint 0.0.4 → 0.0.7

package/README.md

@@ -1,36 +1,89 @@
 # Klint
 
-A modern creative coding library
+A modern creative coding library for React applications that provides an intuitive interface to HTML Canvas 2D rendering. Klint simplifies the process of creating interactive graphics, animations, and visualizations.
+
+## Features
+
+- React integration with hooks and components
+- Intuitive drawing API inspired by Processing and P5.js
+- Responsive canvas that automatically resizes
+- Support for animations, static renderings, and interactive content
+- Built-in utilities for managing state, input, and resources
+
+## Example
+
+```jsx
+import { Klint, useKlint, type KlintContext } from "klint";
+
+function AnimatedCircle() {
+  const { context } = useKlint();
+
+  const draw = (K: KlintContext) => {
+    K.background("#222");
+    K.fillColor("red");
+    
+    // Draw a pulsing circle at the center of the canvas
+    const size = 50 + Math.sin(K.frame * 0.05) * 25;
+    K.circle(K.width/2, K.height/2, size);
+  };
+  
+  return <Klint context={context} draw={draw} />;
+}
+```
 
 ## Release Process
 
 This package uses GitHub Actions for automated releases. Here's how to create a new release:
 
-1. Make your changes and commit them to the repository
-2. Update the version in package.json:
+## Development and tests
+
+> **Important:** The Klint library isn't public yet, so you'll need to link it manually if you want to edit it.
+
+1. Clone the repository
+   ```bash
+   git clone https://github.com/Shopify/klint.git
+   cd klint
+   ```
+
+2. Go to the lib folder and link it locally
    ```bash
    cd lib
-   yarn version --new-version [patch|minor|major]
+   npm link
    ```
-   This will:
-   - Update the version in package.json
-   - Create a git commit with the new version
-   - Create a git tag with the new version (e.g., v1.0.0)
 
-3. Push the changes and the tag:
+3. In your working directory, link to the local Klint
    ```bash
-   git push && git push --tags
+   cd your-project
+   npm link klint
    ```
 
-4. The GitHub Action will automatically:
-   - Run tests
-   - Build the package
-   - Publish to npm
-   - Create a GitHub release with auto-generated release notes
+4. Run the dev server:
+   ```bash
+   npm run dev
+   ```
+
+5. When finished, unlink both in your project and the local repo
+   ```bash
+   # In your project
+   npm unlink klint
+   
+   # In the Klint lib folder
+   npm unlink
+   ```
+
+6. If you change anything in the library, you will need to rebuild
+   ```bash
+   # In the Klint lib folder
+   npm build
+   npm link
+   ```
+
+7. I use Vitest for testing
+   ```bash
+   npm test
+   ```
 
-## Required Secrets
+8. Push your commit
 
-The workflow requires an NPM_TOKEN secret to be set in the GitHub repository:
 
-1. Create an npm access token with publish permissions
-2. Add it as a secret named NPM_TOKEN in your GitHub repository settings
+Made with love at Shopify, 2025

package/dist/index.cjs

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   CONFIG_PROPS: () => CONFIG_PROPS,
   EPSILON: () => EPSILON,
   Klint: () => Klint,
@@ -39,7 +39,7 @@ __export(src_exports, {
   useProps: () => useProps,
   useStorage: () => useStorage
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Klint.tsx
 var import_react = __toESM(require("react"), 1);
@@ -86,10 +86,8 @@ function useAnimate(contextRef, draw, isVisible) {
   const animationFrameId = (0, import_react.useRef)(0);
   const animate = (0, import_react.useCallback)(
     (timestamp = 0) => {
-      if (!contextRef.current || !isVisible)
-        return;
-      if (!contextRef.current.__isReadyToDraw)
-        return;
+      if (!contextRef.current || !isVisible) return;
+      if (!contextRef.current.__isReadyToDraw) return;
       if (!contextRef.current.__isPlaying) {
         return;
       }
@@ -105,10 +103,8 @@ function useAnimate(contextRef, draw, isVisible) {
       if (sinceLast >= target - epsilon) {
         context.deltaTime = now - context.__lastRealTime;
         draw(context);
-        if (context.time > 1e7)
-          context.time = 0;
-        if (context.frame > 1e7)
-          context.frame = 0;
+        if (context.time > 1e7) context.time = 0;
+        if (context.frame > 1e7) context.frame = 0;
         context.time += context.deltaTime / DEFAULT_FPS;
         context.frame++;
         context.__lastTargetTime = now;
@@ -161,19 +157,16 @@ function Klint({
     if (__options.origin === "center") {
       context2.translate(canvas.width * 0.5, canvas.height * 0.5);
     }
-    if (shouldRedraw)
-      draw(context2);
+    if (shouldRedraw) draw(context2);
   };
   (0, import_react.useEffect)(() => {
-    if (!canvasRef.current || !containerRef.current)
-      return;
+    if (!canvasRef.current || !containerRef.current) return;
     const canvas = canvasRef.current;
     const container = containerRef.current;
     const dpr = window.devicePixelRatio || 3;
     contextRef.current = initContext ? initContext(canvas, __options) : null;
     const context2 = contextRef.current;
-    if (!context2)
-      return;
+    if (!context2) return;
     context2.__dpr = dpr;
     if (__options.fps && __options.fps !== context2.fps) {
       context2.fps = __options.fps;
@@ -196,8 +189,7 @@ function Klint({
     );
     intersectionObserverRef.current.observe(container);
     const initializeKlint = async () => {
-      if (!context2)
-        return;
+      if (!context2) return;
       const handleStaticMode = () => {
         try {
           const imageUrl = canvas.toDataURL("image/png");
@@ -211,8 +203,7 @@ function Klint({
         if (preload && (unsafeReset || !context2.__isPreloaded)) {
           try {
             await preload(context2);
-            if (!unsafeReset)
-              context2.__isPreloaded = true;
+            if (!unsafeReset) context2.__isPreloaded = true;
           } catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             throw new Error(`Klint error in the preload: ${message}`);
@@ -221,8 +212,7 @@ function Klint({
         if (setup && (unsafeReset || !context2.__isSetup)) {
           try {
             setup(context2);
-            if (!unsafeReset)
-              context2.__isSetup = true;
+            if (!unsafeReset) context2.__isSetup = true;
           } catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             throw new Error(`Klint error in the setup: ${message}`);
@@ -239,14 +229,12 @@ function Klint({
         }
       };
       const unsafeMode = __options.unsafemode === "true";
-      if (!unsafeMode && context2.__isReadyToDraw)
-        return;
+      if (!unsafeMode && context2.__isReadyToDraw) return;
       await initializeContext(unsafeMode);
       if (__options.static === "true") {
         handleStaticMode();
       } else {
-        if (__options.noloop !== "true")
-          animate();
+        if (__options.noloop !== "true") animate();
       }
     };
     initializeKlint();
@@ -299,19 +287,16 @@ var KlintCoreFunctions = {
     ctx.canvas.requestFullscreen?.();
   },
   play: (ctx) => () => {
-    if (!ctx.__isPlaying)
-      ctx.__isPlaying = true;
+    if (!ctx.__isPlaying) ctx.__isPlaying = true;
   },
   pause: (ctx) => () => {
-    if (ctx.__isPlaying)
-      ctx.__isPlaying = false;
+    if (ctx.__isPlaying) ctx.__isPlaying = false;
   },
   // to do
   redraw: () => () => {
   },
   extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace)
-      return;
+    if (name in ctx && !enforceReplace) return;
     ctx[name] = data;
   },
   passImage: () => (element) => {
@@ -352,8 +337,7 @@ var KlintCoreFunctions = {
       alpha: options?.alpha ?? true,
       willReadFrequently: options?.willreadfrequently ?? false
     });
-    if (!context)
-      throw new Error("Failed to create offscreen context");
+    if (!context) throw new Error("Failed to create offscreen context");
     context.__dpr = ctx.__dpr;
     context.width = width * ctx.__dpr;
     context.height = height * ctx.__dpr;
@@ -402,8 +386,7 @@ var KlintCoreFunctions = {
 };
 var KlintFunctions = {
   extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace)
-      return;
+    if (name in ctx && !enforceReplace) return;
     ctx[name] = data;
   },
   background: (ctx) => (color) => {
@@ -457,27 +440,21 @@ var KlintFunctions = {
     ctx.restore();
   },
   point: (ctx) => (x, y) => {
-    if (!ctx.checkTransparency("stroke"))
-      return;
+    if (!ctx.checkTransparency("stroke")) return;
     ctx.beginPath();
     ctx.strokeRect(x, y, 1, 1);
   },
   checkTransparency: (ctx) => (toCheck) => {
-    if (toCheck === "stroke" && ctx.strokeStyle === "transparent")
-      return false;
-    if (toCheck === "fill" && ctx.fillStyle === "transparent")
-      return false;
+    if (toCheck === "stroke" && ctx.strokeStyle === "transparent") return false;
+    if (toCheck === "fill" && ctx.fillStyle === "transparent") return false;
     return true;
   },
   drawIfVisible: (ctx) => () => {
-    if (ctx.checkTransparency("fill"))
-      ctx.fill();
-    if (ctx.checkTransparency("stroke"))
-      ctx.stroke();
+    if (ctx.checkTransparency("fill")) ctx.fill();
+    if (ctx.checkTransparency("stroke")) ctx.stroke();
   },
   line: (ctx) => (x1, y1, x2, y2) => {
-    if (!ctx.checkTransparency("stroke"))
-      return;
+    if (!ctx.checkTransparency("stroke")) return;
     ctx.beginPath();
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2, y2);
@@ -523,25 +500,21 @@ var KlintFunctions = {
       const angle = i * 2 * Math.PI / sides + rotation;
       const pointX = x + radius * Math.cos(angle);
       const pointY = y + (radius2 ? radius2 : radius) * Math.sin(angle);
-      if (i === 0)
-        ctx.moveTo(pointX, pointY);
-      else
-        ctx.lineTo(pointX, pointY);
+      if (i === 0) ctx.moveTo(pointX, pointY);
+      else ctx.lineTo(pointX, pointY);
     }
     ctx.closePath();
     ctx.drawIfVisible();
   },
   beginShape: (ctx) => () => {
-    if (ctx.__startedShape)
-      return;
+    if (ctx.__startedShape) return;
     ctx.beginPath();
     ctx.__startedShape = true;
     ctx.__currentShape = [];
     ctx.__currentContours = [];
   },
   beginContour: (ctx) => () => {
-    if (!ctx.__startedShape)
-      return;
+    if (!ctx.__startedShape) return;
     if (ctx.__startedContour && ctx.__currentContour?.length) {
       ctx.__currentContours?.push([...ctx.__currentContour]);
     }
@@ -549,14 +522,12 @@ var KlintFunctions = {
     ctx.__currentContour = [];
   },
   vertex: (ctx) => (x, y) => {
-    if (!ctx.__startedShape)
-      return;
+    if (!ctx.__startedShape) return;
     const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
     points?.push([x, y]);
   },
   endContour: (ctx) => (forceRevert = true) => {
-    if (!ctx.__startedContour || !ctx.__currentContour?.length)
-      return;
+    if (!ctx.__startedContour || !ctx.__currentContour?.length) return;
     const contourPoints = [...ctx.__currentContour];
     if (forceRevert) {
       contourPoints.reverse();
@@ -566,13 +537,10 @@ var KlintFunctions = {
     ctx.__startedContour = false;
   },
   endShape: (ctx) => (close = false) => {
-    if (!ctx.__startedShape)
-      return;
-    if (ctx.__startedContour)
-      ctx.endContour();
+    if (!ctx.__startedShape) return;
+    if (ctx.__startedContour) ctx.endContour();
     const points = ctx.__currentShape;
-    if (!points?.length)
-      return;
+    if (!points?.length) return;
     const drawPath = (points2, close2 = false) => {
       ctx.moveTo(points2[0][0], points2[0][1]);
       for (let i = 1; i < points2.length; i++) {
@@ -622,8 +590,7 @@ var KlintFunctions = {
     if (mode === "fast") {
       return n - ~~(n / mod) * mod;
     }
-    if (n >= 0)
-      return n % mod;
+    if (n >= 0) return n % mod;
     return mod - -n % mod;
   },
   distance: (ctx) => (x1, y1, x2, y2, mode = "precise") => {
@@ -685,16 +652,14 @@ var KlintFunctions = {
   },
   computeFont: (ctx) => () => {
     ctx.computeTextStyle();
-    if (ctx.font !== ctx.__computedTextFont)
-      ctx.font = ctx.__computedTextFont;
+    if (ctx.font !== ctx.__computedTextFont) ctx.font = ctx.__computedTextFont;
   },
   textWidth: (ctx) => (text) => {
     ctx.computeFont();
     return ctx.measureText(text).width;
   },
   text: (ctx) => (text, x, y, maxWidth = void 0) => {
-    if (text === void 0)
-      return;
+    if (text === void 0) return;
     ctx.computeFont();
     if (ctx.textAlign !== ctx.__textAlignment.horizontal) {
       ctx.textAlign = ctx.__textAlignment.horizontal;
@@ -805,8 +770,7 @@ var KlintFunctions = {
     Object.assign(ctx, config);
   },
   resizeCanvas: (ctx) => (width, height) => {
-    if (ctx.__isMainContext)
-      return;
+    if (ctx.__isMainContext) return;
     const config = ctx.saveConfig();
     ctx.canvas.width = ctx.width = width;
     ctx.canvas.height = ctx.height = height;
@@ -906,8 +870,7 @@ function useKlint() {
     const mouseDownCallbackRef = (0, import_react2.useRef)(null);
     const mouseUpCallbackRef = (0, import_react2.useRef)(null);
     (0, import_react2.useEffect)(() => {
-      if (!contextRef.current?.canvas)
-        return;
+      if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
       const updateMousePosition = (e) => {
@@ -930,32 +893,23 @@ function useKlint() {
         }
       };
       const handleMouseDown = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isPressed = true;
-        if (mouseDownCallbackRef.current)
-          mouseDownCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isPressed = true;
+        if (mouseDownCallbackRef.current) mouseDownCallbackRef.current(ctx, e);
       };
       const handleMouseUp = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isPressed = false;
-        if (mouseUpCallbackRef.current)
-          mouseUpCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isPressed = false;
+        if (mouseUpCallbackRef.current) mouseUpCallbackRef.current(ctx, e);
       };
       const handleMouseEnter = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isHover = true;
-        if (mouseInCallbackRef.current)
-          mouseInCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isHover = true;
+        if (mouseInCallbackRef.current) mouseInCallbackRef.current(ctx, e);
       };
       const handleMouseLeave = (e) => {
-        if (mouseRef.current)
-          mouseRef.current.isHover = false;
-        if (mouseOutCallbackRef.current)
-          mouseOutCallbackRef.current(ctx, e);
+        if (mouseRef.current) mouseRef.current.isHover = false;
+        if (mouseOutCallbackRef.current) mouseOutCallbackRef.current(ctx, e);
       };
       const handleClick = (e) => {
-        if (clickCallbackRef.current)
-          clickCallbackRef.current(ctx, e);
+        if (clickCallbackRef.current) clickCallbackRef.current(ctx, e);
       };
       canvas.addEventListener("mousemove", updateMousePosition);
       canvas.addEventListener("mousedown", handleMouseDown);
@@ -987,14 +941,12 @@ function useKlint() {
     }
     const scrollCallbackRef = (0, import_react2.useRef)(null);
     (0, import_react2.useEffect)(() => {
-      if (!contextRef.current?.canvas)
-        return;
+      if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
       const handleScroll = (e) => {
         e.preventDefault();
-        if (!scrollRef.current)
-          return;
+        if (!scrollRef.current) return;
         const currentTime = performance.now();
         const deltaTime = currentTime - scrollRef.current.lastTime;
         scrollRef.current.distance += e.deltaY;
@@ -1020,20 +972,16 @@ function useKlint() {
     const focusCallbackRef = (0, import_react2.useRef)(null);
     const visibilityChangeCallbackRef = (0, import_react2.useRef)(null);
     (0, import_react2.useEffect)(() => {
-      if (!contextRef.current)
-        return;
+      if (!contextRef.current) return;
       const ctx = contextRef.current;
       const handleResize = () => {
-        if (resizeCallbackRef.current)
-          resizeCallbackRef.current(ctx);
+        if (resizeCallbackRef.current) resizeCallbackRef.current(ctx);
       };
       const handleBlur = () => {
-        if (blurCallbackRef.current)
-          blurCallbackRef.current(ctx);
+        if (blurCallbackRef.current) blurCallbackRef.current(ctx);
       };
       const handleFocus = () => {
-        if (focusCallbackRef.current)
-          focusCallbackRef.current(ctx);
+        if (focusCallbackRef.current) focusCallbackRef.current(ctx);
       };
       const handleVisibilityChange = () => {
         const isVisible = document.visibilityState === "visible";
@@ -1098,8 +1046,7 @@ function useKlint() {
           alpha: options.alpha ?? true,
           willReadFrequently: options.willreadfrequently ?? true
         });
-        if (!ctx)
-          throw new Error("Failed to get canvas context");
+        if (!ctx) throw new Error("Failed to get canvas context");
         contextRef.current = buildKlintContext(ctx, options);
       }
       return contextRef.current;
@@ -1107,8 +1054,7 @@ function useKlint() {
     []
   );
   const togglePlay = (0, import_react2.useCallback)((playing) => {
-    if (!contextRef.current)
-      return;
+    if (!contextRef.current) return;
     if (playing !== void 0) {
       contextRef.current.__isPlaying = playing;
     } else {