react-solidlike 2.0.1 → 2.2.0

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.
Files changed (3) hide show
  1. package/dist/index.js +126 -183
  2. package/package.json +3 -5
  3. package/dist/index.cjs +0 -241
package/dist/index.js CHANGED
@@ -1,209 +1,152 @@
1
- // src/Await.tsx
2
- import { useEffect, useState } from "react";
1
+ import { Children, Component, Fragment, createElement, useEffect, useState } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+
3
4
  function Await({ promise, loading = null, error = null, children }) {
4
- const [state, setState] = useState(() => {
5
- if (!(promise instanceof Promise)) {
6
- return { status: "fulfilled", value: promise };
7
- }
8
- return { status: "pending" };
9
- });
10
- useEffect(() => {
11
- if (!(promise instanceof Promise)) {
12
- setState({ status: "fulfilled", value: promise });
13
- return;
14
- }
15
- setState({ status: "pending" });
16
- let cancelled = false;
17
- promise.then((value) => {
18
- if (!cancelled) {
19
- setState({ status: "fulfilled", value });
20
- }
21
- }).catch((err) => {
22
- if (!cancelled) {
23
- setState({ status: "rejected", error: err });
24
- }
25
- });
26
- return () => {
27
- cancelled = true;
28
- };
29
- }, [promise]);
30
- if (state.status === "pending") {
31
- return loading;
32
- }
33
- if (state.status === "rejected") {
34
- if (typeof error === "function") {
35
- return error(state.error);
36
- }
37
- return error;
38
- }
39
- if (typeof children === "function") {
40
- return children(state.value);
41
- }
42
- return children;
5
+ const [state, setState] = useState(() => {
6
+ if (!(promise instanceof Promise)) return {
7
+ status: "fulfilled",
8
+ value: promise
9
+ };
10
+ return { status: "pending" };
11
+ });
12
+ useEffect(() => {
13
+ if (!(promise instanceof Promise)) {
14
+ setState({
15
+ status: "fulfilled",
16
+ value: promise
17
+ });
18
+ return;
19
+ }
20
+ setState({ status: "pending" });
21
+ let cancelled = false;
22
+ promise.then((value) => {
23
+ if (!cancelled) setState({
24
+ status: "fulfilled",
25
+ value
26
+ });
27
+ }).catch((err) => {
28
+ if (!cancelled) setState({
29
+ status: "rejected",
30
+ error: err
31
+ });
32
+ });
33
+ return () => {
34
+ cancelled = true;
35
+ };
36
+ }, [promise]);
37
+ if (state.status === "pending") return loading;
38
+ if (state.status === "rejected") {
39
+ if (typeof error === "function") return error(state.error);
40
+ return error;
41
+ }
42
+ if (typeof children === "function") return children(state.value);
43
+ return children;
43
44
  }
44
- // src/Dynamic.tsx
45
- import { createElement } from "react";
45
+
46
46
  function Dynamic({ component, fallback = null, ...props }) {
47
- if (!component) {
48
- return fallback;
49
- }
50
- return createElement(component, props);
47
+ if (!component) return fallback;
48
+ return createElement(component, props);
51
49
  }
52
- // src/ErrorBoundary.tsx
53
- import { Component } from "react";
54
50
 
