@prismicio/svelte 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.0.2](https://github.com/prismicio/prismic-svelte/compare/v0.0.1...v0.0.2) (2022-05-13)
+
+
+### Chore
+
+* fix release script ([074d4fb](https://github.com/prismicio/prismic-svelte/commit/074d4fbdd6e3a7fd49b2e7fbe6b8a6b7b315491f))
+* fix release script ([026072a](https://github.com/prismicio/prismic-svelte/commit/026072ac3ff6fe08e161ac15c8776767af70f0d3))
+
+### 0.0.1 (2022-05-13)
+
+
+### Features
+
+* Change PrismicProvider prop to only Command line to bootstrap prismic projects. ([e4675d4](https://github.com/prismicio/prismic-svelte/commit/e4675d48d4a2d9fe89c04aa4273948ef2a84d018))
+* Finish creating components; Create Slices for route. ([5b18487](https://github.com/prismicio/prismic-svelte/commit/5b1848736dcf5d75e09556a57756017fc46847f4))
+* Get htmlSerializer from context in PrismicRichText ([36664bc](https://github.com/prismicio/prismic-svelte/commit/36664bc72d7e9eb6cd353c96ae22ed209143a905))
+* Handle missing url ([54b3a75](https://github.com/prismicio/prismic-svelte/commit/54b3a7529eda7b29542483a5b7b0ab33c2b22643))
+* Improve mock data ([782a0f0](https://github.com/prismicio/prismic-svelte/commit/782a0f031c41aeefb2d14220146087fc164b6eae))
+* Merge Lucie's and Sam's link components ([3ea6c7f](https://github.com/prismicio/prismic-svelte/commit/3ea6c7fdb48ad718a62f0cf70662fdb79e6e7d96))
+* Rename  to ([cc271cb](https://github.com/prismicio/prismic-svelte/commit/cc271cb285089f3bc6104b771711fe62fb3f5fea))
+* revamp slicezone component ([65c55b8](https://github.com/prismicio/prismic-svelte/commit/65c55b84f7c7eea7e65470f6b5a101c7749d2cde))
+* setup link component ([0545d48](https://github.com/prismicio/prismic-svelte/commit/0545d48fcb0413f40e917d1f4857996d5f402e69))
+* setup prismic provider ([9b9752f](https://github.com/prismicio/prismic-svelte/commit/9b9752fce5f4754bc195e83f44a4bb081e203b95))
+* Setup Prismicimage component ([0033cb5](https://github.com/prismicio/prismic-svelte/commit/0033cb515f2444a5f45040d28a27bf05ac7e0dd0))
+
+
+### Bug Fixes
+
+* Add shx so commands work cross platform ([1731f64](https://github.com/prismicio/prismic-svelte/commit/1731f64fa9310fdb93cf15b250320e0939d73f8b))
+
+
+### Chore
+
+* Add TODOs, rename plaintext component ([691aab7](https://github.com/prismicio/prismic-svelte/commit/691aab7bc9d47d2bdb47024e30ca90301813c85d))
+* init project ([9afa15a](https://github.com/prismicio/prismic-svelte/commit/9afa15a8a4372de8eb5b16e087433d2a640a93a0))
+* maintain repository ([e3ae492](https://github.com/prismicio/prismic-svelte/commit/e3ae492c0c03e121c8bddf03c96065485a448863))
+* migrate to vitest ([bbae453](https://github.com/prismicio/prismic-svelte/commit/bbae45309262b845dde7149ffad938bcc8aabc66))
+* setup todo components ([d57cf26](https://github.com/prismicio/prismic-svelte/commit/d57cf263f5294d9227a43bb9bb82e9e788dca09e))
+* update template config ([93a1b59](https://github.com/prismicio/prismic-svelte/commit/93a1b5971cf796f6eb9433044defc67eccf56bd2))

package/PrismicProvider.svelte

@@ -0,0 +1,22 @@
+<script>import { setContext } from "svelte";
+import { prismicKey } from "./injectionSymbols";
+import "./types";
+// export let client: PrismicContext["client"] = undefined;
+// export let linkResolver: PrismicContext["linkResolver"] = undefined;
+// export let htmlSerializer: PrismicContext["htmlSerializer"] = undefined;
+export let prismic = {
+    client: undefined,
+    linkResolver: undefined,
+    prismic: undefined,
+    htmlSerializer: undefined,
+    slices: undefined,
+};
+setContext(prismicKey, {
+    client: prismic.client,
+    linkResolver: prismic.linkResolver,
+    htmlSerializer: prismic.htmlSerializer,
+    slices: prismic.slices
+});
+</script>
+
+<slot />

package/PrismicProvider.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        prismic?: {
+            client: undefined;
+            linkResolver: undefined;
+            prismic: undefined;
+            htmlSerializer: undefined;
+            slices: undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PrismicProviderProps = typeof __propDef.props;
+export declare type PrismicProviderEvents = typeof __propDef.events;
+export declare type PrismicProviderSlots = typeof __propDef.slots;
+export default class PrismicProvider extends SvelteComponentTyped<PrismicProviderProps, PrismicProviderEvents, PrismicProviderSlots> {
+}
+export {};

package/components/PrismicEmbed.svelte

@@ -0,0 +1,6 @@
+<!-- TODO: Why are embeds 200px wide? -->
+
+<script>export let field;
+</script>
+
+{@html field.html}

package/components/PrismicEmbed.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type * as prismicT from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        field: prismicT.EmbedField;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PrismicEmbedProps = typeof __propDef.props;
+export declare type PrismicEmbedEvents = typeof __propDef.events;
+export declare type PrismicEmbedSlots = typeof __propDef.slots;
+export default class PrismicEmbed extends SvelteComponentTyped<PrismicEmbedProps, PrismicEmbedEvents, PrismicEmbedSlots> {
+}
+export {};

package/components/PrismicImage.svelte

@@ -0,0 +1,22 @@
+<script>import "@prismicio/types";
+export let field;
+let className;
+// creates a `class` property, even
+// though it is a reserved word
+export { className as class };
+const usePrismicImage = (field) => {
+    field.url;
+    return {
+        url: field.url || "",
+        alt: field.alt || "",
+        width: field.dimensions?.width || undefined,
+        height: field.dimensions?.height || undefined,
+        copyright: field.copyright || undefined,
+    };
+};
+const image = usePrismicImage(field);
+</script>
+
+{#if field.url}
+	<img src={image.url} alt={image.alt} height={image.height} />
+{/if}

package/components/PrismicImage.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import * as prismicT from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        field: prismicT.ImageField;
+        class: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PrismicImageProps = typeof __propDef.props;
+export declare type PrismicImageEvents = typeof __propDef.events;
+export declare type PrismicImageSlots = typeof __propDef.slots;
+export default class PrismicImage extends SvelteComponentTyped<PrismicImageProps, PrismicImageEvents, PrismicImageSlots> {
+}
+export {};

package/components/PrismicLink.svelte

@@ -0,0 +1,44 @@
+<script>import * as prismicH from "@prismicio/helpers";
+import { usePrismic } from "../usePrismic";
+// const defaultBlankTargetRelAttribute = "noopener noreferrer";
+export let field, linkResolver, download, hreflang, referrerpolicy, rel, target, type, prefetch, noscroll;
+const setRel = () => {
+    let rels = [];
+    const defaultBlankTargetRelAttribute = ["noopener", "noreferrer"];
+    if (rel)
+        rels.push(...rel?.split(" "));
+    if ((field && "target" in field && field?.target === "_blank") ||
+        target === "_blank")
+        defaultBlankTargetRelAttribute.forEach((item) => {
+            if (!rels.includes(item))
+                rels.push(item);
+        });
+    if (field &&
+        "link_type" in field &&
+        field?.link_type === "Web" &&
+        !rels.includes("external"))
+        rels.push("external");
+    return rels.join(" ");
+};
+const attrs = {
+    download,
+    hreflang,
+    referrerpolicy,
+    target: target || field?.target || undefined,
+    rel: setRel(),
+    type,
+};
+const link = field
+    ? prismicH.asLink(field, linkResolver || usePrismic().linkResolver)
+    : "";
+const href = link || "";
+</script>
+
+<a
+	{href}
+	{...attrs}
+	sveltekit:prefetch={prefetch}
+	sveltekit:noscroll={noscroll}
+>
+	<slot />
+</a>

package/components/PrismicLink.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import * as prismicH from "@prismicio/helpers";
+import type * as prismicT from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        field: prismicT.LinkField | prismicT.PrismicDocument | null | undefined;
+        linkResolver: prismicH.LinkResolverFunction | null | undefined;
+        download: boolean | null | undefined;
+        hreflang: string | undefined;
+        referrerpolicy: string | undefined;
+        rel: string | undefined;
+        target: string | undefined;
+        type: string | undefined;
+        prefetch: true | undefined;
+        noscroll: true | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PrismicLinkProps = typeof __propDef.props;
+export declare type PrismicLinkEvents = typeof __propDef.events;
+export declare type PrismicLinkSlots = typeof __propDef.slots;
+export default class PrismicLink extends SvelteComponentTyped<PrismicLinkProps, PrismicLinkEvents, PrismicLinkSlots> {
+}
+export {};

package/components/PrismicPreview.svelte

@@ -0,0 +1,21 @@
+<script>import '@prismicio/client';
+import { goto } from '$app/navigation';
+import { onMount } from "svelte";
+export let linkResolver;
+export let defaultURL;
+export let client;
+onMount(async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const previewToken = urlParams.get("token");
+    const documentID = urlParams.get("documentId");
+    if (documentID && previewToken) {
+        const redirect = await client.resolvePreviewURL({ documentID, defaultURL, previewToken, linkResolver });
+        await goto(redirect);
+        return;
+    }
+    console.log("Could not resolve preview URL.");
+    // TODO: Handle else
+});
+</script>
+
+<slot></slot>

package/components/PrismicPreview.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        linkResolver: any;
+        defaultURL: string;
+        client: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PrismicPreviewProps = typeof __propDef.props;
+export declare type PrismicPreviewEvents = typeof __propDef.events;
+export declare type PrismicPreviewSlots = typeof __propDef.slots;
+export default class PrismicPreview extends SvelteComponentTyped<PrismicPreviewProps, PrismicPreviewEvents, PrismicPreviewSlots> {
+}
+export {};

package/components/PrismicRichText.svelte

@@ -0,0 +1,8 @@
+<script>import * as prismicH from "@prismicio/helpers";
+import { usePrismic } from "./..";
+let { htmlSerializer, linkResolver } = usePrismic();
+export let field;
+export { htmlSerializer, linkResolver };
+</script>
+
+{@html prismicH.asHTML(field, linkResolver, htmlSerializer)}

package/components/PrismicRichText.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichTextField as RichTextFieldType } from "@prismicio/types";
+import type { TitleField as TitleFieldType } from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        field: TitleFieldType | RichTextFieldType;
+        htmlSerializer?: any;
+        linkResolver?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PrismicRichTextProps = typeof __propDef.props;
+export declare type PrismicRichTextEvents = typeof __propDef.events;
+export declare type PrismicRichTextSlots = typeof __propDef.slots;
+export default class PrismicRichText extends SvelteComponentTyped<PrismicRichTextProps, PrismicRichTextEvents, PrismicRichTextSlots> {
+}
+export {};

package/components/PrismicText.svelte

@@ -0,0 +1,7 @@
+<script>import * as prismicH from "@prismicio/helpers";
+export let field;
+export let separator;
+</script>
+
+<!-- TODO: Separator not working for newlines `\n\n` -->
+{@html prismicH.asText(field, separator)}

package/components/PrismicText.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichTextField as RichTextFieldType } from "@prismicio/types";
+import type { TitleField as TitleFieldType } from "@prismicio/types";
+declare const __propDef: {
+    props: {
+        field: TitleFieldType | RichTextFieldType;
+        separator: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PrismicTextProps = typeof __propDef.props;
+export declare type PrismicTextEvents = typeof __propDef.events;
+export declare type PrismicTextSlots = typeof __propDef.slots;
+export default class PrismicText extends SvelteComponentTyped<PrismicTextProps, PrismicTextEvents, PrismicTextSlots> {
+}
+export {};

package/components/SliceZone.svelte

@@ -0,0 +1,17 @@
+<script>import TodoSliceComponent from './TodoSliceComponent.svelte';
+export let slices = [];
+export let components = {};
+export let context = {};
+export let defaultComponent = undefined;
+export let dev = process.env.NODE_ENV === "development";
+</script>
+
+{#each slices as slice, index}
+  {@const type = "slice_type" in slice ? slice.slice_type : slice.type }
+  {@const Component = components[type] || defaultComponent}
+  {#if Component}
+    <svelte:component this={Component} {slice} {slices} {context} {index} />
+  {:else}
+    <TodoSliceComponent {slice} {dev} />
+  {/if}
+{/each}

package/components/SliceZone.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        slices?: ({
+            slice_type: string;
+        } | {
+            type: string;
+        })[] | undefined;
+        components?: Record<string, SvelteComponent | (new (...args: any[]) => SvelteComponent)> | undefined;
+        context?: any;
+        defaultComponent?: SvelteComponent | (new (...args: any[]) => SvelteComponent) | undefined;
+        dev?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SliceZoneProps = typeof __propDef.props;
+export declare type SliceZoneEvents = typeof __propDef.events;
+export declare type SliceZoneSlots = typeof __propDef.slots;
+export default class SliceZone extends SvelteComponentTyped<SliceZoneProps, SliceZoneEvents, SliceZoneSlots> {
+}
+export {};

package/components/TodoSliceComponent.svelte

@@ -0,0 +1,12 @@
+<script>export let slice;
+export let dev = process.env.NODE_ENV === "development";
+const type = "slice_type" in slice ? slice.slice_type : slice.type;
+if (dev)
+    console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
+</script>
+
+{#if dev}
+  <section data-slice-zone-todo-component="" data-slice-type={type}>
+    Could not find a component for Slice type &ldquo;{type}&rdquo;
+  </section>
+{/if}

package/components/TodoSliceComponent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        slice: {
+            slice_type: string;
+        } | {
+            type: string;
+        };
+        dev?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TodoSliceComponentProps = typeof __propDef.props;
+export declare type TodoSliceComponentEvents = typeof __propDef.events;
+export declare type TodoSliceComponentSlots = typeof __propDef.slots;
+export default class TodoSliceComponent extends SvelteComponentTyped<TodoSliceComponentProps, TodoSliceComponentEvents, TodoSliceComponentSlots> {
+}
+export {};

package/components/index.d.ts

@@ -0,0 +1 @@
+export { default as SliceZone } from "./SliceZone.svelte";

package/components/index.js

@@ -0,0 +1,7 @@
+// export { default as PrismicEmbed } from "./PrismicEmbed.svelte";
+// export { default as PrismicImage } from "./PrismicImage.svelte";
+// export { default as PrismicLink } from "./PrismicLink.svelte";
+// export { default as PrismicText } from "./PrismicText.svelte";
+// export { default as PrismicRichText } from "./PrismicRichText.svelte";
+// export { default as PrismicPreview } from "./PrismicPreview.svelte";
+export { default as SliceZone } from "./SliceZone.svelte";

package/configurePrismic.d.ts

@@ -0,0 +1,9 @@
+interface globalOptions {
+    repositoryName: string;
+    htmlSerializer?: any;
+    linkResolver?: any;
+    routes?: any;
+    slices?: any;
+}
+declare const configurePrismic: (globalOptions: globalOptions) => any;
+export default configurePrismic;

package/configurePrismic.js

@@ -0,0 +1,17 @@
+import * as prismic from "@prismicio/client";
+import * as prismicH from "@prismicio/helpers";
+const configurePrismic = (globalOptions) => {
+    const { repositoryName, htmlSerializer, linkResolver, slices } = globalOptions;
+    const endpoint = prismic.getEndpoint(repositoryName);
+    const client = prismic.createClient(endpoint, globalOptions);
+    const clientWithFetch = () => prismic.createClient(endpoint, { ...globalOptions, fetch });
+    return {
+        ...prismicH,
+        client,
+        clientWithFetch,
+        htmlSerializer,
+        linkResolver,
+        slices,
+    };
+};
+export default configurePrismic;

package/index.d.ts

@@ -0,0 +1 @@
+export { SliceZone, } from "./components";

package/injectionSymbols.d.ts

@@ -0,0 +1 @@
+export declare const prismicKey: unique symbol;

package/injectionSymbols.js

@@ -0,0 +1 @@
+export const prismicKey = Symbol("prismic");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismicio/svelte",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Svelte plugin, components, and composables to fetch and present Prismic content",
   "keywords": [
     "typescript",
@@ -35,10 +35,6 @@
   "module": "index.js",
   "types": "index.d.ts",
   "svelte": "./index.js",
-  "files": [
-    "dist",
-    "src"
-  ],
   "dependencies": {
     "@prismicio/client": "^6.4.3",
     "@prismicio/helpers": "^2.3.0"

package/types.d.ts

@@ -0,0 +1,27 @@
+import type { Client } from "@prismicio/client";
+import type { LinkResolverFunction, HTMLFunctionSerializer, HTMLMapSerializer } from "@prismicio/helpers";
+export interface Route {
+    /**
+     * The Custom Type of the document.
+     */
+    type: string;
+    /**
+     * The resolved path of the document with optional placeholders.
+     */
+    path: string;
+    /**
+     * An object that lists the API IDs of the Content Relationships in the route.
+     */
+    resolvers: Record<string, string>;
+}
+export interface PrismicConfig {
+    repoName: string;
+    routes?: Route[];
+    accessToken?: string;
+    options?: null;
+}
+export declare type PrismicContext = {
+    client?: Client;
+    linkResolver?: LinkResolverFunction;
+    htmlSerializer?: HTMLFunctionSerializer | HTMLMapSerializer;
+};

package/types.js

@@ -0,0 +1 @@
+export {};

package/usePrismic.d.ts

@@ -0,0 +1,2 @@
+import { PrismicContext } from "./types";
+export declare const usePrismic: () => PrismicContext;

package/usePrismic.js

@@ -0,0 +1,11 @@
+import { hasContext, getContext } from "svelte";
+import { prismicKey } from "./injectionSymbols";
+import "./types";
+export const usePrismic = () => {
+    if (hasContext(prismicKey)) {
+        return getContext(prismicKey);
+    }
+    else {
+        return {};
+    }
+};