AppTwitterQuote.ts

import {
  CreateElement,
  VNode,
  RenderContext,
  FunctionalComponentOptions,
} from 'vue'

export interface Props {
  tweet: string
  author: string
}

const twitterDependencySrc = 'https://platform.twitter.com/widgets.js'

const addTwitterDependency = (evt: HTMLElementEventMap['mouseenter']) => {
  let maybeScriptDep = null
  try {
    if (evt && evt.view && evt.view && evt.view.document) {
      const d = evt.view.document
      maybeScriptDep = [
        ...d.querySelectorAll(`[src="${twitterDependencySrc}"]`),
      ]
      if (maybeScriptDep && maybeScriptDep.length < 1) {
        const scriptElement = d.createElement('script')
        scriptElement.async = true
        scriptElement.src = twitterDependencySrc
        d.body.appendChild(scriptElement)
      }
    }
  } catch (_) {
    // Failing silently
  }
}

/**
 * Quote a Twitter tweet.
 *
 * ```html
 * <blockquote class="twitter-tweet">
 *   <p lang="en" dir="ltr">
 *    I just came up with my shortest summary for leveraging Vue,React,Svelte; &quot;X as a UI Runtime&quot;<br/><br/>UI generated by code that&#39;s reading data, that&#39;s describing views embedded with metadata about what and how to get content for itself. <a href="https://overreacted.io/react-as-a-ui-runtime/">overreacted.io/react-as-a-ui-runtime</a> <br><br>Thanks <a href="https://twitter.com/dan_abramov?ref_src=twsrc%5Etfw">@dan_abramov</a>
 *   </p>
 *   &mdash; Renoir Boulanger (@renoirb)
 *   <a href="https://twitter.com/renoirb/status/1134646209392648193?ref_src=twsrc%5Etfw">
 *     June 1, 2019
 *   </a>
 * </blockquote>
 * ```
 */
const AppTwitterQuote: FunctionalComponentOptions<Props> = {
  name: 'AppTwitterQuote' /* app-twitter-quote */,
  functional: true,
  props: {
    tweet: {
      type: String,
      required: true,
    },
    author: {
      type: String,
      required: false,
      default: 'renoirb',
    },
  },
  render(h: CreateElement, ctx: RenderContext<Props>): VNode {
    const tweet = ctx.props.tweet
    const author = ctx.props.author
    const cite = `https://twitter.com/${author}/status/${tweet}?ref_src=twsrc%5Etfw`

    return h(
      'blockquote',
      {
        class: ['twitter-tweet'],
        on: {
          mouseenter: addTwitterDependency,
        },
        ...ctx.data,
        attrs: {
          cite,
          ...(ctx.data.attrs ? ctx.data.attrs : {}),
        },
      },
      [
        h('p', {}, [...ctx.children]),
        h(
          'a',
          {
            attrs: {
              href: cite,
            },
          },
          ['Source'],
        ),
      ],
    )
  },
}

export default AppTwitterQuote