@pulse-js/react 0.1.2 → 0.1.4

package/README.md

@@ -64,6 +64,35 @@ function ProtectedRoute() {
 }
 ```
 
+## Developer Tools
+
+Pulse provides a dedicated inspector for debugging your reactive graph. In React applications, you can enable it with zero configuration.
+
+### Auto-Injection (Recommended)
+
+Simply import `@pulse-js/react/devtools` at the top of your main entry point (e.g., `main.tsx`). The inspector will automatically mount to the DOM only in development environments (`NODE_ENV === 'development'`).
+
+```tsx
+import "@pulse-js/react/devtools";
+```
+
+### Manual Component
+
+Alternatively, you can use the `PulseDevTools` component for more control:
+
+```tsx
+import { PulseDevTools } from "@pulse-js/react/devtools";
+
+function App() {
+  return (
+    <>
+      <MyRoutes />
+      <PulseDevTools shortcut="Ctrl+D" />
+    </>
+  );
+}
+```
+
 ## API
 
 ### `usePulse<T>(unit: PulseUnit<T>): T | GuardState<T>`

package/dist/devtools.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/devtools.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  PulseDevTools: () => PulseDevTools
+});
+module.exports = __toCommonJS(devtools_exports);
+var import_tools = require("@pulse-js/tools");
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_meta = {};
+var isDev = typeof process !== "undefined" ? process.env.NODE_ENV === "development" : import_meta.env?.DEV || true;
+if (isDev && typeof document !== "undefined") {
+  if (!document.querySelector("pulse-inspector")) {
+    const inspector = document.createElement("pulse-inspector");
+    document.body.appendChild(inspector);
+    console.log("\u{1F680} Pulse DevTools initialized");
+  }
+}
+function PulseDevTools({ shortcut = "Ctrl+D" }) {
+  const PulseInspectorTag = "pulse-inspector";
+  if (!isDev) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PulseInspectorTag, { shortcut });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PulseDevTools
+});

package/dist/devtools.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * A React component wrapper for Pulse DevTools.
+ * Useful if you want to manually control where the inspector is mounted
+ * or pass specific props.
+ */
+declare function PulseDevTools({ shortcut }: {
+    shortcut?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { PulseDevTools };

package/dist/devtools.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * A React component wrapper for Pulse DevTools.
+ * Useful if you want to manually control where the inspector is mounted
+ * or pass specific props.
+ */
+declare function PulseDevTools({ shortcut }: {
+    shortcut?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { PulseDevTools };

package/dist/devtools.js

@@ -0,0 +1,19 @@
+// src/devtools.tsx
+import "@pulse-js/tools";
+import { jsx } from "react/jsx-runtime";
+var isDev = typeof process !== "undefined" ? process.env.NODE_ENV === "development" : import.meta.env?.DEV || true;
+if (isDev && typeof document !== "undefined") {
+  if (!document.querySelector("pulse-inspector")) {
+    const inspector = document.createElement("pulse-inspector");
+    document.body.appendChild(inspector);
+    console.log("\u{1F680} Pulse DevTools initialized");
+  }
+}
+function PulseDevTools({ shortcut = "Ctrl+D" }) {
+  const PulseInspectorTag = "pulse-inspector";
+  if (!isDev) return null;
+  return /* @__PURE__ */ jsx(PulseInspectorTag, { shortcut });
+}
+export {
+  PulseDevTools
+};

package/package.json

@@ -1,22 +1,35 @@
 {
   "name": "@pulse-js/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./devtools": {
+      "types": "./dist/devtools.d.ts",
+      "import": "./dist/devtools.js",
+      "require": "./dist/devtools.cjs"
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "bun x tsup src/index.ts --format esm,cjs --dts --clean --external react",
+    "build": "bun x tsup src/index.ts src/devtools.tsx --format esm,cjs --dts --clean --external react,@pulse-js/core,@pulse-js/tools",
     "lint": "bun x tsc --noEmit"
   },
   "peerDependencies": {
     "react": "^19.2.3"
   },
   "dependencies": {
-    "@pulse-js/core": "^0.1.5"
+    "@pulse-js/core": "^0.1.7",
+    "@pulse-js/tools": "^0.1.4"
   },
   "devDependencies": {
     "@types/bun": "latest",