ziex-dev-mirror/ziex
1
0
Fork 0
mirror of https://github.com/ziex-dev/ziex.git synced 2026-07-20 02:29:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

docs: rm jsImport from docs and unused files

Browse Source
This commit is contained in:
Nurul Huda (Apon) 2026-07-19 05:56:50 +06:00
parent 8c1f8decd1
commit 9a2ee6ccfa
No known key found for this signature in database
GPG Key ID: 5D3F1DE2855A2F79
20 changed files with 4 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/app/pages/examples/allocator.zx
View File

@ -1,24 +0,0 @@
pub fn AllocatorDemo(ctx: zx.PageContext) zx.Component {
return (
<html @allocator={ctx.arena}>
<head>
<title>My Page</title>
</head>
<body>
<MyComponent />
</body>
</html>
);
}
fn MyComponent(allocator: zx.Allocator) zx.Component {
const someText = "This text will be allocated and escaped";
return (
<div @allocator={allocator}>
{someText}
</div>
);
}
const zx = @import("zx");

26
site/app/pages/examples/children.zx
View File

@ -1,26 +0,0 @@
pub fn CardDemo(allocator: zx.Allocator) zx.Component {
return (
<main @allocator={allocator}>
<Card title="Welcome">
<p>This is the card content.</p>
<button>Click me</button>
</Card>
</main>
);
}
const CardProps = struct {
title: []const u8,
children: zx.Component,
};
fn Card(allocator: zx.Allocator, props: CardProps) zx.Component {
return (
<div @allocator={allocator} class="card">
<h2>{props.title}</h2>
<div class="card-body">{props.children}</div>
</div>
);
}
const zx = @import("zx");

11
site/app/pages/examples/component.zx
View File

@ -1,11 +0,0 @@
pub fn Page(allocator: zx.Allocator) zx.Component {
const greeting = zx.Component{ .text = "Hello!" };
return (
<section @allocator={allocator}>
{greeting}
</section>
);
}
const zx = @import("zx");

26
site/app/pages/examples/components.zx
View File

@ -1,26 +0,0 @@
pub fn ButtonDemo(ctx: zx.PageContext) zx.Component {
const allocator = ctx.arena;
return (
<main @allocator={allocator}>
<Button title="Submit" class="primary-btn" />
<Button title="Cancel" />
<Button />
</main>
);
}
const ButtonProps = struct {
title: []const u8 = "Click Me",
class: []const u8 = "btn",
};
fn Button(allocator: zx.Allocator, props: ButtonProps) zx.Component {
return (
<button @allocator={allocator} class={props.class}>
{props.title}
</button>
);
}
const zx = @import("zx");

13
site/app/pages/examples/csr_react.zx
View File

@ -1,13 +0,0 @@
pub fn Page(allocator: zx.Allocator) zx.Component {
visit_count += 1;
return (
<main @allocator={allocator}>
<CounterComponent @rendering={.react} visit_count={visit_count} />
</main>
);
}
var visit_count: u64 = 0;
const zx = @import("zx");
const CounterComponent = @jsImport("./react.tsx");

12
site/app/pages/examples/dynamic_route.zx
View File

@ -1,12 +0,0 @@
pub fn UserProfile(ctx: zx.PageContext) zx.Component {
const user_id = ctx.request.params.get("id") orelse "unknown";
return (
<main @allocator={ctx.arena}>
<h1>User Profile</h1>
<p>User ID: {user_id}</p>
</main>
);
}
const zx = @import("zx");

11
site/app/pages/examples/escaping.zx
View File

@ -1,11 +0,0 @@
pub fn RawHtml(allocator: zx.Allocator) zx.Component {
return (
<main @allocator={allocator}>
<div @escaping={.none}>
<strong>This HTML is rendered directly</strong>
</div>
</main>
);
}
const zx = @import("zx");

25
site/app/pages/examples/for.zx
View File

@ -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 (
<main @allocator={arena}>
{for (users) |user| (
<div>
<p>{user.name}</p>
{switch (user.role) {
.admin => (<span>Admin</span>),
.member => (<span>Member</span>),
.guest => (<span>Guest</span>),
}}
</div>
)}
</main>
);
}
const zx = @import("zx");
const UserRole = enum { admin, member, guest };

15
site/app/pages/examples/format.zx
View File

@ -1,15 +0,0 @@
pub fn FormatDemo(allocator: zx.Allocator) zx.Component {
const count = 42;
const hex_value = 255;
const percentage = 75;
return (
<section @allocator={allocator}>
<p>Count: {count}</p>
<p>Hex: 0x{hex_value}</p>
<p>Percentage: {percentage}%</p>
</section>
);
}
const zx = @import("zx");

18
site/app/pages/examples/fragment.zx
View File

@ -1,18 +0,0 @@
pub fn FragmentDemo(allocator: zx.Allocator) zx.Component {
return (
<main @allocator={allocator}>
<Header />
</main>
);
}
fn Header(allocator: zx.Allocator) zx.Component {
return (
<>
<h1 @allocator={allocator}>Welcome</h1>
<p>Multiple elements without a wrapper</p>
</>
);
}
const zx = @import("zx");

24
site/app/pages/examples/if.zx
View File

