基于react的拓展性的项目
# wasm-react
在react项目中使用wasm
编写rust函数
#[wasm_bindgen]
pub fn generate_configuration(node_data: String, edge_data: String) -> String {
let nodes: Vec<Node> = parse_nodes(&node_data);
let edges: Vec<Edge> = parse_edges(&edge_data);
let docker_compose_obj = generate_dockercompose_yml(nodes, edges);
let output_string = serde_yaml::to_string(&docker_compose_obj).unwrap();
return output_string;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
添加编译wasm命令
"scripts": {
...
"build:wasm": "cd wasm-parser && ~/.cargo/bin/wasm-pack build --target web --out-dir ./wasm-build"
}
1
2
3
4
2
3
4
添加在js中调用wasm的包
"dependencies": {
...
"wasm-parser": "file:./wasm-parser/wasm-build"
}
1
2
3
4
2
3
4
在react中调用wasm
// WASM modules
import init, { generate_configuration } from "wasm-parser";
// Calling the function
init().then(() => {
const rusty_str = generate_configuration(stringifiedNodes, stringifiedEdges);
});
1
2
3
4
5
6
2
3
4
5
6
https://betterprogramming.pub/deploying-a-wasm-powered-react-app-on-vercel-cf3cae2a75d6
# resume
https://github.com/tbakerx/react-resume-template