(
- state: T,
- previousState: T | undefined
-): (keyof T)[] {
- return Object.keys(state).filter(
- (key: string) =>
- !previousState || !deepEqual(state[key], previousState[key])
- );
-}
-
-interface DisplayState {
- position: number;
- elements: [string, React.ReactNode][];
-}
+import { useReactlitChanged } from './builtins/changed';
+import { useReactlitDisplay } from './builtins/display';
+import { useInternalReactlitState } from './builtins/internal-state';
+import { useReactlitSet } from './builtins/set';
+import { ReactlitProps, StateBase } from './builtins/types';
+import { useReactlitView } from './builtins/view';
+import { useReactlitState } from './hooks/use-reactlit-state';
const defaultRenderError = ({ error }) => (
@@ -123,125 +28,18 @@ export function Reactlit({
renderError = defaultRenderError,
debug,
children,
- wrapper,
}: ReactlitProps) {
const [defaultRawState, defaultSetState] = useReactlitState({} as T);
rawState = rawState ?? defaultRawState;
setState = setState ?? defaultSetState;
- const [renderState, setRenderState] = useState({
- position: 0,
- elements: [],
- });
- const state = useDeepMemo(() => rawState, [rawState]);
- const [previousState, setPreviousState] = useState(state);
+ const internalState = useInternalReactlitState(rawState, setState);
- const set = useCallback['set']>(
- (key, value) => {
- setState(key, (prev) => {
- if (deepEqual(prev, value)) return prev;
- return value;
- });
- setPreviousState(state);
- return value;
- },
- [setState, state, setPreviousState]
- );
-
- const display = useCallback['display']>(
- (...args: DisplayArgs) => {
- const node = args.length === 1 ? args[0] : args[1];
- const manualKey = args.length === 1 ? undefined : args[0];
- setRenderState(({ position, elements }) => {
- const key = manualKey ?? `${position}`;
- const keyIndex = elements
- .slice(0, position)
- .findIndex(([k]) => manualKey && k === manualKey);
- const element = (
-
- {applyWrapper(node, wrapper)}
-
- );
- const newEntry = [key, element] as [string, React.ReactNode];
-
- if (keyIndex !== -1) {
- return {
- position,
- elements: [
- ...elements.slice(0, keyIndex),
- newEntry,
- ...elements.slice(keyIndex + 1),
- ],
- };
- } else if (position < elements.length) {
- return {
- position: position + 1,
- elements: [
- ...elements.slice(0, position),
- newEntry,
- // for manual keys that haven't been found by the above case
- // we don't want to overwrite the index element because
- // it's likely a different element
- ...elements
- .slice(position + (manualKey ? 0 : 1))
- .filter((e) => !manualKey || e[0] !== manualKey),
- ],
- };
- } else {
- return {
- position: elements.length + 1,
- elements: [...elements, newEntry],
- };
- }
- });
- },
- [setRenderState, renderError, wrapper]
- );
-
- const view = useCallback['view']>(
- (
- key: K,
- { component, getReturnValue }: ViewDefinition
- ) => {
- const value = state[key] as V;
- const props: ViewComponentProps = {
- stateKey: key,
- value,
- setValue: (value: any) => set(key, value),
- };
- display(key, component(props));
- return getReturnValue ? getReturnValue(props) : (state[key] as R);
- },
- [state, set, display]
- );
-
- const changed = useCallback['changed']>(
- (...keys) => {
- const changedKeys = deltas(state, previousState);
- const selectedChangedKeys = keys.filter((k) =>
- changedKeys.includes(k as string)
- );
- const isChanged = selectedChangedKeys.length > 0;
- if (isChanged) {
- if (debug) {
- for (const k of selectedChangedKeys) {
- // eslint-disable-next-line no-console
- console.debug(
- `changed ${String(k)}: ${previousState?.[k]} -> ${state[k]}`
- );
- }
- }
- setPreviousState((prev) => {
- let newState = prev;
- for (const k of selectedChangedKeys) {
- newState = { ...newState, [k]: state[k] };
- }
- return newState;
- });
- }
- return isChanged;
- },
- [state, previousState, debug]
- );
+ const { state } = internalState;
+ const set = useReactlitSet(internalState);
+ const changed = useReactlitChanged(internalState, debug);
+ const { renderState, resetRenderPosition, finalizeRender, display } =
+ useReactlitDisplay({ renderError });
+ const view = useReactlitView({ set, display, state });
const [triggerCounter, setTriggerCounter] = useState(0);
const trigger = useCallback(() => {
@@ -268,7 +66,7 @@ export function Reactlit({
try {
// eslint-disable-next-line no-console
debug && console.debug('reactlit rendering:', childArgs.state);
- setRenderState(({ elements }) => ({ elements, position: 0 }));
+ resetRenderPosition();
await children(childArgs);
} catch (e: any) {
// eslint-disable-next-line no-console
@@ -279,10 +77,7 @@ export function Reactlit({
)
);
} finally {
- setRenderState(({ elements, position }) => ({
- position,
- elements: elements.slice(0, position),
- }));
+ finalizeRender();
renderLock.current = false;
if (renderAfter.current) {
renderAfter.current = false;
@@ -300,7 +95,8 @@ export function Reactlit({
trigger,
display,
setRendering,
- setRenderState,
+ resetRenderPosition,
+ finalizeRender,
renderError,
debug,
]);
diff --git a/libs/core/src/utils/apply-wrapper.tsx b/libs/core/src/utils/apply-wrapper.tsx
deleted file mode 100644
index 0ae99c0..0000000
--- a/libs/core/src/utils/apply-wrapper.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export type Wrapper = (props: { children: React.ReactNode }) => React.ReactNode;
-
-export function applyWrapper(node: React.ReactNode, Wrapper?: Wrapper) {
- return Wrapper ? {node} : node;
-}
-
-export function combineWrappers(...wrappers: Wrapper[]): Wrapper {
- return ({ children }) =>
- wrappers.reduce((acc, Wrapper) => {acc}, children);
-}
diff --git a/libs/core/src/utils/tail.ts b/libs/core/src/utils/tail.ts
new file mode 100644
index 0000000..c622e6a
--- /dev/null
+++ b/libs/core/src/utils/tail.ts
@@ -0,0 +1,3 @@
+export function tail(args: [...T, U]): [T, U] {
+ return [args.slice(0, -1) as T, args.at(-1) as U];
+}
diff --git a/libs/core/src/utils/tunnel.tsx b/libs/core/src/utils/tunnel.tsx
new file mode 100644
index 0000000..3be4fda
--- /dev/null
+++ b/libs/core/src/utils/tunnel.tsx
@@ -0,0 +1,75 @@
+import React, { Fragment } from 'react';
+import { create, StoreApi } from 'zustand';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+
+// modified from tunnel-rat
+
+type Props = { childKey: string; children: React.ReactNode };
+
+type State = {
+ current: Array<{ childKey: string; node: React.ReactNode }>;
+ version: number;
+ set: StoreApi['setState'];
+};
+
+export default function tunnel() {
+ const useStore = create((set) => ({
+ current: new Array<{ childKey: string; node: React.ReactNode }>(),
+ version: 0,
+ set,
+ }));
+
+ return {
+ In: ({ childKey, children }: Props) => {
+ const set = useStore((state) => state.set);
+ const version = useStore((state) => state.version);
+
+ /* When this component mounts, we increase the store's version number.
+ This will cause all existing rats to re-render (just like if the Out component
+ were mapping items to a list.) The re-rendering will cause the final
+ order of rendered components to match what the user is expecting. */
+ useIsomorphicLayoutEffect(() => {
+ set((state) => ({
+ version: state.version + 1,
+ }));
+ }, []);
+
+ /* Any time the children _or_ the store's version number change, insert
+ the specified React children into the list of rats. */
+ useIsomorphicLayoutEffect(() => {
+ set(({ current }) => {
+ const existing = current.findIndex((c) => c.childKey === childKey);
+ return {
+ current:
+ existing !== -1
+ ? [
+ ...current.slice(0, existing),
+ { childKey, node: children },
+ ...current.slice(existing + 1),
+ ]
+ : [...current, { childKey, node: children }],
+ };
+ });
+
+ // remove the cleanup logic so that nodes stay in position, the key logic keeps things from getting too messy
+ // return () =>
+ // set(({ current }) => ({
+ // current: current.filter((c) => c.node !== children),
+ // }));
+ }, [children, version]);
+
+ return null;
+ },
+
+ Out: () => {
+ const current = useStore((state) => state.current);
+ return (
+ <>
+ {current.map((c) => (
+ {c.node}
+ ))}
+
+ );
+ },
+ };
+}
diff --git a/libs/core/src/utils/use-isomorphic-layout-effect.tsx b/libs/core/src/utils/use-isomorphic-layout-effect.tsx
new file mode 100644
index 0000000..00fb045
--- /dev/null
+++ b/libs/core/src/utils/use-isomorphic-layout-effect.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+// taken from tunnel-rat
+
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
+export const useIsomorphicLayoutEffect =
+ typeof window !== 'undefined' &&
+ (window.document?.createElement ||
+ window.navigator?.product === 'ReactNative')
+ ? React.useLayoutEffect
+ : React.useEffect;
+
+export function useMutableCallback(fn: T) {
+ const ref = React.useRef(fn);
+ useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+ return ref;
+}
diff --git a/libs/core/src/wrappers.tsx b/libs/core/src/wrappers.tsx
new file mode 100644
index 0000000..7eff308
--- /dev/null
+++ b/libs/core/src/wrappers.tsx
@@ -0,0 +1,65 @@
+import {
+ cloneElement,
+ createElement,
+ Fragment,
+ isValidElement,
+ PropsWithChildren,
+ ReactElement,
+ ReactNode,
+} from 'react';
+
+export interface ReactlitWrapperProps {
+ position: number;
+ stateKey: string;
+}
+
+export type WrapperComponent = React.FC<
+ PropsWithChildren
+>;
+
+export type Wrapper = WrapperComponent | React.ReactElement;
+
+export type SimpleWrapperComponent = React.FC;
+
+export type SimpleWrapper = SimpleWrapperComponent | React.ReactElement;
+
+export function applySimpleWrapper(
+ children: ReactElement,
+ Wrap?: SimpleWrapper
+): ReactNode {
+ if (!Wrap) return children;
+ if (isValidElement(Wrap)) return cloneElement(Wrap, {}, children);
+ return Wrap({ children });
+}
+
+export function applyWrapper(
+ children: ReactElement,
+ Wrap?: Wrapper,
+ props?: ReactlitWrapperProps
+): ReactElement {
+ if (!Wrap) return children;
+ if (isValidElement(Wrap)) return cloneElement(Wrap, {}, children);
+ return Wrap({ children, ...props }) as ReactElement;
+ // return createElement(Wrap, props, children);
+}
+export function ApplyWrappers({
+ wrappers,
+ children,
+ ...props
+}: {
+ wrappers: Wrapper[];
+ children: ReactNode;
+} & ReactlitWrapperProps) {
+ const base = [...wrappers];
+ const wrappedContent = base.reverse().reduce(
+ (acc, W) => applyWrapper(acc, W, props),
+ // this extra Fragment wrapper at the end is necessary for some
+ // very mysterious reason to keep plain string nodes from shifting positions around
+ {children}
+ );
+ return wrappedContent;
+}
+
+export const FragmentWrapper: Wrapper = ({ children, stateKey }) => {
+ return {children};
+};
diff --git a/libs/radix/src/index.ts b/libs/radix/src/index.ts
index 3058839..ff151d2 100644
--- a/libs/radix/src/index.ts
+++ b/libs/radix/src/index.ts
@@ -10,3 +10,4 @@ export * from './inputs/text.input';
export * from './inputs/textarea.input';
export * from './inputs/switch.input';
export * from './radix-wrapper';
+export * from './label';
diff --git a/libs/radix/src/inputs.ts b/libs/radix/src/inputs.ts
index ef66426..040790f 100644
--- a/libs/radix/src/inputs.ts
+++ b/libs/radix/src/inputs.ts
@@ -1,4 +1,3 @@
-import { FormInput } from '@reactlit/core';
import { AsyncButton } from './inputs/async-button.input';
import { CheckInput } from './inputs/check.input';
import { RadioInput } from './inputs/radio.input';
@@ -17,7 +16,6 @@ export const Inputs = {
Switch: SwitchInput,
Radio: RadioInput,
Select: SelectInput,
- Form: FormInput,
Slider: SliderInput,
RangeSlider: RangeSliderInput,
AsyncButton: AsyncButton,
diff --git a/libs/radix/src/inputs/async-button.input.tsx b/libs/radix/src/inputs/async-button.input.tsx
index 88d885a..0df7c72 100644
--- a/libs/radix/src/inputs/async-button.input.tsx
+++ b/libs/radix/src/inputs/async-button.input.tsx
@@ -16,6 +16,8 @@ export const AsyncButtonViewComponent = ({
setValue,
value,
stateKey,
+ display,
+ view,
...props
}: AsyncButtonInputProps & ViewComponentProps) => {
return (
diff --git a/libs/radix/src/inputs/check.input.tsx b/libs/radix/src/inputs/check.input.tsx
index c45bbc6..ca03fbf 100644
--- a/libs/radix/src/inputs/check.input.tsx
+++ b/libs/radix/src/inputs/check.input.tsx
@@ -1,7 +1,7 @@
import { CheckboxGroup } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
import { useMemo } from 'react';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type CheckOptionsType = T[] | Record;
@@ -19,6 +19,8 @@ export const CheckInputComponent = ({
setValue,
label,
options,
+ display,
+ view,
...props
}: BaseCheckInputProps & ViewComponentProps) => {
const optionsEntries = useMemo(() => {
@@ -28,20 +30,13 @@ export const CheckInputComponent = ({
return Object.entries(options) as [string, T][];
}, [options]);
return (
- <>
- {renderLabel(label)}
-
- {optionsEntries.map(([label, value], i) => (
-
- {label}
-
- ))}
-
-
+
+ {optionsEntries.map(([label, value], i) => (
+
+ {label}
+
+ ))}
+
);
};
diff --git a/libs/radix/src/inputs/radio.input.tsx b/libs/radix/src/inputs/radio.input.tsx
index 7d3c1ec..171a2dc 100644
--- a/libs/radix/src/inputs/radio.input.tsx
+++ b/libs/radix/src/inputs/radio.input.tsx
@@ -1,7 +1,7 @@
import { RadioGroup } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
import { useMemo } from 'react';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type RadioOptionsType = T[] | Record;
@@ -23,6 +23,8 @@ export const RadioInputComponent = ({
setValue,
label,
options,
+ display,
+ view,
...props
}: BaseRadioInputProps & ViewComponentProps) => {
const optionsEntries = useMemo(() => {
@@ -32,16 +34,13 @@ export const RadioInputComponent = ({
return Object.entries(options) as [string, T][];
}, [options]);
return (
- <>
- {renderLabel(label)}
-
- {optionsEntries.map(([label, value], i) => (
-
- {label}
-
- ))}
-
-
+
+ {optionsEntries.map(([label, value], i) => (
+
+ {label}
+
+ ))}
+
);
};
diff --git a/libs/radix/src/inputs/select.input.tsx b/libs/radix/src/inputs/select.input.tsx
index 5ffa192..fc96ba9 100644
--- a/libs/radix/src/inputs/select.input.tsx
+++ b/libs/radix/src/inputs/select.input.tsx
@@ -1,7 +1,7 @@
import { Select } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
import { useMemo } from 'react';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type SelectOptionsType = T[] | Record;
@@ -20,6 +20,8 @@ export const SelectInputComponent = ({
setValue,
label,
options,
+ display,
+ view,
...props
}: BaseSelectInputProps & ViewComponentProps) => {
const optionsEntries = useMemo(() => {
@@ -29,19 +31,16 @@ export const SelectInputComponent = ({
return Object.entries(options) as [string, T][];
}, [options]);
return (
- <>
- {renderLabel(label)}
-
-
-
- {optionsEntries.map(([label, value], i) => (
-
- {label}
-
- ))}
-
-
-
+
+
+
+ {optionsEntries.map(([label, value], i) => (
+
+ {label}
+
+ ))}
+
+
);
};
diff --git a/libs/radix/src/inputs/slider.input.tsx b/libs/radix/src/inputs/slider.input.tsx
index 2eacfcd..47c9ab3 100644
--- a/libs/radix/src/inputs/slider.input.tsx
+++ b/libs/radix/src/inputs/slider.input.tsx
@@ -1,6 +1,6 @@
import { Slider, SliderProps } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type SliderInputProps = Omit & {
label?: LabelType;
@@ -12,19 +12,18 @@ export const SliderInputComponent = ({
setValue,
onChange,
label,
+ display,
+ view,
...props
}: SliderInputProps & ViewComponentProps) => {
return (
- <>
- {renderLabel(label)}
- {
- setValue(v[0]);
- }}
- {...props}
- />
-
+ {
+ setValue(v[0]);
+ }}
+ {...props}
+ />
);
};
@@ -34,19 +33,18 @@ export const RangeSliderInputComponent = ({
setValue,
onChange,
label,
+ display,
+ view,
...props
}: SliderInputProps & ViewComponentProps<[number, number]>) => {
return (
- <>
- {renderLabel(label)}
- {
- setValue(v as [number, number]);
- }}
- {...props}
- />
-
+ {
+ setValue(v as [number, number]);
+ }}
+ {...props}
+ />
);
};
diff --git a/libs/radix/src/inputs/switch.input.tsx b/libs/radix/src/inputs/switch.input.tsx
index e19b036..b692135 100644
--- a/libs/radix/src/inputs/switch.input.tsx
+++ b/libs/radix/src/inputs/switch.input.tsx
@@ -1,6 +1,6 @@
import { Switch, SwitchProps } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type SwitchInputProps = Omit<
SwitchProps,
@@ -14,14 +14,11 @@ export const SwitchInputComponent = ({
stateKey,
setValue,
label,
+ display,
+ view,
...props
}: SwitchInputProps & ViewComponentProps) => {
- return (
- <>
- {renderLabel(label)}
-
-
- );
+ return ;
};
export const SwitchInput = (props?: SwitchInputProps) =>
diff --git a/libs/radix/src/inputs/table.input.tsx b/libs/radix/src/inputs/table.input.tsx
index 1f5bcae..799c8b2 100644
--- a/libs/radix/src/inputs/table.input.tsx
+++ b/libs/radix/src/inputs/table.input.tsx
@@ -45,6 +45,8 @@ export function TableInputViewComponent({
getRowId,
maxHeight = '300px',
loading,
+ display,
+ view,
...props
}: TableInputProps & ViewComponentProps) {
const colDefs = useMemo[]>(() => {
diff --git a/libs/radix/src/inputs/text.input.tsx b/libs/radix/src/inputs/text.input.tsx
index 29160e2..f431a68 100644
--- a/libs/radix/src/inputs/text.input.tsx
+++ b/libs/radix/src/inputs/text.input.tsx
@@ -1,8 +1,8 @@
-import { Text, TextField } from '@radix-ui/themes';
+import { TextField } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
import { isValidElement, ReactNode, useEffect, useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';
-import { LabelType, renderLabel } from '../label';
+import { LabelType } from '../label';
export type TextInputProps = Omit & {
label?: LabelType;
@@ -20,6 +20,8 @@ export const TextInputComponent = ({
label,
debounceDelay = 200,
children,
+ display,
+ view,
...props
}: TextInputProps & ViewComponentProps) => {
const [rawValue, setRawValue] = useState(value ?? '');
@@ -30,28 +32,25 @@ export const TextInputComponent = ({
setRawValue(value ?? '');
}, [value]);
return (
-
- {renderLabel(label)}
- {
- setRawValue(e.target.value);
- debouncedSetValue(e.target.value);
- onChange?.(e);
- }}
- {...props}
- >
- {isValidElement(children)
- ? (children as ReactNode)
- : typeof children === 'function'
- ? children({ value, stateKey, setValue })
- : undefined}
-
-
+ {
+ setRawValue(e.target.value);
+ debouncedSetValue(e.target.value);
+ onChange?.(e);
+ }}
+ {...props}
+ >
+ {isValidElement(children)
+ ? (children as ReactNode)
+ : typeof children === 'function'
+ ? children({ value, display, view, stateKey, setValue })
+ : undefined}
+
);
};
-export const TextInput = (props: TextInputProps) =>
+export const TextInput = (props?: TextInputProps) =>
defineView((viewProps) => (
));
diff --git a/libs/radix/src/inputs/textarea.input.tsx b/libs/radix/src/inputs/textarea.input.tsx
index c0c3e62..e5668f6 100644
--- a/libs/radix/src/inputs/textarea.input.tsx
+++ b/libs/radix/src/inputs/textarea.input.tsx
@@ -1,8 +1,8 @@
-import { Text, TextArea, TextAreaProps } from '@radix-ui/themes';
+import { TextArea, TextAreaProps } from '@radix-ui/themes';
import { defineView, ViewComponentProps } from '@reactlit/core';
-import { useDebouncedCallback } from 'use-debounce';
-import { LabelType, renderLabel } from '../label';
import { useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { LabelType } from '../label';
export type TextAreaInputProps = Omit & {
label?: LabelType;
@@ -15,6 +15,8 @@ export const TextAreaInputComponent = ({
setValue,
onChange,
label,
+ display,
+ view,
debounceDelay = 300,
...props
}: TextAreaInputProps & ViewComponentProps) => {
@@ -26,18 +28,15 @@ export const TextAreaInputComponent = ({
setRawValue(value ?? '');
}, [value]);
return (
-
- {renderLabel(label)}
-