UNPKG

@qwik.dev/partytown

Version:

Relocate resource intensive third-party scripts off of the main thread and into a web worker.

477 lines (476 loc) 24 kB
/* Partytown 0.11.1 - MIT QwikDev */ (self => { const [getter, setter, callMethod, constructGlobal, definePrototypePropertyDescriptor, randomId, WinIdKey, InstanceIdKey, ApplyPathKey] = self.$bridgeToMedia$; delete self.$bridgeToMedia$; const ContextKey = Symbol(); const MediaSourceKey = Symbol(); const ReadyStateKey = Symbol(); const SourceBuffersKey = Symbol(); const SourceBufferTasksKey = Symbol(); const TimeRangesKey = Symbol(); const EMPTY_ARRAY = []; const defineCstr = (win, cstrName, Cstr) => win[cstrName] = defineCstrName(cstrName, Cstr); const defineCstrName = (cstrName, Cstr) => Object.defineProperty(Cstr, "name", { value: cstrName }); var WorkerMessageType; !function(WorkerMessageType) { WorkerMessageType[WorkerMessageType.MainDataRequestFromWorker = 0] = "MainDataRequestFromWorker"; WorkerMessageType[WorkerMessageType.MainDataResponseToWorker = 1] = "MainDataResponseToWorker"; WorkerMessageType[WorkerMessageType.MainInterfacesRequestFromWorker = 2] = "MainInterfacesRequestFromWorker"; WorkerMessageType[WorkerMessageType.MainInterfacesResponseToWorker = 3] = "MainInterfacesResponseToWorker"; WorkerMessageType[WorkerMessageType.InitializedWebWorker = 4] = "InitializedWebWorker"; WorkerMessageType[WorkerMessageType.InitializeEnvironment = 5] = "InitializeEnvironment"; WorkerMessageType[WorkerMessageType.InitializedEnvironmentScript = 6] = "InitializedEnvironmentScript"; WorkerMessageType[WorkerMessageType.InitializeNextScript = 7] = "InitializeNextScript"; WorkerMessageType[WorkerMessageType.InitializedScripts = 8] = "InitializedScripts"; WorkerMessageType[WorkerMessageType.RefHandlerCallback = 9] = "RefHandlerCallback"; WorkerMessageType[WorkerMessageType.ForwardMainTrigger = 10] = "ForwardMainTrigger"; WorkerMessageType[WorkerMessageType.ForwardWorkerAccessRequest = 11] = "ForwardWorkerAccessRequest"; WorkerMessageType[WorkerMessageType.AsyncAccessRequest = 12] = "AsyncAccessRequest"; WorkerMessageType[WorkerMessageType.LocationUpdate = 13] = "LocationUpdate"; WorkerMessageType[WorkerMessageType.DocumentVisibilityState = 14] = "DocumentVisibilityState"; WorkerMessageType[WorkerMessageType.CustomElementCallback = 15] = "CustomElementCallback"; }(WorkerMessageType || (WorkerMessageType = {})); var LocationUpdateType; !function(LocationUpdateType) { LocationUpdateType[LocationUpdateType.PushState = 0] = "PushState"; LocationUpdateType[LocationUpdateType.ReplaceState = 1] = "ReplaceState"; LocationUpdateType[LocationUpdateType.PopState = 2] = "PopState"; LocationUpdateType[LocationUpdateType.HashChange = 3] = "HashChange"; }(LocationUpdateType || (LocationUpdateType = {})); var InterfaceType; !function(InterfaceType) { InterfaceType[InterfaceType.Window = 0] = "Window"; InterfaceType[InterfaceType.Element = 1] = "Element"; InterfaceType[InterfaceType.AttributeNode = 2] = "AttributeNode"; InterfaceType[InterfaceType.TextNode = 3] = "TextNode"; InterfaceType[InterfaceType.CDataSectionNode = 4] = "CDataSectionNode"; InterfaceType[InterfaceType.Function = 5] = "Function"; InterfaceType[InterfaceType.Property = 6] = "Property"; InterfaceType[InterfaceType.ProcessingInstructionNode = 7] = "ProcessingInstructionNode"; InterfaceType[InterfaceType.CommentNode = 8] = "CommentNode"; InterfaceType[InterfaceType.Document = 9] = "Document"; InterfaceType[InterfaceType.DocumentTypeNode = 10] = "DocumentTypeNode"; InterfaceType[InterfaceType.DocumentFragmentNode = 11] = "DocumentFragmentNode"; InterfaceType[InterfaceType.EnvGlobalConstructor = 12] = "EnvGlobalConstructor"; }(InterfaceType || (InterfaceType = {})); var WinDocId; !function(WinDocId) { WinDocId.document = "d"; WinDocId.documentElement = "e"; WinDocId.head = "h"; WinDocId.body = "b"; }(WinDocId || (WinDocId = {})); var ApplyPathType; !function(ApplyPathType) { ApplyPathType[ApplyPathType.SetValue = 0] = "SetValue"; ApplyPathType[ApplyPathType.GlobalConstructor = 1] = "GlobalConstructor"; }(ApplyPathType || (ApplyPathType = {})); var SerializedType; !function(SerializedType) { SerializedType[SerializedType.Primitive = 0] = "Primitive"; SerializedType[SerializedType.Array = 1] = "Array"; SerializedType[SerializedType.Object = 2] = "Object"; SerializedType[SerializedType.Instance = 3] = "Instance"; SerializedType[SerializedType.Ref = 4] = "Ref"; SerializedType[SerializedType.Event = 5] = "Event"; SerializedType[SerializedType.Function = 6] = "Function"; SerializedType[SerializedType.NodeList = 7] = "NodeList"; SerializedType[SerializedType.ArrayBuffer = 8] = "ArrayBuffer"; SerializedType[SerializedType.ArrayBufferView = 9] = "ArrayBufferView"; SerializedType[SerializedType.Attr = 10] = "Attr"; SerializedType[SerializedType.CSSRule = 11] = "CSSRule"; SerializedType[SerializedType.CSSRuleList = 12] = "CSSRuleList"; SerializedType[SerializedType.CSSStyleDeclaration = 13] = "CSSStyleDeclaration"; SerializedType[SerializedType.Error = 14] = "Error"; }(SerializedType || (SerializedType = {})); var NodeName; !function(NodeName) { NodeName.Body = "BODY"; NodeName.Comment = "#comment"; NodeName.Document = "#document"; NodeName.DocumentElement = "HTML"; NodeName.DocumentTypeNode = "html"; NodeName.DocumentFragment = "#document-fragment"; NodeName.IFrame = "IFRAME"; NodeName.Head = "HEAD"; NodeName.Script = "SCRIPT"; NodeName.Text = "#text"; }(NodeName || (NodeName = {})); var StateProp; !function(StateProp) { StateProp.errorHandlers = "error"; StateProp.loadHandlers = "load"; StateProp[StateProp.src = 0] = "src"; StateProp[StateProp.loadErrorStatus = 1] = "loadErrorStatus"; StateProp[StateProp.cssRules = 2] = "cssRules"; StateProp[StateProp.innerHTML = 3] = "innerHTML"; StateProp[StateProp.url = 4] = "url"; StateProp[StateProp.type = 5] = "type"; }(StateProp || (StateProp = {})); var CallType; !function(CallType) { CallType[CallType.Blocking = 1] = "Blocking"; CallType[CallType.NonBlocking = 2] = "NonBlocking"; CallType[CallType.NonBlockingNoSideEffect = 3] = "NonBlockingNoSideEffect"; }(CallType || (CallType = {})); const initCanvas = (WorkerBase, win) => { const HTMLCanvasDescriptorMap = { getContext: { value(contextType, contextAttributes) { this[ContextKey] || (this[ContextKey] = (contextType.includes("webgl") ? createContextWebGL : createContext2D)(this, contextType, contextAttributes)); return this[ContextKey]; } } }; const WorkerCanvasGradient = defineCstr(win, "CanvasGradient", class extends WorkerBase { addColorStop(...args) { callMethod(this, [ "addColorStop" ], args, CallType.NonBlocking); } }); const WorkerCanvasPattern = defineCstr(win, "CanvasPattern", class extends WorkerBase { setTransform(...args) { callMethod(this, [ "setTransform" ], args, CallType.NonBlocking); } }); const createContext2D = (canvasInstance, contextType, contextAttributes) => { const winId = canvasInstance[WinIdKey]; const ctxInstanceId = randomId(); const ctxInstance = { [WinIdKey]: winId, [InstanceIdKey]: ctxInstanceId, [ApplyPathKey]: [] }; const ctx = callMethod(canvasInstance, [ "getContext" ], [ contextType, contextAttributes ], CallType.Blocking, ctxInstanceId); const ctx2dGetterMethods = "getContextAttributes,getImageData,getLineDash,getTransform,isPointInPath,isPointInStroke,measureText".split(","); const CanvasRenderingContext2D = { get: (target, propName) => "string" == typeof propName && propName in ctx ? "function" == typeof ctx[propName] ? (...args) => { if (propName.startsWith("create")) { const instanceId = randomId(); callMethod(ctxInstance, [ propName ], args, CallType.NonBlocking, instanceId); if ("createImageData" === propName || "createPattern" === propName) { (api => { console.warn(`${api} not implemented`); })(`${propName}()`); return { setTransform: () => {} }; } return new WorkerCanvasGradient(winId, instanceId); } const methodCallType = ctx2dGetterMethods.includes(propName) ? CallType.Blocking : CallType.NonBlocking; return callMethod(ctxInstance, [ propName ], args, methodCallType); } : ctx[propName] : target[propName], set(target, propName, value) { if ("string" == typeof propName && propName in ctx) { ctx[propName] !== value && "function" != typeof value && setter(ctxInstance, [ propName ], value); ctx[propName] = value; } else { target[propName] = value; } return true; } }; return new Proxy(ctx, CanvasRenderingContext2D); }; const createContextWebGL = (canvasInstance, contextType, contextAttributes) => { const winId = canvasInstance[WinIdKey]; const ctxInstanceId = randomId(); const ctxInstance = { [WinIdKey]: winId, [InstanceIdKey]: ctxInstanceId, [ApplyPathKey]: [] }; const ctx = callMethod(canvasInstance, [ "getContext" ], [ contextType, contextAttributes ], CallType.Blocking, ctxInstanceId); const WebGLRenderingContextHandler = { get: (target, propName) => "string" == typeof propName ? "function" != typeof ctx[propName] ? ctx[propName] : (...args) => callMethod(ctxInstance, [ propName ], args, getWebGlMethodCallType(propName)) : target[propName], set(target, propName, value) { if ("string" == typeof propName && propName in ctx) { ctx[propName] !== value && "function" != typeof value && setter(ctxInstance, [ propName ], value); ctx[propName] = value; } else { target[propName] = value; } return true; } }; return new Proxy(ctx, WebGLRenderingContextHandler); }; const ctxWebGLGetterMethods = "checkFramebufferStatus,makeXRCompatible".split(","); const getWebGlMethodCallType = methodName => methodName.startsWith("create") || methodName.startsWith("get") || methodName.startsWith("is") || ctxWebGLGetterMethods.includes(methodName) ? CallType.Blocking : CallType.NonBlocking; defineCstr(win, "CanvasGradient", WorkerCanvasGradient); defineCstr(win, "CanvasPattern", WorkerCanvasPattern); definePrototypePropertyDescriptor(win.HTMLCanvasElement, HTMLCanvasDescriptorMap); }; const initMedia = (WorkerBase, WorkerEventTargetProxy, env, win) => { var _a, _b; win.Audio = defineCstrName("HTMLAudioElement", class { constructor(src) { const audio = env.$createNode$("audio", randomId()); audio.src = src; return audio; } }); const WorkerAudioTrack = class extends WorkerBase { get enabled() { return getter(this, [ "enabled" ]); } set enabled(value) { setter(this, [ "enabled" ], value); } get id() { return getter(this, [ "id" ]); } get kind() { return getter(this, [ "kind" ]); } get label() { return getter(this, [ "label" ]); } get language() { return getter(this, [ "language" ]); } get sourceBuffer() { return new WorkerSourceBuffer(this); } }; const WorkerAudioTrackList = class { constructor(mediaElm) { const winId = mediaElm[WinIdKey]; const instanceId = mediaElm[InstanceIdKey]; const instance = { addEventListener(...args) { callMethod(mediaElm, [ "audioTracks", "addEventListener" ], args, CallType.NonBlockingNoSideEffect); }, getTrackById: (...args) => callMethod(mediaElm, [ "audioTracks", "getTrackById" ], args), get length() { return getter(mediaElm, [ "audioTracks", "length" ]); }, removeEventListener(...args) { callMethod(mediaElm, [ "audioTracks", "removeEventListener" ], args, CallType.NonBlockingNoSideEffect); } }; return new Proxy(instance, { get: (target, propName) => "number" == typeof propName ? new WorkerAudioTrack(winId, instanceId, [ "audioTracks", propName ]) : target[propName] }); } }; const WorkerSourceBufferList = defineCstr(win, "SourceBufferList", class extends Array { constructor(mediaSource) { super(); this[MediaSourceKey] = mediaSource; } addEventListener(...args) { callMethod(this[MediaSourceKey], [ "sourceBuffers", "addEventListener" ], args, CallType.NonBlockingNoSideEffect); } removeEventListener(...args) { callMethod(this[MediaSourceKey], [ "sourceBuffers", "removeEventListener" ], args, CallType.NonBlockingNoSideEffect); } }); const WorkerSourceBuffer = defineCstr(win, "SourceBuffer", (_b = class extends WorkerEventTargetProxy { constructor(mediaSource) { super(mediaSource[WinIdKey], mediaSource[InstanceIdKey], [ "sourceBuffers" ]); this[_a] = []; this[MediaSourceKey] = mediaSource; } abort() { const sbIndex = getSourceBufferIndex(this); callMethod(this, [ sbIndex, "appendWindowStart" ], EMPTY_ARRAY, CallType.Blocking); } addEventListener(...args) { const sbIndex = getSourceBufferIndex(this); callMethod(this, [ sbIndex, "addEventListener" ], args, CallType.NonBlockingNoSideEffect); } appendBuffer(buf) { this[SourceBufferTasksKey].push([ "appendBuffer", [ buf ], buf ]); drainSourceBufferQueue(this); } get appendWindowStart() { const sbIndex = getSourceBufferIndex(this); return getter(this, [ sbIndex, "appendWindowStart" ]); } set appendWindowStart(value) { const sbIndex = getSourceBufferIndex(this); setter(this, [ sbIndex, "appendWindowStart" ], value); } get appendWindowEnd() { const sbIndex = getSourceBufferIndex(this); return getter(this, [ sbIndex, "appendWindowEnd" ]); } set appendWindowEnd(value) { const sbIndex = getSourceBufferIndex(this); setter(this, [ sbIndex, "appendWindowEnd" ], value); } get buffered() { const mediaSource = this[MediaSourceKey]; const sbIndex = getSourceBufferIndex(this); const timeRanges = new WorkerTimeRanges(mediaSource[WinIdKey], mediaSource[InstanceIdKey], [ "sourceBuffers", sbIndex, "buffered" ]); return timeRanges; } changeType(mimeType) { const sbIndex = getSourceBufferIndex(this); callMethod(this, [ sbIndex, "changeType" ], [ mimeType ], CallType.NonBlocking); } get mode() { const sbIndex = getSourceBufferIndex(this); return getter(this, [ sbIndex, "mode" ]); } set mode(value) { const sbIndex = getSourceBufferIndex(this); setter(this, [ sbIndex, "mode" ], value); } remove(start, end) { this[SourceBufferTasksKey].push([ "remove", [ start, end ] ]); drainSourceBufferQueue(this); } removeEventListener(...args) { const sbIndex = getSourceBufferIndex(this); callMethod(this, [ sbIndex, "removeEventListener" ], args, CallType.NonBlockingNoSideEffect); } get timestampOffset() { const sbIndex = getSourceBufferIndex(this); return getter(this, [ sbIndex, "timestampOffset" ]); } set timestampOffset(value) { const sbIndex = getSourceBufferIndex(this); setter(this, [ sbIndex, "timestampOffset" ], value); } get updating() { const sbIndex = getSourceBufferIndex(this); return getter(this, [ sbIndex, "updating" ]); } }, _a = SourceBufferTasksKey, _b)); const WorkerTimeRanges = defineCstr(win, "TimeRanges", class extends WorkerBase { start(...args) { return callMethod(this, [ "start" ], args); } end(...args) { return callMethod(this, [ "end" ], args); } get length() { return getter(this, [ "length" ]); } }); const getSourceBufferIndex = sourceBuffer => { if (sourceBuffer) { const mediaSource = sourceBuffer[MediaSourceKey]; const sourceBufferList = mediaSource[SourceBuffersKey]; return sourceBufferList.indexOf(sourceBuffer); } return -1; }; const drainSourceBufferQueue = sourceBuffer => { if (sourceBuffer[SourceBufferTasksKey].length) { if (!sourceBuffer.updating) { const task = sourceBuffer[SourceBufferTasksKey].shift(); if (task) { const sbIndex = getSourceBufferIndex(sourceBuffer); callMethod(sourceBuffer, [ sbIndex, task[0] ], task[1], CallType.NonBlockingNoSideEffect, void 0, task[2]); } } setTimeout((() => drainSourceBufferQueue(sourceBuffer)), 50); } }; const HTMLMediaDescriptorMap = { buffered: { get() { if (!this[TimeRangesKey]) { this[TimeRangesKey] = new WorkerTimeRanges(this[WinIdKey], this[InstanceIdKey], [ "buffered" ]); setTimeout((() => { this[TimeRangesKey] = void 0; }), 5e3); } return this[TimeRangesKey]; } }, readyState: { get() { if (4 === this[ReadyStateKey]) { return 4; } if ("number" != typeof this[ReadyStateKey]) { this[ReadyStateKey] = getter(this, [ "readyState" ]); setTimeout((() => { this[ReadyStateKey] = void 0; }), 1e3); } return this[ReadyStateKey]; } } }; defineCstr(win, "MediaSource", class extends WorkerEventTargetProxy { constructor() { super(env.$winId$); this[SourceBuffersKey] = new WorkerSourceBufferList(this); constructGlobal(this, "MediaSource", EMPTY_ARRAY); } get activeSourceBuffers() { return []; } addSourceBuffer(mimeType) { const sourceBuffer = new WorkerSourceBuffer(this); this[SourceBuffersKey].push(sourceBuffer); callMethod(this, [ "addSourceBuffer" ], [ mimeType ]); return sourceBuffer; } clearLiveSeekableRange() { callMethod(this, [ "clearLiveSeekableRange" ], EMPTY_ARRAY, CallType.NonBlocking); } get duration() { return getter(this, [ "duration" ]); } set duration(value) { setter(this, [ "duration" ], value); } endOfStream(endOfStreamError) { callMethod(this, [ "endOfStream" ], [ endOfStreamError ], CallType.NonBlockingNoSideEffect); } get readyState() { return getter(this, [ "readyState" ]); } removeSourceBuffer(sourceBuffer) { const index = getSourceBufferIndex(sourceBuffer); if (index > -1) { this[SourceBuffersKey].splice(index, 1); callMethod(this, [ "removeSourceBuffer" ], [ index ], CallType.Blocking); } } setLiveSeekableRange(start, end) { callMethod(this, [ "setLiveSeekableRange" ], [ start, end ], CallType.NonBlocking); } get sourceBuffers() { return this[SourceBuffersKey]; } static isTypeSupported(mimeType) { if (!isStaticTypeSupported.has(mimeType)) { const isSupported = callMethod(win, [ "MediaSource", "isTypeSupported" ], [ mimeType ]); isStaticTypeSupported.set(mimeType, isSupported); } return isStaticTypeSupported.get(mimeType); } }); const winURL = win.URL = defineCstrName("URL", class extends URL {}); const hasAudioTracks = "audioTracks" in win.HTMLMediaElement.prototype; if (hasAudioTracks) { defineCstr(win, "AudioTrackList", WorkerAudioTrackList); defineCstr(win, "AudioTrack", WorkerAudioTrack); HTMLMediaDescriptorMap.audioTracks = { get() { return new WorkerAudioTrackList(this); } }; } definePrototypePropertyDescriptor(win.HTMLMediaElement, HTMLMediaDescriptorMap); winURL.createObjectURL = obj => callMethod(win, [ "URL", "createObjectURL" ], [ obj ]); winURL.revokeObjectURL = obj => callMethod(win, [ "URL", "revokeObjectURL" ], [ obj ]); }; const isStaticTypeSupported = new Map; self.$bridgeFromMedia$ = (WorkerBase, WorkerEventTargetProxy, env, win, windowMediaConstructors) => { windowMediaConstructors.map((mediaCstrName => { delete win[mediaCstrName]; })); initCanvas(WorkerBase, win); initMedia(WorkerBase, WorkerEventTargetProxy, env, win); }; })(self);