pyret-embed 0.0.19 → 0.0.21

package/dist/pyret.js

@@ -1,279 +1,65 @@
-const CPO = "https://pyret-horizon.herokuapp.com/editor";
-const defaultOptions = {
-    footerStyle: 'hide',
-    warnOnExit: false,
-    hideDefinitions: false,
-    hideInteractions: false
-};
-const defaultConfig = {
-    src: CPO,
-    state: false,
-    options: defaultOptions
-};
-function sendRpcResponse(frame, data, result) {
-    frame.contentWindow.postMessage({
-        protocol: 'pyret-rpc',
-        data: {
-            type: 'rpc-response',
-            callbackId: data.callbackId,
-            ...result
-        }
-    });
-}
-async function receiveRPC(frame, e, rpcs) {
-    console.log("RPC:", e.data);
-    const data = e.data.data;
-    const module = rpcs[data.module];
-    if (!module[data.method]) {
-        sendRpcResponse(frame, data, { resultType: 'exception', exception: `Unknown method ${data.method}` });
-    }
-    else {
-        try {
-            const result = await module[data.method](...data.args);
-            sendRpcResponse(frame, data, { resultType: 'value', result });
-        }
-        catch (exn) {
-            sendRpcResponse(frame, data, { resultType: 'exception', exception: String(exn) });
-        }
-        return;
-    }
-}
-export function makeEmbedConfig(config) {
-    let mergedConfig = { ...defaultConfig, ...config };
-    let mergedOptions = { ...defaultConfig.options, ...config.options };
-    let { container, src } = mergedConfig;
-    let id = config.id || ("pyret-embed" + Math.floor(Math.random() * 1000000));
-    const hasprop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-    console.log("Pyret embed config:", mergedConfig, mergedOptions);
-    const propIfTrue = (obj, prop) => { if (obj[prop] === true) {
-        return `&${prop}=true`;
-    }
-    else {
-        return "";
-    } };
-    const propIfPresent = (obj, prop) => { if (hasprop(obj, prop)) {
-        return `&${prop}=${obj[prop]}`;
-    }
-    else {
-        return "";
-    } };
-    const fragment = `${propIfPresent(mergedOptions, "footerStyle")}${propIfPresent(mergedOptions, "warnOnExit")}${propIfTrue(mergedOptions, "hideDefinitions")}${propIfTrue(mergedOptions, "hideInteractions")}`;
-    if (src.indexOf("#") !== -1) {
-        src = src + "&" + fragment;
-    }
-    else {
-        src = src + "#" + fragment;
-    }
-    let messageNumber = 0;
-    let currentState;
-    function sendReset(frame, state) {
-        if (!state) {
-            state = {
-                definitionsAtLastRun: false,
-                interactionsSinceLastRun: [],
-                editorContents: "use context starter2024",
-                replContents: ""
-            };
-        }
-        if (typeof state === "object") {
-            state.messageNumber = 0;
-        }
-        currentState = state;
-        const payload = {
-            data: {
-                type: 'reset',
-                state: typeof state === "string" ? state : JSON.stringify(state)
-            },
-            protocol: 'pyret'
-        };
-        frame.contentWindow.postMessage(payload, '*');
-    }
-    function gainControl(frame) {
-        frame.contentWindow.postMessage({
-            type: 'gainControl'
-        }, '*');
-    }
-    function setInteractions(frame, text) {
-        messageNumber += 1;
-        const change = {
-            from: { line: 0, ch: 0 },
-            to: { line: 0, ch: 0 },
-            text: text
-        };
-        currentState = { ...currentState, messageNumber, replContents: text };
-        const payload = {
-            protocol: 'pyret',
-            data: {
-                type: 'changeRepl',
-                change: change
-            },
-            state: currentState
-        };
-        frame.contentWindow.postMessage(payload, '*');
-    }
-    function runDefinitions(frame) {
-        messageNumber += 1;
-        currentState = { ...currentState, messageNumber, interactionsSinceLastRun: [], definitionsAtLastRun: currentState.editorContents };
-        const payload = {
-            protocol: 'pyret',
-            data: {
-                type: 'run'
-            },
-            state: currentState
-        };
-        frame.contentWindow.postMessage(payload, '*');
-    }
-    function clearInteractions(frame) {
-        messageNumber += 1;
-        const payload = {
-            protocol: 'pyret',
-            data: {
-                type: 'clearInteractions'
-            },
-            state: currentState
-        };
-        frame.contentWindow.postMessage(payload, '*');
-    }
-    let resultCounter = 0;
-    function runInteractionResult(frame) {
-        const { promise, resolve, reject } = Promise.withResolvers();
-        messageNumber += 1;
-        const newInteractions = currentState.interactionsSinceLastRun.concat([currentState.replContents]);
-        currentState = {
-            ...currentState,
-            messageNumber: messageNumber,
-            interactionsSinceLastRun: newInteractions,
-            replContents: "",
-        };
-        const payload = {
-            protocol: 'pyret',
-            data: {
-                type: 'runInteraction',
-                reportAnswer: 'interaction' + (++resultCounter)
-            },
-            state: currentState
-        };
-        frame.contentWindow.postMessage(payload, '*');
-        window.addEventListener('message', message => {
-            if (message.data.protocol !== 'pyret') {
-                return;
-            }
-            if (message.source !== frame.contentWindow) {
-                return;
-            }
-            const pyretMessage = message.data;
-            if (pyretMessage.data.type === 'interactionResult') {
-                resolve(pyretMessage.data.textResult);
-            }
-        });
-        return promise;
-    }
-    function directPostMessage(frame, message) {
-        frame.contentWindow.postMessage(message);
-    }
-    /* An issue we run into with iframes and scrolling is that CPO wants to scroll
-       interactions around sometimes. However, scrolling elements in the iframe
-       can scroll the outer page as well to focus it. We don't want that.
-       We can prevent this by making the iframe position: fixed, but that makes
-       sensible positioning hard. So we create a wrapper iframe that works in the
-       normal flow, and make the actual CPO iframe inside that.
-  
-       Since CPO only knows how to postMessage to its immediate parent, we also
-       proxy all requests through the wrapper, and that's what the client sees.
-    */
-    const wrapper = document.createElement("iframe");
-    wrapper.style = "width: 100%; height: 100%; border: 0; display: block;";
-    wrapper.srcdoc = `
-<html>
-<head>
-<style>
-html, body { height: 100%; }
-body { margin: 0; padding: 0; }
-</style>
-<script>
-window.addEventListener('message', (e) => {
-  if (e.source === window.parent) {
-    const iframes = document.getElementsByTagName("iframe");
-    iframes[0].contentWindow.postMessage(e.data, "*");
-  }
-  else {
-    window.parent.postMessage(e.data, "*");
-  }
-});
-</script>
-<body></body>
-</html>`;
-    container.appendChild(wrapper);
-    wrapper.addEventListener("load", () => {
-        const wrapperBody = wrapper.contentDocument.body;
-        const inner = document.createElement("iframe");
-        inner.src = src || CPO;
-        inner.style = "width: 100%; height: 100%; border: 0; display: block; position: fixed;";
-        inner.width = "100%";
-        inner.id = id;
-        inner.frameBorder = "0";
-        wrapperBody.appendChild(inner);
-    });
-    const frame = wrapper;
-    frame.id = id;
-    const { promise, resolve, reject } = Promise.withResolvers();
-    setTimeout(() => reject(new Error("Timeout waiting for Pyret to load")), 60000);
-    const onChangeCallbacks = [];
-    window.addEventListener('message', message => {
-        if (message.data.protocol === 'pyret-rpc') {
-            receiveRPC(frame, message, mergedConfig.rpc || {}).catch(exn => {
-                console.error("Error in RPC handler:", exn);
-            });
-            return;
-        }
-        if (message.data.protocol !== 'pyret') {
-            return;
-        }
-        if (message.source !== frame.contentWindow) {
-            return;
-        }
-        const pyretMessage = message.data;
-        const typ = pyretMessage.data.type;
-        if (typ === 'pyret-init') {
-            gainControl(frame);
-            if (mergedConfig.state) {
-                sendReset(frame, mergedConfig.state);
-            }
-            const api = makeEmbedAPI(frame);
-            frame.pyretEmbed = api;
-            resolve(api);
-        }
-        else if (typ === "changeRepl" || typ === "change") {
-            onChangeCallbacks.forEach(cb => cb(pyretMessage));
-            currentState = pyretMessage.state;
-        }
-        else {
-            currentState = pyretMessage.state;
-        }
-    });
-    function makeEmbedAPI(frame) {
-        return {
-            sendReset: (state) => sendReset(frame, state),
-            postMessage: (message) => directPostMessage(frame, message),
-            getFrame: () => frame,
-            setInteractions: (text) => setInteractions(frame, text),
-            runDefinitions: () => runDefinitions(frame),
-            runInteractionResult: async () => await runInteractionResult(frame),
-            onChange: (callback) => onChangeCallbacks.push(callback),
-            clearInteractions: () => clearInteractions(frame),
-            currentState: () => currentState,
-        };
-    }
-    return promise;
-}
-export function makeEmbed(id, container, src) {
-    const config = {
-        container,
-        id,
-        options: {}
-    };
-    if (src) {
-        config.src = src;
-    }
-    return makeEmbedConfig(config);
-}
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ var __webpack_modules__ = ({
+
+/***/ "./src/pyret.ts":
+/*!**********************!*\
+  !*** ./src/pyret.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   makeEmbed: () => (/* binding */ makeEmbed),\n/* harmony export */   makeEmbedConfig: () => (/* binding */ makeEmbedConfig)\n/* harmony export */ });\nconst CPO = \"https://pyret-horizon.herokuapp.com/editor\";\nconst defaultOptions = {\n    footerStyle: 'hide',\n    warnOnExit: false,\n    hideDefinitions: false,\n    hideInteractions: false\n};\nconst defaultConfig = {\n    src: CPO,\n    state: false,\n    options: defaultOptions\n};\nfunction sendRpcResponse(frame, data, result) {\n    frame.contentWindow.postMessage({\n        protocol: 'pyret-rpc',\n        data: {\n            type: 'rpc-response',\n            callbackId: data.callbackId,\n            ...result\n        }\n    });\n}\nasync function receiveRPC(frame, e, rpcs) {\n    console.log(\"RPC:\", e.data);\n    const data = e.data.data;\n    const module = rpcs[data.module];\n    if (!module[data.method]) {\n        sendRpcResponse(frame, data, { resultType: 'exception', exception: `Unknown method ${data.method}` });\n    }\n    else {\n        try {\n            const result = await module[data.method](...data.args);\n            sendRpcResponse(frame, data, { resultType: 'value', result });\n        }\n        catch (exn) {\n            sendRpcResponse(frame, data, { resultType: 'exception', exception: String(exn) });\n        }\n        return;\n    }\n}\nfunction makeEmbedConfig(config) {\n    let mergedConfig = { ...defaultConfig, ...config };\n    let mergedOptions = { ...defaultConfig.options, ...config.options };\n    let { container, src } = mergedConfig;\n    let id = config.id || (\"pyret-embed\" + Math.floor(Math.random() * 1000000));\n    const hasprop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);\n    console.log(\"Pyret embed config:\", mergedConfig, mergedOptions);\n    const propIfTrue = (obj, prop) => { if (obj[prop] === true) {\n        return `&${prop}=true`;\n    }\n    else {\n        return \"\";\n    } };\n    const propIfPresent = (obj, prop) => { if (hasprop(obj, prop)) {\n        return `&${prop}=${obj[prop]}`;\n    }\n    else {\n        return \"\";\n    } };\n    const fragment = `${propIfPresent(mergedOptions, \"footerStyle\")}${propIfPresent(mergedOptions, \"warnOnExit\")}${propIfTrue(mergedOptions, \"hideDefinitions\")}${propIfTrue(mergedOptions, \"hideInteractions\")}`;\n    if (src.indexOf(\"#\") !== -1) {\n        src = src + \"&\" + fragment;\n    }\n    else {\n        src = src + \"#\" + fragment;\n    }\n    let messageNumber = 0;\n    let currentState;\n    function sendReset(frame, state) {\n        if (!state) {\n            state = {\n                definitionsAtLastRun: false,\n                interactionsSinceLastRun: [],\n                editorContents: \"use context starter2024\",\n                replContents: \"\"\n            };\n        }\n        if (typeof state === \"object\") {\n            state.messageNumber = 0;\n        }\n        currentState = state;\n        const payload = {\n            data: {\n                type: 'reset',\n                state: typeof state === \"string\" ? state : JSON.stringify(state)\n            },\n            protocol: 'pyret'\n        };\n        frame.contentWindow.postMessage(payload, '*');\n    }\n    function gainControl(frame) {\n        frame.contentWindow.postMessage({\n            type: 'gainControl'\n        }, '*');\n    }\n    function setInteractions(frame, text) {\n        messageNumber += 1;\n        const change = {\n            from: { line: 0, ch: 0 },\n            to: { line: 0, ch: 0 },\n            text: text\n        };\n        currentState = { ...currentState, messageNumber, replContents: text };\n        const payload = {\n            protocol: 'pyret',\n            data: {\n                type: 'changeRepl',\n                change: change\n            },\n            state: currentState\n        };\n        frame.contentWindow.postMessage(payload, '*');\n    }\n    function runDefinitions(frame) {\n        messageNumber += 1;\n        currentState = { ...currentState, messageNumber, interactionsSinceLastRun: [], definitionsAtLastRun: currentState.editorContents };\n        const payload = {\n            protocol: 'pyret',\n            data: {\n                type: 'run'\n            },\n            state: currentState\n        };\n        frame.contentWindow.postMessage(payload, '*');\n    }\n    function clearInteractions(frame) {\n        messageNumber += 1;\n        const payload = {\n            protocol: 'pyret',\n            data: {\n                type: 'clearInteractions'\n            },\n            state: currentState\n        };\n        frame.contentWindow.postMessage(payload, '*');\n    }\n    let resultCounter = 0;\n    function runInteractionResult(frame) {\n        const { promise, resolve, reject } = Promise.withResolvers();\n        messageNumber += 1;\n        const newInteractions = currentState.interactionsSinceLastRun.concat([currentState.replContents]);\n        currentState = {\n            ...currentState,\n            messageNumber: messageNumber,\n            interactionsSinceLastRun: newInteractions,\n            replContents: \"\",\n        };\n        const payload = {\n            protocol: 'pyret',\n            data: {\n                type: 'runInteraction',\n                reportAnswer: 'interaction' + (++resultCounter)\n            },\n            state: currentState\n        };\n        frame.contentWindow.postMessage(payload, '*');\n        window.addEventListener('message', message => {\n            if (message.data.protocol !== 'pyret') {\n                return;\n            }\n            if (message.source !== frame.contentWindow) {\n                return;\n            }\n            const pyretMessage = message.data;\n            if (pyretMessage.data.type === 'interactionResult') {\n                resolve(pyretMessage.data.textResult);\n            }\n        });\n        return promise;\n    }\n    function directPostMessage(frame, message) {\n        frame.contentWindow.postMessage(message);\n    }\n    /* An issue we run into with iframes and scrolling is that CPO wants to scroll\n       interactions around sometimes. However, scrolling elements in the iframe\n       can scroll the outer page as well to focus it. We don't want that.\n       We can prevent this by making the iframe position: fixed, but that makes\n       sensible positioning hard. So we create a wrapper iframe that works in the\n       normal flow, and make the actual CPO iframe inside that.\n  \n       Since CPO only knows how to postMessage to its immediate parent, we also\n       proxy all requests through the wrapper, and that's what the client sees.\n    */\n    const wrapper = document.createElement(\"iframe\");\n    wrapper.style = \"width: 100%; height: 100%; border: 0; display: block;\";\n    wrapper.srcdoc = `\n<html>\n<head>\n<style>\nhtml, body { height: 100%; }\nbody { margin: 0; padding: 0; }\n</style>\n<script>\nwindow.addEventListener('message', (e) => {\n  if (e.source === window.parent) {\n    const iframes = document.getElementsByTagName(\"iframe\");\n    iframes[0].contentWindow.postMessage(e.data, \"*\");\n  }\n  else {\n    window.parent.postMessage(e.data, \"*\");\n  }\n});\n</script>\n<body></body>\n</html>`;\n    container.appendChild(wrapper);\n    wrapper.addEventListener(\"load\", () => {\n        const wrapperBody = wrapper.contentDocument.body;\n        const inner = document.createElement(\"iframe\");\n        inner.src = src || CPO;\n        inner.style = \"width: 100%; height: 100%; border: 0; display: block; position: fixed;\";\n        inner.width = \"100%\";\n        inner.id = id;\n        inner.frameBorder = \"0\";\n        wrapperBody.appendChild(inner);\n    });\n    const frame = wrapper;\n    frame.id = id;\n    const { promise, resolve, reject } = Promise.withResolvers();\n    setTimeout(() => reject(new Error(\"Timeout waiting for Pyret to load\")), 60000);\n    const onChangeCallbacks = [];\n    window.addEventListener('message', message => {\n        if (message.data.protocol === 'pyret-rpc') {\n            receiveRPC(frame, message, mergedConfig.rpc || {}).catch(exn => {\n                console.error(\"Error in RPC handler:\", exn);\n            });\n            return;\n        }\n        if (message.data.protocol !== 'pyret') {\n            return;\n        }\n        if (message.source !== frame.contentWindow) {\n            return;\n        }\n        const pyretMessage = message.data;\n        const typ = pyretMessage.data.type;\n        if (typ === 'pyret-init') {\n            gainControl(frame);\n            if (mergedConfig.state) {\n                sendReset(frame, mergedConfig.state);\n            }\n            const api = makeEmbedAPI(frame);\n            frame.pyretEmbed = api;\n            resolve(api);\n        }\n        else if (typ === \"changeRepl\" || typ === \"change\") {\n            onChangeCallbacks.forEach(cb => cb(pyretMessage));\n            currentState = pyretMessage.state;\n        }\n        else {\n            currentState = pyretMessage.state;\n        }\n    });\n    function makeEmbedAPI(frame) {\n        return {\n            sendReset: (state) => sendReset(frame, state),\n            postMessage: (message) => directPostMessage(frame, message),\n            getFrame: () => frame,\n            setInteractions: (text) => setInteractions(frame, text),\n            runDefinitions: () => runDefinitions(frame),\n            runInteractionResult: async () => await runInteractionResult(frame),\n            onChange: (callback) => onChangeCallbacks.push(callback),\n            clearInteractions: () => clearInteractions(frame),\n            currentState: () => currentState,\n        };\n    }\n    return promise;\n}\nfunction makeEmbed(id, container, src) {\n    const config = {\n        container,\n        id,\n        options: {}\n    };\n    if (src) {\n        config.src = src;\n    }\n    return makeEmbedConfig(config);\n}\n\n\n//# sourceURL=webpack://pyret-embed/./src/pyret.ts?");
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = (exports) => {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module can't be inlined because the eval devtool is used.
+/******/ var __webpack_exports__ = {};
+/******/ __webpack_modules__["./src/pyret.ts"](0, __webpack_exports__, __webpack_require__);
+/******/ const __webpack_exports__makeEmbed = __webpack_exports__.makeEmbed;
+/******/ const __webpack_exports__makeEmbedConfig = __webpack_exports__.makeEmbedConfig;
+/******/ export { __webpack_exports__makeEmbed as makeEmbed, __webpack_exports__makeEmbedConfig as makeEmbedConfig };
+/******/ 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pyret-embed",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "A library for embedding Pyret into webpages",
   "main": "dist/pyret.js",
   "files": [

package/types/default-rpcs.d.ts

@@ -0,0 +1,32 @@
+import * as myfs from 'fs';
+/**
+ * This is a simple in-memory RPC implementation for file operations.
+ * It expects to have ZenFS be used as the browser-based fallback in webpack for
+ * `fs`.
+ *
+ * It allows errors to propagate to the caller; the RPC infrastructure should
+ * forward these on.
+ */
+export declare const rpc: {
+    fs: {
+        readFile: (path: string) => Promise<NonSharedBuffer>;
+        writeFile: (path: string, data: string | Buffer) => Promise<void>;
+        exists: (path: string) => Promise<boolean>;
+        stat: (p: string) => Promise<{
+            mtime: number;
+            ctime: number;
+            size: number;
+            native: myfs.Stats;
+        }>;
+        createDir: (p: string) => Promise<void>;
+    };
+    path: {
+        join: (...paths: string[]) => any;
+        resolve: (p: string) => any;
+        basename: (p: string) => any;
+        dirname: (p: string) => any;
+        extname: (p: string) => any;
+        relative: (from: string, to: string) => any;
+        'is-absolute': (p: string) => any;
+    };
+};