react-native-skelo 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +147 -20
- package/lib/commonjs/Skelo.js +104 -0
- package/lib/commonjs/Skelo.js.map +1 -0
- package/lib/commonjs/animations/AnimationWrapper.js +76 -0
- package/lib/commonjs/animations/AnimationWrapper.js.map +1 -0
- package/lib/commonjs/animations/PulseAnimation.js +76 -0
- package/lib/commonjs/animations/PulseAnimation.js.map +1 -0
- package/lib/commonjs/animations/ShimmerAnimation.js +103 -0
- package/lib/commonjs/animations/ShimmerAnimation.js.map +1 -0
- package/lib/commonjs/animations/index.js +27 -0
- package/lib/commonjs/animations/index.js.map +1 -0
- package/lib/commonjs/components/MeasuredBlock.js +64 -0
- package/lib/commonjs/components/MeasuredBlock.js.map +1 -0
- package/lib/commonjs/components/Skeleton.js +144 -0
- package/lib/commonjs/components/Skeleton.js.map +1 -0
- package/lib/commonjs/components/SkeletonIgnore.js +30 -0
- package/lib/commonjs/components/SkeletonIgnore.js.map +1 -0
- package/lib/commonjs/components/SkeletonRenderer.js +270 -0
- package/lib/commonjs/components/SkeletonRenderer.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonBox.js +47 -0
- package/lib/commonjs/components/primitives/SkeletonBox.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonCircle.js +44 -0
- package/lib/commonjs/components/primitives/SkeletonCircle.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonImage.js +46 -0
- package/lib/commonjs/components/primitives/SkeletonImage.js.map +1 -0
- package/lib/commonjs/components/primitives/SkeletonText.js +60 -0
- package/lib/commonjs/components/primitives/SkeletonText.js.map +1 -0
- package/lib/commonjs/components/primitives/index.js +34 -0
- package/lib/commonjs/components/primitives/index.js.map +1 -0
- package/lib/commonjs/components/withSkeleton.js +45 -0
- package/lib/commonjs/components/withSkeleton.js.map +1 -0
- package/lib/commonjs/constants/defaults.js +43 -0
- package/lib/commonjs/constants/defaults.js.map +1 -0
- package/lib/commonjs/core/deepRegistry.js +18 -0
- package/lib/commonjs/core/deepRegistry.js.map +1 -0
- package/lib/commonjs/core/generator/StyleSkeleton.js +101 -0
- package/lib/commonjs/core/generator/StyleSkeleton.js.map +1 -0
- package/lib/commonjs/core/parser/Parser.js +84 -0
- package/lib/commonjs/core/parser/Parser.js.map +1 -0
- package/lib/commonjs/core/parser/expandOffline.js +83 -0
- package/lib/commonjs/core/parser/expandOffline.js.map +1 -0
- package/lib/commonjs/core/parser/hostTreeReconciler.js +228 -0
- package/lib/commonjs/core/parser/hostTreeReconciler.js.map +1 -0
- package/lib/commonjs/core/parser/index.js +13 -0
- package/lib/commonjs/core/parser/index.js.map +1 -0
- package/lib/commonjs/core/registry/SkeletonRegistry.js +113 -0
- package/lib/commonjs/core/registry/SkeletonRegistry.js.map +1 -0
- package/lib/commonjs/core/registry/index.js +19 -0
- package/lib/commonjs/core/registry/index.js.map +1 -0
- package/lib/commonjs/core/resolver/StyleResolver.js +83 -0
- package/lib/commonjs/core/resolver/StyleResolver.js.map +1 -0
- package/lib/commonjs/core/resolver/index.js +13 -0
- package/lib/commonjs/core/resolver/index.js.map +1 -0
- package/lib/commonjs/deep.js +18 -0
- package/lib/commonjs/deep.js.map +1 -0
- package/lib/commonjs/index.js +66 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/plugins/ImagePlugin.js +60 -0
- package/lib/commonjs/plugins/ImagePlugin.js.map +1 -0
- package/lib/commonjs/plugins/TextPlugin.js +70 -0
- package/lib/commonjs/plugins/TextPlugin.js.map +1 -0
- package/lib/commonjs/plugins/ViewPlugin.js +71 -0
- package/lib/commonjs/plugins/ViewPlugin.js.map +1 -0
- package/lib/commonjs/plugins/index.js +27 -0
- package/lib/commonjs/plugins/index.js.map +1 -0
- package/lib/commonjs/types/index.js +2 -0
- package/lib/commonjs/types/index.js.map +1 -0
- package/lib/commonjs/types/plugin.js +6 -0
- package/lib/commonjs/types/plugin.js.map +1 -0
- package/lib/commonjs/types/skeleton.js +6 -0
- package/lib/commonjs/types/skeleton.js.map +1 -0
- package/lib/commonjs/utils/componentUtils.js +138 -0
- package/lib/commonjs/utils/componentUtils.js.map +1 -0
- package/lib/commonjs/utils/index.js +62 -0
- package/lib/commonjs/utils/index.js.map +1 -0
- package/lib/commonjs/utils/styleUtils.js +76 -0
- package/lib/commonjs/utils/styleUtils.js.map +1 -0
- package/lib/module/Skelo.js +98 -0
- package/lib/module/Skelo.js.map +1 -0
- package/lib/module/animations/AnimationWrapper.js +69 -0
- package/lib/module/animations/AnimationWrapper.js.map +1 -0
- package/lib/module/animations/PulseAnimation.js +69 -0
- package/lib/module/animations/PulseAnimation.js.map +1 -0
- package/lib/module/animations/ShimmerAnimation.js +96 -0
- package/lib/module/animations/ShimmerAnimation.js.map +1 -0
- package/lib/module/animations/index.js +4 -0
- package/lib/module/animations/index.js.map +1 -0
- package/lib/module/components/MeasuredBlock.js +57 -0
- package/lib/module/components/MeasuredBlock.js.map +1 -0
- package/lib/module/components/Skeleton.js +138 -0
- package/lib/module/components/Skeleton.js.map +1 -0
- package/lib/module/components/SkeletonIgnore.js +23 -0
- package/lib/module/components/SkeletonIgnore.js.map +1 -0
- package/lib/module/components/SkeletonRenderer.js +264 -0
- package/lib/module/components/SkeletonRenderer.js.map +1 -0
- package/lib/module/components/primitives/SkeletonBox.js +40 -0
- package/lib/module/components/primitives/SkeletonBox.js.map +1 -0
- package/lib/module/components/primitives/SkeletonCircle.js +37 -0
- package/lib/module/components/primitives/SkeletonCircle.js.map +1 -0
- package/lib/module/components/primitives/SkeletonImage.js +39 -0
- package/lib/module/components/primitives/SkeletonImage.js.map +1 -0
- package/lib/module/components/primitives/SkeletonText.js +53 -0
- package/lib/module/components/primitives/SkeletonText.js.map +1 -0
- package/lib/module/components/primitives/index.js +5 -0
- package/lib/module/components/primitives/index.js.map +1 -0
- package/lib/module/components/withSkeleton.js +38 -0
- package/lib/module/components/withSkeleton.js.map +1 -0
- package/lib/module/constants/defaults.js +37 -0
- package/lib/module/constants/defaults.js.map +1 -0
- package/lib/module/core/deepRegistry.js +11 -0
- package/lib/module/core/deepRegistry.js.map +1 -0
- package/lib/module/core/generator/StyleSkeleton.js +95 -0
- package/lib/module/core/generator/StyleSkeleton.js.map +1 -0
- package/lib/module/core/parser/Parser.js +77 -0
- package/lib/module/core/parser/Parser.js.map +1 -0
- package/lib/module/core/parser/expandOffline.js +77 -0
- package/lib/module/core/parser/expandOffline.js.map +1 -0
- package/lib/module/core/parser/hostTreeReconciler.js +222 -0
- package/lib/module/core/parser/hostTreeReconciler.js.map +1 -0
- package/lib/module/core/parser/index.js +2 -0
- package/lib/module/core/parser/index.js.map +1 -0
- package/lib/module/core/registry/SkeletonRegistry.js +106 -0
- package/lib/module/core/registry/SkeletonRegistry.js.map +1 -0
- package/lib/module/core/registry/index.js +2 -0
- package/lib/module/core/registry/index.js.map +1 -0
- package/lib/module/core/resolver/StyleResolver.js +77 -0
- package/lib/module/core/resolver/StyleResolver.js.map +1 -0
- package/lib/module/core/resolver/index.js +2 -0
- package/lib/module/core/resolver/index.js.map +1 -0
- package/lib/module/deep.js +11 -0
- package/lib/module/deep.js.map +1 -0
- package/lib/module/index.js +21 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/plugins/ImagePlugin.js +53 -0
- package/lib/module/plugins/ImagePlugin.js.map +1 -0
- package/lib/module/plugins/TextPlugin.js +63 -0
- package/lib/module/plugins/TextPlugin.js.map +1 -0
- package/lib/module/plugins/ViewPlugin.js +64 -0
- package/lib/module/plugins/ViewPlugin.js.map +1 -0
- package/lib/module/plugins/index.js +4 -0
- package/lib/module/plugins/index.js.map +1 -0
- package/lib/module/types/index.js +2 -0
- package/lib/module/types/index.js.map +1 -0
- package/lib/module/types/plugin.js +2 -0
- package/lib/module/types/plugin.js.map +1 -0
- package/lib/module/types/skeleton.js +2 -0
- package/lib/module/types/skeleton.js.map +1 -0
- package/lib/module/utils/componentUtils.js +123 -0
- package/lib/module/utils/componentUtils.js.map +1 -0
- package/lib/module/utils/index.js +3 -0
- package/lib/module/utils/index.js.map +1 -0
- package/lib/module/utils/styleUtils.js +66 -0
- package/lib/module/utils/styleUtils.js.map +1 -0
- package/lib/typescript/Skelo.d.ts +76 -0
- package/lib/typescript/Skelo.d.ts.map +1 -0
- package/lib/typescript/animations/AnimationWrapper.d.ts +66 -0
- package/lib/typescript/animations/AnimationWrapper.d.ts.map +1 -0
- package/lib/typescript/animations/PulseAnimation.d.ts +59 -0
- package/lib/typescript/animations/PulseAnimation.d.ts.map +1 -0
- package/lib/typescript/animations/ShimmerAnimation.d.ts +59 -0
- package/lib/typescript/animations/ShimmerAnimation.d.ts.map +1 -0
- package/lib/typescript/animations/index.d.ts +5 -0
- package/lib/typescript/animations/index.d.ts.map +1 -0
- package/lib/typescript/components/MeasuredBlock.d.ts +32 -0
- package/lib/typescript/components/MeasuredBlock.d.ts.map +1 -0
- package/lib/typescript/components/Skeleton.d.ts +37 -0
- package/lib/typescript/components/Skeleton.d.ts.map +1 -0
- package/lib/typescript/components/SkeletonIgnore.d.ts +26 -0
- package/lib/typescript/components/SkeletonIgnore.d.ts.map +1 -0
- package/lib/typescript/components/SkeletonRenderer.d.ts +39 -0
- package/lib/typescript/components/SkeletonRenderer.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonBox.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonBox.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonCircle.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonCircle.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonImage.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonImage.d.ts.map +1 -0
- package/lib/typescript/components/primitives/SkeletonText.d.ts +21 -0
- package/lib/typescript/components/primitives/SkeletonText.d.ts.map +1 -0
- package/lib/typescript/components/primitives/index.d.ts +5 -0
- package/lib/typescript/components/primitives/index.d.ts.map +1 -0
- package/lib/typescript/components/withSkeleton.d.ts +37 -0
- package/lib/typescript/components/withSkeleton.d.ts.map +1 -0
- package/lib/typescript/constants/defaults.d.ts +29 -0
- package/lib/typescript/constants/defaults.d.ts.map +1 -0
- package/lib/typescript/core/deepRegistry.d.ts +7 -0
- package/lib/typescript/core/deepRegistry.d.ts.map +1 -0
- package/lib/typescript/core/generator/StyleSkeleton.d.ts +36 -0
- package/lib/typescript/core/generator/StyleSkeleton.d.ts.map +1 -0
- package/lib/typescript/core/parser/Parser.d.ts +30 -0
- package/lib/typescript/core/parser/Parser.d.ts.map +1 -0
- package/lib/typescript/core/parser/expandOffline.d.ts +10 -0
- package/lib/typescript/core/parser/expandOffline.d.ts.map +1 -0
- package/lib/typescript/core/parser/hostTreeReconciler.d.ts +28 -0
- package/lib/typescript/core/parser/hostTreeReconciler.d.ts.map +1 -0
- package/lib/typescript/core/parser/index.d.ts +2 -0
- package/lib/typescript/core/parser/index.d.ts.map +1 -0
- package/lib/typescript/core/registry/SkeletonRegistry.d.ts +57 -0
- package/lib/typescript/core/registry/SkeletonRegistry.d.ts.map +1 -0
- package/lib/typescript/core/registry/index.d.ts +2 -0
- package/lib/typescript/core/registry/index.d.ts.map +1 -0
- package/lib/typescript/core/resolver/StyleResolver.d.ts +54 -0
- package/lib/typescript/core/resolver/StyleResolver.d.ts.map +1 -0
- package/lib/typescript/core/resolver/index.d.ts +2 -0
- package/lib/typescript/core/resolver/index.d.ts.map +1 -0
- package/lib/typescript/deep.d.ts +2 -0
- package/lib/typescript/deep.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +17 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/plugins/ImagePlugin.d.ts +11 -0
- package/lib/typescript/plugins/ImagePlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/TextPlugin.d.ts +12 -0
- package/lib/typescript/plugins/TextPlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/ViewPlugin.d.ts +11 -0
- package/lib/typescript/plugins/ViewPlugin.d.ts.map +1 -0
- package/lib/typescript/plugins/index.d.ts +4 -0
- package/lib/typescript/plugins/index.d.ts.map +1 -0
- package/lib/typescript/types/index.d.ts +3 -0
- package/lib/typescript/types/index.d.ts.map +1 -0
- package/lib/typescript/types/plugin.d.ts +144 -0
- package/lib/typescript/types/plugin.d.ts.map +1 -0
- package/lib/typescript/types/skeleton.d.ts +176 -0
- package/lib/typescript/types/skeleton.d.ts.map +1 -0
- package/lib/typescript/utils/componentUtils.d.ts +40 -0
- package/lib/typescript/utils/componentUtils.d.ts.map +1 -0
- package/lib/typescript/utils/index.d.ts +3 -0
- package/lib/typescript/utils/index.d.ts.map +1 -0
- package/lib/typescript/utils/styleUtils.d.ts +41 -0
- package/lib/typescript/utils/styleUtils.d.ts.map +1 -0
- package/package.json +171 -11
- package/src/Skelo.ts +103 -0
- package/src/animations/AnimationWrapper.tsx +139 -0
- package/src/animations/PulseAnimation.tsx +138 -0
- package/src/animations/ShimmerAnimation.tsx +169 -0
- package/src/animations/index.ts +4 -0
- package/src/components/MeasuredBlock.tsx +85 -0
- package/src/components/Skeleton.tsx +149 -0
- package/src/components/SkeletonIgnore.tsx +27 -0
- package/src/components/SkeletonRenderer.tsx +341 -0
- package/src/components/primitives/SkeletonBox.tsx +53 -0
- package/src/components/primitives/SkeletonCircle.tsx +48 -0
- package/src/components/primitives/SkeletonImage.tsx +50 -0
- package/src/components/primitives/SkeletonText.tsx +69 -0
- package/src/components/primitives/index.ts +4 -0
- package/src/components/withSkeleton.tsx +62 -0
- package/src/constants/defaults.ts +38 -0
- package/src/core/deepRegistry.ts +16 -0
- package/src/core/generator/StyleSkeleton.tsx +138 -0
- package/src/core/parser/Parser.ts +86 -0
- package/src/core/parser/expandOffline.tsx +83 -0
- package/src/core/parser/hostTreeReconciler.tsx +271 -0
- package/src/core/parser/index.ts +1 -0
- package/src/core/registry/SkeletonRegistry.ts +111 -0
- package/src/core/registry/index.ts +1 -0
- package/src/core/resolver/StyleResolver.ts +80 -0
- package/src/core/resolver/index.ts +1 -0
- package/src/deep.ts +12 -0
- package/src/index.ts +30 -0
- package/src/plugins/ImagePlugin.tsx +65 -0
- package/src/plugins/TextPlugin.tsx +71 -0
- package/src/plugins/ViewPlugin.tsx +67 -0
- package/src/plugins/index.ts +3 -0
- package/src/types/index.ts +14 -0
- package/src/types/plugin.ts +164 -0
- package/src/types/skeleton.ts +197 -0
- package/src/utils/componentUtils.ts +166 -0
- package/src/utils/index.ts +9 -0
- package/src/utils/styleUtils.ts +72 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ComponentNode } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Expand an element to a `ComponentNode[]` via offline rendering.
|
|
5
|
+
*
|
|
6
|
+
* @returns the host-tree nodes, or `null` if offline rendering is unavailable
|
|
7
|
+
* (react-reconciler not installed) or the render failed.
|
|
8
|
+
*/
|
|
9
|
+
export declare function expandToComponentNodes(element: ReactElement): ComponentNode[] | null;
|
|
10
|
+
//# sourceMappingURL=expandOffline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expandOffline.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/expandOffline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,aAAa,CAAC;AAqEhE;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,EAAE,GAAG,IAAI,CAMpF"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A JS-only React renderer built on `react-reconciler`.
|
|
4
|
+
*
|
|
5
|
+
* It renders any element (including opaque function/class components) into a
|
|
6
|
+
* plain host-node tree — no native views, no `act()`, no deprecated APIs. Used
|
|
7
|
+
* to introspect a component's real View/Text/Image structure + styles so Skelo
|
|
8
|
+
* can generate a matching skeleton.
|
|
9
|
+
*
|
|
10
|
+
* Rendered as a synchronous LegacyRoot, so `updateContainer` flushes inline and
|
|
11
|
+
* we can read the tree immediately.
|
|
12
|
+
*/
|
|
13
|
+
export interface HostTreeNode {
|
|
14
|
+
type: string;
|
|
15
|
+
props: {
|
|
16
|
+
style?: unknown;
|
|
17
|
+
children?: unknown;
|
|
18
|
+
[key: string]: unknown;
|
|
19
|
+
};
|
|
20
|
+
children: HostTreeNode[];
|
|
21
|
+
text?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Render an element to a plain host-node tree, or return null if the reconciler
|
|
25
|
+
* is unavailable or rendering failed.
|
|
26
|
+
*/
|
|
27
|
+
export declare function renderToHostTree(element: ReactElement): HostTreeNode[] | null;
|
|
28
|
+
//# sourceMappingURL=hostTreeReconciler.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hostTreeReconciler.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/hostTreeReconciler.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACvE,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAkJD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,EAAE,GAAG,IAAI,CAoG7E"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/parser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import type { SkeletonPlugin } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Registry for skeleton plugins
|
|
5
|
+
*
|
|
6
|
+
* Manages mapping between React components and their skeleton generation strategies
|
|
7
|
+
*/
|
|
8
|
+
export declare class SkeletonRegistry {
|
|
9
|
+
private plugins;
|
|
10
|
+
private nameIndex;
|
|
11
|
+
/**
|
|
12
|
+
* Register a plugin for a component
|
|
13
|
+
*
|
|
14
|
+
* @param plugin - Plugin configuration
|
|
15
|
+
* @throws Error if plugin is invalid
|
|
16
|
+
*/
|
|
17
|
+
register<P>(plugin: SkeletonPlugin<P>): void;
|
|
18
|
+
/**
|
|
19
|
+
* Unregister a plugin
|
|
20
|
+
*
|
|
21
|
+
* @param component - Component to unregister
|
|
22
|
+
*/
|
|
23
|
+
unregister(component: ComponentType): void;
|
|
24
|
+
/**
|
|
25
|
+
* Get plugin for a component
|
|
26
|
+
*
|
|
27
|
+
* @param component - Component type
|
|
28
|
+
* @returns Plugin or undefined
|
|
29
|
+
*/
|
|
30
|
+
getPlugin(component: ComponentType): SkeletonPlugin | undefined;
|
|
31
|
+
/**
|
|
32
|
+
* Get plugin by name
|
|
33
|
+
*
|
|
34
|
+
* @param name - Plugin name
|
|
35
|
+
* @returns Plugin or undefined
|
|
36
|
+
*/
|
|
37
|
+
getPluginByName(name: string): SkeletonPlugin | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* Check if component has a plugin
|
|
40
|
+
*
|
|
41
|
+
* @param component - Component type
|
|
42
|
+
* @returns True if plugin exists
|
|
43
|
+
*/
|
|
44
|
+
hasPlugin(component: ComponentType): boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Get all registered plugins
|
|
47
|
+
*
|
|
48
|
+
* @returns Array of all plugins
|
|
49
|
+
*/
|
|
50
|
+
getAllPlugins(): SkeletonPlugin[];
|
|
51
|
+
/**
|
|
52
|
+
* Clear all plugins
|
|
53
|
+
*/
|
|
54
|
+
clear(): void;
|
|
55
|
+
}
|
|
56
|
+
export declare const registry: SkeletonRegistry;
|
|
57
|
+
//# sourceMappingURL=SkeletonRegistry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonRegistry.d.ts","sourceRoot":"","sources":["../../../../src/core/registry/SkeletonRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;GAIG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAAsD;IACrE,OAAO,CAAC,SAAS,CAA0C;IAE3D;;;;;OAKG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI;IA8B5C;;;;OAIG;IACH,UAAU,CAAC,SAAS,EAAE,aAAa,GAAG,IAAI;IAQ1C;;;;;OAKG;IACH,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,GAAG,SAAS;IAI/D;;;;;OAKG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS;IAIzD;;;;;OAKG;IACH,SAAS,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO;IAI5C;;;;OAIG;IACH,aAAa,IAAI,cAAc,EAAE;IAIjC;;OAEG;IACH,KAAK,IAAI,IAAI;CAId;AAGD,eAAO,MAAM,QAAQ,kBAAyB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/registry/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { DimensionValue } from 'react-native';
|
|
3
|
+
import type { ResolvedStyle } from '../../types';
|
|
4
|
+
/**
|
|
5
|
+
* StyleResolver class for extracting and resolving component styles
|
|
6
|
+
*/
|
|
7
|
+
export declare class StyleResolver {
|
|
8
|
+
/**
|
|
9
|
+
* Resolve styles from a React element
|
|
10
|
+
*
|
|
11
|
+
* @param element - React element
|
|
12
|
+
* @returns Resolved style object
|
|
13
|
+
*/
|
|
14
|
+
static resolve(element: ReactElement): ResolvedStyle;
|
|
15
|
+
/**
|
|
16
|
+
* Get dimensions from element props and style
|
|
17
|
+
*
|
|
18
|
+
* @param element - React element
|
|
19
|
+
* @returns Object with width and height
|
|
20
|
+
*/
|
|
21
|
+
static getDimensions(element: ReactElement): {
|
|
22
|
+
width?: DimensionValue;
|
|
23
|
+
height?: DimensionValue;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Check if element has explicit dimensions
|
|
27
|
+
*
|
|
28
|
+
* @param element - React element
|
|
29
|
+
* @returns True if both width and height are defined
|
|
30
|
+
*/
|
|
31
|
+
static hasExplicitDimensions(element: ReactElement): boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Get border radius from style
|
|
34
|
+
*
|
|
35
|
+
* @param element - React element
|
|
36
|
+
* @returns Border radius value or undefined
|
|
37
|
+
*/
|
|
38
|
+
static getBorderRadius(element: ReactElement): number | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Get font size from style
|
|
41
|
+
*
|
|
42
|
+
* @param element - React element
|
|
43
|
+
* @returns Font size value or undefined
|
|
44
|
+
*/
|
|
45
|
+
static getFontSize(element: ReactElement): number | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* Get line height from style
|
|
48
|
+
*
|
|
49
|
+
* @param element - React element
|
|
50
|
+
* @returns Line height value or undefined
|
|
51
|
+
*/
|
|
52
|
+
static getLineHeight(element: ReactElement): number | undefined;
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=StyleResolver.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyleResolver.d.ts","sourceRoot":"","sources":["../../../../src/core/resolver/StyleResolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;GAEG;AACH,qBAAa,aAAa;IACxB;;;;;OAKG;IACH,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa;IAOpD;;;;;OAKG;IACH,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG;QAC3C,KAAK,CAAC,EAAE,cAAc,CAAC;QACvB,MAAM,CAAC,EAAE,cAAc,CAAC;KACzB;IAKD;;;;;OAKG;IACH,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO;IAK5D;;;;;OAKG;IACH,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS;IAKjE;;;;;OAKG;IACH,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS;IAK7D;;;;;OAKG;IACH,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS;CAIhE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/resolver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"deep.d.ts","sourceRoot":"","sources":["../../src/deep.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,WAAW,OAAO,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Skelo - Automatic skeleton loading for React Native
|
|
3
|
+
*
|
|
4
|
+
* Write your UI once. Skelo builds the loading state automatically.
|
|
5
|
+
*
|
|
6
|
+
* @packageDocumentation
|
|
7
|
+
*/
|
|
8
|
+
export { Skeleton } from './components/Skeleton';
|
|
9
|
+
export { SkeletonIgnore } from './components/SkeletonIgnore';
|
|
10
|
+
export { withSkeleton } from './components/withSkeleton';
|
|
11
|
+
export type { WithSkeletonOptions } from './components/withSkeleton';
|
|
12
|
+
export { StyleSkeleton } from './core/generator/StyleSkeleton';
|
|
13
|
+
export type { StyleInput } from './core/generator/StyleSkeleton';
|
|
14
|
+
export { Skelo } from './Skelo';
|
|
15
|
+
export type { SkeletonProps, SkeletonConfig, SkeletonPlugin, SkeletonStrategy, SkeletonContext, } from './types';
|
|
16
|
+
export { SkeletonBox, SkeletonText, SkeletonImage, SkeletonCircle } from './components/primitives';
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,YAAY,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { SkeletonPlugin } from '../types';
|
|
2
|
+
import type { ImageProps } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Built-in plugin for React Native Image component
|
|
5
|
+
*
|
|
6
|
+
* Renders Image as:
|
|
7
|
+
* - SkeletonCircle if circular (avatar-like)
|
|
8
|
+
* - SkeletonImage otherwise
|
|
9
|
+
*/
|
|
10
|
+
export declare const ImagePlugin: SkeletonPlugin<ImageProps>;
|
|
11
|
+
//# sourceMappingURL=ImagePlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImagePlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/ImagePlugin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,cAAc,CAAC,UAAU,CAoDlD,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { SkeletonPlugin } from '../types';
|
|
2
|
+
import type { TextProps } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Built-in plugin for React Native Text component
|
|
5
|
+
*
|
|
6
|
+
* Renders Text as SkeletonText with:
|
|
7
|
+
* - Estimated line count from text content
|
|
8
|
+
* - Font size from style
|
|
9
|
+
* - Line height from style
|
|
10
|
+
*/
|
|
11
|
+
export declare const TextPlugin: SkeletonPlugin<TextProps>;
|
|
12
|
+
//# sourceMappingURL=TextPlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/TextPlugin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,cAAc,CAAC,SAAS,CAoChD,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { SkeletonPlugin } from '../types';
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Built-in plugin for React Native View component
|
|
5
|
+
*
|
|
6
|
+
* Renders View as:
|
|
7
|
+
* - SkeletonBox if has explicit width/height
|
|
8
|
+
* - Container with parsed children otherwise
|
|
9
|
+
*/
|
|
10
|
+
export declare const ViewPlugin: SkeletonPlugin<ViewProps>;
|
|
11
|
+
//# sourceMappingURL=ViewPlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ViewPlugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/ViewPlugin.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,cAAc,CAAC,SAAS,CAsDhD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export type { SkeletonProps, SkeletonConfig, ResolvedStyle, ComponentNode } from './skeleton';
|
|
2
|
+
export type { SkeletonPlugin, SkeletonStrategy, SkeletonContext, SkeletonPrimitives, SkeletonUtils, PluginMetadata, BoxProps, TextProps, ImageProps, CircleProps, } from './plugin';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9F,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GACZ,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import type { ComponentType, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { DimensionValue } from 'react-native';
|
|
3
|
+
import type { SkeletonConfig, ResolvedStyle } from './skeleton';
|
|
4
|
+
/**
|
|
5
|
+
* Plugin for custom component skeleton generation
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const AvatarPlugin: SkeletonPlugin<AvatarProps> = {
|
|
10
|
+
* name: 'Avatar',
|
|
11
|
+
* component: Avatar,
|
|
12
|
+
* strategy: (props, { primitives }) => {
|
|
13
|
+
* return <primitives.Circle size={props.size || 40} />;
|
|
14
|
+
* },
|
|
15
|
+
* };
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export interface SkeletonPlugin<P = any> {
|
|
19
|
+
/**
|
|
20
|
+
* Unique identifier for the plugin
|
|
21
|
+
*/
|
|
22
|
+
name: string;
|
|
23
|
+
/**
|
|
24
|
+
* Component type this plugin handles
|
|
25
|
+
*/
|
|
26
|
+
component: ComponentType<P>;
|
|
27
|
+
/**
|
|
28
|
+
* Strategy function to generate skeleton
|
|
29
|
+
*/
|
|
30
|
+
strategy: SkeletonStrategy<P>;
|
|
31
|
+
/**
|
|
32
|
+
* Optional: Plugin version
|
|
33
|
+
*/
|
|
34
|
+
version?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Optional: Plugin metadata
|
|
37
|
+
*/
|
|
38
|
+
metadata?: PluginMetadata;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Strategy function signature
|
|
42
|
+
*/
|
|
43
|
+
export type SkeletonStrategy<P = any> = (props: P, context: SkeletonContext) => ReactElement | null;
|
|
44
|
+
/**
|
|
45
|
+
* Context provided to plugin strategies
|
|
46
|
+
*/
|
|
47
|
+
export interface SkeletonContext {
|
|
48
|
+
/**
|
|
49
|
+
* Configuration from parent Skeleton component
|
|
50
|
+
*/
|
|
51
|
+
config: SkeletonConfig;
|
|
52
|
+
/**
|
|
53
|
+
* Theme information (light/dark)
|
|
54
|
+
*/
|
|
55
|
+
theme: 'light' | 'dark';
|
|
56
|
+
/**
|
|
57
|
+
* Recursively parse children
|
|
58
|
+
*/
|
|
59
|
+
parseChildren: (children: ReactNode) => ReactNode;
|
|
60
|
+
/**
|
|
61
|
+
* Access to skeleton primitives
|
|
62
|
+
*/
|
|
63
|
+
primitives: SkeletonPrimitives;
|
|
64
|
+
/**
|
|
65
|
+
* Utility functions
|
|
66
|
+
*/
|
|
67
|
+
utils: SkeletonUtils;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Skeleton primitive components
|
|
71
|
+
*/
|
|
72
|
+
export interface SkeletonPrimitives {
|
|
73
|
+
Box: ComponentType<BoxProps>;
|
|
74
|
+
Text: ComponentType<TextProps>;
|
|
75
|
+
Image: ComponentType<ImageProps>;
|
|
76
|
+
Circle: ComponentType<CircleProps>;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Utility functions for plugins
|
|
80
|
+
*/
|
|
81
|
+
export interface SkeletonUtils {
|
|
82
|
+
/**
|
|
83
|
+
* Flatten and resolve styles
|
|
84
|
+
*/
|
|
85
|
+
resolveStyle: (style: any) => ResolvedStyle;
|
|
86
|
+
/**
|
|
87
|
+
* Extract dimensions from a resolved style
|
|
88
|
+
*/
|
|
89
|
+
extractDimensions: (style: ResolvedStyle) => {
|
|
90
|
+
width?: DimensionValue;
|
|
91
|
+
height?: DimensionValue;
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Generate random width for natural look
|
|
95
|
+
*/
|
|
96
|
+
randomWidth: (min?: number, max?: number) => string;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Plugin metadata
|
|
100
|
+
*/
|
|
101
|
+
export interface PluginMetadata {
|
|
102
|
+
author?: string;
|
|
103
|
+
description?: string;
|
|
104
|
+
repository?: string;
|
|
105
|
+
license?: string;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Animation and color props shared by all skeleton primitives
|
|
109
|
+
*/
|
|
110
|
+
export interface SkeletonAnimationProps {
|
|
111
|
+
animation?: 'shimmer' | 'pulse' | 'none';
|
|
112
|
+
baseColor?: string;
|
|
113
|
+
highlightColor?: string;
|
|
114
|
+
duration?: number;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Props for skeleton primitives
|
|
118
|
+
*/
|
|
119
|
+
export interface BoxProps extends SkeletonAnimationProps {
|
|
120
|
+
width?: DimensionValue;
|
|
121
|
+
height?: DimensionValue;
|
|
122
|
+
borderRadius?: number;
|
|
123
|
+
style?: any;
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
}
|
|
126
|
+
export interface TextProps extends SkeletonAnimationProps {
|
|
127
|
+
lines?: number;
|
|
128
|
+
fontSize?: number;
|
|
129
|
+
lineHeight?: number;
|
|
130
|
+
width?: DimensionValue;
|
|
131
|
+
lastLineWidth?: DimensionValue;
|
|
132
|
+
style?: any;
|
|
133
|
+
}
|
|
134
|
+
export interface ImageProps extends SkeletonAnimationProps {
|
|
135
|
+
width?: DimensionValue;
|
|
136
|
+
height?: DimensionValue;
|
|
137
|
+
borderRadius?: number;
|
|
138
|
+
style?: any;
|
|
139
|
+
}
|
|
140
|
+
export interface CircleProps extends SkeletonAnimationProps {
|
|
141
|
+
size?: number;
|
|
142
|
+
style?: any;
|
|
143
|
+
}
|
|
144
|
+
//# sourceMappingURL=plugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/types/plugin.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { DimensionValue, FlexAlignType } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the main Skeleton component
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* <Skeleton loading={true} animation="shimmer">
|
|
9
|
+
* <YourComponent />
|
|
10
|
+
* </Skeleton>
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export interface SkeletonProps {
|
|
14
|
+
/**
|
|
15
|
+
* Whether to show skeleton (true) or actual content (false)
|
|
16
|
+
*/
|
|
17
|
+
loading: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Animation type
|
|
20
|
+
* - 'shimmer': Moving gradient animation (default)
|
|
21
|
+
* - 'pulse': Fade in/out animation
|
|
22
|
+
* - 'none': Static skeleton
|
|
23
|
+
*
|
|
24
|
+
* @default 'shimmer'
|
|
25
|
+
*/
|
|
26
|
+
animation?: 'shimmer' | 'pulse' | 'none';
|
|
27
|
+
/**
|
|
28
|
+
* Animation duration in milliseconds
|
|
29
|
+
* @default 1200
|
|
30
|
+
*/
|
|
31
|
+
duration?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Base skeleton color
|
|
34
|
+
* @default Auto-detected based on color scheme (light/dark)
|
|
35
|
+
*/
|
|
36
|
+
baseColor?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Shimmer highlight color
|
|
39
|
+
* @default Auto-detected based on color scheme (light/dark)
|
|
40
|
+
*/
|
|
41
|
+
highlightColor?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Default border radius for skeleton elements
|
|
44
|
+
* @default 4
|
|
45
|
+
*/
|
|
46
|
+
borderRadius?: number;
|
|
47
|
+
/**
|
|
48
|
+
* Components to render.
|
|
49
|
+
*
|
|
50
|
+
* When `styles` is provided, `children` is optional — the skeleton is derived
|
|
51
|
+
* from the styles instead of the child tree.
|
|
52
|
+
*/
|
|
53
|
+
children?: ReactNode;
|
|
54
|
+
/**
|
|
55
|
+
* Generate the skeleton directly from a set of styles instead of from the
|
|
56
|
+
* child element tree. Accepts a `StyleSheet.create` object (values used in
|
|
57
|
+
* definition order) or an array of styles.
|
|
58
|
+
*
|
|
59
|
+
* Because a StyleSheet has no hierarchy, the result is a vertical stack of
|
|
60
|
+
* skeleton shapes — one per style that has visual dimensions.
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* ```tsx
|
|
64
|
+
* <Skeleton loading={loading} styles={styles} />
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
styles?: Record<string, unknown> | unknown[];
|
|
68
|
+
/**
|
|
69
|
+
* When using `styles`, style keys to skip (e.g. layout containers).
|
|
70
|
+
*/
|
|
71
|
+
excludeStyles?: string[];
|
|
72
|
+
/**
|
|
73
|
+
* Deep mode: expand opaque (custom) child components into their real
|
|
74
|
+
* host-element tree via offline rendering, producing a structured skeleton
|
|
75
|
+
* without inlining host elements.
|
|
76
|
+
*
|
|
77
|
+
* @experimental Renders the children offline to introspect them, so their
|
|
78
|
+
* mount effects run during expansion and they render outside your app's
|
|
79
|
+
* providers (navigation/theme/redux). Best for presentational trees; guard
|
|
80
|
+
* effectful/context-dependent screens or register a plugin for them. Falls
|
|
81
|
+
* back to static parsing if offline rendering is unavailable or fails.
|
|
82
|
+
* Requires `react-reconciler` to be installed.
|
|
83
|
+
*
|
|
84
|
+
* @default false
|
|
85
|
+
*/
|
|
86
|
+
deep?: boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Enable accessibility features
|
|
89
|
+
* @default true
|
|
90
|
+
*/
|
|
91
|
+
accessible?: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Screen reader label
|
|
94
|
+
* @default "Loading content"
|
|
95
|
+
*/
|
|
96
|
+
accessibilityLabel?: string;
|
|
97
|
+
/**
|
|
98
|
+
* Debug mode (development only)
|
|
99
|
+
* Shows component boundaries and names
|
|
100
|
+
* @default false
|
|
101
|
+
*/
|
|
102
|
+
debug?: boolean;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Configuration options for SkeletonProvider
|
|
106
|
+
*/
|
|
107
|
+
export interface SkeletonConfig {
|
|
108
|
+
/**
|
|
109
|
+
* Default animation type
|
|
110
|
+
* @default 'shimmer'
|
|
111
|
+
*/
|
|
112
|
+
animation?: 'shimmer' | 'pulse' | 'none';
|
|
113
|
+
/**
|
|
114
|
+
* Default animation duration in milliseconds
|
|
115
|
+
* @default 1200
|
|
116
|
+
*/
|
|
117
|
+
duration?: number;
|
|
118
|
+
/**
|
|
119
|
+
* Default base color
|
|
120
|
+
*/
|
|
121
|
+
baseColor?: string;
|
|
122
|
+
/**
|
|
123
|
+
* Default highlight color
|
|
124
|
+
*/
|
|
125
|
+
highlightColor?: string;
|
|
126
|
+
/**
|
|
127
|
+
* Default border radius
|
|
128
|
+
* @default 4
|
|
129
|
+
*/
|
|
130
|
+
borderRadius?: number;
|
|
131
|
+
/**
|
|
132
|
+
* Enable debug mode globally
|
|
133
|
+
* @default false
|
|
134
|
+
*/
|
|
135
|
+
debug?: boolean;
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* Resolved style properties extracted from React Native styles
|
|
139
|
+
*/
|
|
140
|
+
export interface ResolvedStyle {
|
|
141
|
+
width?: DimensionValue;
|
|
142
|
+
height?: DimensionValue;
|
|
143
|
+
borderRadius?: number;
|
|
144
|
+
backgroundColor?: string;
|
|
145
|
+
fontSize?: number;
|
|
146
|
+
lineHeight?: number;
|
|
147
|
+
marginTop?: number;
|
|
148
|
+
marginBottom?: number;
|
|
149
|
+
marginLeft?: number;
|
|
150
|
+
marginRight?: number;
|
|
151
|
+
paddingTop?: number;
|
|
152
|
+
paddingBottom?: number;
|
|
153
|
+
paddingLeft?: number;
|
|
154
|
+
paddingRight?: number;
|
|
155
|
+
flexDirection?: 'row' | 'column';
|
|
156
|
+
alignItems?: FlexAlignType;
|
|
157
|
+
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Parsed component node in the tree
|
|
161
|
+
*/
|
|
162
|
+
export interface ComponentNode {
|
|
163
|
+
type: string;
|
|
164
|
+
props: any;
|
|
165
|
+
style: ResolvedStyle;
|
|
166
|
+
children: ComponentNode[];
|
|
167
|
+
/**
|
|
168
|
+
* The original React element this node was parsed from.
|
|
169
|
+
*
|
|
170
|
+
* Retained so the renderer can fall back to rendering-and-measuring the
|
|
171
|
+
* real element when it is an opaque (non-host) component the parser can't
|
|
172
|
+
* introspect. Excluded from debug serialization.
|
|
173
|
+
*/
|
|
174
|
+
element?: ReactElement;
|
|
175
|
+
}
|
|
176
|
+
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,cAAc,CAAC,EACb,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC5F;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { isValidElement } from 'react';
|
|
2
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
3
|
+
export { isValidElement };
|
|
4
|
+
/**
|
|
5
|
+
* Get component display name or type name
|
|
6
|
+
*
|
|
7
|
+
* @param element - React element
|
|
8
|
+
* @returns Component name as string
|
|
9
|
+
*/
|
|
10
|
+
export declare function getComponentName(element: ReactElement): string;
|
|
11
|
+
/**
|
|
12
|
+
* Check if element is a React Fragment
|
|
13
|
+
*
|
|
14
|
+
* @param element - React element
|
|
15
|
+
* @returns True if element is a Fragment
|
|
16
|
+
*/
|
|
17
|
+
export declare function isFragment(element: ReactElement): boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Flatten children, handling Fragments recursively
|
|
20
|
+
*
|
|
21
|
+
* @param children - React children
|
|
22
|
+
* @returns Flattened array of children
|
|
23
|
+
*/
|
|
24
|
+
export declare function flattenChildren(children: ReactNode): ReactNode[];
|
|
25
|
+
/**
|
|
26
|
+
* Check if component is a touchable component
|
|
27
|
+
*
|
|
28
|
+
* @param element - React element
|
|
29
|
+
* @returns True if component is touchable
|
|
30
|
+
*/
|
|
31
|
+
export declare function isTouchableComponent(element: ReactElement): boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Generate random width percentage for natural skeleton look
|
|
34
|
+
*
|
|
35
|
+
* @param min - Minimum percentage (0-100)
|
|
36
|
+
* @param max - Maximum percentage (0-100)
|
|
37
|
+
* @returns Random percentage as string (e.g., "75%")
|
|
38
|
+
*/
|
|
39
|
+
export declare function randomWidth(min?: number, max?: number): string;
|
|
40
|
+
//# sourceMappingURL=componentUtils.d.ts.map
|