@smoothcdn/loader 1.0.0 → 1.0.2

package/dist/core/html-snippets.d.ts

@@ -0,0 +1,42 @@
+export type CdnLoadingMode = {
+    isCritical?: boolean;
+};
+export type ImageVariantSource = {
+    width: number;
+    url: string;
+};
+export type ImageSnippetAttributes = {
+    src: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: "lazy";
+    decoding: "async" | "sync";
+    fetchPriority?: "high";
+    width?: number | string;
+    height?: number | string;
+};
+export type MediaSnippetAttributes = {
+    preload: "auto" | "none";
+};
+export type ScriptSnippetAttributes = {
+    async?: true;
+    defer?: true;
+    preload?: true;
+};
+export type StyleSnippetAttributes = {
+    preload?: true;
+};
+export declare function getImageSnippetAttributes({ src, variants, alt, isCritical, width, height, }: {
+    src: string;
+    variants?: ImageVariantSource[];
+    alt: string;
+    isCritical?: boolean;
+    width?: number | string;
+    height?: number | string;
+}): ImageSnippetAttributes & {
+    alt: string;
+};
+export declare function getMediaSnippetAttributes({ isCritical }?: CdnLoadingMode): MediaSnippetAttributes;
+export declare function getScriptSnippetAttributes({ isCritical }?: CdnLoadingMode): ScriptSnippetAttributes;
+export declare function getStyleSnippetAttributes({ isCritical }?: CdnLoadingMode): StyleSnippetAttributes;
+//# sourceMappingURL=html-snippets.d.ts.map

package/dist/core/html-snippets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-snippets.d.ts","sourceRoot":"","sources":["../../src/core/html-snippets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,OAAO,CAAC,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,OAAO,CAAC,EAAE,IAAI,CAAC;CAClB,CAAC;AAEF,wBAAgB,yBAAyB,CACrC,EACI,GAAG,EACH,QAAa,EACb,GAAG,EACH,UAAkB,EAClB,KAAK,EACL,MAAM,GACT,EAAE;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,GACF,sBAAsB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAgB1C;AAED,wBAAgB,yBAAyB,CAAC,EAAC,UAAkB,EAAC,GAAE,cAAmB,GAAG,sBAAsB,CAI3G;AAED,wBAAgB,0BAA0B,CAAC,EAAC,UAAkB,EAAC,GAAE,cAAmB,GAAG,uBAAuB,CAI7G;AAED,wBAAgB,yBAAyB,CAAC,EAAC,UAAkB,EAAC,GAAE,cAAmB,GAAG,sBAAsB,CAE3G"}

package/dist/core/html-snippets.js

@@ -0,0 +1,55 @@
+export function getImageSnippetAttributes({ src, variants = [], alt, isCritical = false, width, height, }) {
+    const srcSet = getImageSrcSet(variants);
+    const sizes = getImageSizes(width, srcSet);
+    const fallbackSrc = variants.length ? variants[variants.length - 1]?.url || src : src;
+    return {
+        src: fallbackSrc,
+        alt,
+        ...(srcSet ? { srcSet } : {}),
+        ...(sizes ? { sizes } : {}),
+        ...(isCritical
+            ? { fetchPriority: "high", decoding: "sync" }
+            : { loading: "lazy", decoding: "async" }),
+        ...(width ? { width } : {}),
+        ...(height ? { height } : {}),
+    };
+}
+export function getMediaSnippetAttributes({ isCritical = false } = {}) {
+    return {
+        preload: isCritical ? "auto" : "none",
+    };
+}
+export function getScriptSnippetAttributes({ isCritical = false } = {}) {
+    return isCritical
+        ? { preload: true, defer: true }
+        : { defer: true };
+}
+export function getStyleSnippetAttributes({ isCritical = false } = {}) {
+    return isCritical ? { preload: true } : {};
+}
+const getImageSrcSet = (variants) => {
+    if (!variants.length) {
+        return "";
+    }
+    const uniqueVariants = new Map();
+    for (const variant of variants) {
+        if (!variant.url || !Number.isFinite(variant.width) || variant.width <= 0) {
+            continue;
+        }
+        uniqueVariants.set(variant.width, variant.url);
+    }
+    return Array.from(uniqueVariants.entries())
+        .sort((a, b) => a[0] - b[0])
+        .map(([width, url]) => `${url} ${width}w`)
+        .join(", ");
+};
+const getImageSizes = (width, srcSet) => {
+    if (!srcSet) {
+        return "";
+    }
+    const numericWidth = Number(width);
+    if (Number.isFinite(numericWidth) && numericWidth > 0) {
+        return `(max-width: ${numericWidth}px) 100vw, ${numericWidth}px`;
+    }
+    return "100vw";
+};

