auto-loading-skeleton 1.0.2 → 1.0.3

package/src/AutoSkeleton.jsx

@@ -1,72 +1,72 @@
-/**
- * AutoSkeleton.jsx
- * Main wrapper component.
- *
- * Usage:
- *   <AutoSkeleton loading={isLoading}>
- *     <ProductCard />
- *   </AutoSkeleton>
- */
-
-import React, { useEffect, useMemo } from 'react';
-import { analyzeTree } from './analyzer.js';
-import { renderSkeletonNodes } from './renderer.js';
-import { injectStyles } from './styles.js';
-
-/**
- * @typedef {Object} AutoSkeletonProps
- * @property {boolean}           loading       - Show skeleton when true
- * @property {React.ReactNode}   children      - The real UI component(s)
- * @property {'shimmer'|'pulse'|'wave'|'none'} [animation='shimmer']
- * @property {number}            [repeat=1]    - Repeat skeleton N times (e.g. list items)
- * @property {object}            [theme]       - { baseColor, highlightColor }
- * @property {React.CSSProperties} [style]     - Wrapper style
- * @property {string}            [className]   - Wrapper className
- * @property {string}            [ariaLabel]   - aria-label for the skeleton wrapper
- */
-
-export function AutoSkeleton({
-  loading = false,
-  children,
-  animation = 'shimmer',
-  repeat = 1,
-  theme = {},
-  style,
-  className,
-  ariaLabel = 'Loading…',
-}) {
-  // Inject global CSS once
-  useEffect(() => { injectStyles(); }, []);
-
-  // Analyse the child tree once (memoised — re-runs only when children change)
-  const skeletonNodes = useMemo(() => {
-    if (!loading) return null;
-    const childArray = React.Children.toArray(children);
-    return childArray.flatMap(child => analyzeTree(child));
-  }, [loading, children]);
-
-  if (!loading) return children;
-
-  const options = { animation, theme };
-  const units = Array.from({ length: repeat }, (_, i) =>
-    React.createElement(
-      'div',
-      { key: i, style: i > 0 ? { marginTop: 16 } : undefined },
-      renderSkeletonNodes(skeletonNodes, options)
-    )
-  );
-
-  return React.createElement(
-    'div',
-    {
-      role: 'status',
-      'aria-busy': true,
-      'aria-label': ariaLabel,
-      style,
-      className,
-    },
-    ...units
-  );
-}
-
-export default AutoSkeleton;
+/**
+ * AutoSkeleton.jsx
+ * Main wrapper component.
+ *
+ * Usage:
+ *   <AutoSkeleton loading={isLoading}>
+ *     <ProductCard />
+ *   </AutoSkeleton>
+ */
+
+import React, { useEffect, useMemo } from 'react';
+import { analyzeTree } from './analyzer.js';
+import { renderSkeletonNodes } from './renderer.js';
+import { injectStyles } from './styles.js';
+
+/**
+ * @typedef {Object} AutoSkeletonProps
+ * @property {boolean}           loading       - Show skeleton when true
+ * @property {React.ReactNode}   children      - The real UI component(s)
+ * @property {'shimmer'|'pulse'|'wave'|'none'} [animation='shimmer']
+ * @property {number}            [repeat=1]    - Repeat skeleton N times (e.g. list items)
+ * @property {object}            [theme]       - { baseColor, highlightColor }
+ * @property {React.CSSProperties} [style]     - Wrapper style
+ * @property {string}            [className]   - Wrapper className
+ * @property {string}            [ariaLabel]   - aria-label for the skeleton wrapper
+ */
+
+export function AutoSkeleton({
+  loading = false,
+  children,
+  animation = 'shimmer',
+  repeat = 1,
+  theme = {},
+  style,
+  className,
+  ariaLabel = 'Loading…',
+}) {
+  // Inject global CSS once
+  useEffect(() => { injectStyles(); }, []);
+
+  // Analyse the child tree once (memoised — re-runs only when children change)
+  const skeletonNodes = useMemo(() => {
+    if (!loading) return null;
+    const childArray = React.Children.toArray(children);
+    return childArray.flatMap(child => analyzeTree(child));
+  }, [loading, children]);
+
+  if (!loading) return children;
+
+  const options = { animation, theme };
+  const units = Array.from({ length: repeat }, (_, i) =>
+    React.createElement(
+      'div',
+      { key: i, style: i > 0 ? { marginTop: 16 } : undefined },
+      renderSkeletonNodes(skeletonNodes, options)
+    )
+  );
+
+  return React.createElement(
+    'div',
+    {
+      role: 'status',
+      'aria-busy': true,
+      'aria-label': ariaLabel,
+      style,
+      className,
+    },
+    ...units
+  );
+}
+
+export default AutoSkeleton;

