autosuspense 0.1.1

package/README.md

@@ -0,0 +1,6 @@
+# AutoSupense
+AutoSuspense is a simple react library allowing user's to automatically wire suspense components based on there component structure automatically without building additional fallback UI.
+
+## How to use?:
+1. Install this library
+```npm i autosuspense```

package/dist/components/AutoSuspense.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare const AutoSuspense: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+//# sourceMappingURL=AutoSuspense.d.ts.map

package/dist/components/AutoSuspense.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../src/components/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,YAAY,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAmBvE,CAAC"}

package/dist/components/AutoSuspense.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { FallbackContext, } from "../types/FallbackRegistry";
+import { GeneratedFallback } from "./GeneratedFallback";
+export const AutoSuspense = ({ children }) => {
+    const registryRef = React.useRef({
+        nodes: new Map(),
+        currentParent: null,
+    });
+    if (registryRef.current === null) {
+        registryRef.current = {
+            nodes: new Map(),
+            currentParent: null,
+        };
+    }
+    const fallback = React.createElement(GeneratedFallback, { registry: registryRef.current });
+    return (React.createElement(FallbackContext.Provider, { value: registryRef.current },
+        React.createElement(React.Suspense, { fallback: fallback }, children)));
+};

package/dist/components/GeneratedFallback.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { FallbackRegistry } from "../types/FallbackRegistry";
+export declare function GeneratedFallback({ registry, }: {
+    registry: FallbackRegistry;
+}): React.JSX.Element;
+//# sourceMappingURL=GeneratedFallback.d.ts.map

package/dist/components/GeneratedFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneratedFallback.d.ts","sourceRoot":"","sources":["../../src/components/GeneratedFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAIlE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;CAC5B,qBASA"}

package/dist/components/GeneratedFallback.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { buildTree } from "../utils/buildTree";
+import { renderNode } from "../utils/renderNode";
+export function GeneratedFallback({ registry, }) {
+    const tree = buildTree(registry.nodes);
+    const roots = tree.get(null) ?? [];
+    return (React.createElement(React.Fragment, null, roots.map((node) => renderNode(node, tree))));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import { AutoSuspense } from "./AutoSuspense";
+import { GeneratedFallback } from "./GeneratedFallback";
+export { AutoSuspense, GeneratedFallback };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,3 @@
+import { AutoSuspense } from "./AutoSuspense";
+import { GeneratedFallback } from "./GeneratedFallback";
+export { AutoSuspense, GeneratedFallback };

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { useSuspenseFallback } from "./useSuspenseFallback";
+export { useSuspenseFallback };
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+import { useSuspenseFallback } from "./useSuspenseFallback";
+export { useSuspenseFallback };

package/dist/hooks/useCompatId.d.ts

@@ -0,0 +1,2 @@
+export declare function useCompatId(): string;
+//# sourceMappingURL=useCompatId.d.ts.map

package/dist/hooks/useCompatId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCompatId.d.ts","sourceRoot":"","sources":["../../src/hooks/useCompatId.ts"],"names":[],"mappings":"AASA,wBAAgB,WAAW,IAAI,MAAM,CAcpC"}

package/dist/hooks/useCompatId.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+let globalId = 0;
+function generateFallbackId() {
+    globalId += 1;
+    return `as-${globalId}`;
+}
+export function useCompatId() {
+    // React 18 path
+    if (typeof React.useId === "function") {
+        return React.useId();
+    }
+    // React 16/17 fallback
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        idRef.current = generateFallbackId();
+    }
+    return idRef.current;
+}

package/dist/hooks/useSuspenseFallback.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from "react";
+export declare function useSuspenseFallback(element: ReactElement): void;
+//# sourceMappingURL=useSuspenseFallback.d.ts.map

package/dist/hooks/useSuspenseFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseFallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAgB/D"}

