vue-tweet
Version:
Embed tweets just by giving the ID of a Tweet
2 lines (1 loc) • 5.22 kB
JavaScript
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["vue-tweet"]={},l.Vue))})(this,function(l,e){"use strict";const T=e.defineComponent({__name:"vue-tweet",props:{tweetId:{type:String,default:""},tweetUrl:{type:String,default:""},conversation:{type:String,default:"all",validator:r=>["all","none"].includes(r)},cards:{type:String,default:"visible",validator:r=>["visible","hidden"].includes(r)},width:{type:[String,Number],default:"auto",validator:r=>typeof r=="string"?r==="auto":typeof r=="number"?r>=250&&r<=550:!1},align:{type:[String,void 0],default:void 0,validator:r=>["left","right","center",void 0].includes(r)},theme:{type:String,default:"system",validator:r=>["light","dark","system"].includes(r)},lang:{type:String,default:"en"},dnt:{type:Boolean,default:!1}},emits:["tweet-load-success","tweet-load-error"],setup(r,{emit:E}){const u=r,h=E,_=e.ref(!0),f=e.ref(!1),p=e.ref(),v=e.ref("light"),o=e.ref(!1),S=e.ref(!0);function I(){return u.theme==="system"?v.value:u.theme}function y(){typeof window<"u"&&window.matchMedia&&(v.value=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}let m=null,n=null;const t={loaded:!1,loading:!1,element:null};function k(){if(typeof window>"u")return;window.___$twitterScriptLoaded___&&(t.loaded=!0),window.___$twitterScriptLoading___&&(t.loading=!0);const i=document.getElementById("twitter-widgets-script");i&&(t.element=i,window.twttr&&window.twttr.ready&&(t.loaded=!0,t.loading=!1,window.___$twitterScriptLoaded___===void 0&&(window.___$twitterScriptLoaded___=!0),window.___$twitterScriptLoading___===void 0&&(window.___$twitterScriptLoading___=!1)))}e.onMounted(()=>{k(),y(),typeof window<"u"&&window.matchMedia&&(m=window.matchMedia("(prefers-color-scheme: dark)"),m.addEventListener("change",y)),S.value=!1,L()}),e.onUnmounted(()=>{m&&m.removeEventListener("change",y),n&&(clearInterval(n),n=null),o.value=!1,S.value=!0}),e.watch(e.toRef(u),L,{deep:!0}),e.watch(v,()=>{u.theme==="system"&&!S.value&&L()});function L(){if(!o.value){if(n&&(clearInterval(n),n=null),(window.___$twitterScriptLoaded___||t.loaded)&&window.twttr&&window.twttr.ready){g();return}if(window.twttr&&window.twttr.ready){g();return}if(window.___$twitterScriptLoading___||t.loading){n=setInterval(()=>{(window.___$twitterScriptLoaded___||t.loaded)&&window.twttr&&window.twttr.ready&&(n&&(clearInterval(n),n=null),g())},100);return}M("https://platform.twitter.com/widgets.js",g)}}function g(){if(!o.value){if(o.value=!0,!window.twttr||!window.twttr.ready){console.error("Twitter widget not available"),f.value=!0,_.value=!1,o.value=!1;return}window.twttr.ready().then(({widgets:i})=>{if(_.value=!0,f.value=!1,p.value)p.value.innerHTML="";else{console.error("tweetContainerRef is null"),o.value=!1;return}const{tweetId:d,tweetOptions:c}=C();i.createTweet(d,p.value,c).then(async w=>{await e.nextTick(),w?h("tweet-load-success",w):(f.value=!0,h("tweet-load-error",new Error("Failed to load tweet.")))}).finally(()=>{_.value=!1,o.value=!1})}).catch(i=>{console.error("Error loading Twitter widget:",i),f.value=!0,o.value=!1}).finally(()=>{_.value=!1,o.value=!1})}}function C(){let{tweetId:i,tweetUrl:d,theme:c,...w}=u;const a=I(),R={...w,theme:a};let s=null;if(i&&d)s=new Error("Cannot provide both tweet-id and tweet-url.");else if(i)/^\d+$/.test(i)||(s=new Error("Invalid tweet-id, please provide a valid numerical tweet-id."));else if(d){const b=/^(https?:\/\/)?(www\.)?(twitter|x)\.com\/.*\/status(?:es)?\/([^/?]\d+)$/i,$=d.trim().match(b);$&&$[4]?i=$[4]:s=new Error("Invalid tweet-url.")}else s=new Error("Must provide either tweet-id or tweet-url.");if(s)throw f.value=!0,_.value=!1,h("tweet-load-error",s),s;return{tweetId:i,tweetOptions:R}}function M(i,d){const c="twitter-widgets-script";if(window.___$twitterScriptLoaded___===void 0&&(window.___$twitterScriptLoaded___=t.loaded),window.___$twitterScriptLoading___===void 0&&(window.___$twitterScriptLoading___=t.loading),window.___$twitterScriptLoaded___||t.loaded){d();return}const w=document.getElementById(c);if(w){if(t.element=w,window.___$twitterScriptLoaded___||t.loaded){d();return}if(window.___$twitterScriptLoading___||t.loading)return}if(window.___$twitterScriptLoading___||t.loading)return;window.___$twitterScriptLoading___=!0,t.loading=!0;const a=document.createElement("script");a.id=c,a.setAttribute("src",i),a.async=!0,a.addEventListener("load",()=>{window.___$twitterScriptLoaded___=!0,window.___$twitterScriptLoading___=!1,t.loaded=!0,t.loading=!1,d()},!1),a.addEventListener("error",()=>{window.___$twitterScriptLoading___=!1,t.loading=!1,console.error("Failed to load Twitter widgets script")},!1),t.element=a,document.body.appendChild(a)}return(i,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[f.value?e.renderSlot(i.$slots,"error",{key:0}):_.value?e.renderSlot(i.$slots,"loading",{key:1}):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"tweetContainerRef",ref:p},i.$attrs),null,16)],64))}});l.VueTweet=T,l.default=T,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});