@webstudio-is/react-sdk 0.7.2 → 0.8.0

package/lib/user-props/schema.d.ts

@@ -1,35 +1,72 @@
 import { z } from "zod";
-export declare const UserProp: z.ZodObject<{
+import type { Asset } from "@webstudio-is/asset-uploader";
+export declare const UserDbProps: z.ZodArray<z.ZodObject<{
     id: z.ZodString;
     prop: z.ZodString;
     value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    assetId: z.ZodOptional<z.ZodString>;
     required: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
+    assetId?: string | undefined;
     required?: boolean | undefined;
     value: string | boolean;
     id: string;
     prop: string;
 }, {
+    assetId?: string | undefined;
     required?: boolean | undefined;
     value: string | boolean;
     id: string;
     prop: string;
-}>;
-export declare type UserProp = z.infer<typeof UserProp>;
-export declare const UserProps: z.ZodArray<z.ZodObject<{
+}>, "many">;
+export declare const UserUserProps: z.ZodArray<z.ZodEffects<z.ZodObject<{
     id: z.ZodString;
     prop: z.ZodString;
     value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    asset: z.ZodOptional<z.ZodObject<{
+        id: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>>;
     required: z.ZodOptional<z.ZodBoolean>;
 }, "strip", z.ZodTypeAny, {
+    required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>, {
+    assetId?: string | undefined;
     required?: boolean | undefined;
     value: string | boolean;
     id: string;
     prop: string;
 }, {
     required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
     value: string | boolean;
     id: string;
     prop: string;
 }>, "many">;
+export declare type UserProp = {
+    id: string;
+    prop: string;
+    value: string | boolean;
+    asset?: Asset;
+    required?: boolean | undefined;
+};
 //# sourceMappingURL=schema.d.ts.map

package/lib/user-props/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;EAKnB,CAAC;AAEH,oBAAY,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;WAAoB,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAU1D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;WAAsB,CAAC;AAuB/C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAwB,CAAC;AAEnD,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC"}

package/lib/user-props/schema.js

@@ -1,11 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserProps = exports.UserProp = void 0;
-const zod_1 = require("zod");
-exports.UserProp = zod_1.z.object({
-    id: zod_1.z.string(),
-    prop: zod_1.z.string(),
-    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
-    required: zod_1.z.optional(zod_1.z.boolean()),
+import { z } from "zod";
+const UserPropDb = z.object({
+    id: z.string(),
+    prop: z.string(),
+    value: z.union([z.string(), z.boolean()]),
+    assetId: z.optional(z.string()),
+    required: z.optional(z.boolean()),
 });
-exports.UserProps = zod_1.z.array(exports.UserProp);
+export const UserDbProps = z.array(UserPropDb);
+const UserUserProp = z
+    .object({
+    id: z.string(),
+    prop: z.string(),
+    value: z.union([z.string(), z.boolean()]),
+    // We are not interested in Props data does any other props on asset exists
+    asset: z.optional(z.object({ id: z.string() })),
+    required: z.optional(z.boolean()),
+})
+    .transform(({ id, prop, value, asset, required }) => {
+    // Check with infer that we are transforming to UserPropDb
+    const res = {
+        id,
+        prop,
+        value,
+        assetId: asset?.id,
+        required,
+    };
+    return res;
+});
+export const UserUserProps = z.array(UserUserProp);

package/lib/user-props/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/lib/user-props/use-user-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAuBtD,CAAC"}
+{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAwBtD,CAAC"}

package/lib/user-props/use-user-props.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUserProps = void 0;
-const react_1 = require("react");
-const all_user_props_1 = require("./all-user-props");
+import { useEffect, useMemo, useState } from "react";
+import { useAllUserProps } from "./all-user-props";
 /**
  * User props mapped in prop:value format,
  * up to date with props panel.
  */
-const useUserProps = (instanceId) => {
-    const [allUserProps] = (0, all_user_props_1.useAllUserProps)();
+export const useUserProps = (instanceId) => {
+    const [allUserProps] = useAllUserProps();
     const propsData = allUserProps[instanceId];
-    const initialUserProps = (0, react_1.useMemo)(() => {
+    const initialUserProps = useMemo(() => {
         if (propsData === undefined)
             return {};
         return propsData.props.reduce((props, { prop, value }) => {
@@ -18,8 +15,8 @@ const useUserProps = (instanceId) => {
             return props;
         }, {});
     }, [propsData]);
-    const [props, setProps] = (0, react_1.useState)(initialUserProps);
-    (0, react_1.useEffect)(() => {
+    const [props, setProps] = useState(initialUserProps);
+    useEffect(() => {
         if (propsData == undefined)
             return;
         const nextProps = {};
@@ -30,4 +27,3 @@ const useUserProps = (instanceId) => {
     }, [propsData]);
     return props;
 };
-exports.useUserProps = useUserProps;

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
+  "type": "module",
   "scripts": {
     "dev": "tsup --watch",
     "build": "yarn build:lib",
     "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
     "typecheck": "tsc --noEmit",
-    "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc",
-    "test": "jest",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
+    "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc && yarn build:cjs",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "yarn typecheck && yarn lint && yarn test",
     "prepublishOnly": "yarn checks && yarn build:lib",
     "storybook:run": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "storybook:build": "build-storybook",
+    "publish-to-npm": "bash ../../bin/publish-to-npm.sh"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.12",
+    "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "remix-utils": "^4.1.0",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-interactions": "^6.5.6",
@@ -41,6 +43,7 @@
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
+    "remix-utils": "^4.1.0",
     "tsup": "^6.1.3",
     "tsx": "^3.9.0",
     "typescript": "4.7.4",
@@ -49,25 +52,28 @@
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "remix-utils": "^4.1.0",
     "@storybook/react": "^6.5.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "remix-utils": "^4.1.0",
     "zod": "^3.19.1"
   },
   "dependencies": {
     "detect-font": "^0.1.5",
     "@webstudio-is/asset-uploader": "^*",
+    "@webstudio-is/css-data": "*",
     "@webstudio-is/fonts": "*",
     "@webstudio-is/icons": "*",
-    "@webstudio-is/css-data": "*",
     "@webstudio-is/jest-config": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
     "warn-once": "^0.1.1"
   },
-  "main": "lib/index.js",
+  "exports": {
+    "import": "./lib/index.js",
+    "require": "./lib/cjs/index.cjs"
+  },
   "types": "lib/index.d.ts",
   "files": [
     "lib/*",
@@ -81,7 +87,7 @@
     "entry": [
       "src/index.ts"
     ],
-    "format": "cjs",
+    "format": "esm",
     "outDir": "lib"
   }
 }

package/lib/component-utils/image.d.ts

@@ -1,107 +0,0 @@
-/**
- * # Responsive Image component helpers.
- *
- * ## Quick summary about img srcset and sizes attributes:
- *
- * There are 2 ways to define what image will be loaded in the img property srcset.
- *
- * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
- *   src will be selected depending on `device-pixel-ratio`.
- *
- * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
- *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
- *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
- *
- *   The browser finds the first matching media query from source size descriptors,
- *   then use source size value to generate internally srcset
- *   with pixel density descriptors dividing width descriptor value by source size value.
- *
- *   Using the example above for viewport width 800px.
- *   The first matching media query is (max-width: 1200px)
- *   source size value is 70vw  equal to 800px * 0,7 = 560px
- *
- *   browser internal srcset will be (we divide `w` descriptor by source size value):
- *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
- *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
- *
- *   Finally same rules as for pixel density descriptor 'x' are applied.
- *
- * ## Algorithm (without optimizations):
- *
- * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
- * This is good for caching, as we can cache image with specific width and then use it for different devices.
- *
- * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
- * > If allSizes.length is too small, you will deliver too big images to the user,
- * > if allSizes.length is too big, you will have many caches misses.
- *
- * If img has a defined width property.
- *   1. find the first value from allSizes which is greater or equal to the width property
- *   2. use found value to generate srcset with pixel density descriptor 'x'
- *
- *
- * If img has no defined width property.
- *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
- *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
- *
- * Optimizations applied now:
- *
- * - If the sizes property is defined, we can exclude from `srcsets` all images
- *   which are smaller than the `smallestRatio * smallesDeviceSize`
- *
- * Future (not implemented) optimizations and improvements:
- *
- * - Knowing image size on different viewport widths we can provide nondefault sizes property
- * - Knowledge of Image aspect-ratio would allow cropping images serverside.
- * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
- * - Slow networks optimizations
- * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
- *
- * # Attributions
- *
- * The MIT License (MIT)
- *
- * applies to:
- *
- * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2022 Vercel, Inc.
- *
- * 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.
- **/
-export declare type ImageLoader = (props: {
-    width: number;
-    quality: number;
-    src: string;
-}) => string;
-export declare const allSizes: number[];
-export declare const getImageAttributes: (props: {
-    src: string | undefined;
-    srcSet: string | undefined;
-    sizes: string | undefined;
-    width: string | number | undefined;
-    quality: number | undefined;
-    loader?: ImageLoader;
-    optimize: boolean;
-}) => {
-    src: string;
-    srcSet: string | undefined;
-    sizes: string | undefined;
-} | null;
-//# sourceMappingURL=image.d.ts.map

package/lib/component-utils/image.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/component-utils/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFI;AAIJ,oBAAY,WAAW,GAAG,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb,KAAK,MAAM,CAAC;AAQb,eAAO,MAAM,QAAQ,UAAkC,CAAC;AA8HxD,eAAO,MAAM,kBAAkB,UAAW;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB,KAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,GAAG,IA2BH,CAAC"}

package/lib/component-utils/image.js

@@ -1,198 +0,0 @@
-"use strict";
-/**
- * # Responsive Image component helpers.
- *
- * ## Quick summary about img srcset and sizes attributes:
- *
- * There are 2 ways to define what image will be loaded in the img property srcset.
- *
- * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
- *   src will be selected depending on `device-pixel-ratio`.
- *
- * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
- *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
- *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
- *
- *   The browser finds the first matching media query from source size descriptors,
- *   then use source size value to generate internally srcset
- *   with pixel density descriptors dividing width descriptor value by source size value.
- *
- *   Using the example above for viewport width 800px.
- *   The first matching media query is (max-width: 1200px)
- *   source size value is 70vw  equal to 800px * 0,7 = 560px
- *
- *   browser internal srcset will be (we divide `w` descriptor by source size value):
- *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
- *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
- *
- *   Finally same rules as for pixel density descriptor 'x' are applied.
- *
- * ## Algorithm (without optimizations):
- *
- * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
- * This is good for caching, as we can cache image with specific width and then use it for different devices.
- *
- * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
- * > If allSizes.length is too small, you will deliver too big images to the user,
- * > if allSizes.length is too big, you will have many caches misses.
- *
- * If img has a defined width property.
- *   1. find the first value from allSizes which is greater or equal to the width property
- *   2. use found value to generate srcset with pixel density descriptor 'x'
- *
- *
- * If img has no defined width property.
- *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
- *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
- *
- * Optimizations applied now:
- *
- * - If the sizes property is defined, we can exclude from `srcsets` all images
- *   which are smaller than the `smallestRatio * smallesDeviceSize`
- *
- * Future (not implemented) optimizations and improvements:
- *
- * - Knowing image size on different viewport widths we can provide nondefault sizes property
- * - Knowledge of Image aspect-ratio would allow cropping images serverside.
- * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
- * - Slow networks optimizations
- * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
- *
- * # Attributions
- *
- * The MIT License (MIT)
- *
- * applies to:
- *
- * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2022 Vercel, Inc.
- *
- * 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.
- **/
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageAttributes = exports.allSizes = void 0;
-const warn_once_1 = __importDefault(require("warn-once"));
-/**
- * max(...imageSizes) must be less then min(...deviceSizes)
- **/
-const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
-const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
-exports.allSizes = [...imageSizes, ...deviceSizes];
-/**
- * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
- **/
-const getWidths = (width, sizes) => {
-    if (sizes) {
-        // Find all the "vw" percent sizes used in the sizes prop
-        const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
-        const percentSizes = [];
-        for (let match; (match = viewportWidthRe.exec(sizes)); match) {
-            percentSizes.push(parseInt(match[2], 10));
-        }
-        if (percentSizes.length) {
-            // we can exclude from srcSets all images which are smaller than the smallestRatio * smallesDeviceSize
-            const smallestRatio = Math.min(...percentSizes) * 0.01;
-            return {
-                widths: exports.allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
-                kind: "w",
-            };
-        }
-        return { widths: exports.allSizes, kind: "w" };
-    }
-    if (width == null) {
-        return { widths: deviceSizes, kind: "w" };
-    }
-    const widths = [
-        ...new Set([width, width * 2].map((w) => exports.allSizes.find((p) => p >= w) || exports.allSizes[exports.allSizes.length - 1])),
-    ];
-    return { widths, kind: "x" };
-};
-const generateImgAttrs = ({ src, width, quality, sizes, loader, }) => {
-    const { widths, kind } = getWidths(width, sizes);
-    return {
-        sizes: !sizes && kind === "w" ? "100vw" : sizes,
-        srcSet: widths
-            .map((w, i) => `${loader({ src, quality, width: w })} ${kind === "w" ? w : i + 1}${kind}`)
-            .join(", "),
-        // Must be last, to prevent Safari to load images twice
-        src: loader({
-            src,
-            quality,
-            width: widths[widths.length - 1],
-        }),
-    };
-};
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-const cloudflareImageLoader = ({ width, src, quality }) => {
-    if (process.env.NODE_ENV !== "production") {
-        (0, warn_once_1.default)(!exports.allSizes.includes(width), "Width must be only from allowed values");
-    }
-    const options = `width=${width},quality=${quality},format=auto`;
-    // Cloudflare docs say that we don't need to urlencode the path params
-    const pathname = `/cdn-cgi/image/${options}/${src}`;
-    return pathname;
-};
-const getInt = (value) => {
-    if (typeof value === "number") {
-        return Math.round(value);
-    }
-    if (typeof value === "string") {
-        const vNum = Number.parseFloat(value);
-        if (!Number.isNaN(vNum)) {
-            return Math.round(vNum);
-        }
-    }
-    return undefined;
-};
-/**
- * DEFAULT_SIZES Just an assumption that most images (except hero and icons) are 100% wide on mobile and 50% on desktop.
- * For icons width are usually set explicitly so DEFAULT_SIZES is not applied.
- * For hero images, we can allow in UI to select sizes=100vw explicitly.
- * Anyway, the best would be to calculate this based on canvas data from different breakpoints.
- * See ../component-utils/image for detailed description
- **/
-const DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
-const DEFAULT_QUALITY = 80;
-const getImageAttributes = (props) => {
-    const width = getInt(props.width);
-    const quality = Math.max(Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100), 0);
-    if (props.src != null && props.src != "") {
-        if (props.srcSet == null && props.optimize) {
-            const sizes = props.sizes ?? (props.width == null ? DEFAULT_SIZES : undefined);
-            const loader = props.loader ?? cloudflareImageLoader;
-            return generateImgAttrs({
-                src: props.src,
-                width,
-                quality,
-                sizes,
-                loader,
-            });
-        }
-        return { src: props.src, srcSet: props.srcSet, sizes: props.sizes };
-    }
-    return null;
-};
-exports.getImageAttributes = getImageAttributes;

package/lib/component-utils/image.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=image.test.d.ts.map

package/lib/component-utils/image.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.test.d.ts","sourceRoot":"","sources":["../../src/component-utils/image.test.ts"],"names":[],"mappings":""}