package/dist/hooks/useSuspenseFallback.js

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import { FallbackContext } from "../types/FallbackRegistry";
+import { useCompatId } from "./useCompatId";
+export function useSuspenseFallback(element) {
+    const registry = useContext(FallbackContext);
+    const id = useCompatId();
+    if (!registry)
+        return;
+    if (registry.nodes.has(id))
+        return;
+    const parentId = registry.currentParent;
+    registry.nodes.set(id, {
+        id,
+        element,
+        parent: parentId,
+    });
+    registry.currentParent = id;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { AutoSuspense } from "./components";
+export { useSuspenseFallback } from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { AutoSuspense } from "./components";
+export { useSuspenseFallback } from "./hooks";

package/dist/types/FallbackRegistry.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement } from "react";
+export type Node = {
+    id: string;
+    element: ReactElement;
+    parent: string | null;
+};
+export type FallbackRegistry = {
+    nodes: Map<string, Node>;
+    currentParent: string | null;
+};
+export declare const FallbackContext: import("react").Context<FallbackRegistry | null>;
+//# sourceMappingURL=FallbackRegistry.d.ts.map

package/dist/types/FallbackRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallbackRegistry.d.ts","sourceRoot":"","sources":["../../src/types/FallbackRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,kDAA+C,CAAC"}

package/dist/types/FallbackRegistry.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const FallbackContext = createContext(null);

package/dist/utils/buildTree.d.ts

@@ -0,0 +1,3 @@
+import type { Node } from "../types/FallbackRegistry";
+export declare function buildTree(nodes: Map<string, Node>): Map<string | null, Node[]>;
+//# sourceMappingURL=buildTree.d.ts.map

package/dist/utils/buildTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildTree.d.ts","sourceRoot":"","sources":["../../src/utils/buildTree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEtD,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,8BASjD"}

package/dist/utils/buildTree.js

@@ -0,0 +1,9 @@
+export function buildTree(nodes) {
+    const childMap = new Map();
+    for (const node of nodes.values()) {
+        const list = childMap.get(node.parent) ?? [];
+        list.push(node);
+        childMap.set(node.parent, list);
+    }
+    return childMap;
+}

package/dist/utils/renderNode.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Node } from "../types/FallbackRegistry";
+export declare function renderNode(node: Node, childMap: Map<string | null, Node[]>): React.ReactElement;
+//# sourceMappingURL=renderNode.d.ts.map

package/dist/utils/renderNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEtD,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GACnC,KAAK,CAAC,YAAY,CAQpB"}

package/dist/utils/renderNode.js

@@ -0,0 +1,5 @@
+import React from "react";
+export function renderNode(node, childMap) {
+    const children = childMap.get(node.id) ?? [];
+    return React.cloneElement(node.element, undefined, children.map((child) => renderNode(child, childMap)));
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "autosuspense",
+  "version": "0.1.1",
+  "description": "Automatic suspense wiring block for React.",
+  "license": "ISC",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "Paper-Bag-dev",
+    "email": "vikalpsh1234@gmail.com",
+    "url": "https://github.com/Paper-Bag-dev"
+  },
+  "keywords": [
+    "react",
+    "react-suspense",
+    "suspense",
+    "react-hooks",
+    "fallback",
+    "react-library",
+    "ui",
+    "async",
+    "concurrent",
+    "typescript"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "test:build": "node dist/index.js"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "devDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "@types/react": "^16.14.68",
+    "@types/react-dom": "^16.9.25",
+    "typescript": "^5.3.0"
+  }
+}

package/src/components/AutoSuspense.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import {
+  FallbackContext,
+  type FallbackRegistry,
+} from "../types/FallbackRegistry";
+import { GeneratedFallback } from "./GeneratedFallback";
+
+export const AutoSuspense = ({ children }: { children: React.ReactNode }) => {
+  const registryRef = React.useRef<FallbackRegistry>({
+    nodes: new Map(),
+    currentParent: null,
+  });
+
+  if (registryRef.current === null) {
+    registryRef.current = {
+      nodes: new Map(),
+      currentParent: null,
+    };
+  }
+  const fallback = <GeneratedFallback registry={registryRef.current} />;
+
+  return (
+    <FallbackContext.Provider value={registryRef.current}>
+      <React.Suspense fallback={fallback}>{children}</React.Suspense>
+    </FallbackContext.Provider>
+  );
+};

