jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-20 02:37:41 -05:00
Code Issues Projects Releases Wiki Activity

Fix #1538 - use same customElements Registry utilities (#1542)

Browse Source
This commit is contained in:
Andrea Giammarchi
2023-06-16 15:34:05 +02:00
committed by GitHub
parent 6df5905b2b
commit bccd5e3750
8 changed files with 194 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
pyscript.core/esm/plugins.js → pyscript.core/esm/custom-types.js
View File

@@ -1,18 +1,23 @@
import "@ungap/with-resolvers";
import { $$ } from "basic-devtools";
import { create } from "./utils.js";
import { assign, create } from "./utils.js";
import { getDetails } from "./script-handler.js";
import { registry, configs } from "./interpreters.js";
import {
registry as defaultRegistry,
prefixes,
configs,
} from "./interpreters.js";
import { getRuntimeID } from "./loader.js";
import { io } from "./interpreter/_utils.js";
import { addAllListeners } from "./listeners.js";
import workerHooks from "./worker/hooks.js";
export const PLUGINS_SELECTORS = [];
export const CUSTOM_SELECTORS = [];
/**
* @typedef {Object} Runtime plugin configuration
* @prop {string} type the interpreter type
* @typedef {Object} Runtime custom configuration
* @prop {object} interpreter the bootstrapped interpreter
* @prop {(url:string, options?: object) => Worker} XWorker an XWorker constructor that defaults to same interpreter on the Worker.
* @prop {object} config a cloned config used to bootstrap the interpreter
@@ -22,23 +27,33 @@ export const PLUGINS_SELECTORS = [];
*/
const patched = new Map();
const types = new Map();
const waitList = new Map();
// REQUIRES INTEGRATION TEST
/* c8 ignore start */
/**
* @param {Element} node any DOM element registered via plugin.
* @param {Element} node any DOM element registered via define.
*/
export const handlePlugin = (node) => {
for (const name of PLUGINS_SELECTORS) {
if (node.matches(name)) {
const { options, known } = plugins.get(name);
export const handleCustomType = (node) => {
for (const selector of CUSTOM_SELECTORS) {
if (node.matches(selector)) {
const type = types.get(selector);
const { resolve } = waitList.get(type);
const { options, known } = registry.get(type);
if (!known.has(node)) {
known.add(node);
const { type, version, config, env, onRuntimeReady } = options;
const name = getRuntimeID(type, version);
const {
interpreter: runtime,
version,
config,
env,
onRuntimeReady,
} = options;
const name = getRuntimeID(runtime, version);
const id = env || `${name}${config ? `|${config}` : ""}`;
const { interpreter: engine, XWorker } = getDetails(
type,
runtime,
id,
name,
version,
@@ -46,7 +61,7 @@ export const handlePlugin = (node) => {
);
engine.then((interpreter) => {
if (!patched.has(id)) {
const module = create(registry.get(type));
const module = create(defaultRegistry.get(runtime));
const {
onBeforeRun,
onBeforeRunAsync,
@@ -120,9 +135,10 @@ export const handlePlugin = (node) => {
};
patched.set(id, resolved);
resolve(resolved);
}
onRuntimeReady(patched.get(id), node);
onRuntimeReady?.(patched.get(id), node);
});
}
}
@@ -132,27 +148,58 @@ export const handlePlugin = (node) => {
/**
* @type {Map<string, {options:object, known:WeakSet<Element>}>}
*/
const plugins = new Map();
const registry = new Map();
/**
* @typedef {Object} PluginOptions plugin configuration
* @prop {string} type the interpreter/interpreter type to receive
* @typedef {Object} PluginOptions custom configuration
* @prop {'pyodide' | 'micropython' | 'wasmoon' | 'ruby-wasm-wasi'} interpreter the interpreter to use
* @prop {string} [version] the optional interpreter version to use
* @prop {string} [config] the optional config to use within such interpreter
* @prop {string} [env] the optional environment to use
* @prop {(node: Element, interpreter: Runtime) => void} onRuntimeReady the callback that will be invoked once
* @prop {(environment: object, node: Element) => void} [onRuntimeReady] the callback that will be invoked once
*/
/**
* Allows plugins and components on the page to receive interpreters to execute any code.
* @param {string} name the unique plugin name
* @param {PluginOptions} options the plugin configuration
* Allows custom types and components on the page to receive interpreters to execute any code
* @param {string} type the unique `<script type="...">` identifier
* @param {PluginOptions} options the custom type configuration
*/
export const registerPlugin = (name, options) => {
if (PLUGINS_SELECTORS.includes(name))
throw new Error(`plugin ${name} already registered`);
PLUGINS_SELECTORS.push(name);
plugins.set(name, { options, known: new WeakSet() });
$$(name).forEach(handlePlugin);
export const define = (type, options) => {
if (defaultRegistry.has(type) || registry.has(type))
throw new Error(`<script type="${type}"> already registered`);
if (!defaultRegistry.has(options?.interpreter))
throw new Error(`Unspecified interpreter`);
// allows reaching out the interpreter helpers on events
defaultRegistry.set(type, defaultRegistry.get(options?.interpreter));
// ensure a Promise can resolve once a custom type has been bootstrapped
whenDefined(type);
// allows selector -> registry by type
const selectors = [`script[type="${type}"]`, `${type}-script`];
for (const selector of selectors) types.set(selector, type);
CUSTOM_SELECTORS.push(...selectors);
prefixes.push(`${type}-`);
// ensure always same env for this custom type
registry.set(type, {
options: assign({ env: type }, options),
known: new WeakSet(),
});
addAllListeners(document);
$$(selectors.join(",")).forEach(handleCustomType);
};
/**
* Resolves whenever a defined custom type is bootstrapped on the page
* @param {string} type the unique `<script type="...">` identifier
* @returns {Promise<object>}
*/
export const whenDefined = (type) => {
if (!waitList.has(type)) waitList.set(type, Promise.withResolvers());
return waitList.get(type).promise;
};
/* c8 ignore stop */

87
pyscript.core/esm/index.js
View File

@@ -1,71 +1,16 @@
import { $x, $$ } from "basic-devtools";
import { $$ } from "basic-devtools";
import xworker from "./worker/class.js";
import { handle, interpreters } from "./script-handler.js";
import { all, assign, create, defineProperty } from "./utils.js";
import { registry, selectors, prefixes } from "./interpreters.js";
import { PLUGINS_SELECTORS, handlePlugin } from "./plugins.js";
import { handle } from "./script-handler.js";
import { assign } from "./utils.js";
import { selectors, prefixes } from "./interpreters.js";
import { CUSTOM_SELECTORS, handleCustomType } from "./custom-types.js";
import { listener, addAllListeners } from "./listeners.js";
export { registerPlugin } from "./plugins.js";
export { define, whenDefined } from "./custom-types.js";
export const XWorker = xworker();
const RUNTIME_SELECTOR = selectors.join(",");
// ensure both interpreter and its queue are awaited then returns the interpreter
const awaitRuntime = async (key) => {
if (interpreters.has(key)) {
const { interpreter, queue } = interpreters.get(key);
return (await all([interpreter, queue]))[0];
}
const available = interpreters.size
? `Available interpreters are: ${[...interpreters.keys()]
.map((r) => `"${r}"`)
.join(", ")}.`
: `There are no interpreters in this page.`;
throw new Error(`The interpreter "${key}" was not found. ${available}`);
};
defineProperty(globalThis, "pyscript", {
value: {
env: new Proxy(create(null), { get: (_, name) => awaitRuntime(name) }),
},
});
let index = 0;
globalThis.__events = new Map();
// attributes are tested via integration / e2e
/* c8 ignore next 17 */
const listener = async (event) => {
const { type, currentTarget } = event;
for (let { name, value, ownerElement: el } of $x(
`./@*[${prefixes.map((p) => `name()="${p}${type}"`).join(" or ")}]`,
currentTarget,
)) {
name = name.slice(0, -(type.length + 1));
const interpreter = await awaitRuntime(
el.getAttribute(`${name}-env`) || name,
);
const i = index++;
try {
globalThis.__events.set(i, event);
registry.get(name).runEvent(interpreter, value, i);
} finally {
globalThis.__events.delete(i);
}
}
};
// attributes are tested via integration / e2e
/* c8 ignore next 8 */
for (let { name, ownerElement: el } of $x(
`.//@*[${prefixes.map((p) => `starts-with(name(),"${p}")`).join(" or ")}]`,
)) {
name = name.slice(name.lastIndexOf("-") + 1);
if (name !== "env") el.addEventListener(name, listener);
}
const INTERPRETER_SELECTORS = selectors.join(",");
const mo = new MutationObserver((records) => {
for (const { type, target, attributeName, addedNodes } of records) {
@@ -92,12 +37,15 @@ const mo = new MutationObserver((records) => {
}
for (const node of addedNodes) {
if (node.nodeType === 1) {
if (node.matches(RUNTIME_SELECTOR)) handle(node);
addAllListeners(node);
if (node.matches(INTERPRETER_SELECTORS)) handle(node);
else {
$$(RUNTIME_SELECTOR, node).forEach(handle);
if (!PLUGINS_SELECTORS.length) continue;
handlePlugin(node);
$$(PLUGINS_SELECTORS.join(","), node).forEach(handlePlugin);
$$(INTERPRETER_SELECTORS, node).forEach(handle);
if (!CUSTOM_SELECTORS.length) continue;
handleCustomType(node);
$$(CUSTOM_SELECTORS.join(","), node).forEach(
handleCustomType,
);
}
}
}
@@ -116,4 +64,5 @@ assign(Element.prototype, {
},
});
$$(RUNTIME_SELECTOR, observe(document)).forEach(handle);
addAllListeners(observe(document));
$$(INTERPRETER_SELECTORS, document).forEach(handle);

71
pyscript.core/esm/listeners.js Normal file
View File

@@ -0,0 +1,71 @@
import { $x } from "basic-devtools";
import { interpreters } from "./script-handler.js";
import { all, create, defineProperty } from "./utils.js";
import { registry, prefixes } from "./interpreters.js";
// TODO: this is ugly; need to find a better way
defineProperty(globalThis, "pyscript", {
value: {
env: new Proxy(create(null), {
get: (_, name) => awaitInterpreter(name),
}),
},
});
let index = 0;
globalThis.__events = new Map();
/* c8 ignore start */ // attributes are tested via integration / e2e
// ensure both interpreter and its queue are awaited then returns the interpreter
const awaitInterpreter = async (key) => {
if (interpreters.has(key)) {
const { interpreter, queue } = interpreters.get(key);
return (await all([interpreter, queue]))[0];
}
const available = interpreters.size
? `Available interpreters are: ${[...interpreters.keys()]
.map((r) => `"${r}"`)
.join(", ")}.`
: `There are no interpreters in this page.`;
throw new Error(`The interpreter "${key}" was not found. ${available}`);
};
export const listener = async (event) => {
const { type, currentTarget } = event;
for (let { name, value, ownerElement: el } of $x(
`./@*[${prefixes.map((p) => `name()="${p}${type}"`).join(" or ")}]`,
currentTarget,
)) {
name = name.slice(0, -(type.length + 1));
const interpreter = await awaitInterpreter(
el.getAttribute(`${name}-env`) || name,
);
const i = index++;
try {
globalThis.__events.set(i, event);
registry.get(name).runEvent(interpreter, value, i);
} finally {
globalThis.__events.delete(i);
}
}
};
/**
* Look for known prefixes and add related listeners.
* @param {Document | Element} root
*/
export const addAllListeners = (root) => {
for (let { name, ownerElement: el } of $x(
`.//@*[${prefixes
.map((p) => `starts-with(name(),"${p}")`)
.join(" or ")}]`,
root,
)) {
name = name.slice(name.lastIndexOf("-") + 1);
if (name !== "env") el.addEventListener(name, listener);
}
};
/* c8 ignore stop */

2
pyscript.core/esm/worker/class.js
View File

@@ -5,7 +5,7 @@ import { getText } from "../fetch-utils.js";
import workerHooks from "./hooks.js";
/**
* @typedef {Object} WorkerOptions plugin configuration
* @typedef {Object} WorkerOptions custom configuration
* @prop {string} type the interpreter type to use
* @prop {string} [version] the optional interpreter version to use
* @prop {string} [config] the optional config to use within such interpreter

21
pyscript.core/test/plugins/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Plugins</title>
<style>
py-script {
mpy-script {
display: none;
}
</style>
@@ -13,9 +13,10 @@
{ "imports": { "@pyscript/core": "../../min.js" } }
</script>
<script type="module">
import { registerPlugin } from "@pyscript/core";
registerPlugin("mpy-script", {
type: "micropython",
import { define, whenDefined } from "@pyscript/core";
whenDefined("mpy").then(console.log);
define("mpy", {
interpreter: "micropython",
async onRuntimeReady(micropython, element) {
console.log(micropython);
// Somehow this doesn't work in MicroPython
@@ -25,11 +26,21 @@
micropython.run(element.textContent);
element.replaceChildren("See console ->");
element.style.display = "block";
const button = document.createElement("button");
button.textContent = "click";
button.setAttribute("mpy-click", "test_click(event)");
document.body.append(button);
},
});
</script>
</head>
<body>
<mpy-script> print('Hello Console!') </mpy-script>
<mpy-script mpy-click="test_click(event)">
def test_click(event):
print(event.type)
print('Hello Console!')
</mpy-script>
</body>
</html>

12
pyscript.core/test/plugins/lua.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Plugins</title>
<style>
py-script {
lua-script {
display: none;
}
</style>
@@ -13,9 +13,9 @@
{ "imports": { "@pyscript/core": "../../min.js" } }
</script>
<script type="module">
import { registerPlugin } from "@pyscript/core";
registerPlugin("lua-script", {
type: "wasmoon",
import { define } from "@pyscript/core";
define("lua", {
interpreter: "wasmoon",
async onRuntimeReady(wasmoon, element) {
// Somehow this doesn't work in Wasmoon
wasmoon.io.stdout = (message) => {
@@ -29,6 +29,8 @@
</script>
</head>
<body>
<lua-script> print('Hello Console!') </lua-script>
<lua-script lua-click="print(event.type)">
print('Hello Console!')
</lua-script>
</body>
</html>

6
pyscript.core/test/plugins/py-script.js
View File

@@ -1,4 +1,4 @@
import { registerPlugin } from "@pyscript/core";
import { define } from "@pyscript/core";
// append ASAP CSS to avoid showing content
document.head.appendChild(document.createElement("style")).textContent = `
@@ -17,9 +17,9 @@ let bootstrap = true,
const sharedPyodide = new Promise((resolve) => {
const pyConfig = document.querySelector("py-config");
const config = pyConfig?.getAttribute("src") || pyConfig?.textContent;
registerPlugin("py-script", {
define("py", {
config,
type: "pyodide",
interpreter: "pyodide",
codeBeforeRunWorker: `print('codeBeforeRunWorker')`,
codeAfterRunWorker: `print('codeAfterRunWorker')`,
onBeforeRun(pyodide, node) {