@smoothcdn/loader 1.0.0

package/dist/vue/useFetch.d.ts

@@ -0,0 +1,6 @@
+import type { LoaderAssetMap, LoaderDefaultAssetMap, LoaderEndpointPath, LoaderVariantSlug } from "../core/types.js";
+export declare function useFetch<T = unknown, TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>(assetPath: LoaderEndpointPath<TAssets>, variantSlug?: LoaderVariantSlug<TAssets>, init?: RequestInit): {
+    data: [T | null] extends [import("vue").Ref<any, any>] ? import("@vue/shared").IfAny<import("vue").Ref<any, any> & T, import("vue").Ref<import("vue").Ref<any, any> & T, import("vue").Ref<any, any> & T>, import("vue").Ref<any, any> & T> : import("vue").Ref<import("vue").UnwrapRef<T> | null, T | import("vue").UnwrapRef<T> | null>;
+    error: import("vue").Ref<Error | null, Error | null>;
+};
+//# sourceMappingURL=useFetch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../../src/vue/useFetch.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEnH,wBAAgB,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAC7G,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,EACtC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,EACxC,IAAI,CAAC,EAAE,WAAW;;;EAmBrB"}

package/dist/vue/useFetch.js

@@ -0,0 +1,19 @@
+import { ref, watchEffect } from "vue";
+import { createLoader } from "../core/createLoader.js";
+export function useFetch(assetPath, variantSlug, init) {
+    const data = ref(null);
+    const error = ref(null);
+    watchEffect(() => {
+        createLoader()
+            .fetch(assetPath, variantSlug, init)
+            .then((response) => response.json())
+            .then((payload) => {
+            data.value = payload;
+            error.value = null;
+        })
+            .catch((currentError) => {
+            error.value = currentError;
+        });
+    });
+    return { data, error };
+}

package/dist/vue/useImage.d.ts

@@ -0,0 +1,6 @@
+import type { LoaderAssetMap, LoaderDefaultAssetMap, LoaderImagePath, LoaderVariantSlug } from "../core/types.js";
+export declare function useImage<TAssets extends Partial<LoaderAssetMap> | undefined = LoaderDefaultAssetMap>(assetPath: LoaderImagePath<TAssets>, variantSlug?: LoaderVariantSlug<TAssets>): {
+    image: import("vue").Ref<HTMLImageElement | null, HTMLImageElement | null>;
+    error: import("vue").Ref<Error | null, Error | null>;
+};
+//# sourceMappingURL=useImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useImage.d.ts","sourceRoot":"","sources":["../../src/vue/useImage.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,qBAAqB,EAAE,eAAe,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEhH,wBAAgB,QAAQ,CAAC,OAAO,SAAS,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,qBAAqB,EAChG,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,EACnC,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;;;EAkB3C"}

package/dist/vue/useImage.js

@@ -0,0 +1,18 @@
+import { ref, watchEffect } from "vue";
+import { createLoader } from "../core/createLoader.js";
+export function useImage(assetPath, variantSlug) {
+    const image = ref(null);
+    const error = ref(null);
+    watchEffect(() => {
+        createLoader()
+            .image(assetPath, variantSlug)
+            .then((loadedImage) => {
+            image.value = loadedImage;
+            error.value = null;
+        })
+            .catch((currentError) => {
+            error.value = currentError;
+        });
+    });
+    return { image, error };
+}

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@smoothcdn/loader",
+  "version": "1.0.0",
+  "description": "Smooth CDN framework-aware asset loader",
+  "license": "UNLICENSED",
+  "type": "module",
+
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt.d.ts",
+      "import": "./dist/nuxt.js"
+    },
+    "./astro": {
+      "types": "./dist/astro.d.ts",
+      "import": "./dist/astro.js"
+    },
+    "./sveltekit": {
+      "types": "./dist/sveltekit.d.ts",
+      "import": "./dist/sveltekit.js"
+    },
+    "./remix": {
+      "types": "./dist/remix.d.ts",
+      "import": "./dist/remix.js"
+    },
+    "./types-generator": {
+      "types": "./dist/types-generator.d.ts",
+      "import": "./dist/types-generator.js"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+
+  "files": ["dist"],
+  "sideEffects": false,
+
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "vue": "^3.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  },
+
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "typescript": "^5.3.0",
+
+    "react": "^18.2.0",
+    "@types/react": "^18.2.0",
+
+    "vue": "^3.4.0",
+
+    "next": "^13.5.0"
+  }
+}

