README.md

Metaframe: javascript runner

This metaframe will execute javascript from code embedded in the URL hash params.

• There is a div with the id render for adding your own elements.
• If hash param presentation=true then the edit and buttons and feedback will be hidden.

Examples

Listen to metaframe input (radian value) and rotate a box on a canvas

👉 Live example 🔗

Shoot lightning every 2 seconds

Credit: lightning effect copied and modified from https://codepen.io/lemmin/pen/zYoOwzy

👉 Live example 🔗

Listen to metaframe inputs, and send outputs:

👇 Below example live 🔗

const disposers = [];

// Listen to an input
disposers.push(metaframe.onInput("someInputName", (inputValue) => {
    // And send an output
    metaframe.setOutput("someOutputName", `Got input: ${inputValue}`);
}));

// Return a cleanup function
return () => {
    while(disposers.length > 0) {
        disposers.pop()();
    }
}

Async

The script is run as an async function so you can await:

const key = Math.random();
console.log(`Starting key=${key}`)

async function waitUntil(condition) {
  return await new Promise(resolve => {
    const interval = setInterval(() => {
      if (condition) {
        resolve('foo');
        clearInterval(interval);
      };
    }, 1000);
  });
}

await waitUntil(1000);

console.log(`Finished key=${key}`)

return () => {
    console.log(`Cleaning up key=${key}`)
}

Source

https://github.com/metapages/metaframe-javascript

Forking

https://github.com/metapages/metaframe-template-preact/blob/main/README-developer.md