jailedthreejs 0.9.2-beta.0

package/README.md

@@ -0,0 +1,141 @@
+# JailedThreeJS
+
+CSS-first scaffolding for Three.js. Drop a `<cell>` on the page, describe your scene in HTML, tweak it with CSS custom properties, sprinkle behaviour with plain JS. The engine does the wiring (renderer, cameras, raycasters, resize handling) so you can stay inside web platform muscle memory.
+
+---
+
+## TL;DR
+
+- **Structure**: Every tag under a `<cell>` becomes its matching `THREE.Object3D` (`<mesh>`, `<group>`, `<perspectivecamera>`, `<axeshelper>`, …).
+- **Style**: Custom properties map to object state: `--position`, `--rotation`, `--scale`, `--geometry`, `--material-color`, `--transition`, etc.
+- **Interact**: Native DOM events (`onclick`, `onmouseover`, `ondblclick`, `oncontextmenu`, …) and pseudo-classes (`:hover`, `:focus`, `:active`) work on meshes.
+- **Animate**: Declare transitions or CSS `@keyframes` and the painter lerps the underlying Three.js values.
+- **Assets**: Reference built-ins (`@cube`, `@plane`, `@sphere`, `@torus`) or define custom `@asset` rules that fetch GLTF/GLB/FBX/textures/audio.
+- **API access**: You can always grab the underlying `Cell`/`THREE.Object3D` to run imperative code when needed.
+
+> Philosophy: embrace HTML for structure, CSS for look, JS for intent. No DSLs, no scene JSON. When you want raw Three.js, it’s still there.
+
+---
+
+## Installation
+
+The repo ships as ES modules. Point your bundler (or `<script type="module">`) to the `src/module` folder.
+
+```html
+<script type="module">
+  import { JThree } from './module/index.js';
+  // All <cell> elements are converted on import.
+</script>
+```
+
+If you add cells later (e.g. via a framework), call `JThree.init_convert()` to rescan the DOM.
+
+---
+
+## Quick start
+
+```html
+<cell id="demo" style="display:block;width:560px;height:320px;background:#05070f">
+  <perspectivecamera render></perspectivecamera>
+  <mesh id="box" class="box" onclick="spin(this)"></mesh>
+</cell>
+
+<style>
+  .box {
+    --geometry: @cube;
+    --position: (0,0,-5);
+    --scale: (1,1,1);
+    --material-color: (0.8,0.2,0.2);
+    --transition: 400ms ease-in-out;
+  }
+  .box:hover  { --material-color: (0.2,0.8,0.9); }
+  .box:active { --scale: (1.2,1.2,1.2); }
+</style>
+
+<script type="module">
+  import { Cell } from './module/index.js';
+  const cell = Cell.getCell(document.getElementById('demo'));
+  const box  = cell.getConvictById('box');
+
+  cell.addUpdateFunction(function () { box.rotation.y += 0.01; });
+  window.spin = (mesh) => mesh.style.setProperty('--rotation-y', box.rotation.y + Math.PI);
+</script>
+```
+
+That is the entire scene: no manual `WebGLRenderer`, no raycaster setup, no resize bookkeeping.
+
+---
+
+## Styling cheat sheet
+
+| Purpose            | Custom property examples                                                       |
+|--------------------|--------------------------------------------------------------------------------|
+| Transform          | `--position: (x,y,z)` · `--rotation: (radX,radY,radZ)` · `--scale: (sx,sy,sz)` |
+| Geometry/material  | `--geometry: @cube` · `--material-color: (r,g,b)` · `--material-roughness: 0.5` |
+| Cameras            | `--fov` · `--near` · `--far` · `--aspect` (auto-updated unless overridden)     |
+| Lights             | `--intensity` · `--distance` · `--color` · `--decay`                          |
+| Transitions        | `--transition: 300ms ease` (or set `object.transition = { duration, timing }`) |
+| Animations         | Use CSS `@keyframes` where frames set the same custom props.                   |
+| Assets             | `--geometry: @MySpaceship` (load via `@MySpaceship { url: './ship.glb'; }`)   |
+
+> Any custom property prefixed with `--` is forwarded to the object through a best-effort parser (numbers/arrays/assets/refs). Unknown props are ignored with a console warning.
+
+---
+
+## Runtime API
+
+| API                 | Description                                                                                                       |
+|---------------------|-------------------------------------------------------------------------------------------------------------------|
+| `JThree.init_convert()` | Rescan the DOM for `<cell>` tags and boot them. Automatically run once on import.                            |
+| `Cell.getCell(element)` | Retrieve the `Cell` controller attached to a `<cell>` DOM node.                                                |
+| `cell.addUpdateFunction(fn)` | Register a per-frame callback (runs inside the render loop).                                            |
+| `cell.getConvictById(id)` / `getConvictByDom(dom)` | Fetch the underlying `THREE.Object3D` created for a DOM element.               |
+| `cell.getConvictsByClass(cls)` | Batch lookup by class name (mirrors `document.getElementsByClassName`).                                 |
+| `cell.removeConvict(object)` | Remove an object and clean up book-keeping.                                                              |
+| `object.transition = { duration, timing }` | Enable JS-driven interpolation for subsequent style changes.                           |
+| `object.animation = { name, duration, iteration }` | Apply a CSS `@keyframes` animation to an object’s custom props.                 |
+
+You always have access to the raw `THREE.Object3D` instance (`convict`). Use it for low-level operations, loaders, shaders, etc.
+
+---
+
+## Events & pseudo-classes
+
+- Add DOM event attributes (`onclick`, `onmouseover`, `ondblclick`, `onmousedown`, `onmouseup`, `oncontextmenu`). They receive a synthetic event with `{ target3d, targetCell, pointerPosition, originalEvt }`.
+- Use CSS pseudo-classes (`:hover`, `:focus`, `:active`). The runtime keeps class flags in sync with pointer/click states and repaints affected objects.
+- `object.layers` is managed automatically: pickable meshes are moved to layer 3 only when they need interaction, saving raycast cost.
+
+---
+
+## Assets & `@rules`
+
+Declare assets in CSS alongside the rest of your styles:
+
+```css
+@MySpaceship {
+  url: "./models/ship.glb";
+}
+
+.hero {
+  --geometry: @MySpaceship;
+  --position: (0,0,-10);
+}
+```
+
+First time the painter sees `@MySpaceship`, it loads the GLB (or FBX, texture, audio, material JSON), caches it, and applies it wherever referenced. Built-ins `@cube`, `@sphere`, `@plane`, and `@torus` ship for quick sketches.
+
+---
+
+
+## Tips & gotchas
+
+- **Inline styles vs stylesheet rules**: inline `style=""` attributes on `<mesh>` nodes work the same as CSS rules. The painter merges them in the order: base class → id → pseudo-class → inline.
+- **Transitions**: if you define `object.transition`, only numeric/array props are animated. Non-numeric values (like `@asset` references) swap instantly.
+- **Async assets**: `--geometry: @MyGLTF` assigns a promise until the loader resolves. The painter applies final values when the promise settles; don’t mutate those props synchronously.
+- **Cleanup**: If you inject scripts that schedule loops/intervals, register a cleanup handler via `registerSceneCleanup(fn)` so the editor or export can dispose them reliably.
+
+---
+
+## License
+
+MIT © 2025. Use it in games, demos, dashboards, art toys, education—wherever CSS-driven 3D makes sense. Contributions welcome! 

