feat: support "environment"

public/README.md

@@ -36,7 +36,7 @@ Open editor at first.
 <!-- sandpack:{
   "files": {
     "/src/index.js": {
-      "prependCode": "import '/src/index.css'; // Hack to load index.css\n",
+      "prependCode": "import './index.css'; // Hack to load index.css. require parcel env \n",
       "path": "example2/src/index.js"
     },
     "/src/App.js": {
@@ -52,6 +52,7 @@ Open editor at first.
     }
   },
   "entry": "/index.html",
+  "environment": "parcel",
   "options": {
     "showLineNumbers": true,
     "showInlineErrors": true,

public/SECOND.md

@@ -53,6 +53,7 @@ Open editor at first.
     }
   },
   "entry": "/index.html",
+  "environment": "parcel",
   "options": {
     "showLineNumbers": true,
     "showInlineErrors": true,

src/sandpack.tsx

@@ -1,4 +1,4 @@
-import { Sandpack, SandpackPredefinedTemplate, SandpackSetup } from "@codesandbox/sandpack-react";
+import { SandboxEnvironment, Sandpack, SandpackPredefinedTemplate, SandpackSetup } from "@codesandbox/sandpack-react";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { parseCommentAsSandboxOptions } from "./parse-comment-as-sandbox-options";
@@ -25,6 +25,7 @@ export type SandboxOptions = {
     dependencies?: SandboxInfo["dependencies"];
     devDependencies?: SandboxInfo["devDependencies"];
     entry?: string;
+    environment?: SandboxEnvironment;
     /**
      * What template we use, if not defined we infer the template from the dependencies or files.
      */
@@ -110,7 +111,7 @@ export const attachToElement = (element: HTMLElement | ChildNode, options: Sandb
             entry: options.entry,
             dependencies: options.dependencies,
             devDependencies: options.devDependencies,
-            environment: "parcel"
+            environment: options.environment ?? "static"
         };
         const entry = options.entry;
         const sandpackOptions = options.options;