feat(components): add image component

package.json

@@ -53,6 +53,7 @@
     "siroc": "0.8.0",
     "vite": "2.1.3",
     "vue": "3.0.7",
+    "vue-router": "4.0.5",
     "vue-tsc": "0.0.15"
   },
   "peerDependencies": {

playground/src/App.vue

@@ -1,17 +1,27 @@
 <template>
-  {{ previewCookie }}
+  <nav>
+    <ul>
+      <li>
+        <router-link to="/">index</router-link>
+      </li>
+      <li>
+        components
+        <ul>
+          <li>
+            <router-link to="/components/image">image</router-link>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+  <router-view />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  name: "App",
-  computed: {
-    previewCookie() {
-      return this.$prismic.previewCookie;
-    }
-  }
+  name: "App"
 });
 </script>
 

playground/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
+import router from "./router";
 import App from "./App.vue";
 import prismic from "./prismic";
 
-createApp(App).use(prismic).mount("#app");
+createApp(App).use(router).use(prismic).mount("#app");

playground/src/router/index.ts

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "Index",
+    component: () =>
+      import(/* webpackChunkName: "index" */ "../views/index.vue")
+  },
+  {
+    path: "/components/image",
+    name: "ComponentsImage",
+    component: () =>
+      import(
+        /* webpackChunkName: "components--image" */ "../views/components/image.vue"
+      )
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router;

playground/src/views/components/image.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="componentsImage">
+    <prismic-image :field="simple" />
+    <prismic-image :field="simple.twitter_variant" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ComponentsImage",
+  data() {
+    return {
+      simple: {
+        dimensions: {
+          width: 1200,
+          height: 600
+        },
+        alt: "Atlantic Puffin Flying",
+        copyright: "Unsplash",
+        url:
+          "https://images.prismic.io/200629-sms-hoy/7d997f6a-0ab0-475d-a1a3-d1c1056d6f39_ray-hennessy-PHnBeYvpWgA-unsplash.jpg?auto=compress,format&rect=0,198,2400,1200&w=1200&h=600",
+        twitter_variant: {
+          dimensions: {
+            width: 600,
+            height: 600
+          },
+          alt: "Atlantic Puffin Flying",
+          copyright: "Unsplash",
+          url:
+            "https://images.prismic.io/200629-sms-hoy/7d997f6a-0ab0-475d-a1a3-d1c1056d6f39_ray-hennessy-PHnBeYvpWgA-unsplash.jpg?auto=compress,format&rect=0,198,2400,1200&w=600&h=600"
+        }
+      }
+    };
+  }
+});
+</script>

playground/src/views/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="index">index</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Index"
+});
+</script>

src/Prismic.ts

@@ -1,5 +1,12 @@
 import type { App } from "vue";
