- {first} {last}
-
- );
- }}
-
+ {first} {last}
+
,
+ );
+ }}
+
-
- )
+ 3,
+ ({ slots: [Slot1, Slot2, Slot3] }) => (
+
-
-
-
-
-
-
+
+ ),
);
diff --git a/apps/reactlit-docs/src/examples/mocks/contacts.ts b/apps/reactlit-docs/src/examples/mocks/contacts.ts
index f122a06..3685465 100644
--- a/apps/reactlit-docs/src/examples/mocks/contacts.ts
+++ b/apps/reactlit-docs/src/examples/mocks/contacts.ts
@@ -1,50 +1,50 @@
// This is mocking a backend API for demo purposes
-import { wait } from '../utils/wait';
+import { wait } from "../utils/wait";
export type Contact = {
- id: string;
- name: string;
- email: string;
+ id: string;
+ name: string;
+ email: string;
};
// we add a delay to these to simulate a network request
export class ContactsMockService {
- constructor(
- private contacts: Contact[],
- private readonly delay: number = 0
- ) {}
+ constructor(
+ private contacts: Contact[],
+ private readonly delay: number = 0,
+ ) {}
- async getContacts() {
- await wait(this.delay);
- return this.contacts;
- }
+ async getContacts() {
+ await wait(this.delay);
+ return this.contacts;
+ }
- async addContact(contact?: Partial
+
+
+
+
+
+
-
- {app}
-
-
- );
+ return (
+
+
+ {app}
+
+
+ );
}
diff --git a/apps/reactlit-docs/src/examples/transform-view.tsx b/apps/reactlit-docs/src/examples/transform-view.tsx
index 498eeae..4981df7 100644
--- a/apps/reactlit-docs/src/examples/transform-view.tsx
+++ b/apps/reactlit-docs/src/examples/transform-view.tsx
@@ -1,36 +1,36 @@
-import { Reactlit } from '@reactlit/core';
-import { defineTransformView } from '@reactlit/core';
+import { Reactlit } from "@reactlit/core";
+import { defineTransformView } from "@reactlit/core";
export const FilterInput = (values: string[]) =>
- defineTransformViewYou are filtering to {filteredUsers.join(', ')}
);
- }}
- You are filtering to {filteredUsers.join(", ")}
);
+ }}
+
-
- );
+ const debug = useDebug();
+ if (!debug) return children;
+ return (
+ {stateKey}
- {children}
-
+
+ );
};
diff --git a/apps/reactlit-examples/src/components/main.tsx b/apps/reactlit-examples/src/components/main.tsx
index bcd6cb0..9eda187 100644
--- a/apps/reactlit-examples/src/components/main.tsx
+++ b/apps/reactlit-examples/src/components/main.tsx
@@ -1,78 +1,78 @@
-import { Box, Container, Flex, Text } from '@radix-ui/themes';
-import { Geist, Geist_Mono } from 'next/font/google';
-import Head from 'next/head';
-import React from 'react';
-import { DebugToggle } from './debug-toggle';
-import { Menu } from './menu';
-import { ThemeToggle } from './theme-toggle';
+import { Box, Container, Flex, Text } from "@radix-ui/themes";
+import { Geist, Geist_Mono } from "next/font/google";
+import Head from "next/head";
+import React from "react";
+import { DebugToggle } from "./debug-toggle";
+import { Menu } from "./menu";
+import { ThemeToggle } from "./theme-toggle";
const geistSans = Geist({
- variable: '--font-geist-sans',
- subsets: ['latin'],
+ variable: "--font-geist-sans",
+ subsets: ["latin"],
});
const geistMono = Geist_Mono({
- variable: '--font-geist-mono',
- subsets: ['latin'],
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
});
export function Main({
- title,
- children,
+ title,
+ children,
}: {
- title: string;
- children: React.ReactNode;
+ title: string;
+ children: React.ReactNode;
}) {
- return (
- {stateKey}
+ {children}
+
-
-
- {title}
-
-
-
-
-
- {title}
-
-
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ );
}
diff --git a/apps/reactlit-examples/src/components/menu.tsx b/apps/reactlit-examples/src/components/menu.tsx
index 682d58c..88f56f3 100644
--- a/apps/reactlit-examples/src/components/menu.tsx
+++ b/apps/reactlit-examples/src/components/menu.tsx
@@ -1,29 +1,29 @@
-import { Box, Flex, Link } from '@radix-ui/themes';
-import NextLink from 'next/link';
-import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
+import { Box, Flex, Link } from "@radix-ui/themes";
+import NextLink from "next/link";
+import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
function MenuItem({ href, children }: { href: string; children: ReactNode }) {
- const pathname = usePathname();
- const isActive = pathname === href;
- return (
- Hello World Vanilla
);
+ return (
+ Hello World Vanilla
);
- const name = view(
- 'name',
- Label('Name', LabelProps),
- Inputs.Text({
- id: 'name',
- className: 'border p-0.5',
- placeholder: 'Enter your name',
- })
- );
+ const name = view(
+ "name",
+ Label("Name", LabelProps),
+ Inputs.Text({
+ id: "name",
+ className: "border p-0.5",
+ placeholder: "Enter your name",
+ }),
+ );
- display(Hello {name}!
);
+ display(Hello {name}!
);
- const picked = view(
- 'pickedNumbers',
- Label('Pick any number', LabelProps),
- Inputs.Check(['One', 'Two', 'Three'], {
- className: {
- wrapper: 'flex gap-2',
- item: {
- input: 'border p-0.5 mr-1',
- },
- },
- })
- );
- display(Picked: {picked.join(', ')}!
);
+ const picked = view(
+ "pickedNumbers",
+ Label("Pick any number", LabelProps),
+ Inputs.Check(["One", "Two", "Three"], {
+ className: {
+ wrapper: "flex gap-2",
+ item: {
+ input: "border p-0.5 mr-1",
+ },
+ },
+ }),
+ );
+ display(Picked: {picked.join(", ")}!
);
- const pickedColors = view(
- 'pickedColors',
- Label('Pick any color', LabelProps),
- Inputs.Check(
- [
- { label: 'Red', value: '#FF0000' },
- { label: 'Green', value: '#00FF00' },
- { label: 'Blue', value: '#0000FF' },
- ],
- {
- className: {
- wrapper: 'flex gap-2',
- item: {
- input: 'border p-0.5 mr-1',
- },
- },
- valueof: (item) => item.value,
- format: (item) => (
-
- {item.label}
-
- ),
- disabled: (item) => item.value === '#FFFFFF',
- }
- )
- );
- display(Colors: {JSON.stringify(pickedColors)}!
);
+ const pickedColors = view(
+ "pickedColors",
+ Label("Pick any color", LabelProps),
+ Inputs.Check(
+ [
+ { label: "Red", value: "#FF0000" },
+ { label: "Green", value: "#00FF00" },
+ { label: "Blue", value: "#0000FF" },
+ ],
+ {
+ className: {
+ wrapper: "flex gap-2",
+ item: {
+ input: "border p-0.5 mr-1",
+ },
+ },
+ valueof: (item) => item.value,
+ format: (item) => (
+
+ {item.label}
+
+ ),
+ disabled: (item) => item.value === "#FFFFFF",
+ },
+ ),
+ );
+ display(Colors: {JSON.stringify(pickedColors)}!
);
- const chosenNumber = view(
- 'chosenNumber',
- Label('Choose a number', LabelProps),
- Inputs.Radio(['One', 'Two', 'Three'], {
- className: {
- wrapper: 'flex gap-2',
- item: {
- input: 'border p-0.5 mr-1',
- },
- },
- })
- );
- display(Chosen Number: {chosenNumber}!
);
+ const chosenNumber = view(
+ "chosenNumber",
+ Label("Choose a number", LabelProps),
+ Inputs.Radio(["One", "Two", "Three"], {
+ className: {
+ wrapper: "flex gap-2",
+ item: {
+ input: "border p-0.5 mr-1",
+ },
+ },
+ }),
+ );
+ display(Chosen Number: {chosenNumber}!
);
- const chosenColor = view(
- 'chosenColor',
- Label('Choose a color', LabelProps),
- Inputs.Radio(
- [
- { label: 'Red', value: '#FF0000' },
- { label: 'Green', value: '#00FF00' },
- { label: 'Blue', value: '#0000FF' },
- ],
- {
- className: {
- wrapper: 'flex gap-2',
- item: {
- input: 'border p-0.5 mr-1',
- },
- },
- valueof: (item) => item.value,
- format: (item) => (
-
- {item.label}
-
- ),
- disabled: (item) => item.value === '#FFFFFF',
- }
- )
- );
- display(Chosen Color: {JSON.stringify(chosenColor)}!
);
- }}
- Chosen Color: {JSON.stringify(chosenColor)}!
);
+ }}
+ Hello World
);
- const name = view(
- 'name',
- Label('Name'),
- Inputs.Text({
- placeholder: 'Enter your name',
- })
- );
- if (!name) {
- throw new Error('Please enter your name');
- }
- display(Hello {name}!
);
- }}
- Hello World
);
+ const name = view(
+ "name",
+ Label("Name"),
+ Inputs.Text({
+ placeholder: "Enter your name",
+ }),
+ );
+ if (!name) {
+ throw new Error("Please enter your name");
+ }
+ display(Hello {name}!
);
+ }}
+
-
- );
+ return (
+ Welcome to ReactLit.
-
-
-
+
+ );
}
diff --git a/apps/reactlit-examples/src/pages/layout-test/index.tsx b/apps/reactlit-examples/src/pages/layout-test/index.tsx
index bbaf310..85718d8 100644
--- a/apps/reactlit-examples/src/pages/layout-test/index.tsx
+++ b/apps/reactlit-examples/src/pages/layout-test/index.tsx
@@ -1,49 +1,49 @@
-import { Debug, useDebug } from '@/components/debug-toggle';
+import { Debug, useDebug } from "@/components/debug-toggle";
import {
- DataFetchingPlugin,
- LayoutView,
- useReactlit,
- useReactlitState,
- defaultLayoutState,
-} from '@reactlit/core';
-import { Inputs, Label, RadixTheme } from '@reactlit/radix';
+ DataFetchingPlugin,
+ LayoutView,
+ defaultLayoutState,
+ useReactlit,
+ useReactlitState,
+} from "@reactlit/core";
+import { Inputs, Label, RadixTheme } from "@reactlit/radix";
export default function Starter() {
- const [appState, setAppState] = useReactlitState({
- layout1: defaultLayoutState(2),
- name: '',
- weight: 'regular',
- size: 1,
- });
- const Reactlit = useReactlit(DataFetchingPlugin);
- const debug = useDebug();
- return (
- Welcome to ReactLit.
+
+
+ setOpen(!open)}
- >
-
- {open ?
-
- );
+ const [open, setOpen] = useState(true);
+ return (
+
- {open ?
-
- {children}
-
- setOpen(!open)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ setOpen(!open);
+ }
+ }}
+ >
+
+ {open ?
+
+ );
};
export default function RadixInputs() {
- const [appState, setAppState] = useReactlitState({
- countrySearch: '',
- country: undefined as Country | undefined,
- results: defaultLayoutState(1),
- name: '',
- bio: '',
- number: [],
- letter: undefined as string | undefined,
- color: 'red',
- slider: 0,
- rangeSlider: [20, 80],
- enableLetter: true,
- });
- const debug = useDebug();
- return (
-
+ {open ?
+
+ {children}
+
+ Inputs test
);
- const [results] = view('results', ResultsWrapper, LayoutView(1));
- const displayResult = (label: string, value: React.ReactNode) => {
- results.display(Debug, DisplayLabel(label), value);
- };
- const name = view(
- 'name',
- Label('Name'),
- Inputs.Text({
- placeholder: 'Enter your name',
- })
- );
- displayResult('Name', name);
- const bio = view(
- 'bio',
- Label('Bio'),
- Inputs.TextArea({
- placeholder: 'Enter your bio',
- })
- );
- displayResult('Bio', bio);
- const number = view(
- 'number',
- Label('Pick any numbers'),
- Inputs.Check({ one: '1', two: '2', three: '3' })
- );
- displayResult('Numbers', number);
- if (
- view(
- 'enableLetter',
- Label('Letter Selection'),
- ,
- Inputs.Switch()
- )
- ) {
- const letter = view(
- 'letter',
- Label('Pick one Letter'),
- Inputs.Radio(['A', 'B', 'C'])
- );
- displayResult('Letter', letter);
- }
- const color = view(
- 'color',
- Label('Pick a color'),
- ,
- Inputs.Select(['red', 'blue', 'green'] as const)
- );
- displayResult('Color', Select a country
);
- const filteredCountries = view(
- 'countrySearch',
- Label('Search'),
- Inputs.Search(countries, {
- placeholder: 'Search countries...',
- })
- );
- const selectedCountry = view(
- 'country',
- Label('Countries'),
- Inputs.Table(filteredCountries, {
- getRowId: (country) => country.code,
- className: 'h-[300px]',
- })
- );
- displayResult(
- 'Country',
- <>
- {selectedCountry?.code ? (
- 
- ) : (
- 'Select a country'
- )}
-
- );
- }}
- Inputs test
);
+ const [results] = view("results", ResultsWrapper, LayoutView(1));
+ const displayResult = (label: string, value: React.ReactNode) => {
+ results.display(Debug, DisplayLabel(label), value);
+ };
+ const name = view(
+ "name",
+ Label("Name"),
+ Inputs.Text({
+ placeholder: "Enter your name",
+ }),
+ );
+ displayResult("Name", name);
+ const bio = view(
+ "bio",
+ Label("Bio"),
+ Inputs.TextArea({
+ placeholder: "Enter your bio",
+ }),
+ );
+ displayResult("Bio", bio);
+ const number = view(
+ "number",
+ Label("Pick any numbers"),
+ Inputs.Check({ one: "1", two: "2", three: "3" }),
+ );
+ displayResult("Numbers", number);
+ if (
+ view(
+ "enableLetter",
+ Label("Letter Selection"),
+ ,
+ Inputs.Switch(),
+ )
+ ) {
+ const letter = view(
+ "letter",
+ Label("Pick one Letter"),
+ Inputs.Radio(["A", "B", "C"]),
+ );
+ displayResult("Letter", letter);
+ }
+ const color = view(
+ "color",
+ Label("Pick a color"),
+ ,
+ Inputs.Select(["red", "blue", "green"] as const),
+ );
+ displayResult("Color", Select a country
);
+ const filteredCountries = view(
+ "countrySearch",
+ Label("Search"),
+ Inputs.Search(countries, {
+ placeholder: "Search countries...",
+ }),
+ );
+ const selectedCountry = view(
+ "country",
+ Label("Countries"),
+ Inputs.Table(filteredCountries, {
+ getRowId: (country) => country.code,
+ className: "h-[300px]",
+ }),
+ );
+ displayResult(
+ "Country",
+ selectedCountry?.code ? (
+
+ ) : (
+ "Select a country"
+ ),
+ );
+ }}
+ ); - display( - Debug, -
); + display( + Debug, +
-
- );
+ return (
+
+
+ );
};
const api = new TodoService([], 1000);
export default function TodoList() {
- const Reactlit = useReactlit(DataFetchingPlugin);
- return (
-
-
-
- );
- view(
- 'adding',
- Inputs.AsyncButton(
- async () => {
- const newTodo = await api.addTodo();
- await todosFetcher.refetch();
- set('selectedTodo', newTodo.id);
- },
- {
- disabled: todosFetcher.isFetching(),
- content: 'Add Todo',
- }
- )
- );
- const todos = todosFetcher.get() ?? [];
- const selectedTodo = view(
- 'selectedTodo',
- Inputs.Table(todos, {
- getRowId: (todo) => todo.id,
- columns: ['task', 'completed'],
- format: {
- completed: (completed) => (completed ? '☑️' : ''),
- },
- })
- );
- if (selectedTodo) {
- if (changed('selectedTodo')) {
- set('task', selectedTodo.task);
- set('completed', selectedTodo.completed);
- }
- const task = view('task', Label('Task'), Inputs.Text());
- const completed = view(
- 'completed',
- Label('Completed'),
- Inputs.Switch()
- );
- view(
- 'updaing',
- Inputs.AsyncButton(
- async () => {
- // todosFetcher.update((todos) => {
- // return todos.map((todo) =>
- // todo.id === selectedTodo.id
- // ? { ...todo, task, completed }
- // : todo
- // );
- // });
- await api.updateTodo(selectedTodo.id, { task, completed });
- await todosFetcher.refetch();
- },
- {
- disabled: todosFetcher.isFetching(),
- content: 'Update',
- }
- )
- );
- }
- }}
-
+
+
,
+ );
+ view(
+ "adding",
+ Inputs.AsyncButton(
+ async () => {
+ const newTodo = await api.addTodo();
+ await todosFetcher.refetch();
+ set("selectedTodo", newTodo.id);
+ },
+ {
+ disabled: todosFetcher.isFetching(),
+ content: "Add Todo",
+ },
+ ),
+ );
+ const todos = todosFetcher.get() ?? [];
+ const selectedTodo = view(
+ "selectedTodo",
+ Inputs.Table(todos, {
+ getRowId: (todo) => todo.id,
+ columns: ["task", "completed"],
+ format: {
+ completed: (completed) => (completed ? "☑️" : ""),
+ },
+ }),
+ );
+ if (selectedTodo) {
+ if (changed("selectedTodo")) {
+ set("task", selectedTodo.task);
+ set("completed", selectedTodo.completed);
+ }
+ const task = view("task", Label("Task"), Inputs.Text());
+ const completed = view(
+ "completed",
+ Label("Completed"),
+ Inputs.Switch(),
+ );
+ view(
+ "updaing",
+ Inputs.AsyncButton(
+ async () => {
+ // todosFetcher.update((todos) => {
+ // return todos.map((todo) =>
+ // todo.id === selectedTodo.id
+ // ? { ...todo, task, completed }
+ // : todo
+ // );
+ // });
+ await api.updateTodo(selectedTodo.id, { task, completed });
+ await todosFetcher.refetch();
+ },
+ {
+ disabled: todosFetcher.isFetching(),
+ content: "Update",
+ },
+ ),
+ );
+ }
+ }}
+ []>( - ...plugins: P +export function useReactlit
(
+ ...plugins: P
) {
- return useMemo(() => {
- function CustomReactlit