package/dist/core/index.d.ts

@@ -1,5 +1,7 @@
 export { createLoader } from "./createLoader.js";
 export { getConfig, initConfig, normalizeConfig } from "./config.js";
+export { getImageSnippetAttributes, getMediaSnippetAttributes, getScriptSnippetAttributes, getStyleSnippetAttributes, } from "./html-snippets.js";
 export { buildUrl, normalizePath, resolveDefaultVariantSlug } from "./utils.js";
+export type * from "./html-snippets.js";
 export type * from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AACnE,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,yBAAyB,EAAC,MAAM,YAAY,CAAC;AAC9E,mBAAmB,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AACnE,OAAO,EACH,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAE,yBAAyB,EAAC,MAAM,YAAY,CAAC;AAC9E,mBAAmB,oBAAoB,CAAC;AACxC,mBAAmB,YAAY,CAAC"}

package/dist/core/index.js

@@ -1,3 +1,4 @@
 export { createLoader } from "./createLoader.js";
 export { getConfig, initConfig, normalizeConfig } from "./config.js";
+export { getImageSnippetAttributes, getMediaSnippetAttributes, getScriptSnippetAttributes, getStyleSnippetAttributes, } from "./html-snippets.js";
 export { buildUrl, normalizePath, resolveDefaultVariantSlug } from "./utils.js";

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { createLoader } from "./core/createLoader.js";
 export { initConfig, normalizeConfig } from "./core/config.js";
+export { getImageSnippetAttributes, getMediaSnippetAttributes, getScriptSnippetAttributes, getStyleSnippetAttributes, } from "./core/html-snippets.js";
 export { buildUrl } from "./core/utils.js";
+export type * from "./core/html-snippets.js";
 export type * from "./core/types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,mBAAmB,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EACH,yBAAyB,EACzB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,GAC5B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,mBAAmB,yBAAyB,CAAC;AAC7C,mBAAmB,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { createLoader } from "./core/createLoader.js";
 export { initConfig, normalizeConfig } from "./core/config.js";
+export { getImageSnippetAttributes, getMediaSnippetAttributes, getScriptSnippetAttributes, getStyleSnippetAttributes, } from "./core/html-snippets.js";
 export { buildUrl } from "./core/utils.js";

package/dist/next/CDNImage.d.ts

@@ -1,8 +1,3 @@
-import { ImageProps } from "next/image";
-import type { LoaderAssetMap, LoaderDefaultAssetMap, LoaderImagePath, LoaderVariantSlug } from "../core/types.js";
-export type CDNImageProps<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap> = {
-    assetPath: LoaderImagePath<TAssets>;
-    variantSlug?: LoaderVariantSlug<TAssets>;
-} & Omit<ImageProps, "src">;
-export declare function CDNImage<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, ...props }: CDNImageProps<TAssets>): import("react/jsx-runtime").JSX.Element;
+export { CDNImage } from "../react/CDNImage.js";
+export type { CDNImageProps } from "../react/CDNImage.js";
 //# sourceMappingURL=CDNImage.d.ts.map

