Skip to content

Commit 0e583a7

Browse files
committed
feat: add SolidJS example
Add examples/solid, mirroring the existing React/Vue/Svelte example shape (app.zon, hand-owned build.zig, Vite dev server, native dev/run/test) with a SolidJS frontend using createSignal/onMount and solid-js/web's render(). Wired into zig build test-examples-frontends and documented in examples/README.md and the frontend docs page. Closes #57
1 parent 36d295a commit 0e583a7

16 files changed

Lines changed: 1150 additions & 1 deletion

File tree

‎build.zig‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -800,11 +800,13 @@ pub fn build(b: *std.Build) void {
800800
const frontend_examples_step = b.step("test-examples-frontends", "Run frontend example tests");
801801
addExampleTestStep(b, host_cli_exe, frontend_examples_step, "test-example-next", "Run Next example tests", "examples/next", .owned);
802802
addExampleTestStep(b, host_cli_exe, frontend_examples_step, "test-example-react", "Run React example tests", "examples/react", .owned);
803+
addExampleTestStep(b, host_cli_exe, frontend_examples_step, "test-example-solid", "Run Solid example tests", "examples/solid", .owned);
803804
addExampleTestStep(b, host_cli_exe, frontend_examples_step, "test-example-svelte", "Run Svelte example tests", "examples/svelte", .owned);
804805
addExampleTestStep(b, host_cli_exe, frontend_examples_step, "test-example-vue", "Run Vue example tests", "examples/vue", .owned);
805806
addFileContainsCheckStep(b, file_contains_checker, frontend_examples_step, "test-example-frontend-positioning", "Verify frontend example native shell positioning", &.{
806807
.{ .path = "examples/next/README.md", .pattern = "opens the native app shell with WebView content." },
807808
.{ .path = "examples/react/README.md", .pattern = "opens the native app shell with WebView content." },
809+
.{ .path = "examples/solid/README.md", .pattern = "opens the native app shell with WebView content." },
808810
.{ .path = "examples/svelte/README.md", .pattern = "opens the native app shell with WebView content." },
809811
.{ .path = "examples/vue/README.md", .pattern = "opens the native app shell with WebView content." },
810812
});

‎changelog.d/solid-example.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
feature: **SolidJS example**: `examples/solid` mirrors the existing React/Vue/Svelte examples (Vite dev server, `zig build run`/`dev`/`test`), for apps that want SolidJS's fine-grained reactivity instead of a virtual DOM. Requested in #57.

‎docs/src/app/frontend/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ The repository includes complete frontend examples:
102102

103103
- `examples/next` - Next.js app with `frontend/out` production assets.
104104
- `examples/react` - React app built with Vite.
105+
- `examples/solid` - Solid app built with Vite.
105106
- `examples/svelte` - Svelte app built with Vite.
106107
- `examples/vue` - Vue app built with Vite.
107108

‎examples/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ native build # produce a ReleaseFast binary in zig-out/bin/
4040
| `native-shell` | Native toolbar/sidebar/statusbar chrome around a WebView content area. |
4141
| `native-panels` | Split native panels and stacked native controls around WebView content. |
4242
| `browser` | Layered WebViews for isolated page content, engine link flags wired by hand. |
43-
| `next`, `react`, `svelte`, `vue` | Frontend projects with managed install/build/dev-server steps. |
43+
| `next`, `react`, `solid`, `svelte`, `vue` | Frontend projects with managed install/build/dev-server steps. |
4444
| `ui-inbox` | The builder-view inbox; its `-Dmobile` lib step feeds the mobile host shims. |
4545
| `mobile-canvas` | Builds the mobile embed static library consumed by the iOS/Android canvas shims. |
4646

‎examples/solid/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Solid Example
2+
3+
A super basic Native SDK example using SolidJS for the frontend and Zig for the native shell.
4+
5+
## Run
6+
7+
```bash
8+
zig build run
9+
```
10+
11+
The build installs frontend dependencies, builds the frontend, and opens the native app shell with WebView content.
12+
13+
## Dev Server
14+
15+
```bash
16+
zig build dev
17+
```
18+
19+
This starts the Solid dev server from `app.zon`, waits for `http://127.0.0.1:5173/`, and launches the native shell with `NATIVE_SDK_FRONTEND_URL`.
20+
21+
## Frontend
22+
23+
- Frontend: `solid`
24+
- Production assets: `frontend/dist`
25+
- Dev URL: `http://127.0.0.1:5173/`
26+
27+
## Using Outside The Repo
28+
29+
This example references the Native SDK via relative path (`../../`). To use it standalone, override the path:
30+
31+
```bash
32+
zig build run -Dnative-sdk-path=/path/to/native-sdk
33+
```

‎examples/solid/app.zon‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.{
2+
.id = "dev.native_sdk.solid-example",
3+
.name = "solid-example",
4+
.display_name = "Solid Example",
5+
.version = "0.1.0",
6+
.platforms = .{ "macos", "linux" },
7+
.permissions = .{},
8+
.capabilities = .{ "webview" },
9+
.frontend = .{
10+
.dist = "frontend/dist",
11+
.entry = "index.html",
12+
.spa_fallback = true,
13+
.dev = .{
14+
.url = "http://127.0.0.1:5173/",
15+
.command = .{ "npm", "--prefix", "frontend", "run", "dev", "--", "--host", "127.0.0.1" },
16+
.ready_path = "/",
17+
.timeout_ms = 30000,
18+
},
19+
},
20+
.security = .{
21+
.navigation = .{
22+
.allowed_origins = .{ "zero://app", "zero://inline", "http://127.0.0.1:5173" },
23+
.external_links = .{ .action = "deny" },
24+
},
25+
},
26+
.web_engine = "system",
27+
.cef = .{ .dir = "third_party/cef/macos", .auto_install = false },
28+
.windows = .{
29+
.{ .label = "main", .title = "Solid Example", .width = 720, .height = 480, .restore_state = true },
30+
},
31+
}

0 commit comments

Comments
 (0)