Skip to content

Commit b173d4f

Browse files
oligamiqoligamiq
committed
Add download functionality and integrate solid-select component
1 parent 0237c62 commit b173d4f

14 files changed

+226
-57
lines changed

‎bun.lockb

400 Bytes
Binary file not shown.

‎page/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@bjorn3/browser_wasi_shim": "^0.3.0",
1717
"@oligami/browser_wasi_shim-threads": "^0.1.0",
1818
"@oligami/shared-object": "0.1.1",
19+
"@thisbeyond/solid-select": "^0.15.0",
1920
"@xterm/addon-fit": "^0.10.0",
2021
"@xterm/addon-search": "^0.15.0",
2122
"@xterm/xterm": "^5.5.0",

‎page/src/App.tsx

+15-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import type { WASIFarmRef } from "@oligami/browser_wasi_shim-threads";
44
import type { Ctx } from "./ctx";
55
import { MonacoEditor } from "solid-monaco";
66
import { default_value, rust_file } from "./config";
7-
import { Button } from "./btn";
7+
import { DownloadButton, RunButton } from "./btn";
8+
import { triples } from "./sysroot";
9+
import { Select } from "@thisbeyond/solid-select";
810

911
const App = (props: {
1012
ctx: Ctx;
@@ -27,9 +29,19 @@ const App = (props: {
2729
onMount={handleMount}
2830
onChange={handleEditorChange}
2931
/>
30-
{/* <p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p> */}
32+
{/* <p class="text-4xl text-green-700 text-center">Hello tailwind!</p> */}
3133
<SetupMyTerminal ctx={props.ctx} callback={props.callback} />
32-
<Button />
34+
<div class="flex">
35+
<div class="p-4 text-white">
36+
<RunButton />
37+
</div>
38+
<div class="p-4 text-white">
39+
<Select options={triples} class="text-4xl text-green-700" />
40+
</div>
41+
<div class="p-4 text-white">
42+
<DownloadButton />
43+
</div>
44+
</div>
3345
</>
3446
);
3547
};

‎page/src/btn.tsx

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
1-
import { compile_and_run } from "./compile_and_run";
1+
import { compile_and_run, download } from "./compile_and_run";
22

3-
export const Button = () => {
3+
export const RunButton = () => {
44
return (
55
<button
66
type="button"
77
onClick={() => {
8-
console.log("button clicked");
8+
console.log("run button clicked");
99
compile_and_run();
1010
}}
11-
class="text-2xl text-green-700 text-center py-20"
11+
class="text-2xl text-green-700"
1212
>
1313
Compile and Run
1414
</button>
1515
);
1616
};
17+
18+
export const DownloadButton = () => {
19+
return (
20+
<button
21+
type="button"
22+
onClick={() => {
23+
console.log("download button clicked");
24+
download("/tmp/main.wasm");
25+
}}
26+
class="text-2xl text-green-700"
27+
>
28+
Download file
29+
</button>
30+
);
31+
};

‎page/src/cat.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import type { WASIFarmAnimal } from "@oligami/browser_wasi_shim-threads";
22
import { wasi } from "@bjorn3/browser_wasi_shim";
33

4-
export const get_data = (path__: string, _animal: WASIFarmAnimal): Uint8Array => {
4+
export const get_data = (
5+
path__: string,
6+
_animal: WASIFarmAnimal,
7+
): Uint8Array => {
58
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
69
const animal = _animal as any;
710

@@ -135,4 +138,4 @@ export const get_data = (path__: string, _animal: WASIFarmAnimal): Uint8Array =>
135138
animal.wasi_farm_refs[wasi_farm_ref_n].fd_close(opened_fd);
136139

137140
return file_data;
138-
}
141+
};

‎page/src/cmd_parser.ts

+21-5
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,9 @@ export const parser_setup = async (ctx: Ctx) => {
2626
is_cmd_run_end: () => {
2727
return is_cmd_run_end;
2828
},
29-
set_end_of_exec: (
30-
_end_of_exec: boolean,
31-
) => {
29+
set_end_of_exec: (_end_of_exec: boolean) => {
3230
end_of_exec = _end_of_exec;
33-
}
31+
},
3432
},
3533
ctx.waiter_id,
3634
);
@@ -51,7 +49,12 @@ const all_done = async (ctx: Ctx) => {
5149
>();
5250
const ls = new SharedObjectRef(ctx.ls_id).proxy<(...string) => void>();
5351
const tree = new SharedObjectRef(ctx.tree_id).proxy<(...string) => void>();
54-
const exec_file = new SharedObjectRef(ctx.exec_file_id).proxy<(...string) => void>();
52+
const exec_file = new SharedObjectRef(ctx.exec_file_id).proxy<
53+
(...string) => void
54+
>();
55+
const download = new SharedObjectRef(ctx.download_id).proxy<
56+
(string) => void
57+
>();
5558

5659
cmd_parser = new SharedObject((...args) => {
5760
is_cmd_run_end = false;
@@ -77,6 +80,18 @@ const all_done = async (ctx: Ctx) => {
7780
console.log("tree");
7881
await terminal("executing tree...\r\n");
7982
await tree(...args.slice(1));
83+
} else if (cmd === "download") {
84+
console.log("download: ", args[1]);
85+
if (args[1].includes("/")) {
86+
await terminal("executing download...\r\n");
87+
end_of_exec = false;
88+
await download(args[1]);
89+
while (!end_of_exec) {
90+
await new Promise<void>((resolve) => setTimeout(resolve, 100));
91+
}
92+
} else {
93+
await terminal("download require absolute path\r\n");
94+
}
8095
} else if (cmd.includes("/")) {
8196
console.log("cmd includes /");
8297
await terminal("executing file...\r\n");
@@ -95,4 +110,5 @@ const all_done = async (ctx: Ctx) => {
95110

96111
await terminal("rustc -h\r\n");
97112
await rustc("-h");
113+
await terminal(">");
98114
};

‎page/src/compile_and_run.ts

+36-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SharedObjectRef } from "@oligami/shared-object";
1+
import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
22
import type { Ctx } from "./ctx";
33

44
let ctx: Ctx;
@@ -8,6 +8,8 @@ let waiter: {
88
is_cmd_run_end: () => boolean;
99
};
1010
let terminal: (string) => void;
11+
let shared_downloader: SharedObject;
12+
let exec_ref: (...string) => void;
1113

1214
export const compile_and_run_setup = (_ctx: Ctx) => {
1315
ctx = _ctx;
@@ -16,7 +18,20 @@ export const compile_and_run_setup = (_ctx: Ctx) => {
1618
is_all_done: () => boolean;
1719
is_cmd_run_end: () => boolean;
1820
}>();
19-
}
21+
22+
shared_downloader = new SharedObject((url: string, name: string) => {
23+
(async () => {
24+
const a = document.createElement('a');
25+
a.href = url;
26+
a.download = name; // ダウンロード時のファイル名を指定
27+
document.body.appendChild(a); // DOM に追加
28+
a.click(); // クリックしてダウンロードを開始
29+
document.body.removeChild(a); // すぐに削除
30+
})();
31+
}, ctx.download_by_url_id);
32+
33+
exec_ref = new SharedObjectRef(ctx.cmd_parser_id).proxy<(...string) => void>();
34+
};
2035

2136
let can_setup = false;
2237

@@ -37,16 +52,32 @@ export const compile_and_run = async () => {
3752
}
3853

3954
if (can_setup) {
40-
const exec = ["rustc", "/main.rs", "--sysroot", "/sysroot", "--target", "wasm32-wasip1", "--out-dir", "/tmp", "-Ccodegen-units=1"];
55+
const exec = [
56+
"rustc",
57+
"/main.rs",
58+
"--sysroot",
59+
"/sysroot",
60+
"--target",
61+
"wasm32-wasip1",
62+
"--out-dir",
63+
"/tmp",
64+
"-Ccodegen-units=1",
65+
];
4166
await terminal(`${exec.join(" ")}\r\n`);
4267
await cmd_parser(...exec);
43-
while (!await waiter.is_cmd_run_end()) {
68+
while (!(await waiter.is_cmd_run_end())) {
4469
await new Promise((resolve) => setTimeout(resolve, 100));
4570
}
4671
await terminal("/tmp/main.wasm\r\n");
4772
await cmd_parser("/tmp/main.wasm");
48-
while (!await waiter.is_cmd_run_end()) {
73+
while (!(await waiter.is_cmd_run_end())) {
4974
await new Promise((resolve) => setTimeout(resolve, 100));
5075
}
5176
}
77+
};
78+
79+
export const download = async (file: string) => {
80+
console.log("download");
81+
await terminal(`download ${file}\r\n`);
82+
exec_ref("download", file);
5283
}

‎page/src/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { File } from '@bjorn3/browser_wasi_shim';
1+
import { File } from "@bjorn3/browser_wasi_shim";
22

33
export const default_value = `// /main.rs
44
fn main() {

‎page/src/ctx.ts

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export type Ctx = {
66
tree_id: string;
77
ls_id: string;
88
exec_file_id: string;
9+
download_id: string;
10+
download_by_url_id: string;
911
};
1012

1113
const gen_id = () => Math.random().toString(36).substring(7);
@@ -19,5 +21,7 @@ export const gen_ctx = (): Ctx => {
1921
tree_id: gen_id(),
2022
ls_id: gen_id(),
2123
exec_file_id: gen_id(),
24+
download_id: gen_id(),
25+
download_by_url_id: gen_id(),
2226
};
2327
};

‎page/src/index.css

+25
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
.custom {
6+
&.solid-select-container {
7+
color: #fa7f25;
8+
}
9+
.solid-select-control {
10+
border-color: #fca560;
11+
&:focus-within {
12+
outline-color: #fca560;
13+
}
14+
}
15+
.solid-select-placeholder {
16+
color: #fca560;
17+
}
18+
.solid-select-option {
19+
&:hover {
20+
background-color: #fa7f25;
21+
color: #fff;
22+
}
23+
&[data-focused="true"] {
24+
background-color: #fca560;
25+
color: #fff;
26+
}
27+
}
28+
}

‎page/src/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { render } from "solid-js/web";
44

55
import App from "./App";
66
import { gen_ctx } from "./ctx";
7-
import { SharedObject, SharedObjectRef } from "@oligami/shared-object";
87
import MainWorker from "./worker?worker";
98
import { parser_setup } from "./cmd_parser";
109
import "./monaco_worker";
1110
import { compile_and_run_setup } from "./compile_and_run";
11+
import "@thisbeyond/solid-select/style.css";
1212

1313
const root = document.getElementById("root");
1414

‎page/src/monaco_worker.ts

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import * as monaco from 'monaco-editor';
2-
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
3-
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
4-
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
5-
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
6-
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
1+
import * as monaco from "monaco-editor";
2+
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
3+
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
4+
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
5+
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
6+
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
77

88
// @ts-ignore
99
self.MonacoEnvironment = {
10-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
11-
getWorker(_: any, label: string) {
12-
if (label === 'json') {
13-
return new jsonWorker();
14-
}
15-
if (label === 'css' || label === 'scss' || label === 'less') {
16-
return new cssWorker();
17-
}
18-
if (label === 'html' || label === 'handlebars' || label === 'razor') {
19-
return new htmlWorker();
20-
}
21-
if (label === 'typescript' || label === 'javascript') {
22-
return new tsWorker();
23-
}
24-
return new editorWorker();
25-
}
10+
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
11+
getWorker(_: any, label: string) {
12+
if (label === "json") {
13+
return new jsonWorker();
14+
}
15+
if (label === "css" || label === "scss" || label === "less") {
16+
return new cssWorker();
17+
}
18+
if (label === "html" || label === "handlebars" || label === "razor") {
19+
return new htmlWorker();
20+
}
21+
if (label === "typescript" || label === "javascript") {
22+
return new tsWorker();
23+
}
24+
return new editorWorker();
25+
},
2626
};

‎page/src/sysroot.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export const triples = [
2+
"aarch64-unknown-linux-gnu",
3+
"aarch64-unknown-linux-musl",
4+
"arm-unknown-linux-gnueabi",
5+
"arm-unknown-linux-gnueabihf",
6+
"arm-unknown-linux-musleabi",
7+
"arm-unknown-linux-musleabihf",
8+
"armv7-unknown-linux-gnueabihf",
9+
"i586-unknown-linux-gnu",
10+
"i686-unknown-linux-gnu",
11+
"i686-unknown-linux-musl",
12+
"loongarch64-unknown-linux-gnu",
13+
"loongarch64-unknown-linux-musl",
14+
"powerpc-unknown-linux-gnu",
15+
"powerpc64-unknown-linux-gnu",
16+
"powerpc64le-unknown-linux-gnu",
17+
"riscv64gc-unknown-linux-gnu",
18+
"riscv64gc-unknown-linux-musl",
19+
"s390x-unknown-linux-gnu",
20+
"sparcv9-sun-solaris",
21+
"wasm32-wasip1-threads",
22+
"wasm32-wasip1",
23+
"x86_64-pc-windows-gnu",
24+
"x86_64-unknown-freebsd",
25+
"x86_64-unknown-illumos",
26+
"x86_64-unknown-linux-gnu",
27+
"x86_64-unknown-linux-musl",
28+
"x86_64-unknown-netbsd",
29+
"aarch64-pc-windows-msvc",
30+
"i686-pc-windows-gnu",
31+
"i686-pc-windows-msvc",
32+
"x86_64-pc-windows-msvc",
33+
"aarch64-apple-darwin",
34+
"x86_64-apple-darwin",
35+
];

0 commit comments

Comments
 (0)