55
- class ErrorBoundary extends Component {
56
- constructor(props) {
57
- super(props);
58
- this.state = { error: null };
59
- }
60
- static getDerivedStateFromError(error) {
61
- return { error };
62
- }
63
- componentDidCatch(error, errorInfo) {
64
- this.props.onError?.(error, errorInfo);
65
- }
66
- componentDidUpdate(prevProps) {
67
- if (this.state.error && prevProps.resetKey !== this.props.resetKey) {
68
- this.reset();
69
- }
70
- }
71
- reset = () => {
72
- this.setState({ error: null });
73
- };
74
- render() {
75
- const { error } = this.state;
76
- const { fallback, children } = this.props;
77
- if (error) {
78
- if (typeof fallback === "function") {
79
- return fallback(error, this.reset);
80
- }
81
- return fallback;
82
- }
83
- return children;
84
- }
85
- }
86
- // src/For.tsx
87
- import { Fragment } from "react";
88
- import { jsxDEV } from "react/jsx-dev-runtime";
51
+ var ErrorBoundary = class extends Component {
52
+ constructor(props) {
53
+ super(props);
54
+ this.state = { error: null };
55
+ }
56
+ static getDerivedStateFromError(error) {
57
+ return { error };
58
+ }
59
+ componentDidCatch(error, errorInfo) {
60
+ this.props.onError?.(error, errorInfo);
61
+ }
62
+ componentDidUpdate(prevProps) {
63
+ if (this.state.error && prevProps.resetKey !== this.props.resetKey) this.reset();
64
+ }
65
+ reset = () => {
66
+ this.setState({ error: null });
67
+ };
68
+ render() {
69
+ const { error } = this.state;
70
+ const { fallback, children } = this.props;
71
+ if (error) {
72
+ if (typeof fallback === "function") return fallback(error, this.reset);
73
+ return fallback;
74
+ }
75
+ return children;
76
+ }
77
+ };
78
+
89
79
  function For({ each, children, keyExtractor, fallback = null }) {
90
- if (!each || each.length === 0) {
91
- return fallback;
92
- }
93
- return each.map((item, index) => {
94
- const key = keyExtractor ? keyExtractor(item, index) : index;
95
- return /* @__PURE__ */ jsxDEV(Fragment, {
96
- children: children(item, index)
97
- }, key, false, undefined, this);
98
- });
80
+ if (!each || each.length === 0) return fallback;
81
+ return each.map((item, index) => {
82
+ const key = keyExtractor ? keyExtractor(item, index) : index;
83
+ return jsx(Fragment, { children: children(item, index) }, key);
84
+ });
99
85
  }
100
- // src/QueryBoundary.tsx
86
+
101
87
  function defaultIsEmpty(data) {
102
- if (data == null)
103
- return true;
104
- if (Array.isArray(data))
105
- return data.length === 0;
106
- if (typeof data === "object")
107
- return Object.keys(data).length === 0;
108
- return false;
88
+ if (data == null) return true;
89
+ if (Array.isArray(data)) return data.length === 0;
90
+ if (typeof data === "object") return Object.keys(data).length === 0;
91
+ return false;
109
92
  }
