feat(components): add embed component

playground/src/views/components/embed.json

@@ -0,0 +1,33 @@
+{
+  "youtube": {
+    "provider_name": "YouTube",
+    "provider_url": "https://www.youtube.com/",
+    "title": "Michel Sardou - Les lacs du Connemara (Paroles)",
+    "author_name": "MichelSardouVEVO",
+    "author_url": "https://www.youtube.com/user/MichelSardouVEVO",
+    "type": "video",
+    "height": 113,
+    "width": 200,
+    "version": "1.0",
+    "thumbnail_height": 360,
+    "thumbnail_width": 480,
+    "thumbnail_url": "https://i.ytimg.com/vi/bpEmjxobvbY/hqdefault.jpg",
+    "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/bpEmjxobvbY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
+    "embed_url": "https://www.youtube.com/watch?v=bpEmjxobvbY"
+  },
+  "twitter": {
+    "provider_name": "Twitter",
+    "provider_url": "https://twitter.com",
+    "url": "https://twitter.com/jack/status/20",
+    "author_name": "jack",
+    "author_url": "https://twitter.com/jack",
+    "html": "<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">just setting up my twttr</p>&mdash; jack (@jack) <a href=\"https://twitter.com/jack/status/20?ref_src=twsrc%5Etfw\">March 21, 2006</a></blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n",
+    "width": 550,
+    "height": null,
+    "type": "rich",
+    "cache_age": "3153600000",
+    "version": "1.0",
+    "embed_url": "https://twitter.com/jack/status/20",
+    "title": null
+  }
+}

playground/src/views/components/embed.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="componentsEmbed">
+    <prismic-embed :field="youtube" />
+    <prismic-embed :field="twitter" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { youtube, twitter } from "./embed.json";
+
+export default defineComponent({
+  name: "ComponentsEmbed",
+  data() {
+    return {
+      youtube,
+      twitter
+    };
+  }
+});
+</script>

src/components/Embed.ts

@@ -0,0 +1,54 @@
+import {
+  AllowedComponentProps,
+  ComponentCustomProps,
+  defineComponent,
+  h,
+  PropType,
+  VNodeProps
+} from "vue";
+import { EmbedField } from "../types";
+
+export interface PrismicEmbedProps {
+  field: EmbedField;
+  wrapper?: string;
+}
+
+export const PrismicEmbedImpl = defineComponent({
+  name: "PrismicEmbed",
+  props: {
+    field: {
+      type: Object as PropType<EmbedField>,
+      required: true
+    },
+    wrapper: {
+      type: String as PropType<string>,
+      required: false,
+      default: "div"
+    }
+  },
+  render() {
+    if (!this.field) {
+      return null;
+    }
+
+    const { html, embed_url, type, provider_name } = this.field;
+
+    return h(this.wrapper, {
+      "data-oembed": embed_url,
+      "data-oembed-type": type,
+      "data-oembed-provider": provider_name,
+      innerHTML: html
+    });
+  }
+});
+
+// export the public type for h/tsx inference
+// also to avoid inline import() in generated d.ts files
+export const PrismicEmbed = (PrismicEmbedImpl as any) as {
+  new (): {
+    $props: AllowedComponentProps &
+      ComponentCustomProps &
+      VNodeProps &
+      PrismicEmbedProps;
+  };
+};

src/sdk/Components.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import type { PrismicPluginOptions } from "../types";
-import { PrismicImage } from "../components";
+import { PrismicEmbed, PrismicImage } from "../components";
 import { SDK, SDKWithInterface } from "./SDK";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -19,5 +19,6 @@ export class Components
 
   install(app: App): void {
     app.component(PrismicImage.name, PrismicImage);
+    app.component(PrismicEmbed.name, PrismicEmbed);
   }
 }