Web Component 改造 Astro 链接预览

// ...
const mediaDirective: Directive = (load, options) => {
  const cb = async () => {
    const hydrate = await load();
    await hydrate();
  };

  if (options.value) {
    const mql = matchMedia(options.value);
    if (mql.matches) {
      cb();
    } else {
      mql.addEventListener('change', cb, { once: true });
    }
  }
};

const visibleDirective: Directive = (cb, _options, el) => {

  const io = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      io.disconnect();
      cb();
      break;
    }
  });

  io.observe(el)
};

const loadDirective: Directive = async (cb) => {
  cb()
};

const idleDirective: Directive = (cb) => {
  if ('requestIdleCallback' in window) {
    (window as any).requestIdleCallback(cb);
  } else {
    setTimeout(cb, 200);
  }
};

type DirectiveKeys = 'load' | 'idle' | 'visible' | 'media';

type FancyLinkActions = Record<DirectiveKeys, Directive>

const DirectiveActions: FancyLinkActions = {
  load: loadDirective,
  idle: idleDirective,
  visible: visibleDirective,
  media: mediaDirective
}
// ...

// ...
const rawTemplate = `
<style>
  .fancy-link-wrap {
    position: relative;
  }
  .fancy-link-wrap .fancy-link:hover +.popover-container{
    display: block;
  }
  .fancy-link-wrap .popover-container img {
    margin: 0;
  }
  .popover-container {
    display: none;
    text-align: center;
    position: absolute;
    right: 50%;
    width: 25rem;
    height: 15.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transform: translateX(50%);
    background-color: #474747fc;
    border: 1px solid #585858fc;
  }
  .popover-container.up {
    bottom: 1.5rem;
  }
  .popover-container.down {
    top: 1.5rem;
  }

  .popover-container .preview-img {
    width: 100%;
    height: 100%;
  }

  </style>
  <span class="fancy-link-wrap">
    <a part="link" class="fancy-link" target="_blank" rel="noopener"><slot /></a>
    <span class="popover-container up">
      <img loading="lazy" class="preview-img" alt="link preview" />
    </span>
  </span>
`

class FancyLink extends HTMLElement {
  renderTiming: DirectiveKeys = 'visible'
  mode: string = 'light'
  popupPosition: PopupPosition = 'up'
  href: string = ''
  previewPath: string = './'
  popoverContainer: HTMLDivElement | null = null
  previewImgEl: HTMLImageElement | null = null
  anchorEl: HTMLAnchorElement | null = null
  static get observedAttributes() {
    return ['mode', 'position', 'href']
  }
  // 属性变化调用
  attributeChangedCallback() {
    this.updateAttr()
    this.render()
  }

  constructor() {
    super();
    const timing = this.getAttribute('render-timing')
    timing && (this.renderTiming = timing as DirectiveKeys)
  }

  connectedCallback() {
    const action = DirectiveActions[this.renderTiming]
    action && action(() => this.init(), {
      name: '',
      value: ''
    }, this)
  }

  init() {
    const tempEl = document.createElement('template')
    tempEl.innerHTML = rawTemplate;
    const dom = tempEl.content.cloneNode(true);
    const shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.appendChild(dom);
    this.previewImgEl = shadowRoot.querySelector<HTMLImageElement>('.preview-img')
    this.anchorEl = shadowRoot.querySelector<HTMLAnchorElement>('.fancy-link')
    this.popoverContainer = shadowRoot.querySelector<HTMLDivElement>('.popover-container')
    this.updateAttr()
    this.render()
  }

  updateAttr() {
    this.href = this.getAttribute('href') ?? this.href
    this.mode = this.getAttribute('mode') ?? this.mode
    this.popupPosition = this.getAttribute('position') as PopupPosition ?? this.popupPosition
  }

  render() {
    this.anchorEl?.setAttribute('href', this.href)
    const isDark = this.mode === 'dark'
    const previewSrc = `${this.previewPath}/${previewFileName(this.href, isDark)}.png`
    this.previewImgEl?.setAttribute('src', previewSrc)
    this.popoverContainer?.classList.remove('up', 'down')
    this.popoverContainer?.classList.add(this.popupPosition)
  }
}

// ...

function getInjectScript(outPath: string) {
  let content = readFileSync(resolve(new URL(".", import.meta.url).pathname, "./injectScript.prebuilt.js"), {
    encoding: "utf-8"
  })
  
  // replace path
  content = content.replace('__previewPath', `'/${outPath}'`)
  return content
}
function FancyLink(options?: Options): AstroIntegration {

  const { outPath = '__fancyLinkPreview' } = options || {}

  return {
    name: 'fancy-link',
    hooks: {
      "astro:config:setup"({ injectScript }) {
        const content = getInjectScript(outPath)
        injectScript('head-inline', content)
      },
      async "astro:build:done"({ dir, pages }) {
        const captureLinks = getCaptureLinks(dir, pages)
        const _outPath = resolve(dir.pathname, outPath)
        for (const { href } of captureLinks) {
          await capture(_outPath, href)
        }
      }
    }
  }
}