package/readme.md

@@ -0,0 +1,356 @@
+# @smoothcdn/loader
+
+Framework-aware loader for Smooth CDN assets.
+
+`@smoothcdn/loader` reads the same `.scdn.json` project configuration used by the Smooth CDN CLI and gives your app typed helpers and ready-to-use components for loading images, scripts, styles and fetchable assets from Smooth CDN.
+
+It includes:
+
+- a framework-neutral core loader,
+- React and Next.js components/hooks for images, audio, video, scripts and styles,
+- Vue and Nuxt helpers,
+- Astro, SvelteKit and Remix entrypoints,
+- TypeScript asset typing generated from `.scdn.json`.
+
+## Installation
+
+```bash
+npm install @smoothcdn/loader
+```
+
+## Configuration
+
+Place `.scdn.json` in the root of your project, generate the loader module, then call its bootstrap once from your app entrypoint.
+
+```bash
+scdn types
+```
+
+```ts
+import { configureSmoothCDN } from "./smoothcdn-loader";
+
+configureSmoothCDN();
+```
+
+After that, import components and helpers directly from `@smoothcdn/loader`. The generated file adds project asset types globally, so `assetPath` suggestions work without importing a project-specific wrapper in every component.
+
+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"],
+  "replacePath": {
+    "/.next/": "/_next/"
+  },
+  "imageVariants": {
+    "320": 320,
+    "480": 480,
+    "640": 640,
+    "768": 768,
+    "960": 960,
+    "1200": 1200
+  }
+}
+```
+
+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:
+
+```ts
+buildUrl("/public/logo.svg");
+// https://cdn.smoothcdn.com/<userSlug>/<projectSlug>/<version>/<variant>/public/logo.svg
+```
+
+## TypeScript Asset Typing
+
+The package exposes a generator that reads root `.scdn.json`, scans configured sources, applies `excludes` and `replacePath`, and writes a TypeScript module with project asset types.
+
+Generate the types with the Smooth CDN CLI:
+
+```bash
+scdn types
+```
+
+The command should generate:
+
+```text
+smoothcdn-loader.ts
+```
+
+To write the file somewhere else:
+
+```bash
+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:
+
+```ts
+import { createLoader } from "@smoothcdn/loader";
+
+const loader = createLoader();
+
+loader.url("/public/logo.svg");
+loader.image("/public/logo.svg");
+```
+
+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.
+
+```gitignore
+.scdn/*
+!.scdn/
+```
+
+## Core
+
+Use the core loader in any JavaScript or TypeScript runtime that has the required browser APIs.
+
+```ts
+import { createLoader } from "@smoothcdn/loader";
+
+const loader = createLoader();
+
+const logoUrl = loader.url("/public/logo.svg");
+
+await loader.script("/public/app.js");
+await loader.style("/public/app.css");
+await loader.image("/public/logo.svg");
+
+const response = await loader.fetch("/public/data.json");
+const data = await response.json();
+```
+
+## React
+
+```tsx
+import { CDNImage, useFetch, useImage } from "@smoothcdn/loader/react";
+
+export function Logo() {
+  return (
+    <CDNImage
+      assetPath="/public/logo.svg"
+      alt="Smooth CDN"
+      width={40}
+      height={40}
+    />
+  );
+}
+
+export function Preview() {
+  const { image, error } = useImage("/public/logo.svg");
+
+  if (error) return null;
+  return <span>{image ? "Loaded" : "Loading"}</span>;
+}
+
+export function DataBlock() {
+  const { data } = useFetch("/public/data.json");
+
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
+```
+
+## Next.js
+
+```tsx
+import { Script, Style } from "@smoothcdn/loader/next";
+import { CDNAudio, CDNImage, CDNVideo } from "@smoothcdn/loader/react";
+
+export default function Page() {
+  return (
+    <>
+      <Style assetPath="/public/app.css" />
+      <Script assetPath="/public/app.js" />
+
+      <CDNImage
+        assetPath="/public/logo.svg"
+        alt="Smooth CDN"
+        width={80}
+        height={80}
+      />
+
+      <CDNAudio
+        assetPath="/public/intro.mp3"
+        controls
+      />
+
+      <CDNVideo
+        assetPath="/public/demo.mp4"
+        posterAssetPath="/public/demo-poster.jpg"
+        controls
+        width={1280}
+        height={720}
+      />
+    </>
+  );
+}
+```
+
+## Vue
+
+```vue
+<script setup lang="ts">
+import { CDNImage, useImage } from "@smoothcdn/loader/vue";
+
+const { image, error } = useImage("/public/logo.svg");
+</script>
+
+<template>
+  <CDNImage
+    asset-path="/public/logo.svg"
+    alt="Smooth CDN"
+    width="80"
+    height="80"
+  />
+
+  <span v-if="image">Loaded</span>
+  <span v-if="error">Failed</span>
+</template>
+```
+
+## Nuxt
+
+Create a plugin that configures the loader once.
+
+```ts
+// plugins/smoothcdn.ts
+import { configureSmoothCDN } from "../smoothcdn-loader";
+
+export default defineNuxtPlugin(() => {
+  configureSmoothCDN();
+});
+```
+
+Use the Nuxt entrypoint in components or composables:
+
+```vue
+<script setup lang="ts">
+import { createSmoothLoader, CDNImage } from "@smoothcdn/loader/nuxt";
+
+const { url } = createSmoothLoader();
+const logoUrl = url("/public/logo.svg");
+</script>
+
+<template>
+  <CDNImage
+    asset-path="/public/logo.svg"
+    alt="Smooth CDN"
+    width="80"
+    height="80"
+  />
+
+  <a :href="logoUrl">Open logo</a>
+</template>
+```
+
+## Astro
+
+```astro
+---
+import { createSmoothLoader } from "@smoothcdn/loader/astro";
+
+const { url } = createSmoothLoader();
+const logoUrl = url("/public/logo.svg");
+---
+
+<img src={logoUrl} alt="Smooth CDN" width="80" height="80" />
+```
+
+## SvelteKit
+
+Initialize the loader in a shared module:
+
+```ts
+// src/lib/smoothcdn.ts
+import { createSmoothLoader } from "@smoothcdn/loader/sveltekit";
+
+export const smoothcdn = createSmoothLoader();
+```
+
+Use it in a Svelte component:
+
+```svelte
+<script lang="ts">
+  import { smoothcdn } from "$lib/smoothcdn";
+
+  const logoUrl = smoothcdn.url("/public/logo.svg");
+</script>
+
+<img src={logoUrl} alt="Smooth CDN" width="80" height="80" />
+```
+
+Or create a typed `load` helper:
+
+```ts
+import { createAssetLoad } from "@smoothcdn/loader/sveltekit";
+
+export const load = createAssetLoad({
+  assetPath: "/public/logo.svg",
+  depends: ["smoothcdn:logo"],
+  cacheControl: "public, max-age=3600"
+});
+```
+
+## Remix
+
+```tsx
+import { createSmoothLoader, createStyleLink } from "@smoothcdn/loader/remix";
+
+const { url } = createSmoothLoader();
+
+export const links = () => [
+  createStyleLink("/public/app.css")
+];
+
+export default function Route() {
+  return (
+    <img
+      src={url("/public/logo.svg")}
+      alt="Smooth CDN"
+      width={80}
+      height={80}
+    />
+  );
+}
+```
+
+## Generated Image Variants
+
+If your `.scdn.json` contains `imageVariants`, generated type output also includes those labels as valid variants.
+
+```ts
+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.
+
+```tsx
+import { CDNImage } from "@smoothcdn/loader/react";
+
+export function HeroImage() {
+  return (
+    <CDNImage
+      responsive
+      assetPath="/public/hero.png"
+      alt="Hero"
+      width={1536}
+      height={1024}
+      sizes="(min-width: 1024px) 50vw, 100vw"
+    />
+  );
+}
+```