package/src/components/GeneratedFallback.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { FallbackRegistry } from "../types/FallbackRegistry";
+import { buildTree } from "../utils/buildTree";
+import { renderNode } from "../utils/renderNode";
+
+export function GeneratedFallback({
+  registry,
+}: {
+  registry: FallbackRegistry;
+}) {
+  const tree = buildTree(registry.nodes);
+  const roots = tree.get(null) ?? [];
+
+  return (
+    <React.Fragment>
+      {roots.map((node) => renderNode(node, tree))}
+    </React.Fragment>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+import { AutoSuspense } from "./AutoSuspense";
+import { GeneratedFallback } from "./GeneratedFallback";
+export { AutoSuspense, GeneratedFallback };

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+import { useSuspenseFallback } from "./useSuspenseFallback";
+export { useSuspenseFallback };

package/src/hooks/useCompatId.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+let globalId = 0;
+
+function generateFallbackId() {
+  globalId += 1;
+  return `as-${globalId}`;
+}
+
+export function useCompatId(): string {
+  // React 18 path
+  if (typeof (React as any).useId === "function") {
+    return (React as any).useId();
+  }
+
+  // React 16/17 fallback
+  const idRef = React.useRef<string | null>(null);
+
+  if (idRef.current === null) {
+    idRef.current = generateFallbackId();
+  }
+
+  return idRef.current;
+}

package/src/hooks/useSuspenseFallback.ts

@@ -0,0 +1,21 @@
+import { useContext, type ReactElement } from "react";
+import { FallbackContext } from "../types/FallbackRegistry";
+import { useCompatId } from "./useCompatId";
+
+export function useSuspenseFallback(element: ReactElement): void {
+  const registry = useContext(FallbackContext);
+  const id = useCompatId();
+
+  if (!registry) return;
+  if (registry.nodes.has(id)) return;
+
+  const parentId = registry.currentParent;
+
+  registry.nodes.set(id, {
+    id,
+    element,
+    parent: parentId,
+  });
+
+  registry.currentParent = id;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { AutoSuspense } from "./components";
+export { useSuspenseFallback } from "./hooks";

package/src/types/FallbackRegistry.ts

@@ -0,0 +1,14 @@
+import { createContext, type ReactElement } from "react";
+
+export type Node = {
+  id: string;
+  element: ReactElement;
+  parent: string | null;
+};
+
+export type FallbackRegistry = {
+  nodes: Map<string, Node>;
+  currentParent: string | null;
+};
+
+export const FallbackContext = createContext<FallbackRegistry | null>(null);

package/src/utils/buildTree.ts

@@ -0,0 +1,12 @@
+import type { Node } from "../types/FallbackRegistry";
+
+export function buildTree(nodes: Map<string, Node>) {
+  const childMap = new Map<string | null, Node[]>();
+
+  for (const node of nodes.values()) {
+    const list = childMap.get(node.parent) ?? [];
+    list.push(node);
+    childMap.set(node.parent, list);
+  }
+  return childMap;
+}

package/src/utils/renderNode.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Node } from "../types/FallbackRegistry";
+
+export function renderNode(
+  node: Node,
+  childMap: Map<string | null, Node[]>,
+): React.ReactElement {
+  const children = childMap.get(node.id) ?? [];
+
+  return React.cloneElement(
+    node.element,
+    undefined,
+    children.map((child) => renderNode(child, childMap)),
+  );
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "jsx": "react",
+    "lib": ["DOM", "ES2019"],
+    "types": ["react"],
+
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": false,
+
+    "outDir": "./dist",
+    "rootDir": "./src",
+
+    "strict": true,
+
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/index.ts","./src/components/autosuspense.tsx","./src/components/generatedfallback.tsx","./src/components/index.ts","./src/hooks/index.ts","./src/hooks/usecompatid.ts","./src/hooks/usesuspensefallback.ts","./src/types/fallbackregistry.ts","./src/utils/buildtree.ts","./src/utils/rendernode.ts"],"version":"5.9.3"}