vue3-disqus/dist/vue3-disqus.js

Vue component to integrate Disqus comments in your application, with support for SPA

import { defineComponent as C, inject as q, getCurrentInstance as O, ref as I, computed as g, watch as h, onMounted as b, openBlock as v, createElementBlock as $, createBlock as j, resolveDynamicComponent as A, mergeProps as k } from "vue";
const p = "Disqus shortname is required", R = [
  "api_key",
  "author_s3",
  "category_id",
  "identifier",
  "integration",
  "language",
  "remote_auth_s3",
  "slug",
  "title",
  "url"
], B = [
  "name",
  "button",
  "icon",
  "url",
  "logout",
  "profile_url",
  "width",
  "height"
], U = [
  "preData",
  "preInit",
  "afterRender",
  "onInit",
  "onReady",
  "onIdentify",
  "onPaginate",
  "onNewComment",
  "beforeComment",
  "preReset"
], _ = Symbol("disqus"), x = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace("on-", ""), S = (e) => requestAnimationFrame(() => requestAnimationFrame(e)), Q = C({
  name: "DisqusComments",
  props: {
    url: String,
    shortname: String,
    class: String,
    identifier: {
      type: String,
      required: !0
    },
    pageConfig: {
      type: Object,
      validator: (e) => Object.keys(e).every(
        (n) => R.includes(n)
      )
    },
    ssoConfig: {
      type: Object,
      validator: (e) => Object.keys(e).every((n) => B.includes(n))
    },
    language: {
      type: String,
      default: "en"
    },
    lazy: {
      type: Boolean,
      default: !0
    },
    lazyConfig: {
      type: Object,
      default: () => ({
        root: null,
        rootMargin: "300px",
        threshold: 0.5
      })
    }
  },
  setup(e, { emit: n }) {
    const s = q(_, {}), r = O(), a = I(null), l = g(() => {
      const t = e.shortname || s.shortname;
      if (!t)
        throw new Error(p);
      return t;
    });
    h(() => e.language, c), b(() => {
      if (e.lazy)
        return m();
      f();
    });
    function f() {
      if (s && (s.reset = c), window.DISQUS)
        return c();
      window.disqus_config = function() {
        y(this);
      }, d(), h(() => e.url, c);
    }
    function c() {
      window.DISQUS.reset({
        reload: !0,
        config: function() {
          y(this);
        }
      });
    }
    function m() {
      var t;
      if ("IntersectionObserver" in window)
        return a.value = new IntersectionObserver(
          u,
          e.lazyConfig
        ), a.value.observe((t = r == null ? void 0 : r.proxy) == null ? void 0 : t.$el);
      f();
    }
    function u(t) {
      t.forEach((i) => {
        var o;
        i.isIntersecting && ((o = a.value) == null || o.disconnect(), f());
      });
    }
    function d() {
      const t = +/* @__PURE__ */ new Date(), i = document, o = i.createElement("script");
      o.setAttribute("id", "embed-disqus-script"), o.setAttribute("data-timestamp", t.toString()), o.type = "text/javascript", o.async = !0, o.src = `//${l.value}.disqus.com/embed.js`, (i.body || i.head).appendChild(o);
    }
    function y(t) {
      D(t), E(t), e.ssoConfig && Object.keys(e.ssoConfig).length && Object.assign(t.sso, e.ssoConfig), t.language = e.language;
    }
    function D(t) {
      const i = {
        url: e.url,
        identifier: e.identifier
      };
      Object.assign(t.page, i), e.pageConfig && Object.keys(e.pageConfig).length && Object.assign(t.page, e.pageConfig);
    }
    function E(t) {
      U.forEach((i) => {
        t.callbacks[i] = [
          (o) => {
            n(x(i), o);
          }
        ];
      });
    }
  }
});
const w = (e, n) => {
  const s = e.__vccOpts || e;
  for (const [r, a] of n)
    s[r] = a;
  return s;
}, z = { id: "disqus_thread" };
function G(e, n, s, r, a, l) {
  return v(), $("div", z);
}
const N = /* @__PURE__ */ w(Q, [["render", G]]), F = C({
  name: "DisqusCount",
  props: {
    url: String,
    shortname: String,
    identifier: {
      type: String,
      required: !0
    },
    tag: {
      type: String,
      default: "span"
    }
  },
  setup(e) {
    const n = q(_, {}), s = g(
      () => e.tag === "a" ? `${e.url}#disqus_thread` : "#"
    ), r = g(() => e.tag === "span" ? e.url : null), a = g(() => {
      const u = e.shortname || n.shortname;
      if (!u)
        throw new Error(p);
      return u;
    }), l = {
      href: s.value,
      "data-disqus-url": r.value,
      "data-disqus-identifier": e.identifier
    };
    b(f);
    function f() {
      if ("DISQUSWIDGETS" in window)
        return S(() => c());
      m(), h(
        () => e.url,
        () => S(() => c())
      );
    }
    function c() {
      window.DISQUSWIDGETS.getCount({ reset: !0 });
    }
    function m() {
      if (document.getElementById("dsq-count-scr"))
        return;
      const u = document, d = u.createElement("script");
      d.async = !0, d.id = "dsq-count-scr", d.src = `//${a.value}.disqus.com/count.js`, (u.head || u.body).appendChild(d);
    }
    return {
      disqusAttrs: l
    };
  }
});
function K(e, n, s, r, a, l) {
  return v(), j(A(e.tag), k({ class: "disqus-comment-count" }, e.disqusAttrs), null, 16);
}
const P = /* @__PURE__ */ w(F, [["render", K]]);
function M(e, n = {}) {
  e.component("DisqusComments", N), e.component("DisqusCount", P);
  const s = {
    shortname: n.shortname,
    reset: null
  };
  e.provide(_, s);
}
export {
  N as DisqusComments,
  P as DisqusCount,
  M as default
};