I don't actually know how to program I just ask @FransAris
Public
Edited
Mar 29, 2023
X = import("https://esm.sh/@codesandbox/nodebox")
Nodebox = X.Nodebox
x = await runtime.fs.init({
"package.json": JSON.stringify({
name: "nextjs-preview",
dependencies: {
react: "18.2.0",
"react-dom": "18.2.0",
typescript: "*",
"@types/react": "*",
"@types/lodash": "*",
"@typescript/vfs": "*",
serve: "*"
}
}),
// On the index page, let's illustrate how server-side props
// propagate to your page component in Next.js.
"index.js": `
let ts = require("typescript")
let tsvfs = require("@typescript/vfs")
let path = require('path')
let createFSBackedSystem = tsvfs.createFSBackedSystem
let createVirtualTypeScriptEnvironment = tsvfs.createVirtualTypeScriptEnvironment
const compilerOpts = { target: ts.ScriptTarget.ES2016, esModuleInterop: true }
const fsMap = new Map()
// If using imports where the types don't directly match up to their FS representation (like the
// imports for node) then use triple-slash directives to make sure globals are set up first.
const content = \`
let xs = {
y: 10,
}
xs.
\`
fsMap.set("index.ts", content)
// By providing a project root, then the system knows how to resolve node_modules correctly
const projectRoot = path.join(__dirname)
console.log("AAAAA")
const system = createFSBackedSystem(fsMap, projectRoot, ts)
console.log("BBBBB")
const env = createVirtualTypeScriptEnvironment(system, ["index.ts"], ts, compilerOpts)
// Requests auto-completions at \`path.|\`
const completions = env.languageService.getCompletionsAtPosition("index.ts", content.length, {})
console.log('content:', content)
console.log('completions:', completions)
`
})
{
x;
let shell = runtime.shell.create();
// shell.stdout.on("data", (data) => {
// console.log("Output:", data);
// });
// shell.stderr.on("data", (data) => {
// console.log("Error:", data);
// });
let nextProcess = await shell.runCommand("node", ["index.js"]);
nextProcess;
}
runtime = {
let runtime = new Nodebox({
// Provide a reference to the <iframe> element in the DOM
// where Nodebox should render the preview.
iframe: iframe
});
await runtime.connect();
return runtime;
}
iframe = html`<iframe />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
