From 9a2ee6ccfaa4cdef2df6f92d647ccb18ca12009b Mon Sep 17 00:00:00 2001 From: "Nurul Huda (Apon)" Date: Sun, 19 Jul 2026 05:56:50 +0600 Subject: [PATCH] docs: rm jsImport from docs and unused files --- site/app/pages/examples/allocator.zx | 24 -------------- site/app/pages/examples/children.zx | 26 --------------- site/app/pages/examples/component.zx | 11 ------- site/app/pages/examples/components.zx | 26 --------------- site/app/pages/examples/csr_react.zx | 13 -------- site/app/pages/examples/dynamic_route.zx | 12 ------- site/app/pages/examples/escaping.zx | 11 ------- site/app/pages/examples/for.zx | 25 -------------- site/app/pages/examples/format.zx | 15 --------- site/app/pages/examples/fragment.zx | 18 ---------- site/app/pages/examples/if.zx | 24 -------------- site/app/pages/examples/importing.zx | 28 ---------------- site/app/pages/examples/playground.zx | 42 ------------------------ site/app/pages/examples/react.tsx | 13 -------- site/app/pages/examples/react.zx | 12 ------- site/app/pages/examples/routing.zx | 16 --------- site/app/pages/examples/switch.zx | 31 ----------------- site/app/pages/examples/text.zx | 35 -------------------- site/app/pages/examples/while.zx | 13 -------- site/app/pages/reference/page.zx | 6 ++-- 20 files changed, 4 insertions(+), 397 deletions(-) delete mode 100644 site/app/pages/examples/allocator.zx delete mode 100644 site/app/pages/examples/children.zx delete mode 100644 site/app/pages/examples/component.zx delete mode 100644 site/app/pages/examples/components.zx delete mode 100644 site/app/pages/examples/csr_react.zx delete mode 100644 site/app/pages/examples/dynamic_route.zx delete mode 100644 site/app/pages/examples/escaping.zx delete mode 100644 site/app/pages/examples/for.zx delete mode 100644 site/app/pages/examples/format.zx delete mode 100644 site/app/pages/examples/fragment.zx delete mode 100644 site/app/pages/examples/if.zx delete mode 100644 site/app/pages/examples/importing.zx delete mode 100644 site/app/pages/examples/playground.zx delete mode 100644 site/app/pages/examples/react.tsx delete mode 100644 site/app/pages/examples/react.zx delete mode 100644 site/app/pages/examples/routing.zx delete mode 100644 site/app/pages/examples/switch.zx delete mode 100644 site/app/pages/examples/text.zx delete mode 100644 site/app/pages/examples/while.zx diff --git a/site/app/pages/examples/allocator.zx b/site/app/pages/examples/allocator.zx deleted file mode 100644 index 1b97d195..00000000 --- a/site/app/pages/examples/allocator.zx +++ /dev/null @@ -1,24 +0,0 @@ -pub fn AllocatorDemo(ctx: zx.PageContext) zx.Component { - return ( - - - My Page - - - - - - ); -} - -fn MyComponent(allocator: zx.Allocator) zx.Component { - const someText = "This text will be allocated and escaped"; - - return ( -
- {someText} -
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/children.zx b/site/app/pages/examples/children.zx deleted file mode 100644 index dad57ca0..00000000 --- a/site/app/pages/examples/children.zx +++ /dev/null @@ -1,26 +0,0 @@ -pub fn CardDemo(allocator: zx.Allocator) zx.Component { - return ( -
- -

This is the card content.

- - -
- ); -} - -const CardProps = struct { - title: []const u8, - children: zx.Component, -}; - -fn Card(allocator: zx.Allocator, props: CardProps) zx.Component { - return ( -
-

{props.title}

-
{props.children}
-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/component.zx b/site/app/pages/examples/component.zx deleted file mode 100644 index 535fd921..00000000 --- a/site/app/pages/examples/component.zx +++ /dev/null @@ -1,11 +0,0 @@ -pub fn Page(allocator: zx.Allocator) zx.Component { - const greeting = zx.Component{ .text = "Hello!" }; - - return ( -
- {greeting} -
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/components.zx b/site/app/pages/examples/components.zx deleted file mode 100644 index a123bf4a..00000000 --- a/site/app/pages/examples/components.zx +++ /dev/null @@ -1,26 +0,0 @@ -pub fn ButtonDemo(ctx: zx.PageContext) zx.Component { - const allocator = ctx.arena; - - return ( -
-
- ); -} - -const ButtonProps = struct { - title: []const u8 = "Click Me", - class: []const u8 = "btn", -}; - -fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component { - return ( - - ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/csr_react.zx b/site/app/pages/examples/csr_react.zx deleted file mode 100644 index e94ade4d..00000000 --- a/site/app/pages/examples/csr_react.zx +++ /dev/null @@ -1,13 +0,0 @@ -pub fn Page(allocator: zx.Allocator) zx.Component { - visit_count += 1; - - return ( -
- -
- ); -} - -var visit_count: u64 = 0; -const zx = @import("zx"); -const CounterComponent = @jsImport("./react.tsx"); diff --git a/site/app/pages/examples/dynamic_route.zx b/site/app/pages/examples/dynamic_route.zx deleted file mode 100644 index c8b63ddd..00000000 --- a/site/app/pages/examples/dynamic_route.zx +++ /dev/null @@ -1,12 +0,0 @@ -pub fn UserProfile(ctx: zx.PageContext) zx.Component { - const user_id = ctx.request.params.get("id") orelse "unknown"; - - return ( -
-

User Profile

-

User ID: {user_id}

-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/escaping.zx b/site/app/pages/examples/escaping.zx deleted file mode 100644 index 39d352f9..00000000 --- a/site/app/pages/examples/escaping.zx +++ /dev/null @@ -1,11 +0,0 @@ -pub fn RawHtml(allocator: zx.Allocator) zx.Component { - return ( -
-
- This HTML is rendered directly -
-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/for.zx b/site/app/pages/examples/for.zx deleted file mode 100644 index ab202bb8..00000000 --- a/site/app/pages/examples/for.zx +++ /dev/null @@ -1,25 +0,0 @@ -pub fn UserList(arena: zx.Allocator) zx.Component { - const users = [_]struct { name: []const u8, role: UserRole }{ - .{ .name = "John", .role = .admin }, - .{ .name = "Jane", .role = .member }, - .{ .name = "Jim", .role = .guest }, - }; - return ( -
- {for (users) |user| ( -
-

{user.name}

- {switch (user.role) { - .admin => (Admin), - .member => (Member), - .guest => (Guest), - }} -
- )} -
- ); -} - -const zx = @import("zx"); - -const UserRole = enum { admin, member, guest }; diff --git a/site/app/pages/examples/format.zx b/site/app/pages/examples/format.zx deleted file mode 100644 index 490c4af7..00000000 --- a/site/app/pages/examples/format.zx +++ /dev/null @@ -1,15 +0,0 @@ -pub fn FormatDemo(allocator: zx.Allocator) zx.Component { - const count = 42; - const hex_value = 255; - const percentage = 75; - - return ( -
-

Count: {count}

-

Hex: 0x{hex_value}

-

Percentage: {percentage}%

-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/fragment.zx b/site/app/pages/examples/fragment.zx deleted file mode 100644 index 17822a38..00000000 --- a/site/app/pages/examples/fragment.zx +++ /dev/null @@ -1,18 +0,0 @@ -pub fn FragmentDemo(allocator: zx.Allocator) zx.Component { - return ( -
-
-
- ); -} - -fn Header(allocator: zx.Allocator) zx.Component { - return ( - <> -

Welcome

-

Multiple elements without a wrapper

- - ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/if.zx b/site/app/pages/examples/if.zx deleted file mode 100644 index c78ac9e6..00000000 --- a/site/app/pages/examples/if.zx +++ /dev/null @@ -1,24 +0,0 @@ -pub fn Conditional(allocator: zx.Allocator) zx.Component { - const is_admin = true; - const is_logged_in = false; - - return ( -
-
- {if (is_admin) (

Admin

) else (

User

)} -
-
- {if (is_admin) ("Powerful") else ("Powerless")} -
-
- {if (is_logged_in) ( -

Welcome, User!

- ) else ( -

Please log in to continue.

- )} -
-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/importing.zx b/site/app/pages/examples/importing.zx deleted file mode 100644 index e8e8df76..00000000 --- a/site/app/pages/examples/importing.zx +++ /dev/null @@ -1,28 +0,0 @@ -pub fn ImportDemo(allocator: zx.Allocator) zx.Component { - return ( -
-
- ); -} - -const zx = @import("zx"); - -// Define components in the same file -const ButtonProps = struct { title: []const u8 }; -fn Button(a: zx.Allocator, props: ButtonProps) zx.Component { - return (); -} - -const CardProps = struct { title: []const u8, children: zx.Component }; -fn Card(a: zx.Allocator, props: CardProps) zx.Component { - return ( -
-

{props.title}

- {props.children} -
- ); -} diff --git a/site/app/pages/examples/playground.zx b/site/app/pages/examples/playground.zx deleted file mode 100644 index 75f75379..00000000 --- a/site/app/pages/examples/playground.zx +++ /dev/null @@ -1,42 +0,0 @@ -pub fn Playground(allocator: zx.Allocator) zx.Component { - const is_loading = true; - var i: usize = 0; - - return ( -
-

Hello, Ziex!

- - {for (users) |user| ( - - )} - - {if (is_loading) (

Loading...

) else (

Loaded

)} - - {while (i < 5) : (i += 1) ({i})} -
- ); -} - -fn Profile(ctx: *zx.ComponentCtx(User)) zx.Component { - return ( -
-

{ctx.props.name}

-
{ctx.props.age}
- - {switch (ctx.props.role) { - .admin => "Admin", - .member => "Member", - }} - -
- ); -} - -const User = struct { name: []const u8, age: u32, role: enum { admin, member } }; - -const users = [_]User{ - .{ .name = "John", .age = 20, .role = .admin }, - .{ .name = "Jane", .age = 21, .role = .member }, -}; - -const zx = @import("zx"); diff --git a/site/app/pages/examples/react.tsx b/site/app/pages/examples/react.tsx deleted file mode 100644 index c6703a38..00000000 --- a/site/app/pages/examples/react.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { useState } from "react"; - -export default function Page(props: { html: string, visit_count: number }) { - const [visit_count, setVisitCount] = useState(props.visit_count); - - return ( -
- - -

Visit Count: {visit_count}

-
- ); -} \ No newline at end of file diff --git a/site/app/pages/examples/react.zx b/site/app/pages/examples/react.zx deleted file mode 100644 index 8d56e6a1..00000000 --- a/site/app/pages/examples/react.zx +++ /dev/null @@ -1,12 +0,0 @@ -pub fn ReactDemo(allocator: zx.Allocator) zx.Component { - const max_count = 10; - - return ( -
- -
- ); -} - -const zx = @import("zx"); -const CounterComponent = @jsImport("react.tsx"); diff --git a/site/app/pages/examples/routing.zx b/site/app/pages/examples/routing.zx deleted file mode 100644 index dec644a0..00000000 --- a/site/app/pages/examples/routing.zx +++ /dev/null @@ -1,16 +0,0 @@ -// This example shows a page component -pub fn Page(ctx: zx.PageContext) zx.Component { - const allocator = ctx.arena; - - // Access request data (e.g., query params, headers, etc.) - // const query = ctx.request.query() catch unreachable; - - return ( -
-

Hello, World!

-

Welcome to the page

-
- ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/switch.zx b/site/app/pages/examples/switch.zx deleted file mode 100644 index 6192d02d..00000000 --- a/site/app/pages/examples/switch.zx +++ /dev/null @@ -1,31 +0,0 @@ -pub fn RoleSwitch(allocator: zx.Allocator) zx.Component { - const user_swtc = users[0]; - - return ( -
-
- {switch (user_swtc.user_type) { - .admin => ("Admin"), - .member => ("Member"), - }} -
-
- {switch (user_swtc.user_type) { - .admin => (

Powerful

), - .member => (

Powerless

), - }} -
-
- ); -} - -const zx = @import("zx"); - -const UserType = enum { admin, member }; - -const User = struct { name: []const u8, age: u32, user_type: UserType }; - -const users = [_]User{ - .{ .name = "John", .age = 20, .user_type = .admin }, - .{ .name = "Jane", .age = 21, .user_type = .member }, -}; diff --git a/site/app/pages/examples/text.zx b/site/app/pages/examples/text.zx deleted file mode 100644 index d180218b..00000000 --- a/site/app/pages/examples/text.zx +++ /dev/null @@ -1,35 +0,0 @@ -pub fn Expressions(allocator: zx.Allocator) !zx.Component { - const string_val = "hello"; - const int_val: i32 = 42; - const float_val: f32 = 3.14; - const bool_true = true; - const bool_false = false; - const optional_val: ?[]const u8 = "present"; - const optional_null: ?[]const u8 = null; - - const InputType = enum { text, number, checkbox }; - const enum_val = InputType.text; - - const component_val = (

hi

); - - const component_array_val = try allocator.alloc(zx.Component, 2); - component_array_val[0] = (
  • hi
    • ); - component_array_val[1] = (
  • hello
    • ); - - return ( -
    -

    String: {string_val}

    -

    Integer: {int_val}

    -

    Float: {float_val}

    -

    Boolean: {bool_true}

    -

    Boolean: {bool_false}

    -

    Optional: {optional_val}

    -

    Optional: {optional_null}

    -

    Enum: {enum_val}

    -

    Component: {component_val}

    -
      Component Array: {component_array_val}
    -
    - ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/examples/while.zx b/site/app/pages/examples/while.zx deleted file mode 100644 index 3a886925..00000000 --- a/site/app/pages/examples/while.zx +++ /dev/null @@ -1,13 +0,0 @@ -pub fn Counter(allocator: zx.Allocator) zx.Component { - var i: usize = 0; - - return ( - - ); -} - -const zx = @import("zx"); diff --git a/site/app/pages/reference/page.zx b/site/app/pages/reference/page.zx index 79051899..888216ed 100644 --- a/site/app/pages/reference/page.zx +++ b/site/app/pages/reference/page.zx @@ -372,9 +372,11 @@ pub fn Page(ctx: zx.PageContext) !zx.Component {

    Importing

    -

    ZX supports importing components and modules from various sources. You can import ZX components from other files, React/TSX components for client-side interactivity, and standard Zig modules.

    +

    + ZX supports importing components and modules from various sources. You can import ZX components from other files, + and standard Zig modules. You can't import .zx file to standard .zig file, in case you need to do that you can name your .zig file .zx such as route.zx for example when you need to import things from a .zx file. +

    -

    Use @jsImport for React/TSX components and the standard @import for ZX and Zig files.

    Dynamic Routes