@ -1,24 +0,0 @@
pub fn Conditional(allocator: zx.Allocator) zx.Component {
const is_admin = true;
const is_logged_in = false;
return (
<main @allocator={allocator}>
<section>
{if (is_admin) (<p>Admin</p>) else (<p>User</p>)}
</section>
<section>
{if (is_admin) ("Powerful") else ("Powerless")}
</section>
<section>
{if (is_logged_in) (
<p>Welcome, User!</p>
) else (
<p>Please log in to continue.</p>
)}
</section>
</main>
);
}
const zx = @import("zx");

28
site/app/pages/examples/importing.zx
View File

@ -1,28 +0,0 @@
pub fn ImportDemo(allocator: zx.Allocator) zx.Component {
return (
<main @allocator={allocator}>
<Button title="Click me" />
<Card title="Welcome">
<p>Card content here</p>
</Card>
</main>
);
}
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 (<button @allocator={a} class="btn">{props.title}</button>);
}
const CardProps = struct { title: []const u8, children: zx.Component };
fn Card(a: zx.Allocator, props: CardProps) zx.Component {
return (
<div @allocator={a} class="card">
<h2>{props.title}</h2>
{props.children}
</div>
);
}

42
site/app/pages/examples/playground.zx
View File

@ -1,42 +0,0 @@
pub fn Playground(allocator: zx.Allocator) zx.Component {
const is_loading = true;
var i: usize = 0;
return (
<main @allocator={allocator}>
<h1>Hello, Ziex!</h1>
{for (users) |user| (
<Profile name={user.name} age={user.age} role={user.role} />
)}
{if (is_loading) (<p>Loading...</p>) else (<p>Loaded</p>)}
{while (i < 5) : (i += 1) (<i>{i}</i>)}
</main>
);
}
fn Profile(ctx: *zx.ComponentCtx(User)) zx.Component {
return (
<div @allocator={ctx.allocator}>
<h3>{ctx.props.name}</h3>
<div>{ctx.props.age}</div>
<strong>
{switch (ctx.props.role) {
.admin => "Admin",
.member => "Member",
}}
</strong>
</div>
);
}
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");

13
site/app/pages/examples/react.tsx
View File

@ -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 (
<main>
<button onClick={() => setVisitCount(visit_count + 1)}>Increment</button>
<button onClick={() => setVisitCount(visit_count - 1)}>Decrement</button>
<p>Visit Count: {visit_count}</p>
</main>
);
}

12
site/app/pages/examples/react.zx
View File

@ -1,12 +0,0 @@
pub fn ReactDemo(allocator: zx.Allocator) zx.Component {
const max_count = 10;
return (
<main @allocator={allocator}>
<CounterComponent @rendering={.react} max_count={max_count} />
</main>
);
}
const zx = @import("zx");
const CounterComponent = @jsImport("react.tsx");

16
site/app/pages/examples/routing.zx
View File

@ -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 (
<main @allocator={allocator}>
<h1>Hello, World!</h1>
<p>Welcome to the page</p>
</main>
);
}
const zx = @import("zx");

31
site/app/pages/examples/switch.zx
View File

@ -1,31 +0,0 @@
pub fn RoleSwitch(allocator: zx.Allocator) zx.Component {
const user_swtc = users[0];
return (
<main @allocator={allocator}>
<section>
{switch (user_swtc.user_type) {
.admin => ("Admin"),
.member => ("Member"),
}}
</section>
<section>
{switch (user_swtc.user_type) {
.admin => (<p>Powerful</p>),
.member => (<p>Powerless</p>),
}}
</section>
</main>
);
}
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 },
};

35
site/app/pages/examples/text.zx
View File

@ -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 = (<p>hi</p>);
const component_array_val = try allocator.alloc(zx.Component, 2);
component_array_val[0] = (<li>hi</li>);
component_array_val[1] = (<li>hello</li>);
return (
<form @allocator={allocator}>
<p>String: {string_val}</p>
<p>Integer: {int_val}</p>
<p>Float: {float_val}</p>
<p>Boolean: {bool_true}</p>
<p>Boolean: {bool_false}</p>
<p>Optional: {optional_val}</p>
<p>Optional: {optional_null}</p>
<p>Enum: {enum_val}</p>
<p>Component: {component_val}</p>
<ol>Component Array: {component_array_val}</ol>
</form>
);
}
const zx = @import("zx");

13
site/app/pages/examples/while.zx
View File

@ -1,13 +0,0 @@
pub fn Counter(allocator: zx.Allocator) zx.Component {
var i: usize = 0;
return (
<ul @allocator={allocator}>
{while (i < 3) : (i += 1) (
<li>Item {i}</li>
)}
</ul>
);
}
const zx = @import("zx");

6
site/app/pages/reference/page.zx
View File

@ -372,9 +372,11 @@ pub fn Page(ctx: zx.PageContext) !zx.Component {
</section>
<section id="importing" class="section">
<h2>Importing</h2>
<p>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.</p>
<p>
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.
</p>
<ExampleBlock id="importing" zx_code={zx_example_importing} zig_code={zig_example_importing} html_code={html_example_importing} filename="import_demo.zx" />
<p>Use <code>@jsImport</code> for React/TSX components and the standard <code>@import</code> for ZX and Zig files.</p>
</section>
<section id="dynamic-routes" class="section">
<h2>Dynamic Routes</h2>