@pixelfiddler/next 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PixelFiddler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+TBD

package/dist/index.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+var react = require('react');
+var Image = require('next/image');
+var core = require('@pixelfiddler/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Image__default = /*#__PURE__*/_interopDefault(Image);
+
+// src/components/pixel-fiddler-image.tsx
+var PixelFiddlerContext = react.createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+var loader = ({ src, baseUrl, width: loaderWidth, transformations }) => {
+  return core.buildTransformationUrl({
+    src,
+    baseUrl,
+    transformations: {
+      ...transformations,
+      width: loaderWidth
+    }
+  });
+};
+function PixelFiddlerImage({
+  src,
+  transformations,
+  baseUrl,
+  responsive = true,
+  unoptimized = false,
+  quality,
+  ...imageProps
+}) {
+  const context = react.useContext(PixelFiddlerContext);
+  const finalBaseUrl = baseUrl || context?.config?.baseUrl;
+  const srcWithoutTransformations = react.useMemo(() => {
+    return core.buildTransformationUrl({
+      baseUrl: finalBaseUrl,
+      src
+    });
+  }, [src]);
+  if (unoptimized) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Image__default.default,
+      {
+        unoptimized: true,
+        src: core.buildTransformationUrl({ src, baseUrl: finalBaseUrl }),
+        ...imageProps
+      }
+    );
+  }
+  if (!responsive) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Image__default.default,
+      {
+        unoptimized: true,
+        src: core.buildTransformationUrl(
+          {
+            src,
+            baseUrl: finalBaseUrl,
+            transformations: {
+              ...transformations,
+              quality: quality && core.parseNumberLikeParam(quality)
+            }
+          }
+        ),
+        ...imageProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Image__default.default,
+    {
+      loader: ({ src: src2, width }) => loader(
+        {
+          width,
+          src: src2,
+          transformations: {
+            ...transformations,
+            quality: quality && core.parseNumberLikeParam(quality)
+          },
+          baseUrl: finalBaseUrl
+        }
+      ),
+      src: srcWithoutTransformations,
+      ...imageProps
+    }
+  );
+}
+
+exports.PixelFiddlerImage = PixelFiddlerImage;
+exports.PixelFiddlerProvider = PixelFiddlerProvider;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/utils/loader.ts","../src/components/pixel-fiddler-image.tsx"],"names":["createContext","jsx","buildTransformationUrl","useContext","useMemo","Image","parseNumberLikeParam","src"],"mappings":";;;;;;;;;;;;AAOO,IAAM,mBAAA,GAAsBA,oBAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AAClF,EAAA,uBACIC,cAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACjC,QAAA,EACL,CAAA;AAER;ACVO,IAAM,MAAA,GAA6B,CAAC,EAAC,GAAA,EAAK,SAAS,KAAA,EAAO,WAAA,EAAa,iBAAe,KAAM;AAC/F,EAAA,OAAOC,2BAAA,CAAuB;AAAA,IAC1B,GAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA,EAAiB;AAAA,MACb,GAAG,eAAA;AAAA,MACH,KAAA,EAAO;AAAA;AACX,GACH,CAAA;AACL,CAAA;ACcO,SAAS,iBAAA,CAAkB;AAAA,EACI,GAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,WAAA,GAAc,KAAA;AAAA,EACd,OAAA;AAAA,EACA,GAAG;AACP,CAAA,EAA2B;AACzD,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,OAAA,IAAW,OAAA,EAAS,MAAA,EAAQ,OAAA;AAGjD,EAAA,MAAM,yBAAA,GAA4BC,cAAQ,MAAM;AAC5C,IAAA,OAAOF,2BAAAA,CAAuB;AAAA,MAC1B,OAAA,EAAS,YAAA;AAAA,MACT;AAAA,KACH,CAAA;AAAA,EACL,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,IAAI,WAAA,EAAa;AACb,IAAA,uBAAOD,cAAAA;AAAA,MAACI,sBAAA;AAAA,MAAA;AAAA,QAAM,WAAA,EAAa,IAAA;AAAA,QACb,KAAKH,2BAAAA,CAAuB,EAAC,GAAA,EAAK,OAAA,EAAS,cAAa,CAAA;AAAA,QACvD,GAAG;AAAA;AAAA,KAClB;AAAA,EACJ;AAEA,EAAA,IAAI,CAAC,UAAA,EAAY;AACb,IAAA,uBAAOD,cAAAA;AAAA,MAACI,sBAAA;AAAA,MAAA;AAAA,QACJ,WAAA,EAAa,IAAA;AAAA,QACb,GAAA,EAAKH,2BAAAA;AAAA,UACD;AAAA,YACI,GAAA;AAAA,YACA,OAAA,EAAS,YAAA;AAAA,YACT,eAAA,EAAiB;AAAA,cACb,GAAG,eAAA;AAAA,cACH,OAAA,EAAS,OAAA,IAAWI,yBAAA,CAAqB,OAAO;AAAA;AACpD;AACJ,SACJ;AAAA,QAEC,GAAG;AAAA;AAAA,KACR;AAAA,EACJ;AAEA,EAAA,uBACIL,cAAAA;AAAA,IAACI,sBAAA;AAAA,IAAA;AAAA,MACG,QAAQ,CAAC,EAAC,GAAA,EAAAE,IAAAA,EAAK,OAAK,KAAM,MAAA;AAAA,QACtB;AAAA,UACI,KAAA;AAAA,UACA,GAAA,EAAAA,IAAAA;AAAA,UACA,eAAA,EAAiB;AAAA,YACb,GAAG,eAAA;AAAA,YACH,OAAA,EAAS,OAAA,IAAWD,yBAAA,CAAqB,OAAO;AAAA,WACpD;AAAA,UACA,OAAA,EAAS;AAAA;AACjB,OAAC;AAAA,MACD,GAAA,EAAK,yBAAA;AAAA,MACJ,GAAG;AAAA;AAAA,GACR;AAER","file":"index.cjs","sourcesContent":["import { createContext, type ReactNode } from 'react';\r\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\r\n\r\nexport interface PixelFiddlerContextValue {\r\n    config: PixelFiddlerConfig;\r\n}\r\n\r\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\r\n\r\nexport interface PixelFiddlerProviderProps {\r\n    children: ReactNode;\r\n    config: PixelFiddlerConfig;\r\n}\r\n\r\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\r\n    return (\r\n        <PixelFiddlerContext.Provider value={{config}}>\r\n            {children}\r\n        </PixelFiddlerContext.Provider>\r\n    );\r\n}\r\n","import { ImageLoaderProps } from 'next/image';\r\nimport { buildTransformationUrl, TransformationOptions } from '@pixelfiddler/core';\r\n\r\ntype PixelFiddlerLoaderProps = ImageLoaderProps & {\r\n    baseUrl?: string,\r\n    transformations?: TransformationOptions\r\n}\r\n\r\ntype PixelFiddlerLoader = (props: PixelFiddlerLoaderProps) => string\r\n\r\nexport const loader: PixelFiddlerLoader = ({src, baseUrl, width: loaderWidth, transformations}) => {\r\n    return buildTransformationUrl({\r\n        src,\r\n        baseUrl,\r\n        transformations: {\r\n            ...transformations,\r\n            width: loaderWidth,\r\n        },\r\n    })\r\n}\r\n","import { useContext, useMemo } from 'react'\r\nimport Image, { ImageProps } from 'next/image'\r\nimport { buildTransformationUrl, parseNumberLikeParam, TransformationOptions, } from '@pixelfiddler/core'\r\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context'\r\nimport { loader } from '../utils/loader';\r\n\r\nexport interface PixelFiddlerImageProps\r\n    extends Omit<ImageProps, 'src' | 'loader' | 'sizes'> {\r\n    /** Src to your image - can be both relative or absolute.\r\n     * If it's relative, it will be attached to baseUrl from config\r\n     * If it's absolute, it will be left as is\r\n     */\r\n    src: string\r\n    /** Base URL from PixelFiddler Dashboard.\r\n     * Can be omitted if provided via PixelFiddlerProvider\r\n     */\r\n    baseUrl?: string\r\n    /**\r\n     * Sizes attribute for responsive images\r\n     * e.g. \"(max-width: 768px) 100vw, 50vw\"\r\n     */\r\n    sizes?: string\r\n    /**\r\n     * Whether automatic generation of srcset should be enabled.\r\n     * @default true\r\n     */\r\n    responsive?: boolean\r\n    /**\r\n     * Transformation options to apply\r\n     */\r\n    transformations?: TransformationOptions\r\n}\r\n\r\nexport function PixelFiddlerImage({\r\n                                      src,\r\n                                      transformations,\r\n                                      baseUrl,\r\n                                      responsive = true,\r\n                                      unoptimized = false,\r\n                                      quality,\r\n                                      ...imageProps\r\n                                  }: PixelFiddlerImageProps) {\r\n    const context = useContext(PixelFiddlerContext)\r\n    const finalBaseUrl = baseUrl || context?.config?.baseUrl\r\n\r\n\r\n    const srcWithoutTransformations = useMemo(() => {\r\n        return buildTransformationUrl({\r\n            baseUrl: finalBaseUrl,\r\n            src\r\n        })\r\n    }, [src])\r\n\r\n    if (unoptimized) {\r\n        return <Image unoptimized={true}\r\n                      src={buildTransformationUrl({src, baseUrl: finalBaseUrl})}\r\n                      {...imageProps}\r\n        />\r\n    }\r\n\r\n    if (!responsive) {\r\n        return <Image\r\n            unoptimized={true}\r\n            src={buildTransformationUrl(\r\n                {\r\n                    src,\r\n                    baseUrl: finalBaseUrl,\r\n                    transformations: {\r\n                        ...transformations,\r\n                        quality: quality && parseNumberLikeParam(quality),\r\n                    }\r\n                }\r\n            )\r\n            }\r\n            {...imageProps}\r\n        />\r\n    }\r\n\r\n    return (\r\n        <Image\r\n            loader={({src, width}) => loader(\r\n                {\r\n                    width,\r\n                    src,\r\n                    transformations: {\r\n                        ...transformations,\r\n                        quality: quality && parseNumberLikeParam(quality),\r\n                    },\r\n                    baseUrl: finalBaseUrl\r\n            })}\r\n            src={srcWithoutTransformations}\r\n            {...imageProps}\r\n        />\r\n    )\r\n}\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps } from 'next/image';
+import { TransformationOptions, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+import { ReactNode } from 'react';
+
+interface PixelFiddlerImageProps extends Omit<ImageProps, 'src' | 'loader' | 'sizes'> {
+    /** Src to your image - can be both relative or absolute.
+     * If it's relative, it will be attached to baseUrl from config
+     * If it's absolute, it will be left as is
+     */
+    src: string;
+    /** Base URL from PixelFiddler Dashboard.
+     * Can be omitted if provided via PixelFiddlerProvider
+     */
+    baseUrl?: string;
+    /**
+     * Sizes attribute for responsive images
+     * e.g. "(max-width: 768px) 100vw, 50vw"
+     */
+    sizes?: string;
+    /**
+     * Whether automatic generation of srcset should be enabled.
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Transformation options to apply
+     */
+    transformations?: TransformationOptions;
+}
+declare function PixelFiddlerImage({ src, transformations, baseUrl, responsive, unoptimized, quality, ...imageProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type PixelFiddlerContextValue, PixelFiddlerImage, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps } from 'next/image';
+import { TransformationOptions, PixelFiddlerConfig } from '@pixelfiddler/core';
+export { BorderOptions, CropOptions, EffectOptions, FormatOptions, PixelFiddlerConfig, ResizeOptions, TextOptions, TransformationOptions, WatermarkOptions } from '@pixelfiddler/core';
+import { ReactNode } from 'react';
+
+interface PixelFiddlerImageProps extends Omit<ImageProps, 'src' | 'loader' | 'sizes'> {
+    /** Src to your image - can be both relative or absolute.
+     * If it's relative, it will be attached to baseUrl from config
+     * If it's absolute, it will be left as is
+     */
+    src: string;
+    /** Base URL from PixelFiddler Dashboard.
+     * Can be omitted if provided via PixelFiddlerProvider
+     */
+    baseUrl?: string;
+    /**
+     * Sizes attribute for responsive images
+     * e.g. "(max-width: 768px) 100vw, 50vw"
+     */
+    sizes?: string;
+    /**
+     * Whether automatic generation of srcset should be enabled.
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Transformation options to apply
+     */
+    transformations?: TransformationOptions;
+}
+declare function PixelFiddlerImage({ src, transformations, baseUrl, responsive, unoptimized, quality, ...imageProps }: PixelFiddlerImageProps): react_jsx_runtime.JSX.Element;
+
+interface PixelFiddlerContextValue {
+    config: PixelFiddlerConfig;
+}
+interface PixelFiddlerProviderProps {
+    children: ReactNode;
+    config: PixelFiddlerConfig;
+}
+declare function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type PixelFiddlerContextValue, PixelFiddlerImage, type PixelFiddlerImageProps, PixelFiddlerProvider };

package/dist/index.js

@@ -0,0 +1,89 @@
+import { createContext, useContext, useMemo } from 'react';
+import Image from 'next/image';
+import { buildTransformationUrl, parseNumberLikeParam } from '@pixelfiddler/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/pixel-fiddler-image.tsx
+var PixelFiddlerContext = createContext(null);
+function PixelFiddlerProvider({ children, config }) {
+  return /* @__PURE__ */ jsx(PixelFiddlerContext.Provider, { value: { config }, children });
+}
+var loader = ({ src, baseUrl, width: loaderWidth, transformations }) => {
+  return buildTransformationUrl({
+    src,
+    baseUrl,
+    transformations: {
+      ...transformations,
+      width: loaderWidth
+    }
+  });
+};
+function PixelFiddlerImage({
+  src,
+  transformations,
+  baseUrl,
+  responsive = true,
+  unoptimized = false,
+  quality,
+  ...imageProps
+}) {
+  const context = useContext(PixelFiddlerContext);
+  const finalBaseUrl = baseUrl || context?.config?.baseUrl;
+  const srcWithoutTransformations = useMemo(() => {
+    return buildTransformationUrl({
+      baseUrl: finalBaseUrl,
+      src
+    });
+  }, [src]);
+  if (unoptimized) {
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        unoptimized: true,
+        src: buildTransformationUrl({ src, baseUrl: finalBaseUrl }),
+        ...imageProps
+      }
+    );
+  }
+  if (!responsive) {
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        unoptimized: true,
+        src: buildTransformationUrl(
+          {
+            src,
+            baseUrl: finalBaseUrl,
+            transformations: {
+              ...transformations,
+              quality: quality && parseNumberLikeParam(quality)
+            }
+          }
+        ),
+        ...imageProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      loader: ({ src: src2, width }) => loader(
+        {
+          width,
+          src: src2,
+          transformations: {
+            ...transformations,
+            quality: quality && parseNumberLikeParam(quality)
+          },
+          baseUrl: finalBaseUrl
+        }
+      ),
+      src: srcWithoutTransformations,
+      ...imageProps
+    }
+  );
+}
+
+export { PixelFiddlerImage, PixelFiddlerProvider };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/pixel-fiddler-context.tsx","../src/utils/loader.ts","../src/components/pixel-fiddler-image.tsx"],"names":["buildTransformationUrl","jsx","src"],"mappings":";;;;;;AAOO,IAAM,mBAAA,GAAsB,cAA+C,IAAI,CAAA;AAO/E,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAU,MAAA,EAAO,EAA8B;AAClF,EAAA,uBACI,GAAA,CAAC,oBAAoB,QAAA,EAApB,EAA6B,OAAO,EAAC,MAAA,IACjC,QAAA,EACL,CAAA;AAER;ACVO,IAAM,MAAA,GAA6B,CAAC,EAAC,GAAA,EAAK,SAAS,KAAA,EAAO,WAAA,EAAa,iBAAe,KAAM;AAC/F,EAAA,OAAO,sBAAA,CAAuB;AAAA,IAC1B,GAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA,EAAiB;AAAA,MACb,GAAG,eAAA;AAAA,MACH,KAAA,EAAO;AAAA;AACX,GACH,CAAA;AACL,CAAA;ACcO,SAAS,iBAAA,CAAkB;AAAA,EACI,GAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,WAAA,GAAc,KAAA;AAAA,EACd,OAAA;AAAA,EACA,GAAG;AACP,CAAA,EAA2B;AACzD,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,MAAM,YAAA,GAAe,OAAA,IAAW,OAAA,EAAS,MAAA,EAAQ,OAAA;AAGjD,EAAA,MAAM,yBAAA,GAA4B,QAAQ,MAAM;AAC5C,IAAA,OAAOA,sBAAAA,CAAuB;AAAA,MAC1B,OAAA,EAAS,YAAA;AAAA,MACT;AAAA,KACH,CAAA;AAAA,EACL,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,IAAI,WAAA,EAAa;AACb,IAAA,uBAAOC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAAM,WAAA,EAAa,IAAA;AAAA,QACb,KAAKD,sBAAAA,CAAuB,EAAC,GAAA,EAAK,OAAA,EAAS,cAAa,CAAA;AAAA,QACvD,GAAG;AAAA;AAAA,KAClB;AAAA,EACJ;AAEA,EAAA,IAAI,CAAC,UAAA,EAAY;AACb,IAAA,uBAAOC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACJ,WAAA,EAAa,IAAA;AAAA,QACb,GAAA,EAAKD,sBAAAA;AAAA,UACD;AAAA,YACI,GAAA;AAAA,YACA,OAAA,EAAS,YAAA;AAAA,YACT,eAAA,EAAiB;AAAA,cACb,GAAG,eAAA;AAAA,cACH,OAAA,EAAS,OAAA,IAAW,oBAAA,CAAqB,OAAO;AAAA;AACpD;AACJ,SACJ;AAAA,QAEC,GAAG;AAAA;AAAA,KACR;AAAA,EACJ;AAEA,EAAA,uBACIC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,QAAQ,CAAC,EAAC,GAAA,EAAAC,IAAAA,EAAK,OAAK,KAAM,MAAA;AAAA,QACtB;AAAA,UACI,KAAA;AAAA,UACA,GAAA,EAAAA,IAAAA;AAAA,UACA,eAAA,EAAiB;AAAA,YACb,GAAG,eAAA;AAAA,YACH,OAAA,EAAS,OAAA,IAAW,oBAAA,CAAqB,OAAO;AAAA,WACpD;AAAA,UACA,OAAA,EAAS;AAAA;AACjB,OAAC;AAAA,MACD,GAAA,EAAK,yBAAA;AAAA,MACJ,GAAG;AAAA;AAAA,GACR;AAER","file":"index.js","sourcesContent":["import { createContext, type ReactNode } from 'react';\r\nimport type { PixelFiddlerConfig } from '@pixelfiddler/core';\r\n\r\nexport interface PixelFiddlerContextValue {\r\n    config: PixelFiddlerConfig;\r\n}\r\n\r\nexport const PixelFiddlerContext = createContext<PixelFiddlerContextValue | null>(null);\r\n\r\nexport interface PixelFiddlerProviderProps {\r\n    children: ReactNode;\r\n    config: PixelFiddlerConfig;\r\n}\r\n\r\nexport function PixelFiddlerProvider({ children, config }: PixelFiddlerProviderProps) {\r\n    return (\r\n        <PixelFiddlerContext.Provider value={{config}}>\r\n            {children}\r\n        </PixelFiddlerContext.Provider>\r\n    );\r\n}\r\n","import { ImageLoaderProps } from 'next/image';\r\nimport { buildTransformationUrl, TransformationOptions } from '@pixelfiddler/core';\r\n\r\ntype PixelFiddlerLoaderProps = ImageLoaderProps & {\r\n    baseUrl?: string,\r\n    transformations?: TransformationOptions\r\n}\r\n\r\ntype PixelFiddlerLoader = (props: PixelFiddlerLoaderProps) => string\r\n\r\nexport const loader: PixelFiddlerLoader = ({src, baseUrl, width: loaderWidth, transformations}) => {\r\n    return buildTransformationUrl({\r\n        src,\r\n        baseUrl,\r\n        transformations: {\r\n            ...transformations,\r\n            width: loaderWidth,\r\n        },\r\n    })\r\n}\r\n","import { useContext, useMemo } from 'react'\r\nimport Image, { ImageProps } from 'next/image'\r\nimport { buildTransformationUrl, parseNumberLikeParam, TransformationOptions, } from '@pixelfiddler/core'\r\nimport { PixelFiddlerContext } from '../provider/pixel-fiddler-context'\r\nimport { loader } from '../utils/loader';\r\n\r\nexport interface PixelFiddlerImageProps\r\n    extends Omit<ImageProps, 'src' | 'loader' | 'sizes'> {\r\n    /** Src to your image - can be both relative or absolute.\r\n     * If it's relative, it will be attached to baseUrl from config\r\n     * If it's absolute, it will be left as is\r\n     */\r\n    src: string\r\n    /** Base URL from PixelFiddler Dashboard.\r\n     * Can be omitted if provided via PixelFiddlerProvider\r\n     */\r\n    baseUrl?: string\r\n    /**\r\n     * Sizes attribute for responsive images\r\n     * e.g. \"(max-width: 768px) 100vw, 50vw\"\r\n     */\r\n    sizes?: string\r\n    /**\r\n     * Whether automatic generation of srcset should be enabled.\r\n     * @default true\r\n     */\r\n    responsive?: boolean\r\n    /**\r\n     * Transformation options to apply\r\n     */\r\n    transformations?: TransformationOptions\r\n}\r\n\r\nexport function PixelFiddlerImage({\r\n                                      src,\r\n                                      transformations,\r\n                                      baseUrl,\r\n                                      responsive = true,\r\n                                      unoptimized = false,\r\n                                      quality,\r\n                                      ...imageProps\r\n                                  }: PixelFiddlerImageProps) {\r\n    const context = useContext(PixelFiddlerContext)\r\n    const finalBaseUrl = baseUrl || context?.config?.baseUrl\r\n\r\n\r\n    const srcWithoutTransformations = useMemo(() => {\r\n        return buildTransformationUrl({\r\n            baseUrl: finalBaseUrl,\r\n            src\r\n        })\r\n    }, [src])\r\n\r\n    if (unoptimized) {\r\n        return <Image unoptimized={true}\r\n                      src={buildTransformationUrl({src, baseUrl: finalBaseUrl})}\r\n                      {...imageProps}\r\n        />\r\n    }\r\n\r\n    if (!responsive) {\r\n        return <Image\r\n            unoptimized={true}\r\n            src={buildTransformationUrl(\r\n                {\r\n                    src,\r\n                    baseUrl: finalBaseUrl,\r\n                    transformations: {\r\n                        ...transformations,\r\n                        quality: quality && parseNumberLikeParam(quality),\r\n                    }\r\n                }\r\n            )\r\n            }\r\n            {...imageProps}\r\n        />\r\n    }\r\n\r\n    return (\r\n        <Image\r\n            loader={({src, width}) => loader(\r\n                {\r\n                    width,\r\n                    src,\r\n                    transformations: {\r\n                        ...transformations,\r\n                        quality: quality && parseNumberLikeParam(quality),\r\n                    },\r\n                    baseUrl: finalBaseUrl\r\n            })}\r\n            src={srcWithoutTransformations}\r\n            {...imageProps}\r\n        />\r\n    )\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@pixelfiddler/next",
+  "version": "0.1.0",
+  "description": "Next.js image component and loader for PixelFiddler image transformation SDK",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pixelfiddler/core": "0.1.6"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.2.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^27.4.0",
+    "next": "^16.1.4",
+    "react": "^18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "pixelfiddler",
+    "next",
+    "nextjs",
+    "image",
+    "transformation",
+    "cdn",
+    "optimization",
+    "loader"
+  ],
+  "license": "MIT",
+  "author": "PixelFiddler",
+  "homepage": "https://pixel-fiddler.com",
+  "bugs": {
+    "url": "https://github.com/pixel-fiddler/js-sdk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixel-fiddler/js-sdk.git",
+    "directory": "packages/next"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rm -rf dist coverage"
+  }
+}