npm init vite

caoyang@cccy del % npm init vite
# 使用 上下键 选择
✔ Project name: … playground  # playground 是项目名称，它会创建一个该名称的文件夹作为项目根目录
✔ Select a framework: › React  # 使用 React 库
✔ Select a variant: › TypeScript  # 使用 TS 语言开发

Scaffolding project in /Users/caoyang/Documents/Aptos/del/playground...

Done. Now run:

# 需要先运行以下代码
  cd playground
  npm install
  npm run dev

npm init vite playground -- --template react-ts

npx create-vite playground --template react-ts

npm init @vitejs/app playground -- --template react-ts

# 需要先运行以下代码
  cd playground
  npm install
  npm run dev

npm install axios codemirror react-codemirror2
# 或者
npm install axios codemirror react-codemirror2 --legacy-peer-deps
# 或者
npm install [email protected] [email protected] [email protected] [email protected] [email protected]

import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import axios from 'axios';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import './move.js'; // 导入 move.js 文件

const Playground: React.FC = () => {
	const [code, setCode] = useState('');
	const [output, setOutput] = useState('');

	const handleCodeChange = (editor: any, data: any, value: string) => {
		setCode(value);
	};

	const executeCode = async () => {
		try {
			// 发送 Move 代码到后端服务
			const response = await axios.post('http://127.0.0.1:8081/run_move', code);
			setOutput(response.data);
		} catch (error) {
			console.error('执行 Move 代码时出错:', error);
		}


	};

	return (
		<div>
			<CodeMirror
				value={code}
				options={{
					mode: 'move', // 使用 move 模式
					theme: 'material',
					lineNumbers: true,
				}}
				onBeforeChange={(editor, data, value) => {
					setCode(value);
				}}
				onChange={handleCodeChange}
			/>
			<button onClick={executeCode}>执行</button>
			<div>
				<h3>执行结果:</h3>
				<pre>{output}</pre>
			</div>
		</div>
	);
};

export default Playground;

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  // <React.StrictMode>
  <App />
  // </React.StrictMode>,
)

import { useState } from 'react'
import Playground from './playground'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <Playground />
    </>
  )
}

export default App

npm run dev

 VITE v5.2.8  ready in 177 ms

  ➜  Local:   http://localhost:5173/  # 访问这个地址可以打开
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

source $HOME/.cargo/env

rustc --version # 或者 rustc -V
cargo --version   # 或者 cargo -V

cargo new rust_move_server  # rust_move_server 是项目的名称，它会创建一个该名称的文件夹作为项目根目录

cd rust_move_server

cargo build

./target/debug/your_project_name

cargo run

[package]
name = "test_server"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
actix-web = "4.0"
actix-cors = { version = "0.6.0-beta.10" }

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use std::process::{Command, Stdio};
use std::fs;
use std::path::Path;
use std::str;
use actix_cors::Cors;

async fn compile_and_run_move(move_code: web::Bytes) -> impl Responder {
    println!("Received Move code: {:?}", move_code);
    // 创建临时文件目录
    let tmp_dir = "/tmp";
    if !Path::new(tmp_dir).exists() {
        fs::create_dir(tmp_dir).expect("Failed to create temporary directory");
    }

    // 将接收到的 Move 代码写入临时文件
    let tmp_file = "/Users/caoyang/Documents/Aptos/ts_playground/move_code/sources/test.move";
    fs::write(tmp_file, move_code).expect("写入文件：Failed to write Move code to file");

    // 编译 Move 代码
let compile_output = Command::new("aptos")
    .arg("move")
    .arg("test")
    .arg("--package-dir")
    .arg("/Users/caoyang/Documents/Aptos/ts_playground/move_code")
    .output()
    .expect("Failed to execute aptos move test command");

if !compile_output.status.success() {
    let stderr = str::from_utf8(&compile_output.stderr).unwrap_or("Error reading stderr");
    return HttpResponse::InternalServerError().body(format!("Move compilation failed: {}", stderr));
}

    // 将运行结果作为响应返回给客户端
    HttpResponse::Ok().body(String::from_utf8_lossy(&compile_output.stdout).to_string())
}


#[actix_web::main]
async fn main() -> std::io::Result<()> {
    // 启动服务器
    HttpServer::new(|| {
        App::new()
            // 添加CORS中间件
            .wrap(
                Cors::permissive() // <- 使用 Cors::permissive() 替换 Cors::new()
                    .allowed_origin("http://localhost:5173")
            )
            // 定义路由
            .route("/run_move", web::post().to(compile_and_run_move))
    })
    .bind("127.0.0.1:8081")?
    .run()
    .await
}

 curl -X POST -d 'module 0x12::test{
  use std::debug::print;
  use std::string::utf8;
  #[test]
  fun test_server(){
    print(&utf8(b"server is running"));
  }
}' http://127.0.0.1:8081/run_move

mkdir move_code_tmp
cd move_code_tmp

aptos move init  --name move_code

aptos init --network testnet

module 0x42::test{
    use std::debug::print;
	  use std::string::utf8;
    #[test]
    fun test_my(){
        print(&utf8(b"server is running"));
    }
}

aptos move test

module 0x12::test{
  use std::debug::print;
  use std::string::utf8;
  #[test]
  fun test_server(){
    print(&utf8(b"server is running"));
  }
}

 tree -I 'node_modules|build|target' ./

caoyang@cccy ts_playground % tree -I 'node_modules|build|target' ./
./
├── move_code   # move 程序代码
│   ├── Move.toml  # 可以更换为国内源
│   ├── scripts
│   ├── sources
│   │   └── temp.move  # move 临时代码
│   └── tests
├── playground
│   ├── README.md
│   ├── codemirror.d.ts
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   └── vite.svg # 这个可以删掉
│   ├── src
│   │   ├── App.tsx # 取消严格模式，防止渲染两个输入框
│   │   ├── assets
│   │   │   └── react.svg  # 这个可以删掉
│   │   ├── main.tsx
│   │   ├── move.js  # 高亮语法
│   │   ├── playground.tsx  # 文本编辑器
│   │   └── vite-env.d.ts
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
└── rust_move_server  # rust 服务端，用于接受 post 请求，并返回 move 的执行结果
    └── test_server
        ├── Cargo.lock
        ├── Cargo.toml  # 需要配置依赖项
        └── src
            └── main.rs # 服务端代码

{
  "name": "playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.8",
    "codemirror": "^5.65.16",
    "react": "^18.2.0",
    "react-codemirror2": "^7.3.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/codemirror": "^5.60.15",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

[package]
name = "rust_move_server"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
actix-web = "4.0"
actix-cors = { version = "0.6.0-beta.10" }

[package]
name = "move_code"
version = "1.0.0"
authors = []

[addresses]

[dev-addresses]

[dependencies.AptosFramework]
git = "https://github.com/aptos-labs/aptos-core.git"
rev = "mainnet"
subdir = "aptos-move/framework/aptos-framework"

[dev-dependencies]