faet: init schema

Author: jiangtao.yang

apps/dsv/src/App.tsx

@@ -1,17 +1,52 @@
 import { useEffect, useState } from 'react';
 import { run } from 'parser';
+
 function App() {
-  const [count, setCount] = useState(0);
+  const [code, setCode] = useState(`const bubbleSort = (arr) => {
+  for (let i = 0; i < arr.length; i++) {
+    for (let j = 0; j < arr.length - i - 1; j++) {
+      if (arr[j] > arr[j + 1]) {
+        let temp = arr[j];
+        arr[j] = arr[j + 1];
+        arr[j + 1] = temp;
+      }
+    }
+  }
+  return arr;
+}
+
+const arr = [5, 3, 8, 4, 2];
+arr.pop()
+arr.push(1);
+bubbleSort(arr)
 
-  useEffect(() => {
-    run();
-  }, []);
+console.log(arr)
+console.log(JSON.parse(JSON.stringify(arr)))
+`);
 
   return (
-    <div>
-      <button onClick={() => setCount((count) => count + 1)}>
-        count is {count}
-      </button>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'center',
+        height: '100vh',
+      }}
+    >
+      <textarea
+        style={{
+          margin: '12px',
+          width: '480px',
+          height: '600px',
+          padding: '12px',
+          fontSize: '14px',
+          fontFamily: 'monospace',
+        }}
+        placeholder="在此输入代码..."
+        value={code}
+        onChange={(e) => setCode(e.target.value)}
+      />
+      <button onClick={() => run(code)}>Run</button>
     </div>
   );
 }

package.json

@@ -4,11 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "pnpm --filter dsv dev",
+    "dev": "concurrently \"pnpm --filter dsv dev\" \"pnpm --filter=schema dev\" \"pnpm --filter=parser dev\"",
     "build": "pnpm -r build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "concurrently": "^9.1.0"
+  }
 }

packages/parser/package.json

@@ -1,18 +1,20 @@
 {
   "name": "parser",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "dev": "tsc --watch"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.26.7",
-    "@babel/types": "^7.26.7"
+    "@babel/types": "^7.26.7",
+    "schema": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

packages/parser/src/array-proxy.ts

@@ -0,0 +1,131 @@
+const uuid = (prefix) => {
+  return (
+    prefix +
+    "-" +
+    "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    })
+  );
+};
+
+class ArrayProxy {
+  constructor(array, options) {
+    const id = uuid("ArrayProxy");
+    const { snapshotSchema, schema, SchemaBuilder } = options;
+    this.options = options;
+
+    snapshotSchema(
+      new SchemaBuilder()
+        .from(schema)
+        .addStructure({
+          id: id,
+          type: "ArrayProxy",
+        })
+        .build()
+    );
+
+    this.structureId = id;
+    this.target = [...array];
+
+    const proxy = new Proxy(this.target, {
+      get: (target, prop) => {
+        if (prop === "__proxyGet") {
+          return (index) => this._getHandler(target, index);
+        }
+        if (prop === "__proxySet") {
+          return (index, value) => this._setHandler(target, index, value);
+        }
+        if (prop === "__proxyCall") {
+          return (method, args) => {
+            const fn = target[method];
+            return this._applyHandler(fn, target, args, method);
+          };
+        }
+        return this._getHandler(target, prop);
+      },
+      set: (target, prop, value) => this._setHandler(target, prop, value),
+    });
+    return proxy;
+  }
+
+  _getHandler(target, prop) {
+    const { snapshotSchema, schema, SchemaBuilder } = this.options;
+
+    const value = target[prop];
+    if (typeof value === "function" && Array.prototype[prop]) {
+      return (...args) => {
+        const result = value.apply(target, args);
+
+        snapshotSchema(
+          new SchemaBuilder()
+            .from(schema)
+            .addAction(this.structureId, {
+              name: "call",
+              type: prop,
+              args: [...args],
+            })
+            .build()
+        );
+        return result;
+      };
+    }
+
+    if (typeof prop !== "symbol" && !isNaN(prop)) {
+      snapshotSchema(
+        new SchemaBuilder()
+          .from(schema)
+          .addAction(this.structureId, {
+            name: "get",
+            type: "get",
+            args: [Number(prop)],
+          })
+          .build()
+      );
+    }
+
+    return value;
+  }
+
+  _setHandler(target, prop, value) {
+    const { snapshotSchema, schema, SchemaBuilder } = this.options;
+
+    const index = Number(prop);
+    if (!isNaN(index)) {
+      snapshotSchema(
+        new SchemaBuilder()
+          .from(schema)
+          .addAction(this.structureId, {
+            name: "set",
+            type: "set",
+            args: [index, value],
+          })
+          .build()
+      );
+    }
+    target[prop] = value;
+    return true;
+  }
+
+  _applyHandler(target, thisArg, args, method) {
+    const { snapshotSchema, schema, SchemaBuilder } = this.options;
+
+    const result = target.apply(thisArg, args);
+    snapshotSchema(
+      new SchemaBuilder()
+        .from(schema)
+        .addAction(this.structureId, {
+          name: "call",
+          type: method,
+          args: [...args],
+        })
+        .build()
+    );
+
+    if (Array.isArray(result)) {
+      return new ArrayProxy(result, this.options);
+    }
+    return result;
+  }
+}