@sprawlify/react 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,349 +1,5 @@
1
- import { INIT_STATE, MachineStatus, createScope, mergeProps } from "@sprawlify/primitives/core";
2
- import { compact, ensure, identity, isFunction, isString, toArray, warn } from "@sprawlify/primitives/utils";
3
- import * as React from "react";
4
- import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
5
- import { createPortal, flushSync } from "react-dom";
6
- import { createNormalizer } from "@sprawlify/primitives/types";
7
- import { jsx } from "react/jsx-runtime";
1
+ import { a as LocaleProvider, c as useEnvironmentContext, d as normalizeProps, f as useMachine, i as useCollator, l as mergeProps, n as sprawlify, o as useLocaleContext, r as useFilter, s as EnvironmentProvider, t as jsxFactory, u as Portal } from "./factory-B_Ye-J6y.mjs";
2
+ import { t as createContext } from "./create-context-fSIoyq0R.mjs";
3
+ import "./utils-CM4cOr5z.mjs";
8
4
 
9
- //#region src/core/use-layout-effect.ts
10
- const useSafeLayoutEffect = typeof globalThis.document !== "undefined" ? useLayoutEffect : useEffect;
11
-
12
- //#endregion
13
- //#region src/core/bindable.ts
14
- function useBindable(props) {
15
- const initial = props().value ?? props().defaultValue;
16
- const eq = props().isEqual ?? Object.is;
17
- const [initialValue] = useState(initial);
18
- const [value, setValue] = useState(initialValue);
19
- const controlled = props().value !== void 0;
20
- const valueRef = useRef(value);
21
- valueRef.current = controlled ? props().value : value;
22
- const prevValue = useRef(valueRef.current);
23
- useSafeLayoutEffect(() => {
24
- prevValue.current = valueRef.current;
25
- }, [value, props().value]);
26
- const setFn = (value$1) => {
27
- const prev = prevValue.current;
28
- const next = isFunction(value$1) ? value$1(prev) : value$1;
29
- if (props().debug) console.log(`[bindable > ${props().debug}] setValue`, {
30
- next,
31
- prev
32
- });
33
- if (!controlled) setValue(next);
34
- if (!eq(next, prev)) props().onChange?.(next, prev);
35
- };
36
- function get() {
37
- return controlled ? props().value : value;
38
- }
39
- return {
40
- initial: initialValue,
41
- ref: valueRef,
42
- get,
43
- set(value$1) {
44
- (props().sync ? flushSync : identity)(() => setFn(value$1));
45
- },
46
- invoke(nextValue, prevValue$1) {
47
- props().onChange?.(nextValue, prevValue$1);
48
- },
49
- hash(value$1) {
50
- return props().hash?.(value$1) ?? String(value$1);
51
- }
52
- };
53
- }
54
- useBindable.cleanup = (fn) => {
55
- useEffect(() => fn, []);
56
- };
57
- useBindable.ref = (defaultValue) => {
58
- const value = useRef(defaultValue);
59
- return {
60
- get: () => value.current,
61
- set: (next) => {
62
- value.current = next;
63
- }
64
- };
65
- };
66
-
67
- //#endregion
68
- //#region src/core/refs.ts
69
- function useRefs(refs) {
70
- const ref = useRef(refs);
71
- return {
72
- get(key) {
73
- return ref.current[key];
74
- },
75
- set(key, value) {
76
- ref.current[key] = value;
77
- }
78
- };
79
- }
80
-
81
- //#endregion
82
- //#region src/core/track.ts
83
- const useTrack = (deps, effect) => {
84
- const render = useRef(false);
85
- const called = useRef(false);
86
- useEffect(() => {
87
- if (render.current && called.current) return effect();
88
- called.current = true;
89
- }, [...(deps ?? []).map((d) => typeof d === "function" ? d() : d)]);
90
- useEffect(() => {
91
- render.current = true;
92
- return () => {
93
- render.current = false;
94
- };
95
- }, []);
96
- };
97
-
98
- //#endregion
99
- //#region src/core/machine.ts
100
- function useMachine(machine, userProps = {}) {
101
- const scope = useMemo(() => {
102
- const { id, ids, getRootNode } = userProps;
103
- return createScope({
104
- id,
105
- ids,
106
- getRootNode
107
- });
108
- }, [userProps]);
109
- const debug = (...args) => {
110
- if (machine.debug) console.log(...args);
111
- };
112
- const prop = useProp(machine.props?.({
113
- props: compact(userProps),
114
- scope
115
- }) ?? userProps);
116
- const context = machine.context?.({
117
- prop,
118
- bindable: useBindable,
119
- scope,
120
- flush,
121
- getContext() {
122
- return ctx;
123
- },
124
- getComputed() {
125
- return computed;
126
- },
127
- getRefs() {
128
- return refs;
129
- },
130
- getEvent() {
131
- return getEvent();
132
- }
133
- });
134
- const contextRef = useLiveRef(context);
135
- const ctx = {
136
- get(key) {
137
- return contextRef.current?.[key].ref.current;
138
- },
139
- set(key, value) {
140
- contextRef.current?.[key].set(value);
141
- },
142
- initial(key) {
143
- return contextRef.current?.[key].initial;
144
- },
145
- hash(key) {
146
- const current = contextRef.current?.[key].get();
147
- return contextRef.current?.[key].hash(current);
148
- }
149
- };
150
- const effects = useRef(/* @__PURE__ */ new Map());
151
- const transitionRef = useRef(null);
152
- const previousEventRef = useRef(null);
153
- const eventRef = useRef({ type: "" });
154
- const getEvent = () => ({
155
- ...eventRef.current,
156
- current() {
157
- return eventRef.current;
158
- },
159
- previous() {
160
- return previousEventRef.current;
161
- }
162
- });
163
- const getState = () => ({
164
- ...state,
165
- matches(...values) {
166
- return values.includes(state.ref.current);
167
- },
168
- hasTag(tag) {
169
- return !!machine.states[state.ref.current]?.tags?.includes(tag);
170
- }
171
- });
172
- const refs = useRefs(machine.refs?.({
173
- prop,
174
- context: ctx
175
- }) ?? {});
176
- const getParams = () => ({
177
- state: getState(),
178
- context: ctx,
179
- event: getEvent(),
180
- prop,
181
- send,
182
- action,
183
- guard,
184
- track: useTrack,
185
- refs,
186
- computed,
187
- flush,
188
- scope,
189
- choose
190
- });
191
- const action = (keys) => {
192
- const strs = isFunction(keys) ? keys(getParams()) : keys;
193
- if (!strs) return;
194
- const fns = strs.map((s) => {
195
- const fn = machine.implementations?.actions?.[s];
196
- if (!fn) warn(`[sprawlify-js] No implementation found for action "${JSON.stringify(s)}"`);
197
- return fn;
198
- });
199
- for (const fn of fns) fn?.(getParams());
200
- };
201
- const guard = (str) => {
202
- if (isFunction(str)) return str(getParams());
203
- return machine.implementations?.guards?.[str](getParams());
204
- };
205
- const effect = (keys) => {
206
- const strs = isFunction(keys) ? keys(getParams()) : keys;
207
- if (!strs) return;
208
- const fns = strs.map((s) => {
209
- const fn = machine.implementations?.effects?.[s];
210
- if (!fn) warn(`[sprawlify-js] No implementation found for effect "${JSON.stringify(s)}"`);
211
- return fn;
212
- });
213
- const cleanups = [];
214
- for (const fn of fns) {
215
- const cleanup = fn?.(getParams());
216
- if (cleanup) cleanups.push(cleanup);
217
- }
218
- return () => cleanups.forEach((fn) => fn?.());
219
- };
220
- const choose = (transitions) => {
221
- return toArray(transitions).find((t) => {
222
- let result = !t.guard;
223
- if (isString(t.guard)) result = !!guard(t.guard);
224
- else if (isFunction(t.guard)) result = t.guard(getParams());
225
- return result;
226
- });
227
- };
228
- const computed = (key) => {
229
- ensure(machine.computed, () => `[sprawlify-js] No computed object found on machine`);
230
- const fn = machine.computed[key];
231
- return fn({
232
- context: ctx,
233
- event: getEvent(),
234
- prop,
235
- refs,
236
- scope,
237
- computed
238
- });
239
- };
240
- const state = useBindable(() => ({
241
- defaultValue: machine.initialState({ prop }),
242
- onChange(nextState, prevState) {
243
- if (prevState) {
244
- effects.current.get(prevState)?.();
245
- effects.current.delete(prevState);
246
- }
247
- if (prevState) action(machine.states[prevState]?.exit);
248
- action(transitionRef.current?.actions);
249
- const cleanup = effect(machine.states[nextState]?.effects);
250
- if (cleanup) effects.current.set(nextState, cleanup);
251
- if (prevState === INIT_STATE) {
252
- action(machine.entry);
253
- const cleanup$1 = effect(machine.effects);
254
- if (cleanup$1) effects.current.set(INIT_STATE, cleanup$1);
255
- }
256
- action(machine.states[nextState]?.entry);
257
- }
258
- }));
259
- const hydratedStateRef = useRef(void 0);
260
- const statusRef = useRef(MachineStatus.NotStarted);
261
- useSafeLayoutEffect(() => {
262
- queueMicrotask(() => {
263
- const started = statusRef.current === MachineStatus.Started;
264
- statusRef.current = MachineStatus.Started;
265
- debug(started ? "rehydrating..." : "initializing...");
266
- const initialState = hydratedStateRef.current ?? state.initial;
267
- state.invoke(initialState, started ? state.get() : INIT_STATE);
268
- });
269
- const fns = effects.current;
270
- const currentState = state.ref.current;
271
- return () => {
272
- debug("unmounting...");
273
- hydratedStateRef.current = currentState;
274
- statusRef.current = MachineStatus.Stopped;
275
- fns.forEach((fn) => fn?.());
276
- effects.current = /* @__PURE__ */ new Map();
277
- transitionRef.current = null;
278
- queueMicrotask(() => {
279
- action(machine.exit);
280
- });
281
- };
282
- }, []);
283
- const getCurrentState = () => {
284
- if ("ref" in state) return state.ref.current;
285
- return state.get();
286
- };
287
- const send = (event) => {
288
- queueMicrotask(() => {
289
- if (statusRef.current !== MachineStatus.Started) return;
290
- previousEventRef.current = eventRef.current;
291
- eventRef.current = event;
292
- const currentState = getCurrentState();
293
- const transition = choose(machine.states[currentState].on?.[event.type] ?? machine.on?.[event.type]);
294
- if (!transition) return;
295
- transitionRef.current = transition;
296
- const target = transition.target ?? currentState;
297
- debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
298
- const changed = target !== currentState;
299
- if (changed) flushSync(() => state.set(target));
300
- else if (transition.reenter && !changed) state.invoke(currentState, currentState);
301
- else action(transition.actions ?? []);
302
- });
303
- };
304
- machine.watch?.(getParams());
305
- return {
306
- state: getState(),
307
- send,
308
- context: ctx,
309
- prop,
310
- scope,
311
- refs,
312
- computed,
313
- event: getEvent(),
314
- getStatus: () => statusRef.current
315
- };
316
- }
317
- function useLiveRef(value) {
318
- const ref = useRef(value);
319
- ref.current = value;
320
- return ref;
321
- }
322
- function useProp(value) {
323
- const ref = useLiveRef(value);
324
- return function get(key) {
325
- return ref.current[key];
326
- };
327
- }
328
- function flush(fn) {
329
- queueMicrotask(() => {
330
- flushSync(() => fn());
331
- });
332
- }
333
-
334
- //#endregion
335
- //#region src/core/normalize-props.ts
336
- const normalizeProps = createNormalizer((v) => v);
337
-
338
- //#endregion
339
- //#region src/core/portal.tsx
340
- const Portal = (props) => {
341
- const { children, container, disabled, getRootNode } = props;
342
- if (typeof window === "undefined" || disabled) return /* @__PURE__ */ jsx(React.Fragment, { children });
343
- const doc = getRootNode?.().ownerDocument ?? document;
344
- const mountNode = container?.current ?? doc.body;
345
- return /* @__PURE__ */ jsx(React.Fragment, { children: React.Children.map(children, (child) => createPortal(child, mountNode)) });
346
- };
347
-
348
- //#endregion
349
- export { Portal, mergeProps, normalizeProps, useMachine };
5
+ export { EnvironmentProvider, LocaleProvider, Portal, createContext, jsxFactory, normalizeProps, sprawlify, useCollator, useEnvironmentContext, useFilter, useLocaleContext, useMachine };
@@ -0,0 +1,29 @@
1
+ import React, { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, JSX } from "react";
2
+ import * as _sprawlify_primitives_types0 from "@sprawlify/primitives/types";
3
+
4
+ //#region src/components/factory.d.ts
5
+ interface PolymorphicProps {
6
+ asChild?: boolean | undefined;
7
+ }
8
+ type JsxElements = { [E in keyof JSX.IntrinsicElements]: SprawlifyForwardRefComponent<E> };
9
+ type SprawlifyForwardRefComponent<E$1 extends React.ElementType> = React.ForwardRefExoticComponent<SprawlifyPropsWithRef<E$1>>;
10
+ type SprawlifyPropsWithRef<E$1 extends React.ElementType> = React.ComponentPropsWithRef<E$1> & PolymorphicProps;
11
+ type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
12
+ type HTMLSprawlifyProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
13
+ declare const jsxFactory: () => JsxElements;
14
+ declare const sprawlify: JsxElements;
15
+ //#endregion
16
+ //#region src/core/normalize-props.d.ts
17
+ type WithoutRef<T> = Omit<T, "ref">;
18
+ type ElementsWithoutRef = { [K in keyof JSX.IntrinsicElements]: WithoutRef<JSX.IntrinsicElements[K]> };
19
+ type PropTypes = ElementsWithoutRef & {
20
+ element: WithoutRef<HTMLAttributes<HTMLElement>>;
21
+ style: CSSProperties;
22
+ };
23
+ declare const normalizeProps: _sprawlify_primitives_types0.NormalizeProps<PropTypes>;
24
+ //#endregion
25
+ //#region src/types.d.ts
26
+ type Assign<T, U> = Omit<T, keyof U> & U;
27
+ type Optional<T, K$1 extends keyof T> = Pick<Partial<T>, K$1> & Omit<T, K$1>;
28
+ //#endregion
29
+ export { HTMLProps as a, jsxFactory as c, normalizeProps as i, sprawlify as l, Optional as n, HTMLSprawlifyProps as o, PropTypes as r, PolymorphicProps as s, Assign as t };
@@ -0,0 +1,41 @@
1
+ import { Machine, MachineSchema, Service } from "@sprawlify/primitives/core";
2
+ import React, { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, JSX, PropsWithChildren, RefObject } from "react";
3
+ import * as _sprawlify_primitives_types0 from "@sprawlify/primitives/types";
4
+
5
+ //#region src/components/factory.d.ts
6
+ interface PolymorphicProps {
7
+ asChild?: boolean | undefined;
8
+ }
9
+ type JsxElements = { [E in keyof JSX.IntrinsicElements]: SprawlifyForwardRefComponent<E> };
10
+ type SprawlifyForwardRefComponent<E$1 extends React.ElementType> = React.ForwardRefExoticComponent<SprawlifyPropsWithRef<E$1>>;
11
+ type SprawlifyPropsWithRef<E$1 extends React.ElementType> = React.ComponentPropsWithRef<E$1> & PolymorphicProps;
12
+ type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
13
+ type HTMLSprawlifyProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
14
+ declare const jsxFactory: () => JsxElements;
15
+ declare const sprawlify: JsxElements;
16
+ //#endregion
17
+ //#region src/core/machine.d.ts
18
+ declare function useMachine<T extends MachineSchema>(machine: Machine<T>, userProps?: Partial<T["props"]>): Service<T>;
19
+ //#endregion
20
+ //#region src/core/normalize-props.d.ts
21
+ type WithoutRef<T> = Omit<T, "ref">;
22
+ type ElementsWithoutRef = { [K in keyof JSX.IntrinsicElements]: WithoutRef<JSX.IntrinsicElements[K]> };
23
+ type PropTypes = ElementsWithoutRef & {
24
+ element: WithoutRef<HTMLAttributes<HTMLElement>>;
25
+ style: CSSProperties;
26
+ };
27
+ declare const normalizeProps: _sprawlify_primitives_types0.NormalizeProps<PropTypes>;
28
+ //#endregion
29
+ //#region src/core/portal.d.ts
30
+ interface PortalProps {
31
+ disabled?: boolean | undefined;
32
+ container?: RefObject<HTMLElement> | undefined;
33
+ getRootNode?: (() => ShadowRoot | Document | Node) | undefined;
34
+ }
35
+ declare const Portal: (props: PropsWithChildren<PortalProps>) => JSX.Element;
36
+ //#endregion
37
+ //#region src/types.d.ts
38
+ type Assign<T, U> = Omit<T, keyof U> & U;
39
+ type Optional<T, K$1 extends keyof T> = Pick<Partial<T>, K$1> & Omit<T, K$1>;
40
+ //#endregion
41
+ export { PropTypes as a, HTMLProps as c, jsxFactory as d, sprawlify as f, PortalProps as i, HTMLSprawlifyProps as l, Optional as n, normalizeProps as o, Portal as r, useMachine as s, Assign as t, PolymorphicProps as u };
@@ -0,0 +1,12 @@
1
+ const require_factory = require('../factory-CfqPG186.cjs');
2
+ const require_create_context = require('../create-context-DCEySQ7J.cjs');
3
+ require('../utils-Cb5K29pi.cjs');
4
+ let __sprawlify_primitives_core = require("@sprawlify/primitives/core");
5
+
6
+ exports.createContext = require_create_context.createContext;
7
+ Object.defineProperty(exports, 'mergeProps', {
8
+ enumerable: true,
9
+ get: function () {
10
+ return __sprawlify_primitives_core.mergeProps;
11
+ }
12
+ });
@@ -0,0 +1,2 @@
1
+ import { n as createContext, t as mergeProps } from "../index-BbLlW5Mk.cjs";
2
+ export { createContext, mergeProps };
@@ -0,0 +1,2 @@
1
+ import { n as createContext, t as mergeProps } from "../index-CgR7RZbW.mjs";
2
+ export { createContext, mergeProps };
@@ -0,0 +1,4 @@
1
+ import { t as createContext } from "../create-context-fSIoyq0R.mjs";
2
+ import { t as mergeProps } from "../utils-CM4cOr5z.mjs";
3
+
4
+ export { createContext, mergeProps };
@@ -0,0 +1,3 @@
1
+ import { mergeProps as mergeProps$1 } from "@sprawlify/primitives/core";
2
+
3
+ export { mergeProps$1 as t };
@@ -0,0 +1 @@
1
+ let __sprawlify_primitives_core = require("@sprawlify/primitives/core");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sprawlify/react",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "type": "module",
5
5
  "description": "React wrapper for primitives.",
6
6
  "author": "sprawlify <npm@sprawlify.com>",
@@ -17,6 +17,16 @@
17
17
  "types": "./dist/index.d.cts",
18
18
  "default": "./dist/index.cjs"
19
19
  }
20
+ },
21
+ "./collapsible": {
22
+ "import": {
23
+ "types": "./dist/components/collapsible/index.d.mts",
24
+ "default": "./dist/components/collapsible/index.mjs"
25
+ },
26
+ "require": {
27
+ "types": "./dist/components/collapsible/index.d.cts",
28
+ "default": "./dist/components/collapsible/index.cjs"
29
+ }
20
30
  }
21
31
  },
22
32
  "files": [
@@ -26,7 +36,7 @@
26
36
  "access": "public"
27
37
  },
28
38
  "dependencies": {
29
- "@sprawlify/primitives": "0.0.1"
39
+ "@sprawlify/primitives": "0.0.3"
30
40
  },
31
41
  "peerDependencies": {
32
42
  "react": ">=19.0.0",