@pixelfiddler/react 0.1.2 → 0.1.3

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.
package/dist/index.cjs CHANGED
@@ -9,6 +9,18 @@ var PixelFiddlerContext = react.createContext(null);
9
9
  function PixelFiddlerProvider({ children, config }) {
10
10
  return /* @__PURE__ */ jsxRuntime.jsx(PixelFiddlerContext.Provider, { value: { config }, children });
11
11
  }
12
+
13
+ // src/utils/normalize.ts
14
+ var parseNumberLikeWidth = (width) => {
15
+ if (typeof width === "number") {
16
+ return width;
17
+ }
18
+ const parsed = Number(width);
19
+ if (!Number.isFinite(parsed)) {
20
+ throw new Error(`Invalid width value: ${width}`);
21
+ }
22
+ return parsed;
23
+ };
12
24
  function PixelFiddleImage({
13
25
  src,
14
26
  sizes,
@@ -30,7 +42,7 @@ function PixelFiddleImage({
30
42
  if (responsive && (sizes || width)) {
31
43
  return core.createResponsiveAttributes(urlConfig, {
32
44
  ...sizes && { sizes },
33
- ...width && { width },
45
+ ...width && { width: parseNumberLikeWidth(width) },
34
46
  ...deviceBreakpoints && { deviceBreakpoints },
35
47
  ...imageBreakpoints && { imageBreakpoints },
36
48
  ...transformations && { transformations }
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddle-image.tsx"],"names":["createContext","jsx","useContext","useMemo","createResponsiveAttributes","buildTransformationUrl"],"mappings":";;;;;;;AAOO,IAAM,mBAAA,GAAsBA,oBAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACEC,cAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACYO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAOC,gCAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAKC,2BAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.cjs","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n children: ReactNode;\n config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n return (\n <PixelFiddlerContext.Provider value={{config}}>\n {children}\n </PixelFiddlerContext.Provider>\n );\n}\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n buildTransformationUrl,\n createResponsiveAttributes,\n TransformationOptions,\n UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\n\nexport interface PixelFiddlerImageProps\n extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {\n /** Base URL of the image (without transformations) */\n src: string;\n /**\n * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n * When provided, generates width descriptors (`w`) for fluid layouts.\n */\n sizes?: string;\n /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n width?: number;\n /** Transformation options to apply */\n transformations?: TransformationOptions;\n /** Override the provider config for this image */\n config?: UrlBuilderConfig;\n /** Custom device breakpoints for responsive srcset */\n deviceBreakpoints?: number[];\n /** Custom image breakpoints for smaller images */\n imageBreakpoints?: number[];\n /** Enables automatic srcSet generation (default: true) */\n responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n src,\n sizes,\n width,\n transformations,\n config: configProp,\n deviceBreakpoints,\n imageBreakpoints,\n responsive = true,\n ...imgProps\n}: PixelFiddlerImageProps) {\n const context = useContext(PixelFiddlerContext);\n const config = configProp ?? context?.config;\n\n const imageAttrs = useMemo(() => {\n const urlConfig: UrlBuilderConfig = {\n ...config,\n baseUrl: src,\n };\n\n if (responsive && (sizes || width)) {\n return createResponsiveAttributes(urlConfig, {\n ...(sizes && { sizes }),\n ...(width && { width }),\n ...(deviceBreakpoints && { deviceBreakpoints }),\n ...(imageBreakpoints && { imageBreakpoints }),\n ...(transformations && { transformations }),\n });\n }\n\n if (!transformations || Object.keys(transformations).length === 0) {\n return { src };\n }\n\n return {\n src: buildTransformationUrl(urlConfig, transformations),\n };\n }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n return (\n <img\n src={imageAttrs.src}\n srcSet={imageAttrs.srcSet}\n sizes={imageAttrs.sizes}\n width={imageAttrs.width ?? width}\n {...imgProps}\n />\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/utils/normalize.ts","../src/components/pixel-fiddle-image.tsx"],"names":["createContext","jsx","useContext","useMemo","createResponsiveAttributes","buildTransformationUrl"],"mappings":";;;;;;;AAOO,IAAM,mBAAA,GAAsBA,oBAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACEC,cAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;;;ACpBO,IAAM,oBAAA,GAAuB,CAChC,KAAA,KACS;AACT,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC3B,IAAA,OAAO,KAAA;AAAA,EACX;AAEA,EAAA,MAAM,MAAA,GAAS,OAAO,KAAK,CAAA;AAE3B,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,EAAG;AAC1B,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,qBAAA,EAAwB,KAAK,CAAA,CAAE,CAAA;AAAA,EACnD;AAEA,EAAA,OAAO,MAAA;AACX,CAAA;ACmBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAaC,cAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAOC,gCAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAO,oBAAA,CAAqB,KAAK,CAAA,EAAC;AAAA,QACjD,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAKC,2BAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.cjs","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n children: ReactNode;\n config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n return (\n <PixelFiddlerContext.Provider value={{config}}>\n {children}\n </PixelFiddlerContext.Provider>\n );\n}\n","export const parseNumberLikeWidth = (\r\n width: number | `${number}`\r\n): number => {\r\n if (typeof width === 'number') {\r\n return width;\r\n }\r\n\r\n const parsed = Number(width);\r\n\r\n if (!Number.isFinite(parsed)) {\r\n throw new Error(`Invalid width value: ${width}`);\r\n }\r\n\r\n return parsed;\r\n};\r\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n buildTransformationUrl,\n createResponsiveAttributes,\n TransformationOptions,\n UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\nimport { parseNumberLikeWidth } from '../utils/normalize';\n\nexport interface PixelFiddlerImageProps\n extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {\n /** Base URL of the image (without transformations) */\n src: string;\n /**\n * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n * When provided, generates width descriptors (`w`) for fluid layouts.\n */\n sizes?: string;\n /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n width?: number | `${number}`;\n /** Transformation options to apply */\n transformations?: TransformationOptions;\n /** Override the provider config for this image */\n config?: UrlBuilderConfig;\n /** Custom device breakpoints for responsive srcset */\n deviceBreakpoints?: number[];\n /** Custom image breakpoints for smaller images */\n imageBreakpoints?: number[];\n /** Enables automatic srcSet generation (default: true) */\n responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n src,\n sizes,\n width,\n transformations,\n config: configProp,\n deviceBreakpoints,\n imageBreakpoints,\n responsive = true,\n ...imgProps\n}: PixelFiddlerImageProps) {\n const context = useContext(PixelFiddlerContext);\n const config = configProp ?? context?.config;\n\n const imageAttrs = useMemo(() => {\n const urlConfig: UrlBuilderConfig = {\n ...config,\n baseUrl: src,\n };\n\n if (responsive && (sizes || width)) {\n return createResponsiveAttributes(urlConfig, {\n ...(sizes && { sizes }),\n ...(width && { width: parseNumberLikeWidth(width)}),\n ...(deviceBreakpoints && { deviceBreakpoints }),\n ...(imageBreakpoints && { imageBreakpoints }),\n ...(transformations && { transformations }),\n });\n }\n\n if (!transformations || Object.keys(transformations).length === 0) {\n return { src };\n }\n\n return {\n src: buildTransformationUrl(urlConfig, transformations),\n };\n }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n return (\n <img\n src={imageAttrs.src}\n srcSet={imageAttrs.srcSet}\n sizes={imageAttrs.sizes}\n width={imageAttrs.width ?? width}\n {...imgProps}\n />\n );\n}\n"]}
package/dist/index.d.cts CHANGED
@@ -3,7 +3,7 @@ import { ImgHTMLAttributes, ReactNode } from 'react';
3
3
  import { TransformationOptions, UrlBuilderConfig, PixelFiddlerConfig } from '@pixelfiddler/core';
4
4
  export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
5
5
 
6
- interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {
6
+ interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {
7
7
  /** Base URL of the image (without transformations) */
8
8
  src: string;
9
9
  /**
@@ -12,7 +12,7 @@ interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement
12
12
  */
13
13
  sizes?: string;
14
14
  /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */
15
- width?: number;
15
+ width?: number | `${number}`;
16
16
  /** Transformation options to apply */
17
17
  transformations?: TransformationOptions;
18
18
  /** Override the provider config for this image */
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ImgHTMLAttributes, ReactNode } from 'react';
3
3
  import { TransformationOptions, UrlBuilderConfig, PixelFiddlerConfig } from '@pixelfiddler/core';
4
4
  export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
5
5
 
6
- interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {
6
+ interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {
7
7
  /** Base URL of the image (without transformations) */
8
8
  src: string;
9
9
  /**
@@ -12,7 +12,7 @@ interface PixelFiddlerImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement
12
12
  */
13
13
  sizes?: string;
14
14
  /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */
15
- width?: number;
15
+ width?: number | `${number}`;
16
16
  /** Transformation options to apply */
17
17
  transformations?: TransformationOptions;
18
18
  /** Override the provider config for this image */
package/dist/index.js CHANGED
@@ -7,6 +7,18 @@ var PixelFiddlerContext = createContext(null);
7
7
  function PixelFiddlerProvider({ children, config }) {
8
8
  return /* @__PURE__ */ jsx(PixelFiddlerContext.Provider, { value: { config }, children });
9
9
  }
10
+
11
+ // src/utils/normalize.ts
12
+ var parseNumberLikeWidth = (width) => {
13
+ if (typeof width === "number") {
14
+ return width;
15
+ }
16
+ const parsed = Number(width);
17
+ if (!Number.isFinite(parsed)) {
18
+ throw new Error(`Invalid width value: ${width}`);
19
+ }
20
+ return parsed;
21
+ };
10
22
  function PixelFiddleImage({
11
23
  src,
12
24
  sizes,
@@ -28,7 +40,7 @@ function PixelFiddleImage({
28
40
  if (responsive && (sizes || width)) {
29
41
  return createResponsiveAttributes(urlConfig, {
30
42
  ...sizes && { sizes },
31
- ...width && { width },
43
+ ...width && { width: parseNumberLikeWidth(width) },
32
44
  ...deviceBreakpoints && { deviceBreakpoints },
33
45
  ...imageBreakpoints && { imageBreakpoints },
34
46
  ...transformations && { transformations }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/components/pixel-fiddle-image.tsx"],"names":["jsx"],"mappings":";;;;;AAOO,IAAM,mBAAA,GAAsB,cAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACE,GAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;ACYO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAO,2BAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAK,sBAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n children: ReactNode;\n config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n return (\n <PixelFiddlerContext.Provider value={{config}}>\n {children}\n </PixelFiddlerContext.Provider>\n );\n}\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n buildTransformationUrl,\n createResponsiveAttributes,\n TransformationOptions,\n UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\n\nexport interface PixelFiddlerImageProps\n extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height' | 'sizes'> {\n /** Base URL of the image (without transformations) */\n src: string;\n /**\n * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n * When provided, generates width descriptors (`w`) for fluid layouts.\n */\n sizes?: string;\n /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n width?: number;\n /** Transformation options to apply */\n transformations?: TransformationOptions;\n /** Override the provider config for this image */\n config?: UrlBuilderConfig;\n /** Custom device breakpoints for responsive srcset */\n deviceBreakpoints?: number[];\n /** Custom image breakpoints for smaller images */\n imageBreakpoints?: number[];\n /** Enables automatic srcSet generation (default: true) */\n responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n src,\n sizes,\n width,\n transformations,\n config: configProp,\n deviceBreakpoints,\n imageBreakpoints,\n responsive = true,\n ...imgProps\n}: PixelFiddlerImageProps) {\n const context = useContext(PixelFiddlerContext);\n const config = configProp ?? context?.config;\n\n const imageAttrs = useMemo(() => {\n const urlConfig: UrlBuilderConfig = {\n ...config,\n baseUrl: src,\n };\n\n if (responsive && (sizes || width)) {\n return createResponsiveAttributes(urlConfig, {\n ...(sizes && { sizes }),\n ...(width && { width }),\n ...(deviceBreakpoints && { deviceBreakpoints }),\n ...(imageBreakpoints && { imageBreakpoints }),\n ...(transformations && { transformations }),\n });\n }\n\n if (!transformations || Object.keys(transformations).length === 0) {\n return { src };\n }\n\n return {\n src: buildTransformationUrl(urlConfig, transformations),\n };\n }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n return (\n <img\n src={imageAttrs.src}\n srcSet={imageAttrs.srcSet}\n sizes={imageAttrs.sizes}\n width={imageAttrs.width ?? width}\n {...imgProps}\n />\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/utils/normalize.ts","../src/components/pixel-fiddle-image.tsx"],"names":["jsx"],"mappings":";;;;;AAOO,IAAM,mBAAA,GAAsB,cAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AACpF,EAAA,uBACE,GAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACnC,QAAA,EACH,CAAA;AAEJ;;;ACpBO,IAAM,oBAAA,GAAuB,CAChC,KAAA,KACS;AACT,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC3B,IAAA,OAAO,KAAA;AAAA,EACX;AAEA,EAAA,MAAM,MAAA,GAAS,OAAO,KAAK,CAAA;AAE3B,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,EAAG;AAC1B,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,qBAAA,EAAwB,KAAK,CAAA,CAAE,CAAA;AAAA,EACnD;AAEA,EAAA,OAAO,MAAA;AACX,CAAA;ACmBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,MAAA,GAAS,cAAc,OAAA,EAAS,MAAA;AAEtC,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAA8B;AAAA,MAClC,GAAG,MAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAEA,IAAA,IAAI,UAAA,KAAe,SAAS,KAAA,CAAA,EAAQ;AAClC,MAAA,OAAO,2BAA2B,SAAA,EAAW;AAAA,QAC3C,GAAI,KAAA,IAAS,EAAE,KAAA,EAAM;AAAA,QACrB,GAAI,KAAA,IAAS,EAAE,KAAA,EAAO,oBAAA,CAAqB,KAAK,CAAA,EAAC;AAAA,QACjD,GAAI,iBAAA,IAAqB,EAAE,iBAAA,EAAkB;AAAA,QAC7C,GAAI,gBAAA,IAAoB,EAAE,gBAAA,EAAiB;AAAA,QAC3C,GAAI,eAAA,IAAmB,EAAE,eAAA;AAAgB,OAC1C,CAAA;AAAA,IACH;AAEA,IAAA,IAAI,CAAC,eAAA,IAAmB,MAAA,CAAO,KAAK,eAAe,CAAA,CAAE,WAAW,CAAA,EAAG;AACjE,MAAA,OAAO,EAAE,GAAA,EAAI;AAAA,IACf;AAEA,IAAA,OAAO;AAAA,MACL,GAAA,EAAK,sBAAA,CAAuB,SAAA,EAAW,eAAe;AAAA,KACxD;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,KAAA,EAAO,OAAO,eAAA,EAAiB,iBAAA,EAAmB,gBAAA,EAAkB,UAAU,CAAC,CAAA;AAExF,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,UAAA,CAAW,GAAA;AAAA,MAChB,QAAQ,UAAA,CAAW,MAAA;AAAA,MACnB,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,KAAA,EAAO,WAAW,KAAA,IAAS,KAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ","file":"index.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\n\nexport interface PixelFiddlerContextValue {\n config: PixelFiddlerConfig;\n}\n\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\n\nexport interface PixelFiddlerProviderProps {\n children: ReactNode;\n config: PixelFiddlerConfig;\n}\n\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\n return (\n <PixelFiddlerContext.Provider value={{config}}>\n {children}\n </PixelFiddlerContext.Provider>\n );\n}\n","export const parseNumberLikeWidth = (\r\n width: number | `${number}`\r\n): number => {\r\n if (typeof width === 'number') {\r\n return width;\r\n }\r\n\r\n const parsed = Number(width);\r\n\r\n if (!Number.isFinite(parsed)) {\r\n throw new Error(`Invalid width value: ${width}`);\r\n }\r\n\r\n return parsed;\r\n};\r\n","import { useMemo, ImgHTMLAttributes, useContext } from 'react';\nimport {\n buildTransformationUrl,\n createResponsiveAttributes,\n TransformationOptions,\n UrlBuilderConfig,\n} from '@pixelfiddler/core';\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context';\nimport { parseNumberLikeWidth } from '../utils/normalize';\n\nexport interface PixelFiddlerImageProps\n extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'sizes'> {\n /** Base URL of the image (without transformations) */\n src: string;\n /**\n * The sizes attribute for responsive images (e.g., \"100vw\", \"(max-width: 768px) 100vw, 50vw\").\n * When provided, generates width descriptors (`w`) for fluid layouts.\n */\n sizes?: string;\n /** Display width in CSS pixels. When provided without `sizes`, generates DPR descriptors (`x`). */\n width?: number | `${number}`;\n /** Transformation options to apply */\n transformations?: TransformationOptions;\n /** Override the provider config for this image */\n config?: UrlBuilderConfig;\n /** Custom device breakpoints for responsive srcset */\n deviceBreakpoints?: number[];\n /** Custom image breakpoints for smaller images */\n imageBreakpoints?: number[];\n /** Enables automatic srcSet generation (default: true) */\n responsive?: boolean;\n}\n\nexport function PixelFiddleImage({\n src,\n sizes,\n width,\n transformations,\n config: configProp,\n deviceBreakpoints,\n imageBreakpoints,\n responsive = true,\n ...imgProps\n}: PixelFiddlerImageProps) {\n const context = useContext(PixelFiddlerContext);\n const config = configProp ?? context?.config;\n\n const imageAttrs = useMemo(() => {\n const urlConfig: UrlBuilderConfig = {\n ...config,\n baseUrl: src,\n };\n\n if (responsive && (sizes || width)) {\n return createResponsiveAttributes(urlConfig, {\n ...(sizes && { sizes }),\n ...(width && { width: parseNumberLikeWidth(width)}),\n ...(deviceBreakpoints && { deviceBreakpoints }),\n ...(imageBreakpoints && { imageBreakpoints }),\n ...(transformations && { transformations }),\n });\n }\n\n if (!transformations || Object.keys(transformations).length === 0) {\n return { src };\n }\n\n return {\n src: buildTransformationUrl(urlConfig, transformations),\n };\n }, [src, sizes, width, transformations, deviceBreakpoints, imageBreakpoints, responsive]);\n\n return (\n <img\n src={imageAttrs.src}\n srcSet={imageAttrs.srcSet}\n sizes={imageAttrs.sizes}\n width={imageAttrs.width ?? width}\n {...imgProps}\n />\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pixelfiddler/react",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "React components for PixelFiddler image transformation SDK",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -22,19 +22,21 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@pixelfiddler/core": "0.1.4"
25
+ "@pixelfiddler/core": "0.1.5"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "react": ">=18.0.0"
29
29
  },
30
30
  "devDependencies": {
31
+ "@testing-library/react": "^16.3.2",
31
32
  "@types/react": "^18.2.0",
32
33
  "@vitest/coverage-v8": "^4.0.18",
33
- "react": "^18.2.0",
34
+ "jsdom": "^27.4.0",
35
+ "react": "^18.3.1",
36
+ "react-dom": "18",
34
37
  "tsup": "^8.0.1",
35
38
  "typescript": "^5.3.3",
36
- "vitest": "^4.0.18",
37
- "@testing-library/react": "^16.3.2"
39
+ "vitest": "^4.0.18"
38
40
  },
39
41
  "keywords": [
40
42
  "pixelfiddler",