@forsee/sandbox

Playground Sandbox

Playground Sandbox is a sandbox component for Vanilla JS! It used Rollup-Web to implement all the feature of Front End, and provide a vscode-like editor to help you show your source code. It also can refresh the result base on the source code you just save!

How to use it

1. Using just in web

<script type="importmap">
    {
        "imports": {
            "@forsee/sandbox": "https://cdn.jsdelivr.net/npm/@forsee/sandbox@2.0.3",

            "rollup-web/": "https://cdn.jsdelivr.net/npm/rollup-web@4.5.3/",

            "monaco-editor-solid/": "https://cdn.jsdelivr.net/npm/monaco-editor-solid@2.0.2/",
            "monaco-editor-solid": "https://cdn.jsdelivr.net/npm/monaco-editor-solid@2.0.2/dist/index.js",

            "solid-js": "https://cdn.skypack.dev/solid-js",
            "solid-js/web": "https://cdn.skypack.dev/solid-js/web",
            "algoliasearch": "https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.esm.browser.js"
        }
    }
</script>

2. If your using Bundler

npm install @forsee/sandbox

3. start

import { createSandbox } from "@forsee/sandbox";

createSandbox(document.body, {
    files: [
        // It has a fs based on indexDB!
        //  If you want to open a file in an editor, just write it's path in array.
        ["/index.html", "/rollup.config.web.ts"],
        ["/rollup.config.web.js"],
        [], // void editor
    ],

    // before mount , we need to add our file to fs
    async beforeMount(api) {
        // just use reflect to set file
        await api.reflect("/index.html", "./test/index.html");
        await api.reflect("/index.html", "./test/index.html", async (path) => {
            // By default, we will fetch the source file
            // But you can get it yourself
            return ``;
        });

        // yes, use a tree-like object to build complex fs
        await api.mergeTree(
            {
                "rollup.config.web.ts": "./test/worker.js",
                "index.html": "./test/index.html",
                test: {
                    "index.html": "./index.html",
                },
            },
            voidOrFetcher // just like reflect
        );
    },
});

License

Apache-2.0