For integrating with web apps

For example if a consuming app is built on a namespaced bootstrap (we could also take bootstrap namespace as a config option), the global classNames won't have any effect.

Example implementation:

export const bs4test = () => {
	const el = document.createElement("div");

	el.setAttribute("style", "display: block;");
	el.setAttribute("class", "d-inline");
	
	document.body.appendChild(el);
	const result = (getComputedStyle(el) === "inline");
	document.body.removeChild(el);

	return result;
}

API layers, bottom to top

React hooks

Connects you to runly data, bring your own components, styles etc

import { useRun } from "@runly/js";

const myRun = useRun(runId);

const myRunWithSideEffects = useRun({
	runId: runId2,
	onChange: interestedSubscriber
});

React components

Provides components, theme context.

classNames styling is implemented with JSS, inline styles are passed through.
some props can accept functions which are provided with the same data returned from hooks at that scope.

Instead of providing a 'bare-bones' style in a public API, consider this the shared conventions for the themed components outlined next.

import { RunStatus } from "@runly/react";

const stylesStatic = {
	failureBar: { background: "#f60" }
}

const stylesDynamic = runProps => {
	return {
		failureBar: {
			// do stuff like get redder if there's more fails
		}
	}
}

ReactDOM.render(
	<>
		<style>{
			`
				.runly-success-bar {
					background: #0f0;
				}
			`
		}</style>
		<RunStatus
			runId={runid}
			onChange={interestedSubscriber}
			classNames={{ successBar: "runly-success-bar" }}
			styles={stylesDynamic} />
	</>,
	document.body);

Pre-themed React

Provides pre-styled components for bootstrap, material, …, bulma, foundation etc.
full component API is still available for customization.

import { RunStatus } from "@runly/react-bootstrap";

Otherwise same API as components above.

Global vanilla JS

exposes a global Runly constructor which is initialized manually.
this is for people who don't want to add React/JSX etc to their build, or even have a build for their frontend at all, but still know some js.
For example, injecting some Runly components into a dynamic app that uses jQuery.
defers loading of libraries, components etc as long as possible unless init method is called.

<script src="cdnUrl"></script>

or

import Runly from "@runly/js";

const defaultConfig = runly.config(); // default config obj
const { isInitialized } = Runly; // false


const runly = new Runly();

runly.config({
	theme: "bootstrap",
	styles: {
		successBar: {
			outline: "3px solid #0f0"
		}
	}
});

// also scans dom for data attributes. Or maybe this should be refresh or update?
Runly.init();

HTML

Once the DOM is ready, data-runly-* attributes are converted to a config object for Runly#config, then Runly#init is called. Portion of data attribute after data-runly- is split on dashes and converted to a path to be set on the config object. If a match is not found in the default config, log a warning. Before paths from attribute are assigned to the object, they are sorted on path depth ascending. This allows setting the config to arbitrary depths with json/object notation, but deeper attributes to take precedence, like selector specificity.

<script src="cdnUrl"></script>
<style>
	.runly-failure-bar {
		outline: 1px dotted currentColor;
	}
	.runly-success-bar {
		text-shadow: 1px 1px 0 #000;
	}
</style>
<div data-runly-runId="runId" data-runly-classNames="{ 'failureBar': 'runly-failure-bar'  }" data-runly-classNames-successBar="runly-success-bar"></div>

accept locale prop and use appropriate language in public js components. detect if not passed.