package/dist/NoScope.js

@@ -0,0 +1,208 @@
+// NoScope.js
+//
+// Centralised event handling.
+// Shared THREE.Raycaster + NDC pointer for all cells; all pickable
+// objects live on layer 3.
+
+import * as THREE from 'three';
+import { paintExtraCell, paintSpecificMuse } from './artist.js';
+import { fastRemove_arry } from './utils.js';
+
+const raycaster = new THREE.Raycaster();
+const ndcPointer = new THREE.Vector2();
+
+// Only objects on layer 3 are considered pickable.
+raycaster.layers.set(3);
+
+/* Flag helpers */
+
+function addFlag(arr, flag) {
+  if (!arr.includes(flag)) arr.push(flag);
+}
+
+function delFlag(arr, flag) {
+  fastRemove_arry(arr, flag);
+}
+
+/* Public handlers */
+
+export function default_onCellClick_method(domEvt, cell) {
+  const hit = cell._last_cast_caught;
+  if (!hit) return;
+
+  addFlag(hit.userData.extraParams, ':focus');
+
+  const synth = {
+    type: 'cellclick',
+    originalEvt: domEvt,
+    target3d: hit,
+    targetCell: cell,
+    targetElement: hit.userData.domEl,
+    pointerPosition: cell._lastHitPosition
+  };
+
+  hit.userData.domEl.onclick?.call(hit.userData.domEl, synth);
+  paintExtraCell(cell);
+}
+
+export function default_onCellPointerMove_method(domEvt, cell) {
+  if (!cell.focusedCamera) return;
+
+  _raycast(domEvt, cell.focusedCamera, cell.cellElm);
+
+  const hitResult = raycaster.intersectObjects(cell.loadedScene.children, true)[0];
+  const lastHit = cell._last_cast_caught;
+
+  if (hitResult) {
+    const hitObject = hitResult.object;
+
+    if (hitObject !== lastHit) {
+      if (lastHit) {
+        delFlag(lastHit.userData.extraParams, ':hover');
+        lastHit.userData.domEl.onmouseleave?.call(lastHit.userData.domEl, {
+          type: 'cellmouseleave',
+          originalEvt: domEvt,
+          target3d: lastHit,
+          targetCell: cell,
+          targetElement: lastHit.userData.domEl,
+          pointerPosition: cell._lastHitPosition
+        });
+        paintSpecificMuse(lastHit);
+      }
+
+      cell._last_cast_caught = hitObject;
+
+      hitObject.userData.domEl.onmouseenter?.call(hitObject.userData.domEl, {
+        type: 'cellmouseenter',
+        originalEvt: domEvt,
+        target3d: hitObject,
+        targetCell: cell,
+        targetElement: hitObject.userData.domEl,
+        pointerPosition: hitResult.point
+      });
+    }
+
+    addFlag(hitObject.userData.extraParams, ':hover');
+    cell._lastHitPosition = hitResult.point;
+
+    hitObject.userData.domEl.onmouseover?.call(hitObject.userData.domEl, {
+      type: 'cellhover',
+      originalEvt: domEvt,
+      target3d: hitObject,
+      targetCell: cell,
+      targetElement: hitObject.userData.domEl,
+      pointerPosition: hitResult.point
+    });
+
+    paintExtraCell(cell);
+  } else if (lastHit) {
+    delFlag(lastHit.userData.extraParams, ':hover');
+    lastHit.userData.domEl.onmouseleave?.call(lastHit.userData.domEl, {
+      type: 'cellmouseleave',
+      originalEvt: domEvt,
+      target3d: lastHit,
+      targetCell: cell,
+      targetElement: lastHit.userData.domEl,
+      pointerPosition: cell._lastHitPosition
+    });
+    paintSpecificMuse(lastHit);
+    cell._last_cast_caught = null;
+  }
+}
+
+export function default_onCellMouseDown_method(domEvt, cell) {
+  const hit = cell._last_cast_caught;
+  if (!hit) return;
+
+  addFlag(hit.userData.extraParams, ':active');
+
+  const synth = {
+    type: 'celldown',
+    originalEvt: domEvt,
+    target3d: hit,
+    targetCell: cell,
+    targetElement: hit.userData.domEl,
+    pointerPosition: cell._lastHitPosition
+  };
+
+  hit.userData.domEl.onmousedown?.call(hit.userData.domEl, synth);
+  paintExtraCell(cell);
+}
+
+export function default_onCellMouseUp_method(domEvt, cell) {
+  const hit = cell._last_cast_caught;
+  if (!hit) return;
+
+  delFlag(hit.userData.extraParams, ':active');
+
+  const synth = {
+    type: 'cellup',
+    originalEvt: domEvt,
+    target3d: hit,
+    targetCell: cell,
+    targetElement: hit.userData.domEl,
+    pointerPosition: cell._lastHitPosition
+  };
+
+  hit.userData.domEl.onmouseup?.call(hit.userData.domEl, synth);
+  paintExtraCell(cell);
+}
+
+export function default_onCellDoubleClick_method(domEvt, cell) {
+  const hit = cell._last_cast_caught;
+  if (!hit) return;
+
+  addFlag(hit.userData.extraParams, ':focus');
+
+  const synth = {
+    type: 'celldblclick',
+    originalEvt: domEvt,
+    target3d: hit,
+    targetCell: cell,
+    targetElement: hit.userData.domEl,
+    pointerPosition: cell._lastHitPosition
+  };
+
+  hit.userData.domEl.ondblclick?.call(hit.userData.domEl, synth);
+  paintExtraCell(cell);
+}
+
+export function default_onCellContextMenu_method(domEvt, cell) {
+  const hit = cell._last_cast_caught;
+  if (!hit) return;
+
+  const synth = {
+    type: 'cellcontextmenu',
+    originalEvt: domEvt,
+    target3d: hit,
+    targetCell: cell,
+    targetElement: hit.userData.domEl,
+    pointerPosition: cell._lastHitPosition
+  };
+
+  hit.userData.domEl.oncontextmenu?.call(hit.userData.domEl, synth);
+  paintExtraCell(cell);
+}
+
+/* Internal raycast helper */
+
+/**
+ * @param {MouseEvent} domEvt
+ * @param {THREE.Camera} camera
+ * @param {HTMLElement} referenceEl
+ */
+function _raycast(domEvt, camera, referenceEl) {
+  if (!camera) return;
+
+  const targetEl = referenceEl || domEvt.currentTarget || domEvt.target;
+  const rect = targetEl.getBoundingClientRect();
+
+  camera.updateMatrixWorld();
+
+  ndcPointer.set(
+    ((domEvt.clientX - rect.left) / rect.width) * 2 - 1,
+    (-(domEvt.clientY - rect.top) / rect.height) * 2 + 1
+  );
+
+  raycaster.setFromCamera(ndcPointer, camera);
+}

