@mml-io/mml-web-runner 0.0.0-experimental-edf5cd7-20250120

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023 Improbable MV Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# MML Web Runner
+#### `@mml-io/mml-web-runner`
+
+[![npm version](https://img.shields.io/npm/v/@mml-io/mml-web-runner.svg?style=flat)](https://www.npmjs.com/package/@mml-io/mml-web-runner)
+
+This package contains classes that provide a simple way to run a `NetworkedDOM | EditableNetworkedDOM` instance in a browser and connect it directly to an `MMLScene`.
+
+This functionality allows running MML content directly in a browser as if it were on a server from the local client's perspective. 
+
+You can connect multiple `MMLWebRunnerClient`s to the same `NetworkedDOM | EditableNetworkedDOM` instance and they will all see the same content.
+
+It directly exports the exports of the `@mml-io/networked-dom-web-runner` package to simplify the MML-based usage of what is otherwise NetworkedDOM functionality. 
+
+## Example Usage
+
+```typescript
+import { IframeWrapper, MMLScene, registerCustomElementsToWindow } from "@mml-io/mml-web";
+import {
+  EditableNetworkedDOM,
+  IframeObservableDOMFactory,
+  MMLWebRunnerClient,
+} from "@mml-io/mml-web-runner";
+import {
+  StandaloneThreeJSAdapter,
+  StandaloneThreeJSAdapterControlsType,
+} from "@mml-io/mml-web-threejs-standalone";
+
+window.addEventListener("DOMContentLoaded", async () => {
+  // Create an iframe to isolate the MML content from the rest of the page
+  const { iframeWindow, iframeBody } = await IframeWrapper.create();
+
+  // Register the MML custom elements to the iframe window
+  registerCustomElementsToWindow(iframeWindow);
+
+  // Create a networked DOM document which acts as the "server" for the MML content
+  const networkedDOMDocument = new EditableNetworkedDOM(
+    "http://example.com/index.html",
+    IframeObservableDOMFactory,
+    true,
+  );
+  /*
+   Load MML content. It can run `<script>` tags and they'll execute in an
+   isolated iframe context.
+
+   `load()` can be called multiple times and the clients will be updated.
+  */
+  networkedDOMDocument.load(`
+<m-cube color="red" id="my-cube"></m-cube>
+<m-light x="1" y="2" z="3" intensity="50" type="point"></m-light>
+`);
+
+  // Create an element to render the MML content
+  const clientElement = document.createElement("div");
+  clientElement.style.position = "relative";
+  clientElement.style.backgroundColor = "gray";
+  clientElement.style.width = "400px";
+  clientElement.style.height = "400px";
+  document.body.append(clientElement);
+
+  // Create an MML scene which will contain the MML content that the client will view
+  const mmlScene = new MMLScene(clientElement);
+
+  // Create a client that will connect to the NetworkedDOM document and synchronize it to the MML scene
+  const client = new MMLWebRunnerClient(iframeWindow, iframeBody, mmlScene);
+
+  // Create a graphics adapter that will render the MML content from the MMLScene using ThreeJS
+  const graphicsAdapter = await StandaloneThreeJSAdapter.create(clientElement, {
+    controlsType: StandaloneThreeJSAdapterControlsType.DragFly,
+  });
+  // Initialize the MML scene with the graphics adapter
+  mmlScene.init(graphicsAdapter);
+
+  // Connect the client to the NetworkedDOM document to get the MML content
+  client.connect(networkedDOMDocument);
+});
+```

package/build/MMLWebRunnerClient.d.ts

@@ -0,0 +1,20 @@
+import { GraphicsAdapter, IMMLScene } from "@mml-io/mml-web";
+import { EditableNetworkedDOM, NetworkedDOM } from "@mml-io/networked-dom-document";
+/**
+ * The MMLWebRunnerClient class can be used to view and interact with a NetworkedDOM document instance that is available
+ * directly in the browser (rather than exposed over the network). This is useful for usage modes where the document
+ * does not need to be available to other clients, such as a single-user or an edit/preview mode.
+ *
+ * The class takes arguments for where the view of the document should be synchronized to in the DOM, and which window
+ * instance to use to create any other elements (to allow for using iframes to isolate the document from the rest of
+ * the page).
+ */
+export declare class MMLWebRunnerClient {
+    private windowTarget;
+    private remoteHolderElement;
+    private mmlScene;
+    private connectedState;
+    constructor(windowTarget: Window, remoteHolderElement: HTMLElement, mmlScene: IMMLScene<GraphicsAdapter>);
+    dispose(): void;
+    connect(document: NetworkedDOM | EditableNetworkedDOM): void;
+}

package/build/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MMLWebRunnerClient";
+export * from "@mml-io/networked-dom-web-runner";

package/build/index.js

@@ -0,0 +1,58 @@
+// src/MMLWebRunnerClient.ts
+import { RemoteDocumentWrapper } from "@mml-io/mml-web";
+import { NetworkedDOMWebRunnerClient } from "@mml-io/networked-dom-web-runner";
+var MMLWebRunnerClient = class {
+  constructor(windowTarget, remoteHolderElement, mmlScene) {
+    this.windowTarget = windowTarget;
+    this.remoteHolderElement = remoteHolderElement;
+    this.mmlScene = mmlScene;
+    this.connectedState = null;
+  }
+  dispose() {
+    if (!this.connectedState) {
+      return;
+    }
+    this.connectedState.networkedDOMWebRunnerClient.dispose();
+    this.connectedState = null;
+  }
+  connect(document) {
+    let overriddenHandler = null;
+    const eventHandler = (element, event) => {
+      if (!overriddenHandler) {
+        throw new Error("overriddenHandler not set");
+      }
+      overriddenHandler(element, event);
+    };
+    const remoteDocumentWrapper = new RemoteDocumentWrapper(
+      window.location.href,
+      this.windowTarget,
+      this.mmlScene,
+      eventHandler
+    );
+    this.remoteHolderElement.append(remoteDocumentWrapper.remoteDocument);
+    overriddenHandler = (element, event) => {
+      if (!networkedDOMWebRunnerClient.connectedState) {
+        throw new Error("connectedState not set");
+      }
+      networkedDOMWebRunnerClient.connectedState.domWebsocket.handleEvent(element, event);
+    };
+    const networkedDOMWebRunnerClient = new NetworkedDOMWebRunnerClient(
+      false,
+      remoteDocumentWrapper.remoteDocument
+    );
+    networkedDOMWebRunnerClient.connect(document, (time) => {
+      remoteDocumentWrapper.setDocumentTime(time);
+    });
+    this.connectedState = {
+      networkedDOMWebRunnerClient,
+      remoteDocumentWrapper
+    };
+  }
+};
+
+// src/index.ts
+export * from "@mml-io/networked-dom-web-runner";
+export {
+  MMLWebRunnerClient
+};
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/MMLWebRunnerClient.ts", "../src/index.ts"],
+  "sourcesContent": ["import { GraphicsAdapter, IMMLScene, RemoteDocumentWrapper } from \"@mml-io/mml-web\";\nimport { EditableNetworkedDOM, NetworkedDOM } from \"@mml-io/networked-dom-document\";\nimport { NetworkedDOMWebRunnerClient } from \"@mml-io/networked-dom-web-runner\";\n\n/**\n * The MMLWebRunnerClient class can be used to view and interact with a NetworkedDOM document instance that is available\n * directly in the browser (rather than exposed over the network). This is useful for usage modes where the document\n * does not need to be available to other clients, such as a single-user or an edit/preview mode.\n *\n * The class takes arguments for where the view of the document should be synchronized to in the DOM, and which window\n * instance to use to create any other elements (to allow for using iframes to isolate the document from the rest of\n * the page).\n */\nexport class MMLWebRunnerClient {\n  private connectedState: {\n    networkedDOMWebRunnerClient: NetworkedDOMWebRunnerClient;\n    remoteDocumentWrapper: RemoteDocumentWrapper<GraphicsAdapter>;\n  } | null = null;\n\n  constructor(\n    private windowTarget: Window,\n    private remoteHolderElement: HTMLElement,\n    private mmlScene: IMMLScene<GraphicsAdapter>,\n  ) {}\n\n  public dispose() {\n    if (!this.connectedState) {\n      return;\n    }\n    this.connectedState.networkedDOMWebRunnerClient.dispose();\n    this.connectedState = null;\n  }\n\n  public connect(document: NetworkedDOM | EditableNetworkedDOM) {\n    let overriddenHandler: ((element: HTMLElement, event: CustomEvent) => void) | null = null;\n    const eventHandler = (element: HTMLElement, event: CustomEvent) => {\n      if (!overriddenHandler) {\n        throw new Error(\"overriddenHandler not set\");\n      }\n      overriddenHandler(element, event);\n    };\n    const remoteDocumentWrapper = new RemoteDocumentWrapper(\n      window.location.href,\n      this.windowTarget,\n      this.mmlScene,\n      eventHandler,\n    );\n    this.remoteHolderElement.append(remoteDocumentWrapper.remoteDocument);\n    overriddenHandler = (element: HTMLElement, event: CustomEvent) => {\n      if (!networkedDOMWebRunnerClient.connectedState) {\n        throw new Error(\"connectedState not set\");\n      }\n      networkedDOMWebRunnerClient.connectedState.domWebsocket.handleEvent(element, event);\n    };\n\n    const networkedDOMWebRunnerClient = new NetworkedDOMWebRunnerClient(\n      false,\n      remoteDocumentWrapper.remoteDocument,\n    );\n    networkedDOMWebRunnerClient.connect(document, (time: number) => {\n      remoteDocumentWrapper.setDocumentTime(time);\n    });\n    this.connectedState = {\n      networkedDOMWebRunnerClient,\n      remoteDocumentWrapper,\n    };\n  }\n}\n", "export * from \"./MMLWebRunnerClient\";\nexport * from \"@mml-io/networked-dom-web-runner\";\n"],
+  "mappings": ";AAAA,SAAqC,6BAA6B;AAElE,SAAS,mCAAmC;AAWrC,IAAM,qBAAN,MAAyB;AAAA,EAM9B,YACU,cACA,qBACA,UACR;AAHQ;AACA;AACA;AARV,SAAQ,iBAGG;AAAA,EAMR;AAAA,EAEI,UAAU;AACf,QAAI,CAAC,KAAK,gBAAgB;AACxB;AAAA,IACF;AACA,SAAK,eAAe,4BAA4B,QAAQ;AACxD,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEO,QAAQ,UAA+C;AAC5D,QAAI,oBAAiF;AACrF,UAAM,eAAe,CAAC,SAAsB,UAAuB;AACjE,UAAI,CAAC,mBAAmB;AACtB,cAAM,IAAI,MAAM,2BAA2B;AAAA,MAC7C;AACA,wBAAkB,SAAS,KAAK;AAAA,IAClC;AACA,UAAM,wBAAwB,IAAI;AAAA,MAChC,OAAO,SAAS;AAAA,MAChB,KAAK;AAAA,MACL,KAAK;AAAA,MACL;AAAA,IACF;AACA,SAAK,oBAAoB,OAAO,sBAAsB,cAAc;AACpE,wBAAoB,CAAC,SAAsB,UAAuB;AAChE,UAAI,CAAC,4BAA4B,gBAAgB;AAC/C,cAAM,IAAI,MAAM,wBAAwB;AAAA,MAC1C;AACA,kCAA4B,eAAe,aAAa,YAAY,SAAS,KAAK;AAAA,IACpF;AAEA,UAAM,8BAA8B,IAAI;AAAA,MACtC;AAAA,MACA,sBAAsB;AAAA,IACxB;AACA,gCAA4B,QAAQ,UAAU,CAAC,SAAiB;AAC9D,4BAAsB,gBAAgB,IAAI;AAAA,IAC5C,CAAC;AACD,SAAK,iBAAiB;AAAA,MACpB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;;;AClEA,cAAc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@mml-io/mml-web-runner",
+  "version": "0.0.0-experimental-edf5cd7-20250120",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "type": "module",
+  "files": [
+    "/build"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "tsx ./build.ts --build",
+    "iterate": "tsx ./build.ts --watch",
+    "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
+    "lint-fix": "eslint \"./**/*.{js,jsx,ts,tsx}\" --fix",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test-iterate": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch"
+  },
+  "dependencies": {
+    "@mml-io/networked-dom-web-runner": "0.0.0-experimental-edf5cd7-20250120"
+  },
+  "devDependencies": {
+    "jest-canvas-mock": "2.5.2",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-expect-message": "1.1.3",
+    "jest-fetch-mock": "3.0.3",
+    "resize-observer-polyfill": "1.5.1"
+  },
+  "gitHead": "4d1344cf69e44b65d059011cb66a564c47d23f2d"
+}