autosuspense 0.1.7 → 0.1.9

package/dist/components/prefabs/defaultPrefab.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-export declare const defaultPrefab: Record<string, React.ReactElement>;
+import { PrefabFactory } from "../../types/PrefabFactory";
+export declare const defaultPrefab: Record<string, PrefabFactory>;
 //# sourceMappingURL=defaultPrefab.d.ts.map

package/dist/components/prefabs/defaultPrefab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultPrefab.d.ts","sourceRoot":"","sources":["../../../src/components/prefabs/defaultPrefab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAI5D,CAAC"}
+{"version":3,"file":"defaultPrefab.d.ts","sourceRoot":"","sources":["../../../src/components/prefabs/defaultPrefab.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAIvD,CAAC"}

package/dist/components/prefabs/defaultPrefab.js

@@ -3,7 +3,7 @@ import { Block } from "./prebuilt/Block";
 import { Card } from "./prebuilt/Card";
 import { List } from "./prebuilt/List";
 export const defaultPrefab = {
-    block: _jsx(Block, {}),
-    card: _jsx(Card, {}),
-    list: _jsx(List, {}),
+    block: ({ children }) => _jsx(Block, { children: children }),
+    card: ({ children }) => _jsx(Card, { children: children }),
+    list: ({ children }) => _jsx(List, { children: children }),
 };

package/dist/components/prefabs/prebuilt/Block.css

@@ -0,0 +1,42 @@
+.as-block {
+  width: 100%;
+  min-height: var(--as-block-min-height, 96px);
+  border-radius: var(--as-block-radius, 12px);
+  box-sizing: border-box;
+
+  background: var(
+    --as-block-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/components/prefabs/prebuilt/Card.css

@@ -0,0 +1,45 @@
+.as-card {
+  width: 100%;
+  min-height: var(--as-card-min-height, 120px);
+  padding: var(--as-card-padding, 16px);
+  box-sizing: border-box;
+
+  border-radius: var(--as-card-radius, 12px);
+
+  background: var(
+    --as-card-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+/* reuse same animations */
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/components/prefabs/prebuilt/List.css

@@ -0,0 +1,48 @@
+.as-list {
+  width: 100%;
+  min-height: var(--as-list-min-height, 160px);
+  padding: var(--as-list-padding, 12px);
+  box-sizing: border-box;
+
+  border-radius: var(--as-list-radius, 8px);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--as-list-gap, 12px);
+
+  background: var(
+    --as-list-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { PrefabFactory } from "../../types/PrefabFactory";
 export declare const AutoSuspense: ({ children, prefab, }: {
     children: React.ReactNode;
-    prefab?: Record<string, React.ReactElement>;
+    prefab?: Record<string, PrefabFactory>;
 }) => JSX.Element;
 //# sourceMappingURL=AutoSuspense.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,YAAY,GAAI,uBAG1B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7C,gBAqBA,CAAC"}
+{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,eAAO,MAAM,YAAY,GAAI,uBAG1B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CACxC,gBAuBA,CAAC"}

package/dist/components/suspense/AutoSuspense.js

@@ -17,5 +17,5 @@ export const AutoSuspense = ({ children, prefab = defaultPrefab, }) => {
         };
     }
     const fallback = _jsx(GeneratedFallback, { registry: registryRef.current });
-    return (_jsx(FallbackContext.Provider, { value: registryRef.current, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
+    return (_jsx(FallbackContext.Provider, { value: registryRef.current, children: _jsx(React.Suspense, { fallback: fallback, children: _jsx("div", { children: children }) }) }));
 };

package/dist/types/PrefabFactory.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type PrefabFactory = (props: {
+    children?: React.ReactNode;
+}) => React.ReactElement;
+//# sourceMappingURL=PrefabFactory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrefabFactory.d.ts","sourceRoot":"","sources":["../../src/types/PrefabFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,KAAK,KAAK,CAAC,YAAY,CAAC"}

package/dist/types/PrefabFactory.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autosuspense",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Automatic suspense wiring block for React.",
   "license": "ISC",
   "type": "commonjs",
@@ -24,7 +24,7 @@
     "typescript"
   ],
   "scripts": {
-    "build": "tsc -b",
+    "build": "tsc && copyfiles -u 1 \"src/**/*.css\" dist",
     "test:build": "node dist/index.js"
   },
   "peerDependencies": {
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@types/react": "^16.14.68",
     "@types/react-dom": "^16.9.25",
+    "copyfiles": "^2.4.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "typescript": "^5.3.0"

package/src/components/prefabs/defaultPrefab.tsx

@@ -1,10 +1,10 @@
-import * as React from "react";
 import { Block } from "./prebuilt/Block";
 import { Card } from "./prebuilt/Card";
 import { List } from "./prebuilt/List";
+import { PrefabFactory } from "../../types/PrefabFactory";
 
-export const defaultPrefab: Record<string, React.ReactElement> = {
-  block: <Block />,
-  card: <Card />,
-  list: <List />,
+export const defaultPrefab: Record<string, PrefabFactory> = {
+  block: ({ children }) => <Block>{children}</Block>,
+  card: ({ children }) => <Card>{children}</Card>,
+  list: ({ children }) => <List>{children}</List>,
 };

package/src/components/suspense/AutoSuspense.tsx

@@ -6,13 +6,14 @@ import {
   FallbackRegistry,
 } from "../../types/FallbackRegistry";
 import { defaultPrefab } from "../prefabs/defaultPrefab";
+import { PrefabFactory } from "../../types/PrefabFactory";
 
 export const AutoSuspense = ({
   children,
   prefab = defaultPrefab,
 }: {
   children: React.ReactNode;
-  prefab?: Record<string, React.ReactElement>;
+  prefab?: Record<string, PrefabFactory>;
 }) => {
   const registryRef = React.useRef<FallbackRegistry>({
     nodes: new Map(),
@@ -31,7 +32,9 @@ export const AutoSuspense = ({
 
   return (
     <FallbackContext.Provider value={registryRef.current}>
-      <React.Suspense fallback={fallback}>{children}</React.Suspense>
+      <React.Suspense fallback={fallback}>
+        <div>{children}</div>
+      </React.Suspense>
     </FallbackContext.Provider>
   );
 };

package/src/types/PrefabFactory.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export type PrefabFactory = (props: {
+  children?: React.ReactNode;
+}) => React.ReactElement;