chore: some cli

package.json

@@ -2,6 +2,7 @@
   "name": "kaplayground",
   "type": "module",
   "version": "2.0.0",
+  "bin": "scripts/cli.js",
   "scripts": {
     "install": "git submodule update --init --recursive && cd kaplay && pnpm i",
     "dev": "vite dev",
@@ -10,12 +11,12 @@
     "preview": "vite preview",
     "generate:examples": "node --experimental-strip-types scripts/examples.ts",
     "fmt": "dprint fmt",
-    "check": "tsc --noEmit --p tsconfig.app.json"
+    "check": "tsc --noEmit --p tsconfig.app.json",
+    "dev:bin": "node scripts/cli.js --examples=fakeExamples"
   },
   "dependencies": {
     "@formkit/drag-and-drop": "^0.0.38",
     "@kaplayjs/crew": "^1.6.1",
-    "@kaplayjs/dprint-config": "^1.1.0",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-tabs": "^1.1.0",
@@ -37,6 +38,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@kaplayjs/dprint-config": "^1.1.0",
     "@types/node": "^22.7.0",
     "@types/pako": "^2.0.3",
     "@types/react": "^18.3.1",
@@ -48,6 +50,7 @@
     "monaco-editor": "^0.48.0",
     "postcss": "^8.4.41",
     "vite": "^5.4.2",
+    "vite-plugin-custom-env": "^1.0.3",
     "vite-plugin-static-copy": "^1.0.6"
   },
   "packageManager": "[email protected]+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"

scripts/cli.js

@@ -0,0 +1,25 @@
+import { createServer } from "vite";
+import { VitePluginEnv } from "vite-plugin-custom-env";
+
+// Get process and options
+const args = process.argv.slice(2) ?? [];
+
+const options = args.reduce((acc, arg) => {
+    const [key, value] = arg.split("=");
+    acc[key.replace(/^-{1,2}/, "")] = value;
+    return acc;
+}, {});
+
+process.env.EXAMPLES_PATH = options.examples || "examples";
+
+const server = await createServer({
+    plugins: [
+        VitePluginEnv({
+            "VITE_USE_FILE": "true",
+        }),
+    ],
+});
+await server.listen();
+
+server.printUrls();
+server.bindCLIShortcuts({ print: true });

scripts/examples.ts

@@ -4,23 +4,32 @@
 import fs from "fs";
 import path from "path";
 
-const examplesPath = path.join(import.meta.dirname, "..", "kaplay", "examples");
+const defaultExamplesPath = path.join(
+    import.meta.dirname,
+    "..",
+    "kaplay",
+    "examples",
+);
 const distPath = path.join(import.meta.dirname, "..", "src", "data");
 
-let exampleCount = 0;
+export const generateExamples = async (examplesPath = defaultExamplesPath) => {
+    let exampleCount = 0;
 
-const examples = fs.readdirSync(examplesPath).map((file) => {
-    if (!file.endsWith(".js")) return null;
+    const examples = fs.readdirSync(examplesPath).map((file) => {
+        if (!file.endsWith(".js")) return null;
 
-    const filePath = path.join(examplesPath, file);
-    const code = fs.readFileSync(filePath, "utf-8");
-    const name = file.replace(".js", "");
+        const filePath = path.join(examplesPath, file);
+        const code = fs.readFileSync(filePath, "utf-8");
+        const name = file.replace(".js", "");
 
-    return { name, code, index: (exampleCount++).toString() };
-});
+        return { name, code, index: (exampleCount++).toString() };
+    });
 
-// Write a JSON file with the examples
-fs.writeFileSync(
-    path.join(distPath, "examples.json"),
-    JSON.stringify(examples.filter(Boolean), null, 4),
-);
+    // Write a JSON file with the examples
+    fs.writeFileSync(
+        path.join(distPath, "exampleList.json"),
+        JSON.stringify(examples.filter(Boolean), null, 4),
+    );
+
+    console.log("Generated exampleList.json");
+};

src/App.tsx

@@ -3,6 +3,11 @@ import "react-toastify/dist/ReactToastify.css";
 import "allotment/dist/style.css";
 import "./styles/index.css";
 import "./styles/toast.css";
+import "./util/hotkeys.js";
+
+export const dynamicConfig = {
+    useFile: Boolean(import.meta.env.VITE_USE_FILE),
+};
 
 export const App = () => {
     return <Playground />;

src/components/Editor/monacoConfig.ts

@@ -14,7 +14,7 @@ export const configMonaco = (monaco: Monaco) => {
     // Add the KAPLAY module
     monaco.languages.typescript.javascriptDefaults.addExtraLib(
         kaplayModule,
-        "kaplay.d.ts",
+        "types.d.ts",
     );
 
     monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({