package/src/SkeletonItem.jsx

@@ -1,99 +1,99 @@
-/**
- * SkeletonItem.jsx
- * Low-level primitive for manual skeleton building if needed.
- *
- * Usage:
- *   <SkeletonItem type="text" lines={2} />
- *   <SkeletonItem type="avatar" size={48} />
- *   <SkeletonItem type="image" width="100%" height={200} />
- */
-
-import React, { useEffect } from 'react';
-import { buildClassName, injectStyles } from './styles.js';
-
-export function SkeletonItem({
-  type = 'text',
-  lines = 1,
-  width,
-  height,
-  size,
-  animation = 'shimmer',
-  theme = {},
-  style: extraStyle = {},
-}) {
-  useEffect(() => { injectStyles(); }, []);
-
-  const cssVars = {
-    ...(theme.baseColor && { '--skeleton-base-color': theme.baseColor }),
-    ...(theme.highlightColor && { '--skeleton-highlight-color': theme.highlightColor }),
-    ...extraStyle,
-  };
-
-  switch (type) {
-    case 'text': {
-      const cls = buildClassName(animation, 'auto-skeleton-text-line');
-      if (lines === 1) {
-        return React.createElement('div', {
-          className: cls,
-          style: { width: width || '80%', ...cssVars },
-          'aria-hidden': true,
-        });
-      }
-      const lineEls = Array.from({ length: lines }, (_, i) =>
-        React.createElement('div', {
-          key: i,
-          className: cls,
-          style: { width: i === lines - 1 ? '65%' : '100%', ...cssVars },
-          'aria-hidden': true,
-        })
-      );
-      return React.createElement('div', {
-        className: 'auto-skeleton-text-block',
-        style: cssVars,
-        'aria-hidden': true,
-      }, ...lineEls);
-    }
-
-    case 'avatar': {
-      const px = size ? `${size}px` : (width || '40px');
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-avatar-block'),
-        style: { width: px, height: size ? `${size}px` : (height || px), ...cssVars },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'image': {
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-image-block'),
-        style: {
-          width: width || '100%',
-          ...(height ? { paddingTop: 0, height } : {}),
-          ...cssVars,
-        },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'button': {
-      return React.createElement('div', {
-        className: buildClassName(animation, 'auto-skeleton-button-block'),
-        style: { width: width || 100, ...cssVars },
-        'aria-hidden': true,
-      });
-    }
-
-    case 'input': {
-      return React.createElement('div', {
-        className: 'auto-skeleton-input-block',
-        style: cssVars,
-        'aria-hidden': true,
-      });
-    }
-
-    default:
-      return null;
-  }
-}
-
-export default SkeletonItem;
+/**
+ * SkeletonItem.jsx
+ * Low-level primitive for manual skeleton building if needed.
+ *
+ * Usage:
+ *   <SkeletonItem type="text" lines={2} />
+ *   <SkeletonItem type="avatar" size={48} />
+ *   <SkeletonItem type="image" width="100%" height={200} />
+ */
+
+import React, { useEffect } from 'react';
+import { buildClassName, injectStyles } from './styles.js';
+
+export function SkeletonItem({
+  type = 'text',
+  lines = 1,
+  width,
+  height,
+  size,
+  animation = 'shimmer',
+  theme = {},
+  style: extraStyle = {},
+}) {
+  useEffect(() => { injectStyles(); }, []);
+
+  const cssVars = {
+    ...(theme.baseColor && { '--skeleton-base-color': theme.baseColor }),
+    ...(theme.highlightColor && { '--skeleton-highlight-color': theme.highlightColor }),
+    ...extraStyle,
+  };
+
+  switch (type) {
+    case 'text': {
+      const cls = buildClassName(animation, 'auto-skeleton-text-line');
+      if (lines === 1) {
+        return React.createElement('div', {
+          className: cls,
+          style: { width: width || '80%', ...cssVars },
+          'aria-hidden': true,
+        });
+      }
+      const lineEls = Array.from({ length: lines }, (_, i) =>
+        React.createElement('div', {
+          key: i,
+          className: cls,
+          style: { width: i === lines - 1 ? '65%' : '100%', ...cssVars },
+          'aria-hidden': true,
+        })
+      );
+      return React.createElement('div', {
+        className: 'auto-skeleton-text-block',
+        style: cssVars,
+        'aria-hidden': true,
+      }, ...lineEls);
+    }
+
+    case 'avatar': {
+      const px = size ? `${size}px` : (width || '40px');
+      return React.createElement('div', {
+        className: buildClassName(animation, 'auto-skeleton-avatar-block'),
+        style: { width: px, height: size ? `${size}px` : (height || px), ...cssVars },
+        'aria-hidden': true,
+      });
+    }
+
+    case 'image': {
+      return React.createElement('div', {
+        className: buildClassName(animation, 'auto-skeleton-image-block'),
+        style: {
+          width: width || '100%',
+          ...(height ? { paddingTop: 0, height } : {}),
+          ...cssVars,
+        },
+        'aria-hidden': true,
+      });
+    }
+
+    case 'button': {
+      return React.createElement('div', {
+        className: buildClassName(animation, 'auto-skeleton-button-block'),
+        style: { width: width || 100, ...cssVars },
+        'aria-hidden': true,
+      });
+    }
+
+    case 'input': {
+      return React.createElement('div', {
+        className: 'auto-skeleton-input-block',
+        style: cssVars,
+        'aria-hidden': true,
+      });
+    }
+
+    default:
+      return null;
+  }
+}
+
+export default SkeletonItem;

package/src/analyzer.js

@@ -1,113 +1,113 @@
-const ELEMENT_TYPES = {
-  TEXT:      'text',
-  IMAGE:     'image',
-  AVATAR:    'avatar',
-  BUTTON:    'button',
-  INPUT:     'input',
-  CONTAINER: 'container',
-  ICON:      'icon',
-};
-
-function inferType(element) {
-  if (!element || typeof element !== 'object') return ELEMENT_TYPES.TEXT;
-  var type = element.type;
-  var props = element.props || {};
-  var tag = typeof type === 'string' ? type.toLowerCase() : '';
-  var cls = (props.className || '').toLowerCase();
-  var alt = (props.alt || '').toLowerCase();
-  var role = (props.role || '').toLowerCase();
-
-  if (tag === 'img') {
-    var isAvatar = cls.includes('avatar') || cls.includes('profile') || alt.includes('avatar');
-    return isAvatar ? ELEMENT_TYPES.AVATAR : ELEMENT_TYPES.IMAGE;
-  }
-  if (tag === 'button' || role === 'button') return ELEMENT_TYPES.BUTTON;
-  if (tag === 'input' || tag === 'textarea' || tag === 'select') return ELEMENT_TYPES.INPUT;
-  if (tag === 'svg' || cls.includes('icon')) return ELEMENT_TYPES.ICON;
-  if (cls.includes('avatar') || cls.includes('profile-pic')) return ELEMENT_TYPES.AVATAR;
-  return ELEMENT_TYPES.CONTAINER;
-}
-
-function isTextLeaf(element) {
-  if (!element || typeof element !== 'object') return false;
-  var children = element.props && element.props.children;
-  if (typeof children === 'string') return true;
-  if (typeof children === 'number') return true;
-  if (Array.isArray(children)) {
-    return children.every(function(c) { return typeof c === 'string' || typeof c === 'number'; });
-  }
-  return false;
-}
-
-function extractStyleHints(element) {
-  var props = (element && element.props) || {};
-  var style = props.style || {};
-  return {
-    width: style.width,
-    height: style.height,
-    borderRadius: style.borderRadius,
-    display: style.display,
-    flexDirection: style.flexDirection,
-    alignItems: style.alignItems,
-    gap: style.gap,
-    padding: style.padding,
-    margin: style.margin,
-  };
-}
-
-function analyzeElement(element, depth) {
-  depth = depth || 0;
-  if (element === null || element === undefined) return null;
-  if (typeof element === 'string' || typeof element === 'number') {
-    return { nodeType: ELEMENT_TYPES.TEXT, content: String(element), depth: depth };
-  }
-  if (typeof element === 'boolean') return null;
-
-  if (Array.isArray(element)) {
-    return element.map(function(el) { return analyzeElement(el, depth); }).filter(Boolean);
-  }
-
-  var type = element.type;
-  var props = element.props || {};
-  var styleHints = extractStyleHints(element);
-
-  // Structural elements take priority over text-leaf detection
-  var earlyType = inferType(element);
-  if (earlyType === ELEMENT_TYPES.BUTTON || earlyType === ELEMENT_TYPES.INPUT) {
-    var lbl = earlyType === ELEMENT_TYPES.BUTTON && typeof props.children === 'string' ? props.children : '';
-    return { nodeType: earlyType, label: lbl, styleHints: styleHints, depth: depth };
-  }
-
-  if (isTextLeaf(element)) {
-    var tag = typeof type === 'string' ? type.toLowerCase() : '';
-    var isHeading = /^h[1-6]$/.test(tag);
-    return { nodeType: ELEMENT_TYPES.TEXT, isHeading: isHeading, tag: tag, content: String(props.children), styleHints: styleHints, depth: depth };
-  }
-
-  var nodeType = inferType(element);
-
-  if (nodeType === ELEMENT_TYPES.IMAGE || nodeType === ELEMENT_TYPES.AVATAR || nodeType === ELEMENT_TYPES.ICON) {
-    return { nodeType: nodeType, styleHints: styleHints, depth: depth };
-  }
-  if (nodeType === ELEMENT_TYPES.BUTTON) {
-    return { nodeType: ELEMENT_TYPES.BUTTON, label: typeof props.children === 'string' ? props.children : '', styleHints: styleHints, depth: depth };
-  }
-  if (nodeType === ELEMENT_TYPES.INPUT) {
-    return { nodeType: ELEMENT_TYPES.INPUT, styleHints: styleHints, depth: depth };
-  }
-
-  var rawChildren = props.children;
-  var children = [];
-  if (rawChildren) {
-    var arr = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
-    arr.forEach(function(child) {
-      var result = analyzeElement(child, depth + 1);
-      if (Array.isArray(result)) { result.forEach(function(r) { if (r) children.push(r); }); }
-      else if (result) children.push(result);
-    });
-  }
-
-  return { nodeType: ELEMENT_TYPES.CONTAINER, tag: typeof type === 'string' ? type : 'div', styleHints: styleHints, children: children, depth: depth };
-}
-
-module.exports = { analyzeElement: analyzeElement, ELEMENT_TYPES: ELEMENT_TYPES };
+const ELEMENT_TYPES = {
+  TEXT:      'text',
+  IMAGE:     'image',
+  AVATAR:    'avatar',
+  BUTTON:    'button',
+  INPUT:     'input',
+  CONTAINER: 'container',
+  ICON:      'icon',
+};
+
+function inferType(element) {
+  if (!element || typeof element !== 'object') return ELEMENT_TYPES.TEXT;
+  var type = element.type;
+  var props = element.props || {};
+  var tag = typeof type === 'string' ? type.toLowerCase() : '';
+  var cls = (props.className || '').toLowerCase();
+  var alt = (props.alt || '').toLowerCase();
+  var role = (props.role || '').toLowerCase();
+
+  if (tag === 'img') {
+    var isAvatar = cls.includes('avatar') || cls.includes('profile') || alt.includes('avatar');
+    return isAvatar ? ELEMENT_TYPES.AVATAR : ELEMENT_TYPES.IMAGE;
+  }
+  if (tag === 'button' || role === 'button') return ELEMENT_TYPES.BUTTON;
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') return ELEMENT_TYPES.INPUT;
+  if (tag === 'svg' || cls.includes('icon')) return ELEMENT_TYPES.ICON;
+  if (cls.includes('avatar') || cls.includes('profile-pic')) return ELEMENT_TYPES.AVATAR;
+  return ELEMENT_TYPES.CONTAINER;
+}
+
+function isTextLeaf(element) {
+  if (!element || typeof element !== 'object') return false;
+  var children = element.props && element.props.children;
+  if (typeof children === 'string') return true;
+  if (typeof children === 'number') return true;
+  if (Array.isArray(children)) {
+    return children.every(function(c) { return typeof c === 'string' || typeof c === 'number'; });
+  }
+  return false;
+}
+
+function extractStyleHints(element) {
+  var props = (element && element.props) || {};
+  var style = props.style || {};
+  return {
+    width: style.width,
+    height: style.height,
+    borderRadius: style.borderRadius,
+    display: style.display,
+    flexDirection: style.flexDirection,
+    alignItems: style.alignItems,
+    gap: style.gap,
+    padding: style.padding,
+    margin: style.margin,
+  };
+}
+
+function analyzeElement(element, depth) {
+  depth = depth || 0;
+  if (element === null || element === undefined) return null;
+  if (typeof element === 'string' || typeof element === 'number') {
+    return { nodeType: ELEMENT_TYPES.TEXT, content: String(element), depth: depth };
+  }
+  if (typeof element === 'boolean') return null;
+
+  if (Array.isArray(element)) {
+    return element.map(function(el) { return analyzeElement(el, depth); }).filter(Boolean);
+  }
+
+  var type = element.type;
+  var props = element.props || {};
+  var styleHints = extractStyleHints(element);
+
+  // Structural elements take priority over text-leaf detection
+  var earlyType = inferType(element);
+  if (earlyType === ELEMENT_TYPES.BUTTON || earlyType === ELEMENT_TYPES.INPUT) {
+    var lbl = earlyType === ELEMENT_TYPES.BUTTON && typeof props.children === 'string' ? props.children : '';
+    return { nodeType: earlyType, label: lbl, styleHints: styleHints, depth: depth };
+  }
+
+  if (isTextLeaf(element)) {
+    var tag = typeof type === 'string' ? type.toLowerCase() : '';
+    var isHeading = /^h[1-6]$/.test(tag);
+    return { nodeType: ELEMENT_TYPES.TEXT, isHeading: isHeading, tag: tag, content: String(props.children), styleHints: styleHints, depth: depth };
+  }
+
+  var nodeType = inferType(element);
+
+  if (nodeType === ELEMENT_TYPES.IMAGE || nodeType === ELEMENT_TYPES.AVATAR || nodeType === ELEMENT_TYPES.ICON) {
+    return { nodeType: nodeType, styleHints: styleHints, depth: depth };
+  }
+  if (nodeType === ELEMENT_TYPES.BUTTON) {
+    return { nodeType: ELEMENT_TYPES.BUTTON, label: typeof props.children === 'string' ? props.children : '', styleHints: styleHints, depth: depth };
+  }
+  if (nodeType === ELEMENT_TYPES.INPUT) {
+    return { nodeType: ELEMENT_TYPES.INPUT, styleHints: styleHints, depth: depth };
+  }
+
+  var rawChildren = props.children;
+  var children = [];
+  if (rawChildren) {
+    var arr = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
+    arr.forEach(function(child) {
+      var result = analyzeElement(child, depth + 1);
+      if (Array.isArray(result)) { result.forEach(function(r) { if (r) children.push(r); }); }
+      else if (result) children.push(result);
+    });
+  }
+
+  return { nodeType: ELEMENT_TYPES.CONTAINER, tag: typeof type === 'string' ? type : 'div', styleHints: styleHints, children: children, depth: depth };
+}
+
+module.exports = { analyzeElement: analyzeElement, ELEMENT_TYPES: ELEMENT_TYPES };