@shopify/klint 0.0.93 → 0.0.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/elements/index.d.cts +2 -0
  2. package/dist/elements/index.d.ts +2 -0
  3. package/dist/index.cjs +7 -4
  4. package/dist/index.d.cts +8 -2
  5. package/dist/index.d.ts +8 -2
  6. package/dist/index.js +7 -4
  7. package/package.json +4 -4
package/dist/elements/index.d.cts CHANGED
@@ -352,6 +352,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
352
352
  horizontal: CanvasTextAlign;
353
353
  vertical: CanvasTextBaseline;
354
354
  };
355
+ createVector: (x: number, y: number) => Vector;
355
356
  [key: string]: any;
356
357
  }
357
358
  interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -375,6 +376,7 @@ interface KlintCanvasOptions {
375
376
  nocanvas?: string;
376
377
  fps?: number;
377
378
  unsafemode?: string;
379
+ dpr?: number | "default";
378
380
  origin?: "corner" | "center";
379
381
  }
380
382
  type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
package/dist/elements/index.d.ts CHANGED
@@ -352,6 +352,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
352
352
  horizontal: CanvasTextAlign;
353
353
  vertical: CanvasTextBaseline;
354
354
  };
355
+ createVector: (x: number, y: number) => Vector;
355
356
  [key: string]: any;
356
357
  }
357
358
  interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -375,6 +376,7 @@ interface KlintCanvasOptions {
375
376
  nocanvas?: string;
376
377
  fps?: number;
377
378
  unsafemode?: string;
379
+ dpr?: number | "default";
378
380
  origin?: "corner" | "center";
379
381
  }
380
382
  type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
package/dist/index.cjs CHANGED
@@ -55,6 +55,7 @@ var DEFAULT_OPTIONS = {
55
55
  unsafemode: "false",
56
56
  willreadfrequently: "false",
57
57
  fps: DEFAULT_FPS,
58
+ dpr: "default",
58
59
  origin: "corner"
59
60
  };
