module IOBase

type IOType: InputBase | OutputBase

No description.

class OutputBase implements OutputEvents extends IOBase<OutputBase>

OutputBase(name: string, id: string = name): OutputBase

Parameters

  • name: The name that's used in the tab content.

  • id: A unique identifier of the Input/Output. Is added with the data-io attribute onto the panel and tab elements.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

build(
panel: HTMLElement,
tab: HTMLElement,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

  • tab: The tab associated with the panel.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

update(
input: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called every time an input calls its update event. When extending inputs and/or outputs, you can use the arguments to look for your desired input class using instanceof.

Parameters

  • input: The input that called the event.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

class InputBase extends IOBase<InputBase>

InputBase(name: string, id: string = name): InputBase

Parameters

  • name: The name that's used in the tab content.

  • id: A unique identifier of the Input/Output. Is added with the data-io attribute onto the panel and tab elements.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

build(
panel: HTMLElement,
tab: HTMLElement,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

  • tab: The tab associated with the panel.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

addUpdateEventListener(callback: UpdateCallback): void

Every callback registered this way will be invoked when calling invokeUpdate.

NOTE: This method is mainly used internally and will probably not concern you – it can safely be ignored.

See also OutputEvents.update

Internal

invokeUpdate(): void

Invoke an update event. This will bubble to all registered Outputs, invoking the OutputEvents.update event in each Output.

class IOBase<IO extends IOType> implements IOEvents<IO>

IOBase<IO extends IOType>(
name: string,
id: string = name
): IOBase<IO>

Parameters

  • name: The name that's used in the tab content.

  • id: A unique identifier of the Input/Output. Is added with the data-io attribute onto the panel and tab elements.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

build(
panel: HTMLElement,
tab: HTMLElement,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

  • tab: The tab associated with the panel.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: IO,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: IO,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

interface OutputEvents implements IOEvents<OutputBase>

build(
panel: HTMLElement,
tab: HTMLElement,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

  • tab: The tab associated with the panel.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

update(
input: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called every time an input calls its update event. When extending inputs and/or outputs, you can use the arguments to look for your desired input class using instanceof.

Parameters

  • input: The input that called the event.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

interface IOEvents<IO extends IOType>

build(
panel: HTMLElement,
tab: HTMLElement,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

  • tab: The tab associated with the panel.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: IO,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: IO,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

module InteractiveShadowDOM

type Config: SimpleConfig | AdvancedConfig

Available configuration. Used in the constructor.

You can choose from two configuration strategies, a simple and an advanced configuration that each have their own properties. Mixing simple and advanced properties will raise an Error.

This separation enables a simple yet configurable setup when using the default IOs, while still being fully configurable when doing more advanced stuff.

See also

type ThemeOptions: "light" | "dark" | "user" | "auto"

Available options for the theme configuration.

  • "light": Start with the light theme.
  • "dark": Start with the dark theme.
  • "user": Start with the user's preferred theme.
  • "auto": Start with the user's preferred theme and update the theme when the user changes their theme preference.

"auto" is useful if the containing site does not have a manual theme toggle and relies purely on user preference. In all other cases, theme syncing beyond the setup can be done using toggleLightTheme and toggleDarkTheme.

See also

class InteractiveShadowDOMError extends Error

InteractiveShadowDOMError(
...args: any[]
): InteractiveShadowDOMError

No description.

class InteractiveShadowDOM

InteractiveShadowDOM(
wrapper: HTMLElement,
config: Partial<Config> = {}
): InteractiveShadowDOM

No description.

wrapper: HTMLElement

No description.

resizeBar: HTMLElement

No description.

elementsIO: Record<keyof ScopeBase, IOElements>

No description.

activeIO: ScopeBase

No description.

inputs: InputBase[]

No description.

outputs: OutputBase[]

No description.

activateIO<S extends keyof ScopeBase>(
scope: S,
io: ScopeBase[S]
): void

Activate the given IO for the given scope ("input" or "output") and deactive the currently active IO of that scope.

The passed IO must exist in the given scope.

Parameters

  • scope: Which scope to operate on.

  • io: The IO to activate. It must currently exist in the given scope.

invokeSingleEvent<
IO extends IOType,
T extends keyof IOEvents<IO>
>(
io: IO,
name: T,
...eventArgs: EventMap<IOEvents<IO>>[T]
): void

Invoke an IO's event.

Parameters

  • io: The IO to invoke the event of.

  • name: The event name.

  • eventArgs: Arguments that are passed to the invoked event handler.

Remarks

Each event is called with a variable amount of (given) arguments and all registered inputs and outputs.

invokeOutputEvent<T extends keyof OutputEvents>(
name: T,
...eventArgs: EventMap<OutputEvents>[T]
): void

Invoke an event in all Outputs.

See also invokeSingleEvent

invokeIOEvent<T extends keyof IOEvents<IOType>>(
name: T,
...eventArgs: EventMap<IOEvents<IOType>>[T]
): void

Invoke an event in all IOs.

See also invokeSingleEvent

_resizeDown(e: PointerEvent): void

Internal

_resizeMove(e: PointerEvent): void

Internal

_resizeUp(e: PointerEvent): void

Internal

toggleLightTheme(): void

No description.

toggleDarkTheme(): void

No description.

static isAdvancedConfig(config: Partial<Config>): config

Assert whether a passed config uses the simple or advanced strategy.

Remarks

This will assert to a simple configuration when the passed object is empty!

Internal

static createTabAndPanel(
io: IOType,
elements: IOElements,
callback: (io: IOType) => void
): { panel: HTMLDivElement, tab: HTMLLIElement }

Create an IO's tab and panel elements and append them to the DOM.

Parameters

  • io: The IO to create the elements for.

  • elements: IOElements instance the tab and panel will get appended to.

  • callback: The onclick callback. Its first argument gets bound to the given IO.

Returns An object containing the created tab and panel elements.

static getDOMElements(
baseElement: HTMLElement
): {
section: HTMLElement,
panelWrapper: HTMLElement,
tabWrapper: HTMLElement
}

Get all relevant DOM elements from the InteractiveShadowDOM's DOM wrapper.

Parameters

  • baseElement: The DOM wrapper resulting from the assumed HTML template.

Returns An object containing the baseElement itself and the panel and tab wrapper.

interface SimpleConfig

Simple configuration. May not be mixed up with AdvancedConfig.

See also Config

source: Record<DOMLanguages, string>

The initial source strings for the default code inputs (js, css, html).

staticStyleSheets: string[]

Additional style sheets to include in the shadow DOM output.

activeInput: DOMLanguages

Which input will be active initially. One of 'js', 'html', 'css'.

Default value 

'js'
activeOutput: ActiveOutputValues

Which output will be active initially. Either 'dom' or 'html'.

Default value 

'dom'
theme: ThemeOptions

The initial theme. Either 'light', 'dark', 'user' or 'auto'.

Default value 

'light'

interface AdvancedConfig

Advanced configuration. May not be mixed up with SimpleConfig.

See also Config

inputs: InputBase[]

Custom inputs that must extend InputBase. Will override the default inputs.

outputs: OutputBase[]

Custom outputs that must extend OutputBase. Will override the default outputs.

activeInput: InputBase

Which input will be active initially. Needs to be an input present in inputs.

Default value

inputs[0]

activeOutput: OutputBase

Which output will be active initially. Needs to be an output present in outputs.

Default value

outputs[0]

theme: ThemeOptions

The initial theme. Either 'light', 'dark', 'user' or 'auto'.

Default value 

'light'

module io/CodeInput

class CodeInput extends InputBase

CodeInput(
language: string,
initialCode?: string,
name?: string
): CodeInput

No description.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

editor:

No description.

timer: number

No description.

language: string

No description.

initialCode: string

No description.

static IDLE_INTERVAL: number

No description.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

addUpdateEventListener(callback: UpdateCallback): void

Every callback registered this way will be invoked when calling invokeUpdate.

NOTE: This method is mainly used internally and will probably not concern you – it can safely be ignored.

See also OutputEvents.update

Internal

invokeUpdate(): void

Invoke an update event. This will bubble to all registered Outputs, invoking the OutputEvents.update event in each Output.

build(panel: HTMLElement): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

activateDarkTheme(): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

activateLightTheme(): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

dispatchUpdateEvent(view: any): void

No description.

getSource(): any

No description.

static createEditor(
target: HTMLElement,
language: string,
source: string,
onUpdate: Function
):

No description.

module io/DOMOutput

type DOMLanguages: "html" | "css" | "js"

No description.

class DOMOutput extends OutputBase

This Output creates an interactive shadow DOM with any CodeInputs as its sources that correspond to either js, html or css.

The shadow DOM is updated with the corresponding code input strings when receiving a CodeInput's update event. Alternatively, updateState can be used to manually invoke a update.

DOMOutput(
staticStyleSheets?: string[],
name: string = 'Output'
): DOMOutput

No description.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

shadow: ShadowRoot

No description.

contentNode: HTMLDivElement

No description.

htmlSources: Map<CodeInput, HTMLSourceMap>

No description.

jsFunctions: Map<CodeInput, () => void>

No description.

_staticCSSSources: string[]

Internal

activate(
prevActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

update(input: InputBase): void

Is called every time an input calls its update event. When extending inputs and/or outputs, you can use the arguments to look for your desired input class using instanceof.

Parameters

  • input: The input that called the event.

build(panel: HTMLElement): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

setup(inputs: InputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

bindStateFromSingleInput(input: CodeInput): void

Bind the given CodeInput (either JS, HTML or CSS) to the shadow DOM, processing its source.

Except for the CSS, this does not yet update the Shadow DOM, only prepare it for an update. You will want to call updateState after binding.

updateState(): void

Reset the HTML content and call every bound JavaScript anew.

setErrorContent(errorStr: string): void

Set the content of the error modal and display it.

Parameters

  • errorStr: The error message.

See also hideErrorContent

hideErrorContent(): void

Hide the error modal again.

See also setErrorContent

convertJSStringToFunction(jsString: string): any

Convert a JavaScript string to an executable function that is bound to the current shadow DOM element as its this.

Does not use eval.

See also shadowfyJSString

static shadowfyJSString(jsString: string): string

Prepare a JavaScript string for use in a shadow DOM.

Namely, this replaces all occurences of document with this because a shadow DOM is not self contained and still exists in the scope of the parent document (Also see https://github.com/tc39/proposal-shadowrealm).

See also convertJSStringToFunction

static getStyleSheet(cssString: string): CSSStyleSheet

Create a CSSStyleSheet with the given CSS source for adoption by a shadom DOM.

static getAnonymousFnErrorPosition(
error: Error
): false | [number, number]

Get the line and column position from an error. Highly unstable.

Remarks

This reads the stack trace string given with an error. It's really esotheric and heavily relies on vendor-specific implementation, which is not a recipe for disaster at all. But hey, it works (for now)!

Only works for Firefox and Chrome.

Returns [ line, column ].

module io/HTMLOutput.highlightHTML.worker

module io/HTMLOutput

class HTMLOutput extends OutputBase

This Output shows a HTML tree from a bound DOM element. It is continuously highlighted via highlight.js in a worker thread.

A DOM element that's in the constructor is observed for changes. Whenever a DOM update occurs, the inner HTML string is indented and then highlighted in a parallel thread and then written to the output panel.

HTMLOutput(
observableNode: Element,
name: string = 'Output (HTML)'
): HTMLOutput

No description.

name: string

No description.

id: string

No description.

panel: HTMLElement

The panel this IO is operating in.

Will be set during the build step, immediately before build is called.

tab: HTMLElement

The tab associated with this IO.

Will be set during the build step, immediately before build is called.

isActive: boolean

No description.

codeTarget: HTMLElement

No description.

observableNode: Element

No description.

highlightWorker: Worker

No description.

observer: MutationObserver

No description.

timer: number

No description.

static IDLE_TIMEOUT_INACTIVE: number

No description.

static IDLE_TIMEOUT_ACTIVE: number

No description.

setup(inputs: InputBase[], outputs: OutputBase[]): void

Is called exactly once after InteractiveShadowDOM has finished its initial setup (calling setup as the last operation in its constructor).

Parameters

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activate(
prevActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been actived by the user. See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • prevActive: The IO that had been active before.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

deactivate(
nextActive: OutputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called after the IO has been deactivated by the user (by activating another IO). See IOBase.isActive for a way to asynchronously tell whether the IO is currently active.

Parameters

  • nextActive: Another IO that has been activated.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateDarkTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the dark mode has been toggled.

If the user-preferred theme is dark, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

activateLightTheme(
isInitial: boolean,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called when the light mode has been toggled.

If the user-preferred theme is light, this method is called during setup with the isInitial parameter set to true. It is called immediately before build.

Parameters

  • isInitial: true if called during setup, false otherwise.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

update(
input: InputBase,
inputs: InputBase[],
outputs: OutputBase[]
): void

Is called every time an input calls its update event. When extending inputs and/or outputs, you can use the arguments to look for your desired input class using instanceof.

Parameters

  • input: The input that called the event.

  • inputs: All registered inputs.

  • outputs: All registered outputs.

updateHTMLOutput(): void

Pass the source of the bound element to the highlight worker after IDLE_TIMEOUT_ACTIVE or IDLE_TIMEOUT_INACTIVE ms, which then will update the output panel.

Subsequent calls reset the interval timer, ensuring that the HTML output gets updated iff the DOM has stopped being modified.

build(panel: HTMLElement): void

Is called exactly once after InteractiveShadowDOM has finished setting up all DOM and related operations.

Parameters

  • panel: The panel the IO is operating in.

highlightWorkerMessage(e: MessageEvent): void

No description.

static indentElementInPlace(element: Element): void

Modify a given element such that its source is correctly indented.

Remarks

Inspired by https://stackoverflow.com/a/26361620