package/dist/Train.js

@@ -0,0 +1,349 @@
+// Train.js
+//
+// Interpolation / animation helpers used by JailedThreeJS.
+// - Numeric lerping
+// - Cubic-bezier easing
+// - Generic value interpolation (numbers + arrays)
+// - Time-based transitions over JS values
+// - CSS keyframe-driven animation for custom props
+
+import { exchange_rule, deep_searchParms, CSSValueTo3JSValue } from './artist.js';
+import { getAnimationMap } from './utils.js';
+
+/**
+ * Linearly interpolate between two numbers.
+ * @param {number} a
+ * @param {number} b
+ * @param {number} t in [0, 1]
+ */
+export function lerpNumber(a, b, t) {
+  return a + (b - a) * t;
+}
+
+/**
+ * Interpolate arrays with tolerant length handling.
+ *
+ * Length rule:
+ * - For indices where both arrays have a value → lerp them.
+ * - For indices that exist only in `from` → keep `from[i]`.
+ * - For indices that exist only in `to`   → keep `to[i]`.
+ *
+ * Example:
+ *   [x1,y1,z1,q1] → [x2,y2,z2]
+ *   ==>
+ *   [lerp(x1,x2), lerp(y1,y2), lerp(z1,z2), q1]
+ *
+ * @param {Array<number>} from
+ * @param {Array<number>} to
+ * @param {number} t
+ * @param {(a:number,b:number,t:number)=>number} lerpMethod
+ */
+function lerpArray(from, to, t, lerpMethod) {
+  const maxLen = Math.max(from.length, to.length);
+  const out = new Array(maxLen);
+  for (let i = 0; i < maxLen; i++) {
+    const hasFrom = i < from.length;
+    const hasTo = i < to.length;
+    if (hasFrom && hasTo) {
+      out[i] = lerpMethod(from[i], to[i], t);
+    } else if (hasFrom) {
+      out[i] = from[i];
+    } else {
+      out[i] = to[i];
+    }
+  }
+  return out;
+}
+
+/**
+ * Interpolate numbers or arrays using the provided lerp method.
+ *
+ * @param {number|Array<number>} from
+ * @param {number|Array<number>} to
+ * @param {number} t
+ * @param {(a:number,b:number,t:number)=>number} lerpMethod
+ */
+export function lerpValue(from, to, t, lerpMethod = lerpNumber) {
+  const isNum = v => typeof v === 'number';
+  const isArr = Array.isArray;
+
+  if (isNum(from) && isNum(to)) {
+    return lerpMethod(from, to, t);
+  }
+  if (isArr(from) && isArr(to)) {
+    return lerpArray(from, to, t, lerpMethod);
+  }
+  // Mixed or unsupported types: just return `to` instantly.
+  return to;
+}
+
+/**
+ * Create a cubic-bezier easing function.
+ * Implementation adapted from https://github.com/gre/bezier-easing
+ */
+function cubicBezier(p0, p1, p2, p3) {
+  const cx = 3 * p0;
+  const bx = 3 * (p2 - p0) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * p1;
+  const by = 3 * (p3 - p1) - cy;
+  const ay = 1 - cy - by;
+
+  function sampleCurveX(t) {
+    return ((ax * t + bx) * t + cx) * t;
+  }
+  function sampleCurveY(t) {
+    return ((ay * t + by) * t + cy) * t;
+  }
+  function sampleCurveDerivativeX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx;
+  }
+  function solveTforX(x) {
+    let t = x;
+    for (let i = 0; i < 4; i++) {
+      const dx = sampleCurveX(t) - x;
+      if (Math.abs(dx) < 1e-6) return t;
+      t -= dx / sampleCurveDerivativeX(t);
+    }
+    return t;
+  }
+  return x => sampleCurveY(solveTforX(x));
+}
+
+/**
+ * Resolve an easing function from a CSS timing function string.
+ *
+ * @param {string} timingFunction
+ * @returns {(t:number)=>number}
+ */
+function _get_Equation(timingFunction) {
+  switch (timingFunction) {
+    case 'linear':
+      return t => t;
+    case 'ease':
+      return cubicBezier(0.25, 0.1, 0.25, 1.0);
+    case 'ease-in':
+      return cubicBezier(0.42, 0, 1.0, 1.0);
+    case 'ease-out':
+      return cubicBezier(0, 0, 0.58, 1.0);
+    case 'ease-in-out':
+      return cubicBezier(0.42, 0, 0.58, 1.0);
+    default:
+      break;
+  }
+
+  if (typeof timingFunction === 'string' && timingFunction.startsWith('cubic-bezier')) {
+    const match = timingFunction.match(/cubic-bezier\(([^)]+)\)/);
+    if (match) {
+      const nums = match[1]
+        .split(/[, ]+/)
+        .map(Number)
+        .filter(n => !Number.isNaN(n));
+      if (nums.length === 4) {
+        return cubicBezier(nums[0], nums[1], nums[2], nums[3]);
+      }
+    }
+  }
+
+  // Fallback to linear on garbage.
+  return t => t;
+}
+
+/**
+ * Animate between two values over time.
+ *
+ * - Supports numbers and arrays (arrays follow the tolerant rule above).
+ * - Non-animatable values resolve instantly (onUpdate + onComplete with `to`).
+ *
+ * @param {number|Array<number>} from
+ * @param {number|Array<number>} to
+ * @param {number} durationMs
+ * @param {(value:any, easedT:number) => void} onUpdate
+ * @param {(finalValue:any) => void} [onComplete]
+ * @param {string} [timingFunction='linear']
+ */
+export function animateLerp(
+  from,
+  to,
+  durationMs,
+  onUpdate,
+  onComplete,
+  timingFunction = 'linear'
+) {
+  const isAnimatable = v =>
+    typeof v === 'number' || Array.isArray(v);
+
+  const finishInstant = () => {
+    if (onUpdate) onUpdate(to, 1);
+    if (onComplete) onComplete(to);
+  };
+
+  if (!isAnimatable(from) || !isAnimatable(to)) {
+    finishInstant();
+    return;
+  }
+
+  if (!Number.isFinite(durationMs) || durationMs <= 0) {
+    finishInstant();
+    return;
+  }
+
+  const start = performance.now();
+  const ease = _get_Equation(timingFunction);
+
+  function step(now) {
+    let t = (now - start) / durationMs;
+    if (t >= 1) t = 1;
+    const easedT = ease(t);
+    const value = lerpValue(from, to, easedT, lerpNumber);
+    if (onUpdate) onUpdate(value, easedT);
+    if (t < 1) {
+      requestAnimationFrame(step);
+    } else if (onComplete) {
+      onComplete(value);
+    }
+  }
+
+  requestAnimationFrame(step);
+}
+
+/**
+ * Parse a keyframe time string into milliseconds.
+ *
+ * Supports:
+ * - 'from' / 'to'
+ * - percentages ('0%', '50%', '100%')
+ * - '123ms'
+ * - bare numbers treated as ms
+ *
+ * @param {string} keyText
+ * @param {number} totalDuration
+ */
+function parseKeyframeTime(keyText, totalDuration) {
+  if (!keyText) return 0;
+  const text = String(keyText).trim().toLowerCase();
+
+  if (text === 'from') return 0;
+  if (text === 'to') return totalDuration;
+
+  if (text.endsWith('%')) {
+    const v = parseFloat(text);
+    return Number.isFinite(v) ? (v / 100) * totalDuration : 0;
+  }
+  if (text.endsWith('ms')) {
+    const v = parseFloat(text);
+    return Number.isFinite(v) ? v : 0;
+  }
+  const n = Number(text);
+  return Number.isFinite(n) ? n : 0;
+}
+
+/**
+ * Apply a CSS @keyframes animation to a Three.js object.
+ *
+ * @param {THREE.Object3D} object
+ * @param {{
+ *   name: string,
+ *   duration: number,
+ *   timing?: { fun?: string },
+ *   iteration?: { count?: number | string }
+ * }} animationObj
+ */
+export async function KeyFrameAnimationLerp(object, animationObj) {
+  if (!object || !animationObj?.name || !animationObj?.duration) return;
+
+  const keyFramesRule = getAnimationMap(animationObj.name);
+  if (!keyFramesRule || !keyFramesRule.cssRules) {
+    console.error(`Animation "${animationObj.name}" not found or has no rules.`);
+    return;
+  }
+
+  const duration = animationObj.duration;
+
+  const rules = Array.from(keyFramesRule.cssRules).slice();
+  rules.sort(
+    (a, b) =>
+      parseKeyframeTime(a.keyText, duration) -
+      parseKeyframeTime(b.keyText, duration)
+  );
+
+  const runOnce = async () => {
+    for (let i = 0; i < rules.length - 1; i++) {
+      const fromRule = rules[i];
+      const toRule = rules[i + 1];
+      const t0 = parseKeyframeTime(fromRule.keyText, duration);
+      const t1 = parseKeyframeTime(toRule.keyText, duration);
+      const segmentMs = t1 - t0;
+      if (segmentMs <= 0) continue;
+
+      const fromProps = {};
+      const toProps = {};
+
+      // Collect animatable custom props from "from" frame
+      for (const propName of fromRule.style) {
+        const raw = fromRule.style.getPropertyValue(propName);
+        // custom props are expected to be `--foo-bar`
+        if (!propName.startsWith('--')) continue;
+        fromProps[propName.slice(2)] = CSSValueTo3JSValue(raw, object);
+      }
+
+      // Collect matching props from "to" frame
+      for (const propName of toRule.style) {
+        const raw = toRule.style.getPropertyValue(propName);
+        if (!propName.startsWith('--')) continue;
+        toProps[propName.slice(2)] = CSSValueTo3JSValue(raw, object);
+      }
+
+      const keys = Object.keys(fromProps).filter(k => k in toProps);
+      if (!keys.length) continue;
+
+      await Promise.all(
+        keys.map(key => {
+          const fromVal = fromProps[key];
+          const toVal = toProps[key];
+
+          // Resolve async assets before animating.
+          const resolveValue = v =>
+            (v && typeof v.then === 'function')
+              ? v
+              : Promise.resolve(v);
+
+          return Promise.all([resolveValue(fromVal), resolveValue(toVal)])
+            .then(([resolvedFrom, resolvedTo]) => new Promise(resolve => {
+              animateLerp(
+                resolvedFrom,
+                resolvedTo,
+                segmentMs,
+                v => {
+                  const { parent, key: finalKey } = deep_searchParms(object, key.split('-'));
+                  exchange_rule(parent, finalKey, v);
+                },
+                resolve,
+                animationObj.timing?.fun || 'linear'
+              );
+            }));
+        })
+      );
+    }
+  };
+
+  let iterationCount = animationObj.iteration?.count ?? 1;
+  if (iterationCount === 'infinity' || iterationCount === 'infinite') {
+    iterationCount = Infinity;
+  }
+
+  if (iterationCount === Infinity) {
+    // infinite loop – deliberately never resolves
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      // eslint-disable-next-line no-await-in-loop
+      await runOnce();
+    }
+  } else {
+    const total = Number(iterationCount) || 1;
+    for (let i = 0; i < total; i++) {
+      // eslint-disable-next-line no-await-in-loop
+      await runOnce();
+    }
+  }
+}