@pixelfiddler/next 0.1.1 → 1.0.0

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
@@ -20,7 +20,7 @@ var loader = ({ src, baseUrl, width: loaderWidth, transformations }) => {
20
20
  baseUrl,
21
21
  transformations: {
22
22
  ...transformations,
23
- width: loaderWidth
23
+ width: transformations?.width || loaderWidth
24
24
  }
25
25
  });
26
26
  };
@@ -1 +1 @@
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"]}
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,iBAAiB,KAAA,IAAS;AAAA;AACrC,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: transformations?.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.js CHANGED
@@ -14,7 +14,7 @@ var loader = ({ src, baseUrl, width: loaderWidth, transformations }) => {
14
14
  baseUrl,
15
15
  transformations: {
16
16
  ...transformations,
17
- width: loaderWidth
17
+ width: transformations?.width || loaderWidth
18
18
  }
19
19
  });
20
20
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"]}
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,iBAAiB,KAAA,IAAS;AAAA;AACrC,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: transformations?.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pixelfiddler/next",
3
- "version": "0.1.1",
3
+ "version": "1.0.0",
4
4
  "description": "Next.js image component and loader for PixelFiddler image transformation SDK",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@pixelfiddler/core": "0.1.7"
25
+ "@pixelfiddler/core": "1.0.0"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "next": ">=13.0.0",