-import { Client, ClientInterface, DOM, DOMInterface } from "./sdk";
+import {
+  Client,
+  ClientInterface,
+  Components,
+  ComponentsInterface,
+  DOM,
+  DOMInterface
+} from "./sdk";
 import { PrismicKey, PrismicPluginError, PrismicPluginOptions } from "./types";
 
 const defaults: Required<PrismicPluginOptions> = {
@@ -15,12 +22,14 @@ export function createPrismic(options: PrismicPluginOptions): Prismic {
 
 export type PrismicPluginInterface = Required<PrismicPluginOptions> &
   ClientInterface &
-  DOMInterface;
+  DOMInterface &
+  ComponentsInterface;
 
 export class Prismic {
   options: Required<PrismicPluginOptions>;
   client: Client;
   dom: DOM;
+  components: Components;
 
   constructor(options: PrismicPluginOptions) {
     this.options = { ...defaults, ...options };
@@ -31,19 +40,25 @@ export class Prismic {
 
     this.client = new Client(this.options);
     this.dom = new DOM(this.options);
+    this.components = new Components(this.options);
   }
 
   get interface(): PrismicPluginInterface {
     return {
       ...this.options,
       ...this.client.interface,
-      ...this.dom.interface
+      ...this.dom.interface,
+      ...this.components.interface
     };
   }
 
   install(app: App, injectKey?: string): void {
     app.provide(injectKey || PrismicKey, this.interface);
     app.config.globalProperties.$prismic = this.interface;
+
+    this.client.install(app);
+    this.dom.install(app);
+    this.components.install(app);
   }
 }
 

src/components/Image.ts

@@ -0,0 +1,22 @@
+import { defineComponent, h, PropType } from "vue";
+
+interface ImageField {
+  url: string;
+  alt?: string;
+  copyright?: string;
+}
+
+export const PrismicImage = defineComponent({
+  name: "PrismicImage",
+  props: {
+    field: {
+      type: Object as PropType<ImageField>,
+      required: true
+    }
+  },
+  render() {
+    const { url: src, alt, copyright } = this.field;
+
+    return h("img", { src, alt, copyright });
+  }
+});

src/components/index.ts

@@ -0,0 +1 @@
+export * from "./Image";

src/sdk/Client.ts

@@ -1,15 +1,17 @@
 import Prismic from "@prismicio/client";
 import type { DefaultClient } from "@prismicio/client/types/client";
-import type { SdkWithInterface, PrismicPluginOptions } from "../types";
+import type { PrismicPluginOptions } from "../types";
+import { SDK, SDKWithInterface, SDKWithInterfaceKeys } from "./SDK";
 
-export type ClientInterface = Omit<Client, "interface" | "options">;
+export type ClientInterface = Omit<Client, SDKWithInterfaceKeys>;
 
-export class Client implements SdkWithInterface<ClientInterface> {
+export class Client extends SDK implements SDKWithInterface<ClientInterface> {
   client: DefaultClient;
   previewCookie: string = Prismic.previewCookie;
   Predicates = Prismic.Predicates;
 
-  constructor(public options: Required<PrismicPluginOptions>) {
+  constructor(options: Required<PrismicPluginOptions>) {
+    super(options);
     this.client = Prismic.client(options.endpoint, options.apiOptions);
   }
 

src/sdk/Components.ts

@@ -0,0 +1,23 @@
+import type { App } from "vue";
+import type { PrismicPluginOptions } from "../types";
+import { PrismicImage } from "../components";
+import { SDK, SDKWithInterface } from "./SDK";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ComponentsInterface {}
+
+export class Components
+  extends SDK
+  implements SDKWithInterface<ComponentsInterface> {
+  constructor(options: Required<PrismicPluginOptions>) {
+    super(options);
+  }
+
+  get interface(): ComponentsInterface {
+    return {};
+  }
+
+  install(app: App): void {
+    app.component(PrismicImage.name, PrismicImage);
+  }
+}

src/sdk/DOM.ts

@@ -1,16 +1,18 @@
 import PrismicDOM from "prismic-dom";
 import type {
-  HtmlSerializer,
-  SdkWithInterface,
-  LinkResolver,
   PrismicPluginOptions,
-  RichTextBlock
+  LinkResolver,
+  RichTextBlock,
+  HtmlSerializer
 } from "../types";
+import { SDK, SDKWithInterface, SDKWithInterfaceKeys } from "./SDK";
 
-export type DOMInterface = Omit<DOM, "interface" | "options">;
+export type DOMInterface = Omit<DOM, SDKWithInterfaceKeys>;
 
-export class DOM implements SdkWithInterface<DOMInterface> {
-  constructor(public options: Required<PrismicPluginOptions>) {}
+export class DOM extends SDK implements SDKWithInterface<DOMInterface> {
+  constructor(options: Required<PrismicPluginOptions>) {
+    super(options);
+  }
 
   get interface(): DOMInterface {
     return {

src/sdk/SDK.ts

@@ -0,0 +1,21 @@
+import type { App } from "vue";
+import type { PrismicPluginOptions } from "../types";
+
+export interface SDKWithInterface<
+  Interface extends Record<string, unknown> | unknown = Record<string, never>
+> {
+  options: Required<PrismicPluginOptions>;
+  interface: Interface;
+  install: (app: App) => void;
+}
+
+export type SDKWithInterfaceKeys = keyof SDKWithInterface;
+
+export abstract class SDK implements SDKWithInterface<unknown> {
+  constructor(public options: Required<PrismicPluginOptions>) {}
+
+  abstract get interface(): unknown;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  install(app: App): void {}
+}

src/sdk/index.ts

@@ -1,2 +1,5 @@
+export * from "./SDK";
+
 export * from "./DOM";
 export * from "./Client";
+export * from "./Components";

src/types/index.ts

@@ -1,4 +1,4 @@
-import { ApiOptions } from "@prismicio/client/types/Api";
+import type { ApiOptions } from "@prismicio/client/types/Api";
 
 export const PrismicKey = "prismic";
 
@@ -13,11 +13,6 @@ export enum PrismicPluginError {
   MissingEndpoint = "[@prismicio/vue] Property `endpoint` is mandatory"
 }
 
-export interface SdkWithInterface<T> {
-  options: Required<PrismicPluginOptions>;
-  interface: T;
-}
-
 // Missing types from underlying kits
 export interface LinkResolverDoc {
   id: string;

yarn.lock

@@ -2096,6 +2096,11 @@ vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.6.0:
     esquery "^1.4.0"
     lodash "^4.17.15"
 
+vue-router@4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.5.tgz#dd0a4134bc950c37aef64b973e9ee1008428d8fa"
+  integrity sha512-AQq+pllb6FCc7rS6vh4PPcce3XA1jgK3hKNkQ4hXHwoVN7jOeAOMKCnX7XAX3etV9rmN7iNW8iIwgPk95ckBjw==
+
 vue-template-compiler@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"