110
- function QueryBoundary({
111
- query,
112
- loading = null,
113
- error = null,
114
- empty = null,
115
- children,
116
- isEmptyFn = defaultIsEmpty
117
- }) {
118
- if (!query) {
119
- return null;
120
- }
121
- const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
122
- if (isPending) {
123
- return loading;
124
- }
125
- if (isError && isEmptyFn(data)) {
126
- return error;
127
- }
128
- const isEmpty = queryIsEmpty ?? isEmptyFn(data);
129
- if (isEmpty) {
130
- return empty;
131
- }
132
- if (typeof children === "function") {
133
- return children(data);
134
- }
135
- return children;
93
+
94
+ function QueryBoundary({ query, loading = null, error = null, empty = null, children, isEmptyFn = defaultIsEmpty }) {
95
+ if (!query) return null;
96
+ const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
97
+ if (isPending) return loading;
98
+ if (isError && isEmptyFn(data)) return error;
99
+ if (queryIsEmpty ?? isEmptyFn(data)) return empty;
100
+ if (typeof children === "function") return children(data);
101
+ return children;
136
102
  }
137
- // src/Repeat.tsx
138
- import { Fragment as Fragment2 } from "react";
139
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
103
+
140
104
  function Repeat({ times, children }) {
141
- if (times <= 0) {
142
- return null;
143
- }
144
- const elements = [];
145
- for (let i = 0;i < times; i++) {
146
- elements.push(/* @__PURE__ */ jsxDEV2(Fragment2, {
147
- children: children(i)
148
- }, i, false, undefined, this));
149
- }
150
- return elements;
105
+ if (times <= 0) return null;
106
+ const elements = [];
107
+ for (let i = 0; i < times; i++) elements.push( jsx(Fragment, { children: children(i) }, i));
108
+ return elements;
151
109
  }
152
- // src/Show.tsx
110
+
153
111
  function Show({ when, children, fallback = null }) {
154
- if (!when) {
155
- return fallback;
156
- }
157
- if (typeof children === "function") {
158
- return children(when);
159
- }
160
- return children;
112
+ if (!when) return fallback;
113
+ if (typeof children === "function") return children(when);
114
+ return children;
161
115
  }
162
- // src/Switch.tsx
163
- import { Children } from "react";
116
+
164
117
  function Match(_props) {
165
- return null;
118
+ return null;
166
119
  }
120
+
167
121
  function Default(_props) {
168
- return null;
122
+ return null;
169
123
  }
170
124
  Match.__isMatch = true;
171
125
  Default.__isDefault = true;
172
126
  function isMatchElement(child) {
173
- return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isMatch" in child.type && child.type.__isMatch === true;
127
+ return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isMatch" in child.type && child.type.__isMatch === true;
174
128
  }
175
129
  function isDefaultElement(child) {
176
- return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isDefault" in child.type && child.type.__isDefault === true;
130
+ return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isDefault" in child.type && child.type.__isDefault === true;
177
131
  }
132
+
178
133
  function Switch({ children, fallback = null }) {
179
- const childArray = Children.toArray(children);
180
- let defaultContent = fallback;
181
- for (const child of childArray) {
182
- if (isDefaultElement(child)) {
183
- defaultContent = child.props.children;
184
- continue;
185
- }
186
- if (isMatchElement(child)) {
187
- const { when, children: matchChildren } = child.props;
188
- if (when) {
189
- if (typeof matchChildren === "function") {
190
- return matchChildren(when);
191
- }
192
- return matchChildren;
193
- }
194
- }
195
- }
196
- return defaultContent;
134
+ const childArray = Children.toArray(children);
135
+ let defaultContent = fallback;
136
+ for (const child of childArray) {
137
+ if (isDefaultElement(child)) {
138
+ defaultContent = child.props.children;
139
+ continue;
140
+ }
141
+ if (isMatchElement(child)) {
142
+ const { when, children: matchChildren } = child.props;
143
+ if (when) {
144
+ if (typeof matchChildren === "function") return matchChildren(when);
145
+ return matchChildren;
146
+ }
147
+ }
148
+ }
149
+ return defaultContent;
197
150
  }
198
- export {
199
- Switch,
200
- Show,
201
- Repeat,
202
- QueryBoundary,
203
- Match,
204
- For,
205
- ErrorBoundary,
206
- Dynamic,
207
- Default,
208
- Await
209
- };
151
+
152
+ export { Await, Default, Dynamic, ErrorBoundary, For, Match, QueryBoundary, Repeat, Show, Switch };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-solidlike",
3
- "version": "2.0.1",
3
+ "version": "2.2.0",
4
4
  "description": "Declarative React control flow components inspired by Solid.js, replacing ternary expressions and array.map() in JSX",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -17,10 +17,7 @@
17
17
  "dist"
18
18
  ],
19
19
  "scripts": {
20
- "build": "NODE_ENV=production rm -rf dist && bun run build:esm && bun run build:cjs && bun run build:types",
21
- "build:esm": "bun build ./src/index.ts --outdir ./dist --format esm --external react --external 'react/*'",
22
- "build:cjs": "bun build ./src/index.ts --outfile ./dist/index.cjs --format cjs --external react --external 'react/*'",
23
- "build:types": "tsc -p tsconfig.build.json",
20
+ "build": "rm -rf dist && rolldown -c && tsc -p tsconfig.build.json",
24
21
  "test": "bun test",
25
22
  "lint": "biome check .",
26
23
  "lint:fix": "biome check --write .",
@@ -54,6 +51,7 @@
54
51
  "@types/react-dom": "^19.2.3",
55
52
  "react": "^19.2.3",
56
53
  "react-dom": "^19.2.3",
54
+ "rolldown": "^1.0.0-beta.59",
57
55
  "typescript": "^5.9.3"
58
56
  }
