react-solidlike 2.0.0

package/dist/index.js

@@ -0,0 +1,209 @@
+// src/Await.tsx
+import { useEffect, useState } from "react";
+function Await({ promise, loading = null, error = null, children }) {
+  const [state, setState] = useState(() => {
+    if (!(promise instanceof Promise)) {
+      return { status: "fulfilled", value: promise };
+    }
+    return { status: "pending" };
+  });
+  useEffect(() => {
+    if (!(promise instanceof Promise)) {
+      setState({ status: "fulfilled", value: promise });
+      return;
+    }
+    setState({ status: "pending" });
+    let cancelled = false;
+    promise.then((value) => {
+      if (!cancelled) {
+        setState({ status: "fulfilled", value });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setState({ status: "rejected", error: err });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [promise]);
+  if (state.status === "pending") {
+    return loading;
+  }
+  if (state.status === "rejected") {
+    if (typeof error === "function") {
+      return error(state.error);
+    }
+    return error;
+  }
+  if (typeof children === "function") {
+    return children(state.value);
+  }
+  return children;
+}
+// src/Dynamic.tsx
+import { createElement } from "react";
+function Dynamic({ component, fallback = null, ...props }) {
+  if (!component) {
+    return fallback;
+  }
+  return createElement(component, props);
+}
+// src/ErrorBoundary.tsx
+import { Component } from "react";
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && prevProps.resetKey !== this.props.resetKey) {
+      this.reset();
+    }
+  }
+  reset = () => {
+    this.setState({ error: null });
+  };
+  render() {
+    const { error } = this.state;
+    const { fallback, children } = this.props;
+    if (error) {
+      if (typeof fallback === "function") {
+        return fallback(error, this.reset);
+      }
+      return fallback;
+    }
+    return children;
+  }
+}
+// src/For.tsx
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+function For({ each, children, keyExtractor, fallback = null }) {
+  if (!each || each.length === 0) {
+    return fallback;
+  }
+  return each.map((item, index) => {
+    const key = keyExtractor ? keyExtractor(item, index) : index;
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: children(item, index)
+    }, key);
+  });
+}
+// src/QueryBoundary.tsx
+function defaultIsEmpty(data) {
+  if (data == null)
+    return true;
+  if (Array.isArray(data))
+    return data.length === 0;
+  if (typeof data === "object")
+    return Object.keys(data).length === 0;
+  return false;
+}
+function QueryBoundary({
+  query,
+  loading = null,
+  error = null,
+  empty = null,
+  children,
+  isEmptyFn = defaultIsEmpty
+}) {
+  if (!query) {
+    return null;
+  }
+  const { data, isPending, isError, isEmpty: queryIsEmpty } = query;
+  if (isPending) {
+    return loading;
+  }
+  if (isError && isEmptyFn(data)) {
+    return error;
+  }
+  const isEmpty = queryIsEmpty ?? isEmptyFn(data);
+  if (isEmpty) {
+    return empty;
+  }
+  if (typeof children === "function") {
+    return children(data);
+  }
+  return children;
+}
+// src/Repeat.tsx
+import { Fragment as Fragment2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Repeat({ times, children }) {
+  if (times <= 0) {
+    return null;
+  }
+  const elements = [];
+  for (let i = 0;i < times; i++) {
+    elements.push(/* @__PURE__ */ jsx2(Fragment2, {
+      children: children(i)
+    }, i));
+  }
+  return elements;
+}
+// src/Show.tsx
+function Show({ when, children, fallback = null }) {
+  if (!when) {
+    return fallback;
+  }
+  if (typeof children === "function") {
+    return children(when);
+  }
+  return children;
+}
+// src/Switch.tsx
+import { Children } from "react";
+function Match(_props) {
+  return null;
+}
+function Default(_props) {
+  return null;
+}
+Match.__isMatch = true;
+Default.__isDefault = true;
+function isMatchElement(child) {
+  return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isMatch" in child.type && child.type.__isMatch === true;
+}
+function isDefaultElement(child) {
+  return child !== null && typeof child === "object" && "type" in child && typeof child.type === "function" && "__isDefault" in child.type && child.type.__isDefault === true;
+}
+function Switch({ children, fallback = null }) {
+  const childArray = Children.toArray(children);
+  let defaultContent = fallback;
+  for (const child of childArray) {
+    if (isDefaultElement(child)) {
+      defaultContent = child.props.children;
+      continue;
+    }
+    if (isMatchElement(child)) {
+      const { when, children: matchChildren } = child.props;
+      if (when) {
+        if (typeof matchChildren === "function") {
+          return matchChildren(when);
+        }
+        return matchChildren;
+      }
+    }
+  }
+  return defaultContent;
+}
+export {
+  Switch,
+  Show,
+  Repeat,
+  QueryBoundary,
+  Match,
+  For,
+  ErrorBoundary,
+  Dynamic,
+  Default,
+  Await
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "react-solidlike",
+    "version": "2.0.0",
+    "description": "Declarative React control flow components inspired by Solid.js, replacing ternary expressions and array.map() in JSX",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "NODE_ENV=production bun run build:esm && bun run build:cjs && bun run build:types",
+        "build:esm": "bun build ./src/index.ts --outdir ./dist --format esm --external react --external 'react/*'",
+        "build:cjs": "bun build ./src/index.ts --outfile ./dist/index.cjs --format cjs --external react --external 'react/*'",
+        "build:types": "tsc -p tsconfig.build.json",
+        "test": "bun test",
+        "lint": "biome check .",
+        "lint:fix": "biome check --write .",
+        "format": "biome format --write .",
+        "prepublishOnly": "bun test && bun run build"
+    },
+    "keywords": [
+        "react",
+        "solidjs",
+        "control-flow",
+        "conditional-rendering",
+        "declarative",
+        "jsx"
+    ],
+    "author": "ldystudio",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ldystudio/react-solidlike.git"
+    },
+    "peerDependencies": {
+        "react": ">=17.0.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.3.11",
+        "@happy-dom/global-registrator": "^20.1.0",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/bun": "latest",
+        "@types/react": "^19.2.8",
+        "@types/react-dom": "^19.2.3",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "typescript": "^5.9.3"
+    }
+}