package/dist/next/CDNImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/next/CDNImage.tsx"],"names":[],"mappings":"AACA,OAAc,EAAC,UAAU,EAAC,MAAM,YAAY,CAAC;AAE7C,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAE5B,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAE5B"}
+{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/next/CDNImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAC9C,YAAY,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC"}

package/dist/next/CDNImage.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Image from "next/image";
-import { buildUrl } from "../core/utils.js";
-export function CDNImage({ assetPath, variantSlug, ...props }) {
-    return _jsx(Image, { src: buildUrl(assetPath, variantSlug), ...props });
-}
+export { CDNImage } from "../react/CDNImage.js";

package/dist/next/Script.d.ts

@@ -1,7 +1,7 @@
 import type { LoaderAssetMap, LoaderDefaultAssetMap, LoaderScriptPath, LoaderVariantSlug } from "../core/types.js";
-export declare function Script<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, strategy }: {
+export declare function Script<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, isCritical, }: {
     assetPath: LoaderScriptPath<TAssets>;
     variantSlug?: LoaderVariantSlug<TAssets>;
-    strategy?: "afterInteractive" | "lazyOnload";
+    isCritical?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Script.d.ts.map

package/dist/next/Script.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Script.d.ts","sourceRoot":"","sources":["../../src/next/Script.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjH,wBAAgB,MAAM,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAC9F,EACI,SAAS,EACT,WAAW,EACX,QAA6B,EAChC,EAAE;IACC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,kBAAkB,GAAG,YAAY,CAAC;CAChD,2CAOJ"}
+{"version":3,"file":"Script.d.ts","sourceRoot":"","sources":["../../src/next/Script.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjH,wBAAgB,MAAM,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAC9F,EACI,SAAS,EACT,WAAW,EACX,UAAkB,GACrB,EAAE;IACC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,2CAaJ"}

package/dist/next/Script.js

@@ -1,7 +1,10 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import NextScript from "next/script";
+import { getScriptSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
-export function Script({ assetPath, variantSlug, strategy = "afterInteractive" }) {
-    return (_jsx(NextScript, { src: buildUrl(assetPath, variantSlug), strategy: strategy }));
+export function Script({ assetPath, variantSlug, isCritical = false, }) {
+    const src = buildUrl(assetPath, variantSlug);
+    const snippetAttributes = getScriptSnippetAttributes({ isCritical });
+    return (_jsxs(_Fragment, { children: [snippetAttributes.preload ? _jsx("link", { rel: "preload", as: "script", href: src }) : null, _jsx(NextScript, { src: src, strategy: isCritical ? "beforeInteractive" : "afterInteractive" })] }));
 }

package/dist/next/Style.d.ts

@@ -1,6 +1,7 @@
 import type { LoaderAssetMap, LoaderDefaultAssetMap, LoaderStylePath, LoaderVariantSlug } from "../core/types.js";
-export declare function Style<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, }: {
+export declare function Style<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, isCritical, }: {
     assetPath: LoaderStylePath<TAssets>;
     variantSlug?: LoaderVariantSlug<TAssets>;
+    isCritical?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Style.d.ts.map

package/dist/next/Style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Style.d.ts","sourceRoot":"","sources":["../../src/next/Style.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,wBAAgB,KAAK,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAC7F,EACI,SAAS,EACT,WAAW,GACd,EAAE;IACC,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CAC5C,2CAMJ"}
+{"version":3,"file":"Style.d.ts","sourceRoot":"","sources":["../../src/next/Style.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,wBAAgB,KAAK,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAC7F,EACI,SAAS,EACT,WAAW,EACX,UAAkB,GACrB,EAAE;IACC,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,2CAUJ"}

package/dist/next/Style.js

@@ -1,7 +1,10 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Head from "next/head";
+import { getStyleSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
-export function Style({ assetPath, variantSlug, }) {
-    return (_jsx(Head, { children: _jsx("link", { rel: "stylesheet", href: buildUrl(assetPath, variantSlug) }) }));
+export function Style({ assetPath, variantSlug, isCritical = false, }) {
+    const href = buildUrl(assetPath, variantSlug);
+    const snippetAttributes = getStyleSnippetAttributes({ isCritical });
+    return (_jsxs(Head, { children: [snippetAttributes.preload ? _jsx("link", { rel: "preload", as: "style", href: href }) : null, _jsx("link", { rel: "stylesheet", href: href })] }));
 }

package/dist/next/index.d.ts

@@ -1,4 +1,4 @@
-export { CDNImage } from "../react/CDNImage.js";
+export { CDNImage } from "./CDNImage.js";
 export { CDNAudio } from "../react/CDNAudio.js";
 export { CDNVideo } from "../react/CDNVideo.js";
 export { Script } from "./Script.js";

package/dist/next/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACX,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/next/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EACH,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACX,MAAM,UAAU,CAAC"}

package/dist/next/index.js

@@ -1,4 +1,4 @@
-export { CDNImage } from "../react/CDNImage.js";
+export { CDNImage } from "./CDNImage.js";
 export { CDNAudio } from "../react/CDNAudio.js";
 export { CDNVideo } from "../react/CDNVideo.js";
 export { Script } from "./Script.js";

package/dist/react/CDNAudio.d.ts

@@ -8,7 +8,10 @@ export interface CDNMediaSource<TAssetPath extends string, TVariant extends stri
 export type CDNAudioProps<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap> = {
     assetPath: LoaderAudioPath<TAssets>;
     variantSlug?: LoaderVariantSlug<TAssets>;
+    isCritical?: boolean;
+    controls?: boolean;
+    loop?: boolean;
     sources?: Array<CDNMediaSource<LoaderAudioPath<TAssets>, LoaderVariantSlug<TAssets>>>;
-} & Omit<React.AudioHTMLAttributes<HTMLAudioElement>, "src">;
-export declare function CDNAudio<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, sources, children, ...props }: CDNAudioProps<TAssets>): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.AudioHTMLAttributes<HTMLAudioElement>, "controls" | "loop" | "preload" | "src">;
+export declare function CDNAudio<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, isCritical, sources, children, ...props }: CDNAudioProps<TAssets>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CDNAudio.d.ts.map

package/dist/react/CDNAudio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CDNAudio.d.ts","sourceRoot":"","sources":["../../src/react/CDNAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,WAAW,cAAc,CAAC,UAAU,SAAS,MAAM,EAAE,QAAQ,SAAS,MAAM;IAC9E,SAAS,EAAE,UAAU,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CACzF,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,CAAC;AAE7D,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAa5B"}
+{"version":3,"file":"CDNAudio.d.ts","sourceRoot":"","sources":["../../src/react/CDNAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,WAAW,cAAc,CAAC,UAAU,SAAS,MAAM,EAAE,QAAQ,SAAS,MAAM;IAC9E,SAAS,EAAE,UAAU,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CACzF,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;AAE/F,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAiB5B"}

package/dist/react/CDNAudio.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getMediaSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
-export function CDNAudio({ assetPath, variantSlug, sources, children, ...props }) {
-    return (_jsxs("audio", { src: sources?.length ? undefined : buildUrl(assetPath, variantSlug), ...props, children: [sources?.map((source) => (_jsx("source", { src: buildUrl(source.assetPath, source.variantSlug), type: source.type }, `${source.assetPath}:${source.variantSlug || ""}:${source.type || ""}`))), children] }));
+export function CDNAudio({ assetPath, variantSlug, isCritical = false, sources, children, ...props }) {
+    return (_jsxs("audio", { src: sources?.length ? undefined : buildUrl(assetPath, variantSlug), ...getMediaSnippetAttributes({ isCritical }), ...props, children: [sources?.map((source) => (_jsx("source", { src: buildUrl(source.assetPath, source.variantSlug), type: source.type }, `${source.assetPath}:${source.variantSlug || ""}:${source.type || ""}`))), children] }));
 }

package/dist/react/CDNImage.d.ts

@@ -4,8 +4,9 @@ export type CDNImageProps<TAssets extends Partial<LoaderAssetMap> | undefined =
     assetPath: LoaderImagePath<TAssets>;
     variantSlug?: LoaderVariantSlug<TAssets>;
     alt: string;
-    responsive?: boolean;
-    variants?: number[];
-} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet">;
-export declare function CDNImage<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, alt, responsive, variants, sizes, ...props }: CDNImageProps<TAssets>): import("react/jsx-runtime").JSX.Element;
+    isCritical?: boolean;
+    width?: number | string;
+    height?: number | string;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt" | "decoding" | "fetchPriority" | "height" | "loading" | "sizes" | "src" | "srcSet" | "width">;
+export declare function CDNImage<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, alt, isCritical, width, height, ...props }: CDNImageProps<TAssets>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CDNImage.d.ts.map

package/dist/react/CDNImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/react/CDNImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAIhH,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEtE,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,GAAQ,EACR,UAAkB,EAClB,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAsB5B"}
+{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/react/CDNImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,GAAG,IAAI,CACJ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACzC,KAAK,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CACrG,CAAC;AAEF,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,GAAQ,EACR,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAuB5B"}

package/dist/react/CDNImage.js

@@ -1,23 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tryGetConfig } from "../core/config.js";
+import { getImageSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
-const defaultSizes = "(min-width: 1280px) 556px, (min-width: 1024px) calc((100vw - 232px) / 2), (min-width: 768px) calc(100vw - 128px), calc(100vw - 32px)";
-export function CDNImage({ assetPath, variantSlug, alt = '', responsive = false, variants, sizes, ...props }) {
+export function CDNImage({ assetPath, variantSlug, alt = '', isCritical = false, width, height, ...props }) {
     const src = buildUrl(assetPath, variantSlug);
-    if (!responsive) {
-        return _jsx("img", { alt: alt, src: src, sizes: sizes, ...props });
-    }
-    const width = typeof props.width === "number" ? props.width : undefined;
-    const availableVariants = resolveImageVariants(variants).filter((variantWidth) => width ? variantWidth <= width : true);
-    const fallbackWidth = availableVariants[availableVariants.length - 1];
-    return (_jsx("img", { alt: alt, src: fallbackWidth ? getVariantSrc(src, fallbackWidth) : src, srcSet: availableVariants.map((variantWidth) => `${getVariantSrc(src, variantWidth)} ${variantWidth}w`).join(", "), sizes: sizes || defaultSizes, ...props }));
+    const availableVariants = resolveImageVariants().filter((variantWidth) => typeof width === "number" ? variantWidth <= width : true);
+    const snippetAttributes = getImageSnippetAttributes({
+        src,
+        alt,
+        isCritical,
+        width,
+        height,
+        variants: availableVariants.map((variantWidth) => ({
+            width: variantWidth,
+            url: getVariantSrc(src, variantWidth),
+        })),
+    });
+    return (_jsx("img", { ...snippetAttributes, ...props }));
 }
-const resolveImageVariants = (variants) => {
-    if (variants && variants.length > 0) {
-        return variants;
-    }
+const resolveImageVariants = () => {
     const configVariants = Object.values(tryGetConfig()?.imageVariants || {});
-    return configVariants.length > 0 ? configVariants : [320, 480, 640, 768, 960, 1200];
+    return configVariants
+        .filter((variantWidth) => Number.isFinite(variantWidth) && variantWidth > 0)
+        .sort((a, b) => a - b);
 };
 const getVariantSrc = (src, width) => {
     const extensionIndex = src.lastIndexOf(".");

package/dist/react/CDNVideo.d.ts

@@ -6,7 +6,10 @@ export type CDNVideoProps<TAssets extends Partial<LoaderAssetMap> | undefined =
     variantSlug?: LoaderVariantSlug<TAssets>;
     posterAssetPath?: LoaderImagePath<TAssets>;
     posterVariantSlug?: LoaderVariantSlug<TAssets>;
+    isCritical?: boolean;
+    controls?: boolean;
+    loop?: boolean;
     sources?: Array<CDNMediaSource<LoaderVideoPath<TAssets>, LoaderVariantSlug<TAssets>>>;
-} & Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "src" | "poster">;
-export declare function CDNVideo<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, posterAssetPath, posterVariantSlug, sources, children, ...props }: CDNVideoProps<TAssets>): import("react/jsx-runtime").JSX.Element;
+} & Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "controls" | "loop" | "poster" | "preload" | "src">;
+export declare function CDNVideo<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>({ assetPath, variantSlug, posterAssetPath, posterVariantSlug, isCritical, sources, children, ...props }: CDNVideoProps<TAssets>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CDNVideo.d.ts.map

package/dist/react/CDNVideo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CDNVideo.d.ts","sourceRoot":"","sources":["../../src/react/CDNVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC;AACjI,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,eAAe,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CACzF,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;AAExE,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAiB5B"}
+{"version":3,"file":"CDNVideo.d.ts","sourceRoot":"","sources":["../../src/react/CDNVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,kBAAkB,CAAC;AACjI,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,eAAe,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CACzF,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;AAE1G,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,EACI,SAAS,EACT,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,OAAO,CAAC,2CAkB5B"}

package/dist/react/CDNVideo.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getMediaSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
-export function CDNVideo({ assetPath, variantSlug, posterAssetPath, posterVariantSlug, sources, children, ...props }) {
-    return (_jsxs("video", { src: sources?.length ? undefined : buildUrl(assetPath, variantSlug), poster: posterAssetPath ? buildUrl(posterAssetPath, posterVariantSlug) : undefined, ...props, children: [sources?.map((source) => (_jsx("source", { src: buildUrl(source.assetPath, source.variantSlug), type: source.type }, `${source.assetPath}:${source.variantSlug || ""}:${source.type || ""}`))), children] }));
+export function CDNVideo({ assetPath, variantSlug, posterAssetPath, posterVariantSlug, isCritical = false, sources, children, ...props }) {
+    return (_jsxs("video", { src: sources?.length ? undefined : buildUrl(assetPath, variantSlug), poster: posterAssetPath ? buildUrl(posterAssetPath, posterVariantSlug) : undefined, ...getMediaSnippetAttributes({ isCritical }), ...props, children: [sources?.map((source) => (_jsx("source", { src: buildUrl(source.assetPath, source.variantSlug), type: source.type }, `${source.assetPath}:${source.variantSlug || ""}:${source.type || ""}`))), children] }));
 }

package/dist/vue/CDNImage.d.ts

@@ -4,7 +4,10 @@ export type CDNImageProps<TAssets extends Partial<LoaderAssetMap> | undefined =
     assetPath: LoaderImagePath<TAssets>;
     variantSlug?: LoaderVariantSlug<TAssets>;
     alt?: string;
-} & Omit<ImgHTMLAttributes, "src">;
+    isCritical?: boolean;
+    width?: number | string;
+    height?: number | string;
+} & Omit<ImgHTMLAttributes, "alt" | "decoding" | "fetchpriority" | "height" | "loading" | "sizes" | "src" | "srcset" | "width">;
 export declare const CDNImage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     assetPath: {
         type: PropType<string>;
@@ -18,6 +21,18 @@ export declare const CDNImage: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    isCritical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: PropType<number | string | undefined>;
+        required: false;
+    };
+    height: {
+        type: PropType<number | string | undefined>;
+        required: false;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -33,7 +48,20 @@ export declare const CDNImage: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    isCritical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: PropType<number | string | undefined>;
+        required: false;
+    };
+    height: {
+        type: PropType<number | string | undefined>;
+        required: false;
+    };
 }>> & Readonly<{}>, {
     alt: string;
+    isCritical: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=CDNImage.d.ts.map

package/dist/vue/CDNImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/vue/CDNImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAC,MAAM,KAAK,CAAC;AAE9E,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ;;cAIO,QAAQ,CAAC,MAAM,CAAC;;;;cAIhB,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;cAJ5B,QAAQ,CAAC,MAAM,CAAC;;;;cAIhB,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;4EAetD,CAAC"}
+{"version":3,"file":"CDNImage.d.ts","sourceRoot":"","sources":["../../src/vue/CDNImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAC,MAAM,KAAK,CAAC;AAI9E,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,MAAM,MAAM,aAAa,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,IAAI;IACrG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,GAAG,IAAI,CAAC,iBAAiB,EAAE,KAAK,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AAEhI,eAAO,MAAM,QAAQ;;cAIO,QAAQ,CAAC,MAAM,CAAC;;;;cAIhB,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;cAYlB,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;;;;cAIrC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;;;;;;;cApB/C,QAAQ,CAAC,MAAM,CAAC;;;;cAIhB,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;cAYlB,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;;;;cAIrC,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;;;;;;4EA4BzE,CAAC"}

package/dist/vue/CDNImage.js

@@ -1,4 +1,6 @@
 import { defineComponent, h } from "vue";
+import { tryGetConfig } from "../core/config.js";
+import { getImageSnippetAttributes } from "../core/html-snippets.js";
 import { buildUrl } from "../core/utils.js";
 export const CDNImage = defineComponent({
     name: "SmoothCDNImage",
@@ -14,13 +16,52 @@ export const CDNImage = defineComponent({
         alt: {
             type: String,
             default: ""
+        },
+        isCritical: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: [Number, String],
+            required: false
+        },
+        height: {
+            type: [Number, String],
+            required: false
         }
     },
     setup(props, { attrs }) {
-        return () => h("img", {
-            ...attrs,
-            alt: props.alt,
-            src: buildUrl(props.assetPath, props.variantSlug)
-        });
+        return () => {
+            const src = buildUrl(props.assetPath, props.variantSlug);
+            const availableVariants = resolveImageVariants().filter((variantWidth) => typeof props.width === "number" ? variantWidth <= props.width : true);
+            const snippetAttributes = getImageSnippetAttributes({
+                src,
+                alt: props.alt,
+                isCritical: props.isCritical,
+                width: props.width,
+                height: props.height,
+                variants: availableVariants.map((variantWidth) => ({
+                    width: variantWidth,
+                    url: getVariantSrc(src, variantWidth),
+                })),
+            });
+            return h("img", {
+                ...snippetAttributes,
+                ...attrs,
+            });
+        };
     }
 });
+const resolveImageVariants = () => {
+    const configVariants = Object.values(tryGetConfig()?.imageVariants || {});
+    return configVariants
+        .filter((variantWidth) => Number.isFinite(variantWidth) && variantWidth > 0)
+        .sort((a, b) => a - b);
+};
+const getVariantSrc = (src, width) => {
+    const extensionIndex = src.lastIndexOf(".");
+    if (extensionIndex === -1) {
+        return src;
+    }
+    return `${src.slice(0, extensionIndex)}_${width}${src.slice(extensionIndex)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smoothcdn/loader",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Smooth CDN framework-aware asset loader",
   "license": "UNLICENSED",
   "type": "module",

package/readme.md

@@ -12,6 +12,8 @@ It includes:
 - Astro, SvelteKit and Remix entrypoints,
 - TypeScript asset typing generated from `.scdn.json`.
 
+Image, media, script and style components share the same loading semantics as Smooth CDN HTML snippets. Use `isCritical` for assets needed above the fold; the loader then applies the correct loading attributes. Image responsiveness is driven only by `imageVariants` in `.scdn.json`.
+
 ## Installation
 
 ```bash
@@ -38,35 +40,25 @@ The loader expects the standard Smooth CDN config shape:
 
 ```json
 {
-  "userSlug": "smoothcdn",
-  "projectSlug": "web",
-  "customSubdomain": "web",
-  "sources": ["./public/*", "./.next/static/**/*"],
-  "excludes": ["./public/*.txt", "./.next/static/**/*.map"],
+  "userSlug": "your-team",
+  "projectSlug": "frontend-app",
+  "version": "1.0.0",
+  "sources": ["./public/*", "./dist/**/*"],
+  "excludes": ["./public/*.txt", "./dist/**/*.map"],
   "replacePath": {
-    "/.next/": "/_next/"
+    "/dist/": "/assets/"
   },
   "imageVariants": {
-    "320": 320,
-    "480": 480,
-    "640": 640,
-    "768": 768,
-    "960": 960,
-    "1200": 1200
+    "mobile": 360,
+    "tablet": 720,
+    "desktop": 1600
   }
 }
 ```
 
 Use `replacePath` when files are collected from one location but should be referenced from another public path. `replacePaths` is also accepted as an alias.
 
-For projects with `customSubdomain`, URLs are built from the subdomain root:
-
-```ts
-buildUrl("/public/logo.svg");
-// https://web.smoothcdn.com/public/logo.svg
-```
-
-Without `customSubdomain`, URLs use the standard Smooth CDN path:
+URLs use the standard Smooth CDN path:
 
 ```ts
 buildUrl("/public/logo.svg");
@@ -95,15 +87,14 @@ To write the file somewhere else:
 scdn types --output src/smoothcdn-loader.ts
 ```
 
-Once the generated module is included in your app bootstrap, helpers and components imported from `@smoothcdn/loader` use those generated asset types automatically:
+Once the generated module is included in your app bootstrap, components imported from `@smoothcdn/loader` use those generated asset types automatically:
 
-```ts
-import { createLoader } from "@smoothcdn/loader";
-
-const loader = createLoader();
+```tsx
+import { CDNImage } from "@smoothcdn/loader/react";
 
-loader.url("/public/logo.svg");
-loader.image("/public/logo.svg");
+export function Logo() {
+  return <CDNImage assetPath="/public/logo.svg" alt="Smooth CDN" width={40} height={40} />;
+}
 ```
 
 Commit `smoothcdn-loader.ts` with your app if you want asset-path autocomplete to work without regenerating it on every install. The `.scdn` directory can stay ignored.
@@ -115,19 +106,23 @@ Commit `smoothcdn-loader.ts` with your app if you want asset-path autocomplete t
 
 ## Core
 
-Use the core loader in any JavaScript or TypeScript runtime that has the required browser APIs.
+Use the core loader when you need a CDN URL or an imperative load outside a component.
 
 ```ts
 import { createLoader } from "@smoothcdn/loader";
 
 const loader = createLoader();
 
+// Build a CDN URL for href, src, metadata or third-party APIs.
 const logoUrl = loader.url("/public/logo.svg");
+document.querySelector("a.download-logo")?.setAttribute("href", logoUrl);
 
+// Load browser assets imperatively.
 await loader.script("/public/app.js");
 await loader.style("/public/app.css");
-await loader.image("/public/logo.svg");
+await loader.image("/public/hero.png");
 
+// Fetch a CDN-hosted JSON or XML asset.
 const response = await loader.fetch("/public/data.json");
 const data = await response.json();
 ```
@@ -165,18 +160,18 @@ export function DataBlock() {
 ## Next.js
 
 ```tsx
-import { Script, Style } from "@smoothcdn/loader/next";
-import { CDNAudio, CDNImage, CDNVideo } from "@smoothcdn/loader/react";
+import { CDNAudio, CDNImage, CDNVideo, Script, Style } from "@smoothcdn/loader/next";
 
 export default function Page() {
   return (
     <>
-      <Style assetPath="/public/app.css" />
-      <Script assetPath="/public/app.js" />
+      <Style assetPath="/public/app.css" isCritical />
+      <Script assetPath="/public/app.js" isCritical />
 
       <CDNImage
         assetPath="/public/logo.svg"
         alt="Smooth CDN"
+        isCritical
         width={80}
         height={80}
       />
@@ -189,6 +184,7 @@ export default function Page() {
       <CDNVideo
         assetPath="/public/demo.mp4"
         posterAssetPath="/public/demo-poster.jpg"
+        isCritical
         controls
         width={1280}
         height={720}
@@ -336,7 +332,9 @@ const loader = createLoader();
 loader.image("/public/logo.png", "640");
 ```
 
-For responsive images, use the package component with `responsive`. It builds `srcSet` from `imageVariants` in `.scdn.json` unless you pass `variants` explicitly.
+When `.scdn.json` contains `imageVariants`, image components automatically build `srcSet` from those configured widths. When `imageVariants` is not configured, the same component renders a single CDN `src`.
+
+`isCritical` controls loading behavior. Critical images get `fetchpriority="high"` and synchronous decoding. Non-critical images get `loading="lazy"` and async decoding.
 
 ```tsx
 import { CDNImage } from "@smoothcdn/loader/react";
@@ -344,12 +342,11 @@ import { CDNImage } from "@smoothcdn/loader/react";
 export function HeroImage() {
   return (
     <CDNImage
-      responsive
       assetPath="/public/hero.png"
       alt="Hero"
+      isCritical
       width={1536}
       height={1024}
-      sizes="(min-width: 1024px) 50vw, 100vw"
     />
   );
 }