Dream API for psuedo-bundled code.

snippet.ts

async function getConcatenatedCodeFromWorker(...args: any[]) {
  return "..."
}

async function getRunnableBundle<
  Files extends Record<string, string>,
  Entry extends keyof Files
>({
  files,
  entry,
  scope,
}: {
  files: Files
  entry: Entry
  scope: Record<string, any>
}) {
  const concatenatedCode = await getConcatenatedCodeFromWorker(files, entry)
  const args = Object.keys(scope)
  const vargs = Object.values(scope)
  return () => Function(...args)(...vargs, concatenatedCode)
}

const run = getRunnableBundle({
  files: {
    "name.ts": ` export const name = "Steve"`,
    "index.ts": `import * as React from "reacy"
		 import { name } from "./ 
		 function App() {
                   return <div>Hello {name}!</div>
                 }
		 
		 ReactDOM.render(<App/>, elm)`,
  },
  entry: "index.ts",
  scope: {
    React,
    ReactDOM,
    elm: document.getElementById("root")
  },
})

run()

import scopeEval from 'scope-eval';

// evaluates text (transpiled commonjs code) with scope, and dependencies

function runCodeAndReturnExports(text, scope, dependencies) {
  const require = (path) => {
    return dependencies[path];
  };

  const exports = {};
  const module = {
    exports,
  };

  scopeEval(text, { module, exports, require, ...scope });

  return { module, exports };
}


// module = { exports: {...all exports} }
// exports = { ...all exports }}
const { module, exports } = runCodeAndReturnExports(
  code,
  { monaco },
  {
    'monaco-editor-core': monaco,
    'monaco-editor': monaco,
    'use-monaco': monaco,
  }
);