59
57
  }
package/dist/index.cjs DELETED
@@ -1,241 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropNames = Object.getOwnPropertyNames;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __moduleCache = /* @__PURE__ */ new WeakMap;
6
- var __toCommonJS = (from) => {
7
- var entry = __moduleCache.get(from), desc;
8
- if (entry)
9
- return entry;
10
- entry = __defProp({}, "__esModule", { value: true });
11
- if (from && typeof from === "object" || typeof from === "function")
12
- __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
13
- get: () => from[key],
14
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
- }));
16
- __moduleCache.set(from, entry);
17
- return entry;
18
- };
19
- var __export = (target, all) => {
20
- for (var name in all)
21
- __defProp(target, name, {
22
- get: all[name],
23
- enumerable: true,
24
- configurable: true,
25
- set: (newValue) => all[name] = () => newValue
26
- });
27
- };
28
-
29
- // src/index.ts
30
- var exports_src = {};
31
- __export(exports_src, {
32
- Switch: () => Switch,
33
- Show: () => Show,
34
- Repeat: () => Repeat,
35
- QueryBoundary: () => QueryBoundary,
36
- Match: () => Match,
37
- For: () => For,
38
- ErrorBoundary: () => ErrorBoundary,
39
- Dynamic: () => Dynamic,
40
- Default: () => Default,
41
- Await: () => Await
42
- });
43
- module.exports = __toCommonJS(exports_src);
44
-
45
- // src/Await.tsx
46
- var import_react = require("react");
47
- function Await({ promise, loading = null, error = null, children }) {
48
- const [state, setState] = import_react.useState(() => {
49
- if (!(promise instanceof Promise)) {
50
- return { status: "fulfilled", value: promise };
51
- }
52
- return { status: "pending" };
53
- });
54
- import_react.useEffect(() => {
55
- if (!(promise instanceof Promise)) {
56
- setState({ status: "fulfilled", value: promise });
57
- return;
58
- }
59
- setState({ status: "pending" });
60
- let cancelled = false;
61
- promise.then((value) => {
62
- if (!cancelled) {
63
- setState({ status: "fulfilled", value });
64
- }
65
- }).catch((err) => {
66
- if (!cancelled) {
67
- setState({ status: "rejected", error: err });
68
- }
69
- });
70
- return () => {
71
- cancelled = true;
72
- };
73
- }, [promise]);
74
- if (state.status === "pending") {
75
- return loading;
76
- }
77
- if (state.status === "rejected") {
78
- if (typeof error === "function") {
79
- return error(state.error);
80
- }
81
- return error;
82
- }
83
- if (typeof children === "function") {
84
- return children(state.value);
85
- }
86
- return children;
87
- }
88
- // src/Dynamic.tsx
89
- var import_react2 = require("react");
90
- function Dynamic({ component, fallback = null, ...props }) {
91
- if (!component) {
92
- return fallback;
93
- }
94
- return import_react2.createElement(component, props);
95
- }
96
- // src/ErrorBoundary.tsx
97
- var import_react3 = require("react");
98
-
99
- class ErrorBoundary extends import_react3.Component {
100
- constructor(props) {
101
- super(props);
102
- this.state = { error: null };
103
- }
104
- static getDerivedStateFromError(error) {
105
- return { error };
106
- }
107
- componentDidCatch(error, errorInfo) {
108
- this.props.onError?.(error, errorInfo);
109
- }
110
- componentDidUpdate(prevProps) {
111
- if (this.state.error && prevProps.resetKey !== this.props.resetKey) {
112
- this.reset();
113
- }
114
- }
115
- reset = () => {
116
- this.setState({ error: null });
117
- };
118
- render() {
119
- const { error } = this.state;
120
- const { fallback, children } = this.props;
121
- if (error) {
122
- if (typeof fallback === "function") {
123
- return fallback(error, this.reset);
124
- }
125
- return fallback;
126
- }
127
- return children;
128
- }
129
- }
130
- // src/For.tsx
131
- var import_react4 = require("react");
132
- var jsx_dev_runtime = require("react/jsx-dev-runtime");
133
- function For({ each, children, keyExtractor, fallback = null }) {
134
- if (!each || each.length === 0) {
135
- return fallback;
136
- }
137
- return each.map((item, index) => {
138
- const key = keyExtractor ? keyExtractor(item, index) : index;
139
- return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(import_react4.Fragment, {
140
- children: children(item, index)
141
- }, key, false, undefined, this);
142
- });
143
- }
144
- // src/QueryBoundary.tsx
145
- function defaultIsEmpty(data) {
146
- if (data == null)
147
- return true;
148
- if (Array.isArray(data))
149
- return data.length === 0;
150
- if (typeof data === "object")
151
- return Object.keys(data).length === 0;
152
- return false;
153
- }
154
- function QueryBoundary({
155
- query,
156
- loading = null,
157
- error = null,
158
- empty = null,
159
- children,
160
- isEmptyFn = defaultIsEmpty
161
- }) {
162
- if (!query) {
163
- return null;
164
- }
165
- const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
166
- if (isPending) {
167
- return loading;
168
- }
169
- if (isError && isEmptyFn(data)) {
170
- return error;
171
- }
172
- const isEmpty = queryIsEmpty ?? isEmptyFn(data);
173
- if (isEmpty) {
174
- return empty;
175
- }
176
- if (typeof children === "function") {
177
- return children(data);
178
- }
179
- return children;
180
- }
181
- // src/Repeat.tsx
182
- var import_react5 = require("react");
183
- var jsx_dev_runtime2 = require("react/jsx-dev-runtime");
184
- function Repeat({ times, children }) {
185
- if (times <= 0) {
186
- return null;
187
- }
188
- const elements = [];
189
- for (let i = 0;i < times; i++) {
190
- elements.push(/* @__PURE__ */ jsx_dev_runtime2.jsxDEV(import_react5.Fragment, {
191
- children: children(i)
192
- }, i, false, undefined, this));
193
- }
194
- return elements;
195
- }
196
- // src/Show.tsx
197
- function Show({ when, children, fallback = null }) {
198
- if (!when) {
199
- return fallback;
200
- }
201
- if (typeof children === "function") {
202
- return children(when);
203
- }
204
- return children;
205
- }
206
- // src/Switch.tsx
207
- var import_react6 = require("react");
208
- function Match(_props) {
209
- return null;
210
- }
211
- function Default(_props) {
212
- return null;
213
- }
214
- Match.__isMatch = true;
215
- Default.__isDefault = true;
216
- function isMatchElement(child) {
217
- return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isMatch" in child.type && child.type.__isMatch === true;
218
- }
219
- function isDefaultElement(child) {
220
- return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isDefault" in child.type && child.type.__isDefault === true;
221
- }
222
- function Switch({ children, fallback = null }) {
223
- const childArray = import_react6.Children.toArray(children);
224
- let defaultContent = fallback;
225
- for (const child of childArray) {
226
- if (isDefaultElement(child)) {
227
- defaultContent = child.props.children;
228
- continue;
229
- }
230
- if (isMatchElement(child)) {
231
- const { when, children: matchChildren } = child.props;
232
- if (when) {
233
- if (typeof matchChildren === "function") {
234
- return matchChildren(when);
235
- }
236
- return matchChildren;
237
- }
238
- }
239
- }
240
- return defaultContent;
241
- }