60
61
  var CONFIG_PROPS = [
@@ -165,7 +166,8 @@ function Klint({
165
166
  if (!canvasRef.current || !containerRef.current) return;
166
167
  const canvas = canvasRef.current;
167
168
  const container = containerRef.current;
168
- const dpr = window.devicePixelRatio || 3;
169
+ const defaultDPR = window.devicePixelRatio || 3;
170
+ const dpr = __options.dpr ? __options.dpr === "default" ? defaultDPR : __options.dpr : defaultDPR;
169
171
  contextRef.current = initContext ? initContext(canvas, __options) : null;
170
172
  const context2 = contextRef.current;
171
173
  if (!context2) return;
@@ -1721,7 +1723,7 @@ function useKlint() {
1721
1723
  const KlintImage = () => {
1722
1724
  const imagesRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
1723
1725
  const loadImage = (0, import_react2.useCallback)(
1724
- async (key, url) => {
1726
+ async (key, url, options) => {
1725
1727
  return new Promise((resolve, reject) => {
1726
1728
  const img = new Image();
1727
1729
  img.onload = () => {
@@ -1731,15 +1733,16 @@ function useKlint() {
1731
1733
  resolve(img);
1732
1734
  };
1733
1735
  img.onerror = reject;
1736
+ img.crossOrigin = options?.crossOrigin || "anonymous";
1734
1737
  img.src = url;
1735
1738
  });
1736
1739
  },
1737
1740
  []
1738
1741
  );
1739
1742
  const loadImages = (0, import_react2.useCallback)(
1740
- async (imageMap) => {
1743
+ async (imageMap, options) => {
1741
1744
  const promises = Object.entries(imageMap).map(
1742
- ([key, url]) => loadImage(key, url).then(
1745
+ ([key, url]) => loadImage(key, url, options).then(
1743
1746
  (img) => [key, img]
1744
1747
  )
1745
1748
  );
package/dist/index.d.cts CHANGED
@@ -628,6 +628,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
628
628
  horizontal: CanvasTextAlign;
629
629
  vertical: CanvasTextBaseline;
630
630
  };
631
+ createVector: (x: number, y: number) => Vector;
631
632
  [key: string]: any;
632
633
  }
633
634
  interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -651,6 +652,7 @@ interface KlintCanvasOptions {
651
652
  nocanvas?: string;
652
653
  fps?: number;
653
654
  unsafemode?: string;
655
+ dpr?: number | "default";
654
656
  origin?: "corner" | "center";
655
657
  }
656
658
  type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
@@ -711,8 +713,12 @@ declare function useKlint(): {
711
713
  };
712
714
  KlintImage: () => {
713
715
  images: Record<string, HTMLImageElement>;
714
- loadImage: (key: string, url: string) => Promise<HTMLImageElement>;
715
- loadImages: (imageMap: Record<string, string>) => Promise<Map<string, HTMLImageElement>>;
716
+ loadImage: (key: string, url: string, options?: {
717
+ crossOrigin?: string;
718
+ }) => Promise<HTMLImageElement>;
719
+ loadImages: (imageMap: Record<string, string>, options?: {
720
+ crossOrigin?: string;
721
+ }) => Promise<Map<string, HTMLImageElement>>;
716
722
  getImage: (key: string) => HTMLImageElement | undefined;
717
723
  hasImage: (key: string) => boolean;
718
724
  clearImages: () => void;
package/dist/index.d.ts CHANGED
@@ -628,6 +628,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
628
628
  horizontal: CanvasTextAlign;
629
629
  vertical: CanvasTextBaseline;
630
630
  };
631
+ createVector: (x: number, y: number) => Vector;
631
632
  [key: string]: any;
632
633
  }
633
634
  interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -651,6 +652,7 @@ interface KlintCanvasOptions {
651
652
  nocanvas?: string;
652
653
  fps?: number;
653
654
  unsafemode?: string;
655
+ dpr?: number | "default";
654
656
  origin?: "corner" | "center";
655
657
  }
656
658
  type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
@@ -711,8 +713,12 @@ declare function useKlint(): {
711
713
  };
712
714
  KlintImage: () => {
713
715
  images: Record<string, HTMLImageElement>;
714
- loadImage: (key: string, url: string) => Promise<HTMLImageElement>;
715
- loadImages: (imageMap: Record<string, string>) => Promise<Map<string, HTMLImageElement>>;
716
+ loadImage: (key: string, url: string, options?: {
717
+ crossOrigin?: string;
718
+ }) => Promise<HTMLImageElement>;
719
+ loadImages: (imageMap: Record<string, string>, options?: {
720
+ crossOrigin?: string;
721
+ }) => Promise<Map<string, HTMLImageElement>>;
716
722
  getImage: (key: string) => HTMLImageElement | undefined;
717
723
  hasImage: (key: string) => boolean;
718
724
  clearImages: () => void;
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ var DEFAULT_OPTIONS = {
12
12
  unsafemode: "false",
13
13
  willreadfrequently: "false",
14
14
  fps: DEFAULT_FPS,
15
+ dpr: "default",
15
16
  origin: "corner"
16
17
  };
17
18
  var CONFIG_PROPS = [
@@ -122,7 +123,8 @@ function Klint({
122
123
  if (!canvasRef.current || !containerRef.current) return;
123
124
  const canvas = canvasRef.current;
124
125
  const container = containerRef.current;
125
- const dpr = window.devicePixelRatio || 3;
126
+ const defaultDPR = window.devicePixelRatio || 3;
127
+ const dpr = __options.dpr ? __options.dpr === "default" ? defaultDPR : __options.dpr : defaultDPR;
126
128
  contextRef.current = initContext ? initContext(canvas, __options) : null;
127
129
  const context2 = contextRef.current;
128
130
  if (!context2) return;
@@ -1678,7 +1680,7 @@ function useKlint() {
1678
1680
  const KlintImage = () => {
1679
1681
  const imagesRef = useRef2(/* @__PURE__ */ new Map());
1680
1682
  const loadImage = useCallback2(
1681
- async (key, url) => {
1683
+ async (key, url, options) => {
1682
1684
  return new Promise((resolve, reject) => {
1683
1685
  const img = new Image();
1684
1686
  img.onload = () => {
@@ -1688,15 +1690,16 @@ function useKlint() {
1688
1690
  resolve(img);
1689
1691
  };
1690
1692
  img.onerror = reject;
1693
+ img.crossOrigin = options?.crossOrigin || "anonymous";
1691
1694
  img.src = url;
1692
1695
  });
1693
1696
  },
1694
1697
  []
1695
1698
  );
1696
1699
  const loadImages = useCallback2(
1697
- async (imageMap) => {
1700
+ async (imageMap, options) => {
1698
1701
  const promises = Object.entries(imageMap).map(
1699
- ([key, url]) => loadImage(key, url).then(
1702
+ ([key, url]) => loadImage(key, url, options).then(
1700
1703
  (img) => [key, img]
1701
1704
  )
1702
1705
  );
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shopify/klint",
3
3
  "author": "arthurcloche",
4
4
  "license": "MIT",
5
- "version": "0.0.93",
5
+ "version": "0.0.96",
6
6
  "description": "A modern creative coding library",
7
7
  "type": "module",
8
8
  "main": "dist/index.cjs",
@@ -66,12 +66,12 @@
66
66
  "version": "yarn version"
67
67
  },
68
68
  "peerDependencies": {
69
- "react": "^19.1.0",
69
+ "react": ">=16.8.0",
70
70
  "react-dom": ">=16.8.0"
71
71
  },
72
72
  "devDependencies": {
73
- "@types/react": "^19.1.1",
74
- "@types/react-dom": "^19.1.2",
73
+ "@types/react": "^16.0.0",
74
+ "@types/react-dom": "^16.0.0",
75
75
  "concurrently": "^8.2.0",
76
76
  "jsdom": "^26.0.0",
77
77
  "rimraf": "^5.0.0",