### Automated JSX Runtime Setup Command
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Commands to automatically configure the JSX runtime settings in your project using the `mono-jsx setup` utility, simplifying the initial setup process for different environments.
```bash
# Node.js, Cloudflare Workers, or other node-compatible runtimes
npx mono-jsx setup
# Deno
deno run -A npm:mono-jsx setup
# Bun
bunx mono-jsx setup
```
--------------------------------
### Install mono-jsx Package
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Commands to install the mono-jsx package using different package managers for various JavaScript runtimes, including Node.js, Cloudflare Workers, Deno, and Bun.
```bash
# Node.js, Cloudflare Workers, or other node-compatible runtimes
npm i mono-jsx
# Deno
deno add npm:mono-jsx
# Bun
bun add mono-jsx
```
--------------------------------
### mono-jsx Usage with srvx for Node.js
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Example demonstrating how to use mono-jsx with `srvx` in a Node.js environment, as Node.js doesn't natively support JSX syntax or declarative fetch servers directly.
```tsx
// app.tsx
import { serve } from "srvx";
serve({
port: 3000,
fetch: (req) => (
Welcome to mono-jsx!
),
});
```
--------------------------------
### Zero Configuration JSX Import Source Pragma
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Using pragma directives to import mono-jsx without explicit installation or configuration files, allowing runtimes like Deno and Bun to automatically fetch the module based on the import source.
```js
// Deno, Valtown
/** @jsxImportSource https://esm.sh/mono-jsx */
// Bun
/** @jsxImportSource mono-jsx */
```
--------------------------------
### Basic mono-jsx Fetch Handler for Deno/Bun/Workers
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Example of a basic `fetch` handler in Deno, Bun, or Cloudflare Workers that returns an HTML JSX element as a `Response` object using mono-jsx, demonstrating direct JSX rendering.
```tsx
// app.tsx
export default {
fetch: (req) => (
Welcome to mono-jsx!
)
}
```
--------------------------------
### Integrating mono-jsx Router with Bun.serve
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Provides an example of how to use the `buildRoutes` function from `mono-jsx` to integrate the router with Bun's built-in server. This enables SPA routing specifically for Bun applications, leveraging Bun's server capabilities.
```tsx
import { buildRoutes } from "mono-jsx"
const routes = {
"/": Home,
"/about": About,
"/blog": Blog,
"/post/:id": Post,
}
Bun.serve({
routes: buildRoutes((req) => (
))
})
```
--------------------------------
### Fetch Data from Database in Server-Side Route Components
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Illustrates how to perform database queries directly within server-side rendered route components. This example uses a `sql` template literal to fetch post data based on request parameters, showcasing seamless integration with backend data sources.
```tsx
async function Post(this: FC) {
const post = await sql`SELECT * FROM posts WHERE id = ${ this.request.params!.id }`
return (
{post.title}
{html(post.content)}
)
}
```
--------------------------------
### Lazy Rendering a Component with
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates how to use the `` element in mono-jsx to dynamically render a component on the client side by requesting HTML from the server. It includes the basic setup within a `fetch` function, allowing for server-side rendered HTML to be sent back for client-side display.
```tsx
export default {
fetch: (req) => (
Loading...} />
)
}
```
--------------------------------
### Integrate htmx into mono-jsx Applications
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Details how to enable htmx integration by simply adding the `htmx` attribute to the root `` element. This example demonstrates a basic htmx interaction where clicking a button fetches new content and swaps it into the DOM.
```tsx
export default {
fetch: (req) => {
const url = new URL(req.url);
if (url.pathname === "/clicked") {
return (
Clicked!
);
}
return (
)
}
}
```
--------------------------------
### Render Different Content with and Signals in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Describes the `` element, which renders different content blocks based on its `value` prop and matching `slot` attributes. Elements with a `slot` attribute matching the `value` are displayed, otherwise a default slot is shown. This example illustrates using a component signal to control the `value` prop, allowing dynamic content switching.
```tsx
function App(this: FC<{ lang: "en" | "zh" | "π" }>) {
this.lang = "en";
return (
Hello, world!
δ½ ε₯½οΌδΈηοΌ
βπβοΈ
)
}
```
--------------------------------
### Add htmx Extensions to HTML Element
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Shows how to include htmx extensions by adding `htmx-ext-*` attributes to the root `` element. This example enables the `response-targets` and `ws` extensions, allowing for enhanced htmx functionality.
```tsx
export default {
fetch: (req) => (
)
}
```
--------------------------------
### Conditionally Render Content with and Signals in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Explains how the `` element conditionally renders its child content based on the boolean value of its `show` prop. This example demonstrates using a component signal to control the `show` prop, enabling dynamic visibility changes of content on the client side.
```tsx
function App(this: FC<{ show: boolean }>) {
this.show = false;
function toggle() {
this.show = !this.show;
}
return (
)
}
function App() {
return (
{/* This goes to the named slot */}
This is a description.
{/* This goes to the default slot */}
Hello world!
)
}
```
--------------------------------
### Implement 404 Fallback Page for Unmatched Routes
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Shows how to define a fallback (404) page by adding child content directly to the `` element. This content will be displayed automatically when no defined route matches the incoming URL, providing a custom error experience.
```tsx
export default {
fetch: (req) => (
)
}
```
--------------------------------
### Implementing Basic Event Handlers in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates how to write event handlers directly in JSX elements, mirroring the approach used in React. These handlers are serialized and sent to the client, meaning they are not executed on the server-side.
```tsx
function Button() {
return (
)
}
```
--------------------------------
### Compose CSS Classes with JSX in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates how to dynamically compose the `class` property in mono-jsx using arrays of strings, objects, and conditional expressions for flexible and reactive styling.
```tsx
;
```
--------------------------------
### Define Global Application State with App Signals in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Explains how to define global application-wide signals by adding an `app` prop to the root `` element. These signals are accessible via `this.app.` in all components and trigger re-renders across the entire application when updated, facilitating shared state.
```tsx
interface AppSignals {
themeColor: string;
}
function Header(this: FC<{}, AppSignals>) {
return (
Welcome to mono-jsx!
)
}
function Footer(this: FC<{}, AppSignals>) {
return (
)
}
function Main(this: FC<{}, AppSignals>) {
return (
this.app.themeColor = target.value}/>
)
}
export default {
fetch: (req) => (
)
}
```
--------------------------------
### Implementing Streaming Rendering with Async Generators in mono-jsx
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates the use of async generators in mono-jsx components to yield multiple elements over time. This pattern is particularly effective for streaming rendering scenarios, such as displaying tokens from a Large Language Model (LLM) as they are generated.
```tsx
async function* Chat(props: { prompt: string }) {
const stream = await openai.chat.completions.create({
model: "gpt-4",
messages: [{ role: "user", content: prompt }],
stream: true,
});
for await (const event of stream) {
const text = event.choices[0]?.delta.content;
if (text) {
yield {text};
}
}
}
export default {
fetch: (req) => (
β} />
)
}
```
--------------------------------
### Displaying Current URL and Params with this.app.url Signal
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Shows how to use the `this.app.url` app-level signal to display the current route URL and parameters. This signal automatically updates when the route changes, making it useful for dynamically updating UI elements based on the current navigation state.
```tsx
function App(this: FC) {
return (
Current Pathname: {this.$(() => this.app.url.pathname)}
)
}
```
--------------------------------
### Dynamic Component Switching with Signals
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Shows how to dynamically change the `name` or `props` of a `` element using signals. Modifying the signal value triggers re-rendering with different components (Profile, Projects, Settings), allowing for tab-like navigation or content switching without full page reloads.
```tsx
import { Profile, Projects, Settings } from "./pages.tsx"
function Dash(this: FC<{ page: "Profile" | "Projects" | "Settings" }>) {
this.page = "Profile";
return (
<>
Loading...} />
)
}
export default {
fetch: (req) => (
)
}
```
--------------------------------
### Configure Navigation Links with Active Class Styling
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates how to define navigation links within the `
Link
;
```
--------------------------------
### Manually Include htmx and Extensions from CDN
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Provides an alternative method for including htmx and its extensions. Instead of relying on mono-jsx's automatic import, you can manually add `
)
}
```
--------------------------------
### Configure JSX Runtime in tsconfig.json
Source: https://github.com/ije/mono-jsx/blob/main/README.md
JSON configuration to set up mono-jsx as the JSX runtime in TypeScript or Deno projects, enabling JSX syntax processing by specifying `jsx` and `jsxImportSource` compiler options.
```jsonc
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "mono-jsx"
}
}
```
--------------------------------
### Using mono-jsx Slot Elements for Content Projection
Source: https://github.com/ije/mono-jsx/blob/main/README.md
Demonstrates how mono-jsx utilizes `