@mittwald/react-ghostmaker 1.0.3 → 1.1.0

package/README.md

@@ -7,10 +7,6 @@ models that seamlessly integrate with React Suspense and TanStack Query. These
 ghosts automatically handle async operations, caching, and loading states,
 making your code cleaner and more declarative.
 
-**🔑 Say goodbye to query key management!** Ghost Maker automatically generates
-and manages TanStack Query keys based on your method chains, so you can focus on
-your business logic instead of cache coordination.
-
 ## 📖 Table of Contents
 
 - [✨ Features](#-features)
@@ -28,7 +24,9 @@ your business logic instead of cache coordination.
 
 ## ✨ Features
 
-- 🎭 **Ghost Proxies**: Transform any object into a suspense-ready ghost
+🎭 **Ghost Proxies**: Transform any object—models, existing API clients,
+services, or utilities into a suspense-ready ghost
+
 - ⚡ **Lazy Execution**: Ghosts don't execute until `.use()` or `.render()` is
   called
 - 🎯 **Precise Loading States**: Control exactly where Suspense boundaries
@@ -171,18 +169,38 @@ function TraditionalApp() {
 
 ### Creating Your First Ghost
 
+React Ghost Maker can turn any object into a ghost—not just domain models, but
+also existing API clients, service objects, or utility classes. This makes it
+easy to add Suspense and caching to legacy code or third-party libraries.
+
 ```tsx
 import { makeGhost } from "@mittwald/react-ghostmaker";
 import { Suspense } from "react";
 
-// Your domain model
+// Example: Wrapping an API client
+class BlogApiClient {
+  async fetchBlog(id: string) {
+    const response = await fetch(`/api/blogs/${id}`);
+    return response.json();
+  }
+}
+
+const BlogApiGhost = makeGhost(new BlogApiClient());
+
+function BlogView() {
+  // Use ghostified API client
+  const blog = BlogApiGhost.fetchBlog("123").use();
+  return <article>{blog.title}</article>;
+}
+
+// ...existing code...
+
+// You can also use domain models as shown below:
 class Blog {
   constructor(public id: string) {}
-
   static ofId(id: string): Blog {
     return new Blog(id);
   }
-
   async getDetailed() {
     const response = await fetch(`/api/blogs/${this.id}`);
     const data = await response.json();
@@ -196,23 +214,18 @@ class DetailedBlog extends Blog {
     this.title = data.title;
     this.author = data.author;
   }
-
   public readonly title: string;
   public readonly author: string;
 }
 
-// Create a ghost
 const BlogGhost = makeGhost(Blog);
 
-// Use in React components
-function BlogView() {
+function BlogViewModel() {
   const blogGhost = BlogGhost.ofId("123");
-
   const { value: blogTitle, invalidate } = blogGhost
     .getDetailed()
     .title.transform((title) => title.toUpperCase())
     .useGhost();
-
   return (
     <article>
       <h2>{blogTitle}</h2>
@@ -226,6 +239,7 @@ function App() {
   return (
     <Suspense fallback={<div>Loading blog...</div>}>
       <BlogView />
+      <BlogViewModel />
     </Suspense>
   );
 }

package/dist/esm/queries.js

@@ -1,18 +1,21 @@
 import is from "@sindresorhus/is";
 import { modelIdentifiers } from "./modelIdentifier";
 import { hashObject } from "./hash";
-const getTargetQueryKey = (something) => {
-    if (is.primitive(something)) {
-        return String(something);
-    }
+const getObjectName = (something) => {
     const isObject = is.object(something);
     const isClass = is.class(something);
     const isFunction = is.function(something);
-    const objectName = isFunction
+    return isFunction
         ? something.name
         : isClass || isObject
             ? something.constructor.name
             : "unknown";
+};
+const getTargetQueryKey = (something) => {
+    if (is.primitive(something)) {
+        return String(something);
+    }
+    const objectName = getObjectName(something);
     const thisModelIdentifiers = modelIdentifiers
         .map((fn) => fn(something))
         .filter(is.string)
@@ -26,7 +29,7 @@ const getArgKey = (arg) => {
     if (is.primitive(arg)) {
         return String(arg);
     }
-    return hashObject(arg);
+    return `${getObjectName(arg)}(hash:${hashObject(arg)})`;
 };
 export const queries = {
     ghostmaker: () => ["react-ghostmaker"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/react-ghostmaker",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "author": "Mittwald CM Service GmbH & Co. KG <opensource@mittwald.de>",
   "contributors": [
     "Marco Falkenberg <m.falkenberg@mittwald.de>"
@@ -41,19 +41,19 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.39.1",
     "@tanstack/react-query": "^5.90.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-prettier": "^5.5.4",
-    "globals": "^16.4.0",
+    "globals": "^16.5.0",
     "happy-dom": "^20.0.2",
     "license-checker-rseidelsohn": "^4.4.2",
     "prettier": "^3.6.2",