oskit-compose/com.outsidesource.oskitcompose.html/Html

Html

fun Html(state: HtmlState = rememberHtmlState(), modifier: Modifier = Modifier, inlineJs: (HtmlState) -> String? = null, scripts: List<String> = emptyList(), html: (HtmlState) -> String)

Render arbitrary HTML within the compose layout.

Html works by appending DOM nodes to the document and positioning them properly to align with the intended position in the compose layout. All injected HTML is rendered in a ShadowRoot to avoid style/name collisions.

Events: Use HtmlState.emit to dispatch custom events from Kotlin to your injected JavaScript. Use HtmlState.addListener to listen to custom events from JavaScript in Kotlin.

JavaScript: Html supports both inline scripts and ES6 module scripts. All inline JS is injected as an ES6 module in order to isolate definitions. Inline JS automatically imports HtmlState.runtimeJsUrl that provides the Env object giving access to the container, content elements as well as providing a mechanism to send and receive CustomEvents to Kotlin. JavaScript files passed via the scripts parameter must be included as an ES6 module manually.

inlineJs example:

function foo() {
   Env.emit(new CustomEvent("bar"))
}

const button = Env.content.querySelector("button")

ES6 module example:

// Source Url: http://example.com/es6.js?runtimeJsUrl=${htmlState.runtimeJsUrlEncoded}
const { Env } = await import(new URL(import.meta.url).searchParams.get("runtimeJsUrl"))

console.log(Env.container)

File access: Use Res.getUri() to inject files/images into your HTML source

Limitations:

Alpha and scale graphic transformations to this composable or parent composable cannot be automatically applied to the HTML. This includes transformations that occur as a result of animations. In order to apply alpha and scale transformations, they must be applied directly to the HTML DOM elements via HtmlState.
Accessibility will not flow naturally as the DOM elements are outside the canvas.
Using iframe will prevent scrolling while hovering over the iframe. This is due to iframes not bubbling their events up to any parent documents.
Popups will not render over HTML content.

Parameters

state

The state for the Html. This provides access to the created DOM nodes used and provides some helper functions for dispatching and listening to events. Note: If your compose viewport is not document.body, you will need to specify the compose viewport element. This is required to proxy all touch and key events to the primary canvas generated by compose.

inlineJs

returns a JavaScript string to be injected into the HTML. This function only runs once unless the HtmlState changes.

scripts

An array of JavaScript module URLs to load.

html

returns the HTML string to be injected. This function only runs once unless the HtmlState changes. Any dynamic changes will need to be done via JavaScript.