@django-stack/svelte 0.0.0-stage → 0.4.0

package/LICENSE

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

package/README.md

@@ -1,3 +1,32 @@
-# Temporary Holding Version
+# @django-stack/svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte components for DjangoStack frontends: blocks, rich text, images and
+SEO tags, for content from Django Headless and Django Content Studio.
+
+Part of [DjangoStack](https://github.com/dwarsbit/django-stack). The
+SvelteKit frontend of `npx @django-stack/cli init --frontend sveltekit`
+uses it.
+
+```svelte
+<!-- src/routes/[...path]/+page.svelte -->
+<script lang="ts">
+  import { Blocks } from "@django-stack/svelte";
+  import Gallery from "$lib/components/Gallery.svelte";
+
+  let { data } = $props();
+</script>
+
+<h1>{data.page.title}</h1>
+<Blocks blocks={data.page.body} components={{ gallery: Gallery }} />
+```
+
+| Component | What it renders |
+|-----------|-----------------|
+| `Blocks` | A block field. `components` adds or replaces block types; unknown types render nothing. |
+| `RichText` | HTML from an `HTMLField`, which Django sanitizes when it is saved. |
+| `Image` | A responsive `<img>` with `srcset` from the image sizes and the focal point. |
+| `Seo` | The title, description, canonical URL, Open Graph and Twitter tags, in `<svelte:head>`. |
+
+## License
+
+MIT

package/dist/Blocks.svelte

@@ -0,0 +1,35 @@
+<!--
+  Renders a Content Studio block field. `components` maps a block type to a
+  component that takes a `block` prop; it adds types or replaces the
+  built-in ones. Unknown types render nothing.
+-->
+<script lang="ts">
+  import type { Block } from "@django-stack/utils";
+  import type { Component } from "svelte";
+  import CallToActionBlock from "./blocks/CallToActionBlock.svelte";
+  import ImageBlock from "./blocks/ImageBlock.svelte";
+  import QuoteBlock from "./blocks/QuoteBlock.svelte";
+  import TextBlock from "./blocks/TextBlock.svelte";
+
+  interface Props {
+    blocks: Block[] | null | undefined;
+    components?: Record<string, Component<{ block: any }>>;
+  }
+
+  let { blocks, components = {} }: Props = $props();
+
+  const registry = $derived<Record<string, Component<{ block: any }>>>({
+    text: TextBlock,
+    image: ImageBlock,
+    quote: QuoteBlock,
+    call_to_action: CallToActionBlock,
+    ...components,
+  });
+</script>
+
+{#each blocks ?? [] as block (block.id)}
+  {@const BlockComponent = registry[block.type]}
+  {#if BlockComponent}
+    <BlockComponent {block} />
+  {/if}
+{/each}

package/dist/Blocks.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Block } from "@django-stack/utils";
+import type { Component } from "svelte";
+interface Props {
+    blocks: Block[] | null | undefined;
+    components?: Record<string, Component<{
+        block: any;
+    }>>;
+}
+declare const Blocks: Component<Props, {}, "">;
+type Blocks = ReturnType<typeof Blocks>;
+export default Blocks;

package/dist/Image.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { imageAttributes, type Media } from "@django-stack/utils";
+
+  interface Props {
+    media: Media | string | null | undefined;
+    /** An image size from IMAGE_SIZES, such as card or hero. */
+    size?: string;
+    /** The sizes attribute, for the browser to pick from the srcset. */
+    sizes?: string;
+    alt?: string;
+    class?: string;
+    eager?: boolean;
+  }
+
+  let { media, size, sizes = "100vw", alt, class: className, eager = false }: Props = $props();
+  const attributes = $derived(imageAttributes(media, { size, alt }));
+</script>
+
+{#if attributes}
+  <img
+    src={attributes.src}
+    srcset={attributes.srcset}
+    sizes={attributes.srcset ? sizes : undefined}
+    width={attributes.width}
+    height={attributes.height}
+    alt={attributes.alt}
+    class={className}
+    style:object-position={attributes.objectPosition}
+    loading={eager ? "eager" : "lazy"}
+    decoding="async"
+  />
+{/if}

package/dist/Image.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Media } from "@django-stack/utils";
+interface Props {
+    media: Media | string | null | undefined;
+    /** An image size from IMAGE_SIZES, such as card or hero. */
+    size?: string;
+    /** The sizes attribute, for the browser to pick from the srcset. */
+    sizes?: string;
+    alt?: string;
+    class?: string;
+    eager?: boolean;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/RichText.svelte

@@ -0,0 +1,16 @@
+<!--
+  HTML from a Content Studio HTMLField. Django sanitizes it with an
+  allowlist when it is saved, so it is safe to render as is.
+-->
+<script lang="ts">
+  interface Props {
+    html: string | null | undefined;
+    class?: string;
+  }
+
+  let { html, class: className = "prose" }: Props = $props();
+</script>
+
+{#if html}
+  <div class={className}>{@html html}</div>
+{/if}

package/dist/RichText.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    html: string | null | undefined;
+    class?: string;
+}
+declare const RichText: import("svelte").Component<Props, {}, "">;
+type RichText = ReturnType<typeof RichText>;
+export default RichText;

package/dist/Seo.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { type SeoInput, type SiteSettings, seo } from "@django-stack/utils";
+
+  interface Props {
+    page?: SeoInput | null;
+    settings: SiteSettings | null;
+    /** The site's public URL, such as https://example.com. */
+    siteUrl: string;
+    /** The path of the page, for the canonical URL. */
+    path: string;
+    type?: "website" | "article";
+  }
+
+  let { page, settings, siteUrl, path, type }: Props = $props();
+  const meta = $derived(seo({ page, settings, siteUrl, path, type }));
+</script>
+
+<svelte:head>
+  <title>{meta.title}</title>
+  {#if meta.description}
+    <meta name="description" content={meta.description} />
+  {/if}
+  <link rel="canonical" href={meta.canonical} />
+  {#each Object.entries(meta.openGraph) as [property, content] (property)}
+    <meta {property} {content} />
+  {/each}
+  {#each Object.entries(meta.twitter) as [name, content] (name)}
+    <meta {name} {content} />
+  {/each}
+</svelte:head>

package/dist/Seo.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type SeoInput, type SiteSettings } from "@django-stack/utils";
+interface Props {
+    page?: SeoInput | null;
+    settings: SiteSettings | null;
+    /** The site's public URL, such as https://example.com. */
+    siteUrl: string;
+    /** The path of the page, for the canonical URL. */
+    path: string;
+    type?: "website" | "article";
+}
+declare const Seo: import("svelte").Component<Props, {}, "">;
+type Seo = ReturnType<typeof Seo>;
+export default Seo;

package/dist/blocks/CallToActionBlock.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { CallToActionBlock } from "@django-stack/utils";
+
+  let { block }: { block: CallToActionBlock } = $props();
+</script>
+
+<aside class="cta">
+  <h2>{block.value.title}</h2>
+  {#if block.value.text}
+    <p>{block.value.text}</p>
+  {/if}
+  <a class="button" href={block.value.button_url}>{block.value.button_label}</a>
+</aside>

package/dist/blocks/CallToActionBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CallToActionBlock } from "@django-stack/utils";
+type $$ComponentProps = {
+    block: CallToActionBlock;
+};
+declare const CallToActionBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CallToActionBlock = ReturnType<typeof CallToActionBlock>;
+export default CallToActionBlock;

package/dist/blocks/ImageBlock.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ImageBlock } from "@django-stack/utils";
+  import Image from "../Image.svelte";
+
+  let { block }: { block: ImageBlock } = $props();
+</script>
+
+<figure class="block-image">
+  <Image media={block.value.image} size="content" sizes="(min-width: 48rem) 44rem, 100vw" />
+  {#if block.value.caption}
+    <figcaption class="muted">{block.value.caption}</figcaption>
+  {/if}
+</figure>

package/dist/blocks/ImageBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ImageBlock } from "@django-stack/utils";
+type $$ComponentProps = {
+    block: ImageBlock;
+};
+declare const ImageBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageBlock = ReturnType<typeof ImageBlock>;
+export default ImageBlock;

package/dist/blocks/QuoteBlock.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { QuoteBlock } from "@django-stack/utils";
+
+  let { block }: { block: QuoteBlock } = $props();
+</script>
+
+<blockquote class="prose">
+  <p>{block.value.text}</p>
+  {#if block.value.attribution}
+    <footer class="muted">{block.value.attribution}</footer>
+  {/if}
+</blockquote>

package/dist/blocks/QuoteBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { QuoteBlock } from "@django-stack/utils";
+type $$ComponentProps = {
+    block: QuoteBlock;
+};
+declare const QuoteBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type QuoteBlock = ReturnType<typeof QuoteBlock>;
+export default QuoteBlock;

package/dist/blocks/TextBlock.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { TextBlock } from "@django-stack/utils";
+  import RichText from "../RichText.svelte";
+
+  let { block }: { block: TextBlock } = $props();
+</script>
+
+<RichText html={block.value.body} />

package/dist/blocks/TextBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TextBlock } from "@django-stack/utils";
+type $$ComponentProps = {
+    block: TextBlock;
+};
+declare const TextBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextBlock = ReturnType<typeof TextBlock>;
+export default TextBlock;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Blocks } from "./Blocks.svelte";
+export { default as CallToActionBlock } from "./blocks/CallToActionBlock.svelte";
+export { default as ImageBlock } from "./blocks/ImageBlock.svelte";
+export { default as QuoteBlock } from "./blocks/QuoteBlock.svelte";
+export { default as TextBlock } from "./blocks/TextBlock.svelte";
+export { default as Image } from "./Image.svelte";
+export { default as RichText } from "./RichText.svelte";
+export { default as Seo } from "./Seo.svelte";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { default as Blocks } from "./Blocks.svelte";
+export { default as CallToActionBlock } from "./blocks/CallToActionBlock.svelte";
+export { default as ImageBlock } from "./blocks/ImageBlock.svelte";
+export { default as QuoteBlock } from "./blocks/QuoteBlock.svelte";
+export { default as TextBlock } from "./blocks/TextBlock.svelte";
+export { default as Image } from "./Image.svelte";
+export { default as RichText } from "./RichText.svelte";
+export { default as Seo } from "./Seo.svelte";

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@django-stack/svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "description": "Svelte components for DjangoStack frontends: blocks, rich text, images and SEO.",
+  "license": "MIT",
+  "author": "Leon van der Grient",
+  "homepage": "https://github.com/dwarsbit/django-stack/tree/main/packages/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dwarsbit/django-stack.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": "https://github.com/dwarsbit/django-stack/issues",
+  "keywords": [
+    "django",
+    "django-stack",
+    "headless-cms",
+    "svelte",
+    "sveltekit"
+  ],
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@django-stack/utils": "^0.4.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.0",
+    "@django-stack/utils": "0.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package --input src --output dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "test": "vitest run"
+  }
 }