@dodona/papyros 0.3.8 → 0.4.2

package/dist/Papyros.d.ts

@@ -1,5 +1,5 @@
 import "./Papyros.css";
-import { InputMode } from "./InputManager";
+import { InputManagerRenderOptions, InputMode } from "./InputManager";
 import { ProgrammingLanguage } from "./ProgrammingLanguage";
 import { RunState, CodeRunner } from "./CodeRunner";
 import { AtomicsChannelOptions, ServiceWorkerChannelOptions } from "sync-message";
@@ -54,7 +54,7 @@ export interface PapyrosRenderOptions {
     /**
      * RenderOptions for the input field
      */
-    inputOptions?: RenderOptions;
+    inputOptions?: InputManagerRenderOptions;
     /**
      * RenderOptions for the output field
      */

package/dist/editor/BatchInputEditor.d.ts

@@ -0,0 +1,27 @@
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { UsedInputGutterInfo } from "./Gutters";
+/**
+ * Editor to handle and highlight user input
+ */
+export declare class BatchInputEditor extends CodeMirrorEditor {
+    /**
+     * Style classes used to highlight lines
+     */
+    private static HIGHLIGHT_CLASSES;
+    /**
+     * Gutters to show which lines were used
+     */
+    private usedInputGutters;
+    constructor();
+    /**
+     * Apply highlighting to the lines in the Editor
+     * @param {function(number): UsedInputGutterInfo} getInfo Function to obtain gutter
+     * info per line (1-based indexing)
+     */
+    highlight(getInfo: (lineNr: number) => UsedInputGutterInfo): void;
+    /**
+     * @return {Array<string>} Array of valid user input
+     * Data in the last line that is not terminated by a newline is omitted
+     */
+    getLines(): Array<string>;
+}

package/dist/{CodeEditor.d.ts → editor/CodeEditor.d.ts}

@@ -1,20 +1,17 @@
-import { ProgrammingLanguage } from "./ProgrammingLanguage";
-import { Renderable, RenderOptions } from "./util/Rendering";
+import { ProgrammingLanguage } from "../ProgrammingLanguage";
 import { CompletionSource } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 import { Diagnostic } from "@codemirror/lint";
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
 /**
  * Component that provides useful features to users writing code
  */
-export declare class CodeEditor extends Renderable {
-    /**
-     * Reference to the user interface of the editor
-     */
-    readonly editorView: EditorView;
-    /**
-     * Mapping from CodeEditorOptions to a configurable compartment
-     */
-    private compartments;
+export declare class CodeEditor extends CodeMirrorEditor {
+    static PROGRAMMING_LANGUAGE: string;
+    static INDENTATION: string;
+    static PANEL: string;
+    static AUTOCOMPLETION: string;
+    static LINTING: string;
     /**
      * Construct a new CodeEditor
      * @param {Function} onRunRequest Callback for when the user wants to run the code
@@ -22,20 +19,7 @@ export declare class CodeEditor extends Renderable {
      * @param {number} indentLength The length in spaces for the indent unit
      */
     constructor(onRunRequest: () => void, initialCode?: string, indentLength?: number);
-    /**
-     * Helper method to dispatch configuration changes at runtime
-     * @param {Array<[Option, Extension]>} items Array of items to reconfigure
-     * The option indicates the relevant compartment
-     * The extension indicates the new configuration
-     */
-    private reconfigure;
-    /**
-     * Render the editor with the given options and panel
-     * @param {RenderOptions} options Options for rendering
-     * @param {HTMLElement} panel The panel to display at the bottom
-     * @return {HTMLElement} The rendered element
-     */
-    protected _render(options: RenderOptions): void;
+    setDarkMode(darkMode: boolean): void;
     /**
      * @param {ProgrammingLanguage} language The language to use
      */
@@ -52,26 +36,10 @@ export declare class CodeEditor extends Renderable {
      * @param {number} indentLength The number of spaces to use for indentation
      */
     setIndentLength(indentLength: number): void;
-    /**
-     * @param {Function} onChange Listener that performs actions on the new contents
-     */
-    onChange(onChange: ((newContent: string) => void)): void;
     /**
      * @param {HTMLElement} panel The panel to display at the bottom of the editor
      */
     setPanel(panel: HTMLElement): void;
-    /**
-     * @return {string} The code within the editor
-     */
-    getCode(): string;
-    /**
-     * @param {string} code The new code to be shown in the editor
-     */
-    setCode(code: string): void;
-    /**
-     * Put focus on the CodeEditor
-     */
-    focus(): void;
     /**
      * @param {number} indentLength The amount of spaces to use
      * @return {string} The indentation unit to be used by CodeMirror
@@ -97,6 +65,7 @@ export declare class CodeEditor extends Renderable {
     *  - active line highlighting
     *  - active line gutter highlighting
     *  - selection match highlighting
+    *  - gutter for linting
     * Keymaps:
     *  - the default command bindings
     *  - bracket closing

package/dist/editor/CodeMirrorEditor.d.ts

@@ -0,0 +1,132 @@
+/// <reference types="node" />
+import { Compartment, Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { Renderable, RenderOptions } from "../util/Rendering";
+import { StyleSpec } from "style-mod";
+/**
+ * Data structure containing common elements for styling
+ */
+export interface EditorStyling {
+    /**
+     * Array of HTML classes to apply to this editor
+     */
+    classes: Array<string>;
+    /**
+     * The maximum height of the editor
+     */
+    maxHeight: string;
+    /**
+     * The minimum height of the editor
+     */
+    minHeight: string;
+    /**
+     * Extra theme options to be passed to EditorView.theme
+     */
+    theme?: {
+        [selectorSpec: string]: StyleSpec;
+    };
+}
+/**
+ * Interface for listeners to textual changes in the editor
+ */
+export interface DocChangeListener {
+    /**
+     * Method to call with the new document value
+     */
+    onChange: (code: string) => void;
+    /**
+     * How many milliseconds should pass since the last change
+     * before notifying (in case computations are expensive)
+     */
+    delay?: number;
+}
+/**
+ * Interface for storing data related to delayed function calls
+ */
+interface TimeoutData {
+    /**
+     * The time in ms at which the last call occurred
+     */
+    lastCalled: number;
+    /**
+     * The timeout identifier associated with the delayed call
+     * null if not currently scheduled
+     */
+    timeout: NodeJS.Timeout | null;
+}
+/**
+ * Base class for Editors implemented using CodeMirror 6
+ * https://codemirror.net/6/
+ */
+export declare abstract class CodeMirrorEditor extends Renderable {
+    static STYLE: string;
+    static PLACEHOLDER: string;
+    static THEME: string;
+    /**
+     * CodeMirror EditorView representing the internal editor
+     */
+    readonly editorView: EditorView;
+    /**
+     * Mapping of strings to Compartments associated with that property
+     */
+    protected compartments: Map<string, Compartment>;
+    /**
+     * Data to style this Editor
+     */
+    protected styling: EditorStyling;
+    /**
+     * Mapping for each change listener to its timeout identifier and last call time
+     */
+    protected listenerTimeouts: Map<DocChangeListener, TimeoutData>;
+    /**
+     * @param {Set<string>} compartments Identifiers for configurable extensions
+     * @param {EditorStyling} styling Data to style this editor
+     */
+    constructor(compartments: Set<string>, styling: EditorStyling);
+    /**
+     * @param {Extension} extension The extension to add to the Editor
+     */
+    protected addExtension(extension: Extension): void;
+    /**
+     * @return {string} The text within the editor
+     */
+    getText(): string;
+    /**
+     * @param {string} text The new value to be shown in the editor
+     */
+    setText(text: string): void;
+    /**
+     * Helper method to dispatch configuration changes at runtime
+     * @param {Array<[Option, Extension]>} items Array of items to reconfigure
+     * The option indicates the relevant compartment
+     * The extension indicates the new configuration
+     */
+    reconfigure(...items: Array<[string, Extension]>): void;
+    /**
+     * Apply focus to the Editor
+     */
+    focus(): void;
+    /**
+     * @param {string} placeholderValue The contents of the placeholder
+     */
+    setPlaceholder(placeholderValue: string): void;
+    /**
+     * @param {boolean} darkMode Whether to use dark mode
+     */
+    setDarkMode(darkMode: boolean): void;
+    /**
+     * Override the style used by this Editor
+     * @param {Partial<EditorStyling>} styling Object with keys of EditorStyling to override styles
+     */
+    setStyling(styling: Partial<EditorStyling>): void;
+    protected _render(options: RenderOptions): void;
+    /**
+     * Process the changes by informing the listeners of the new contents
+     */
+    private handleChange;
+    /**
+     * @param {DocChangeListener} changeListener Listener that performs actions on the new contents
+     */
+    onChange(changeListener: DocChangeListener): void;
+}
+export {};

package/dist/editor/Gutters.d.ts

@@ -0,0 +1,94 @@
+import { StateEffectType, StateField } from "@codemirror/state";
+import { Extension } from "@codemirror/state";
+import { GutterMarker } from "@codemirror/view";
+import { EditorView } from "@codemirror/view";
+/**
+ * Data used in Gutter elements
+ */
+export interface GutterInfo {
+    /**
+     * The number of the line (1-based)
+     */
+    lineNr: number;
+    /**
+     * Whether the Gutter element should be shown
+     */
+    on: boolean;
+}
+/**
+ * Configuration for Gutters
+ */
+export interface IGutterConfig<Info extends GutterInfo> {
+    /**
+     * Name of this Gutter
+     */
+    name: string;
+    /**
+     * Handler for when a Gutter element is clicked
+     */
+    onClick?: (view: EditorView, info: Info) => void;
+    /**
+     * Extra extensions to use for the Gutters
+     */
+    extraExtensions?: Extension;
+}
+export declare abstract class Gutters<Info extends GutterInfo = GutterInfo, Config extends IGutterConfig<Info> = IGutterConfig<Info>> {
+    /**
+     * Config used to initialize the Gutters
+     */
+    protected config: Config;
+    /**
+     * Effect to signal changes in the Gutters
+     */
+    protected effect: StateEffectType<Info>;
+    /**
+     * Current state of the Gutters
+     * Consists of a mapping for line numbers to Info objects
+     */
+    protected state: StateField<Map<number, Info>>;
+    constructor(config: Config);
+    /**
+     * Render a marker with the given info
+     * @param {Info} info Info used to render the marker
+     * Will only be called when info.on is True
+     */
+    protected abstract marker(info: Info): GutterMarker;
+    /**
+     * Set a marker with the given info
+     * @param {EditorView} view View in which the Gutters live
+     * @param {Info} info Info used to render the marker
+     */
+    setMarker(view: EditorView, info: Info): void;
+    /**
+     * @return {Extension} The Gutters as a CodeMirror Extension
+     */
+    toExtension(): Extension;
+}
+/**
+ * Gutters to show and allow toggling of breakpoints
+ */
+export declare class BreakpointsGutter extends Gutters {
+    constructor();
+    protected marker(): GutterMarker;
+    /**
+     * @param {EditorView} view The view in which the Gutters live
+     * @return {Set<number>} The 1-based line numbers with a breakpoint
+     */
+    getBreakpoints(view: EditorView): Set<number>;
+}
+/**
+ * Extra data used to represent input gutters
+ */
+export interface UsedInputGutterInfo extends GutterInfo {
+    /**
+     * Text value to display when hovering over the Gutter element
+     */
+    title: string;
+}
+/**
+ * Gutters to show a checkmark for used input
+ */
+export declare class UsedInputGutters extends Gutters<UsedInputGutterInfo> {
+    constructor();
+    protected marker(info: UsedInputGutterInfo): GutterMarker;
+}

package/dist/input/BatchInputHandler.d.ts

@@ -1,11 +1,19 @@
-import { InputMode } from "../InputManager";
+import { InputManagerRenderOptions, InputMode } from "../InputManager";
 import { UserInputHandler } from "./UserInputHandler";
-import { RenderOptions } from "../util/Rendering";
+import { BatchInputEditor } from "../editor/BatchInputEditor";
 export declare class BatchInputHandler extends UserInputHandler {
     /**
      * The index of the next line in lines to send
      */
     private lineNr;
+    /**
+     * Messages used when asking for user input
+     */
+    private prompts;
+    /**
+     * Editor containing the input of the user
+     */
+    readonly batchEditor: BatchInputEditor;
     /**
      * The previous input of the user
      * Is restored upon switching back to InputMode.Batch
@@ -16,6 +24,11 @@ export declare class BatchInputHandler extends UserInputHandler {
      * @param {function()} inputCallback  Callback for when the user has entered a value
      */
     constructor(inputCallback: () => void);
+    /**
+     * Handle new input, potentially sending it to the awaiting receiver
+     * @param {string} newInput The new user input
+     */
+    private handleInputChanged;
     toggle(active: boolean): void;
     getInputMode(): InputMode;
     /**
@@ -24,8 +37,12 @@ export declare class BatchInputHandler extends UserInputHandler {
      */
     protected get lines(): Array<string>;
     hasNext(): boolean;
+    private highlight;
     next(): string;
     onRunStart(): void;
     onRunEnd(): void;
-    protected _render(options: RenderOptions): void;
+    waitWithPrompt(waiting: boolean, prompt?: string): void;
+    protected setPlaceholder(placeholderValue: string): void;
+    focus(): void;
+    protected _render(options: InputManagerRenderOptions): void;
 }

package/dist/input/InteractiveInputHandler.d.ts

@@ -9,12 +9,19 @@ export declare class InteractiveInputHandler extends UserInputHandler {
      * Retrieve the button that users can click to send their input
      */
     private get sendButton();
+    /**
+     * Retrieve the HTMLInputElement for this InputHandler
+     */
+    private get inputArea();
     getInputMode(): InputMode;
     hasNext(): boolean;
     next(): string;
     waitWithPrompt(waiting: boolean, prompt?: string): void;
+    protected setPlaceholder(placeholder: string): void;
+    focus(): void;
     toggle(): void;
     onRunStart(): void;
     onRunEnd(): void;
     protected _render(options: RenderOptions): void;
+    protected reset(): void;
 }

package/dist/input/UserInputHandler.d.ts

@@ -1,13 +1,16 @@
-import { InputMode } from "../InputManager";
+import { InputManagerRenderOptions, InputMode } from "../InputManager";
 import { Renderable } from "../util/Rendering";
 /**
  * Base class for components that handle input from the user
  */
-export declare abstract class UserInputHandler extends Renderable {
+export declare abstract class UserInputHandler extends Renderable<InputManagerRenderOptions> {
     /**
      * Whether we are waiting for the user to input data
      */
     protected waiting: boolean;
+    /**
+     * Function to call when the user provided new input
+     */
     protected inputCallback: () => void;
     /**
      * Construct a new UserInputHandler
@@ -45,9 +48,13 @@ export declare abstract class UserInputHandler extends Renderable {
      */
     abstract toggle(active: boolean): void;
     /**
-     * Retrieve the HTMLInputElement for this InputHandler
+     * @param {string} placeholder The placeholder to show
+     */
+    protected abstract setPlaceholder(placeholder: string): void;
+    /**
+     * Focus the area in which the user enters input
      */
-    get inputArea(): HTMLInputElement;
+    abstract focus(): void;
     /**
      * Wait for input of the user for a certain prompt
      * @param {boolean} waiting Whether we are waiting for input

package/dist/util/Util.d.ts

@@ -45,4 +45,10 @@ export declare function downloadResults(data: string, filename: string): void;
  * @return {string} The current url
  */
 export declare function cleanCurrentUrl(endingSlash?: boolean): string;
+/**
+ * Focus an element, setting the user's caret at the end of the contents
+ * Needed to ensure focusing a contenteditable element works as expected
+ * @param {HTMLElement} el The element to focus
+ */
+export declare function placeCaretAtEnd(el: HTMLElement): void;
 export {};

package/dist/workers/input/InputWorker.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Papyros=t():e.Papyros=t()}(self,(()=>(()=>{var e={137:e=>{self,e.exports=(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{isServiceWorkerRequest:()=>s,serviceWorkerFetchListener:()=>i,asyncSleep:()=>u,ServiceWorkerError:()=>a,writeMessageAtomics:()=>c,writeMessageServiceWorker:()=>f,writeMessage:()=>l,makeChannel:()=>d,makeAtomicsChannel:()=>y,makeServiceWorkerChannel:()=>p,readMessage:()=>h,syncSleep:()=>v,uuidv4:()=>g});var r=function(e,t,r,n){return new(r||(r=Promise))((function(o,s){function i(e){try{a(n.next(e))}catch(e){s(e)}}function u(e){try{a(n.throw(e))}catch(e){s(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,u)}a((n=n.apply(e,t||[])).next())}))};const n="__SyncMessageServiceWorkerInput__",o="__sync-message-v2__";function s(e){return"string"!=typeof e&&(e=e.request.url),e.includes(n)}function i(){const e={},t={};return n=>{const{url:i}=n.request;return!!s(i)&&(n.respondWith(function(){return r(this,void 0,void 0,(function*(){function r(e){const t={message:e,version:o};return new Response(JSON.stringify(t),{status:200})}if(i.endsWith("/read")){const{messageId:o,timeout:s}=yield n.request.json(),i=e[o];return i?(delete e[o],r(i)):yield new Promise((e=>{t[o]=e,setTimeout((function(){delete t[o],e(new Response("",{status:408}))}),s)}))}if(i.endsWith("/write")){const{message:o,messageId:s}=yield n.request.json(),i=t[s];return i?(i(r(o)),delete t[s]):e[s]=o,r({early:!i})}if(i.endsWith("/version"))return new Response(o,{status:200})}))}()),!0)}}function u(e){return new Promise((t=>setTimeout(t,e)))}class a extends Error{constructor(e,t){super(`Received status ${t} from ${e}. Ensure the service worker is registered and active.`),this.url=e,this.status=t,this.type="ServiceWorkerError",Object.setPrototypeOf(this,a.prototype)}}function c(e,t){const r=(new TextEncoder).encode(JSON.stringify(t)),{data:n,meta:o}=e;if(r.length>n.length)throw new Error("Message is too big, increase bufferSize when making channel.");n.set(r,0),Atomics.store(o,0,r.length),Atomics.store(o,1,1),Atomics.notify(o,1)}function f(e,t,n){return r(this,void 0,void 0,(function*(){yield navigator.serviceWorker.ready;const r=e.baseUrl+"/write",s=Date.now();for(;;){const i={message:t,messageId:n},c=yield fetch(r,{method:"POST",body:JSON.stringify(i)});if(200===c.status&&(yield c.json()).version===o)return;if(!(Date.now()-s<e.timeout))throw new a(r,c.status);yield u(100)}}))}function l(e,t,n){return r(this,void 0,void 0,(function*(){"atomics"===e.type?c(e,t):yield f(e,t,n)}))}function d(e={}){return"undefined"!=typeof SharedArrayBuffer?y(e.atomics):"serviceWorker"in navigator?p(e.serviceWorker):null}function y({bufferSize:e}={}){return{type:"atomics",data:new Uint8Array(new SharedArrayBuffer(e||131072)),meta:new Int32Array(new SharedArrayBuffer(2*Int32Array.BYTES_PER_ELEMENT))}}function p(e={}){return{type:"serviceWorker",baseUrl:(e.scope||"/")+n,timeout:e.timeout||5e3}}function m(e,t){return e>0?+e:t}function h(e,t,{checkInterrupt:r,checkTimeout:n,timeout:s}={}){const i=performance.now();n=m(n,r?100:5e3);const u=m(s,Number.POSITIVE_INFINITY);let c;if("atomics"===e.type){const{data:t,meta:r}=e;c=()=>{if("timed-out"===Atomics.wait(r,1,0,n))return null;{const e=Atomics.exchange(r,0,0),n=t.slice(0,e);Atomics.store(r,1,0);const o=(new TextDecoder).decode(n);return JSON.parse(o)}}}else c=()=>{const r=new XMLHttpRequest,s=e.baseUrl+"/read";r.open("POST",s,!1);const u={messageId:t,timeout:n};r.send(JSON.stringify(u));const{status:c}=r;if(408===c)return null;if(200===c){const e=JSON.parse(r.responseText);return e.version!==o?null:e.message}if(performance.now()-i<e.timeout)return null;throw new a(s,c)};for(;;){const e=u-(performance.now()-i);if(e<=0)return null;n=Math.min(n,e);const t=c();if(null!==t)return t;if(null==r?void 0:r())return null}}function v(e,t){if(e=m(e,0))if("undefined"!=typeof SharedArrayBuffer){const t=new Int32Array(new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT));t[0]=0,Atomics.wait(t,0,0,e)}else h(t,`sleep ${e} ${g()}`,{timeout:e})}let g;return g="randomUUID"in crypto?function(){return crypto.randomUUID()}:function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(e=>{const t=Number(e);return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))},t})()}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.r(n),r.d(n,{InputWorker:()=>s});var e=r(137),t=function(e,t,r,n){return new(r||(r=Promise))((function(o,s){function i(e){try{a(n.next(e))}catch(e){s(e)}}function u(e){try{a(n.throw(e))}catch(e){s(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,u)}a((n=n.apply(e,t||[])).next())}))},o=function(e,t){var r,n,o,s,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return s={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function u(s){return function(u){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}},s=function(){function r(t){void 0===t&&(t=""),this.hostName=t,this.syncMessageListener=(0,e.serviceWorkerFetchListener)()}return r.prototype.handleInputRequest=function(e){return t(this,void 0,void 0,(function(){var t;return o(this,(function(r){return this.syncMessageListener(e)?[2,!0]:(t=e.request.url,this.hostName&&t.includes(this.hostName)?(e.respondWith(fetch(e.request).then((function(e){var t=new Headers(e.headers);return t.set("Cross-Origin-Embedder-Policy","require-corp"),t.set("Cross-Origin-Opener-Policy","same-origin"),t.set("Cross-Origin-Resource-Policy","cross-origin"),new Response(e.body,{status:e.status||200,statusText:e.statusText,headers:t})}))),[2,!0]):[2,!1])}))}))},r}()})(),n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Papyros=t():e.Papyros=t()}(self,(()=>(()=>{var e={137:e=>{self,e.exports=(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{isServiceWorkerRequest:()=>s,serviceWorkerFetchListener:()=>i,asyncSleep:()=>u,ServiceWorkerError:()=>c,writeMessageAtomics:()=>a,writeMessageServiceWorker:()=>f,writeMessage:()=>d,makeChannel:()=>l,makeAtomicsChannel:()=>y,makeServiceWorkerChannel:()=>p,readMessage:()=>h,syncSleep:()=>v,uuidv4:()=>g});var r=function(e,t,r,n){return new(r||(r=Promise))((function(o,s){function i(e){try{c(n.next(e))}catch(e){s(e)}}function u(e){try{c(n.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,u)}c((n=n.apply(e,t||[])).next())}))};const n="__SyncMessageServiceWorkerInput__",o="__sync-message-v2__";function s(e){return"string"!=typeof e&&(e=e.request.url),e.includes(n)}function i(){const e={},t={};return n=>{const{url:i}=n.request;return!!s(i)&&(n.respondWith(function(){return r(this,void 0,void 0,(function*(){function r(e){const t={message:e,version:o};return new Response(JSON.stringify(t),{status:200})}if(i.endsWith("/read")){const{messageId:o,timeout:s}=yield n.request.json(),i=e[o];return i?(delete e[o],r(i)):yield new Promise((e=>{t[o]=e,setTimeout((function(){delete t[o],e(new Response("",{status:408}))}),s)}))}if(i.endsWith("/write")){const{message:o,messageId:s}=yield n.request.json(),i=t[s];return i?(i(r(o)),delete t[s]):e[s]=o,r({early:!i})}if(i.endsWith("/version"))return new Response(o,{status:200})}))}()),!0)}}function u(e){return new Promise((t=>setTimeout(t,e)))}class c extends Error{constructor(e,t){super(`Received status ${t} from ${e}. Ensure the service worker is registered and active.`),this.url=e,this.status=t,this.type="ServiceWorkerError",Object.setPrototypeOf(this,c.prototype)}}function a(e,t){const r=(new TextEncoder).encode(JSON.stringify(t)),{data:n,meta:o}=e;if(r.length>n.length)throw new Error("Message is too big, increase bufferSize when making channel.");n.set(r,0),Atomics.store(o,0,r.length),Atomics.store(o,1,1),Atomics.notify(o,1)}function f(e,t,n){return r(this,void 0,void 0,(function*(){yield navigator.serviceWorker.ready;const r=e.baseUrl+"/write",s=Date.now();for(;;){const i={message:t,messageId:n},a=yield fetch(r,{method:"POST",body:JSON.stringify(i)});if(200===a.status&&(yield a.json()).version===o)return;if(!(Date.now()-s<e.timeout))throw new c(r,a.status);yield u(100)}}))}function d(e,t,n){return r(this,void 0,void 0,(function*(){"atomics"===e.type?a(e,t):yield f(e,t,n)}))}function l(e={}){return"undefined"!=typeof SharedArrayBuffer?y(e.atomics):"serviceWorker"in navigator?p(e.serviceWorker):null}function y({bufferSize:e}={}){return{type:"atomics",data:new Uint8Array(new SharedArrayBuffer(e||131072)),meta:new Int32Array(new SharedArrayBuffer(2*Int32Array.BYTES_PER_ELEMENT))}}function p(e={}){return{type:"serviceWorker",baseUrl:(e.scope||"/")+n,timeout:e.timeout||5e3}}function m(e,t){return e>0?+e:t}function h(e,t,{checkInterrupt:r,checkTimeout:n,timeout:s}={}){const i=performance.now();n=m(n,r?100:5e3);const u=m(s,Number.POSITIVE_INFINITY);let a;if("atomics"===e.type){const{data:t,meta:r}=e;a=()=>{if("timed-out"===Atomics.wait(r,1,0,n))return null;{const e=Atomics.exchange(r,0,0),n=t.slice(0,e);Atomics.store(r,1,0);const o=(new TextDecoder).decode(n);return JSON.parse(o)}}}else a=()=>{const r=new XMLHttpRequest,s=e.baseUrl+"/read";r.open("POST",s,!1);const u={messageId:t,timeout:n};r.send(JSON.stringify(u));const{status:a}=r;if(408===a)return null;if(200===a){const e=JSON.parse(r.responseText);return e.version!==o?null:e.message}if(performance.now()-i<e.timeout)return null;throw new c(s,a)};for(;;){const e=u-(performance.now()-i);if(e<=0)return null;n=Math.min(n,e);const t=a();if(null!==t)return t;if(null==r?void 0:r())return null}}function v(e,t){if(e=m(e,0))if("undefined"!=typeof SharedArrayBuffer){const t=new Int32Array(new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT));t[0]=0,Atomics.wait(t,0,0,e)}else h(t,`sleep ${e} ${g()}`,{timeout:e})}let g;return g="randomUUID"in crypto?function(){return crypto.randomUUID()}:function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,(e=>{const t=Number(e);return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))},t})()}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.r(n),r.d(n,{InputWorker:()=>o});var e=r(137),t=function(e,t,r,n){return new(r||(r=Promise))((function(o,s){function i(e){try{c(n.next(e))}catch(e){s(e)}}function u(e){try{c(n.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,u)}c((n=n.apply(e,t||[])).next())}))};class o{constructor(t=""){this.hostName=t,this.syncMessageListener=(0,e.serviceWorkerFetchListener)()}handleInputRequest(e){return t(this,void 0,void 0,(function*(){if(this.syncMessageListener(e))return!0;const t=e.request.url;return!(!this.hostName||!t.includes(this.hostName))&&(e.respondWith(fetch(e.request).then((e=>{const t=new Headers(e.headers);t.set("Cross-Origin-Embedder-Policy","require-corp"),t.set("Cross-Origin-Opener-Policy","same-origin"),t.set("Cross-Origin-Resource-Policy","cross-origin");return new Response(e.body,{status:e.status||200,statusText:e.statusText,headers:t})}))),!0)}))}}})(),n})()));

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dodona/papyros",
-  "version": "0.3.8",
+  "version": "0.4.2",
   "private": false,
   "homepage": ".",
   "devDependencies": {
     "@types/escape-html": "^1.0.1",
     "@types/i18n-js": "^3.8.2",
     "@types/jest": "27.4.1",
-    "@types/serviceworker": "^0.0.44",
+    "@types/serviceworker": "^0.0.46",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "autoprefixer": "^10.4.0",
@@ -19,7 +19,7 @@
     "jest": "27.0.0",
     "postcss": "^8.3.11",
     "postcss-import": "^14.0.2",
-    "postcss-loader": "^6.2.0",
+    "postcss-loader": "^7.0.0",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.24",
     "terser-webpack-plugin": "^5.3.1",