auto-loading-skeleton 1.0.2 → 2.0.0

package/src/primitives.js

@@ -0,0 +1,293 @@
+'use strict';
+
+/**
+ * primitives.js — V2
+ *
+ * Standalone skeleton building blocks for manual composition.
+ * All respect the global SkeletonContext for animation / theme.
+ *
+ * Exports:
+ *   SkeletonBlock   — generic configurable rectangle
+ *   SkeletonText    — multi-line text placeholder
+ *   SkeletonAvatar  — circular avatar
+ *   SkeletonImage   — rectangular image placeholder
+ *   SkeletonBadge   — inline pill badge
+ *   SkeletonButton  — button placeholder
+ *   SkeletonInput   — input field placeholder
+ *   SkeletonList    — repeated item skeleton
+ *   SkeletonForm    — form with label+input rows
+ *   SkeletonCard    — card with header row + body lines + optional footer
+ */
+
+var React           = require('react');
+var styles          = require('./styles');
+var ctx             = require('./context');
+
+function useAnim(propAnim) {
+  var context = React.useContext(ctx.SkeletonContext);
+  React.useEffect(function() { styles.injectStyles(); }, []);
+  if (typeof document !== 'undefined') styles.injectStyles();
+  return propAnim || context.animation || 'shimmer';
+}
+
+/* ── SkeletonBlock ── */
+function SkeletonBlock(props) {
+  var anim  = useAnim(props.animation);
+  var shape = props.shape;   // 'circle' | 'pill' | 'rounded' | undefined
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, shape) + (props.className ? ' ' + props.className : ''),
+    style:         Object.assign({
+      width:   props.width  || '100%',
+      height:  props.height || '16px',
+      display: 'block',
+    }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonBlock.displayName = 'SkeletonBlock';
+
+/* ── SkeletonText ── */
+function SkeletonText(props) {
+  var anim      = useAnim(props.animation);
+  var lines     = props.lines     || 3;
+  var lineH     = props.lineHeight || '1em';
+  var gap       = props.gap       || '7px';
+  var lastWidth = props.lastLineWidth || '60%';
+  var lineEls   = [];
+  for (var i = 0; i < lines; i++) {
+    lineEls.push(React.createElement('span', {
+      key:           'tl-' + i,
+      'data-ask':    '',
+      className:     styles.blockClass(anim),
+      style: {
+        display:      'block',
+        width:        i === lines - 1 ? lastWidth : (i === 0 ? '95%' : '100%'),
+        height:       lineH,
+        marginBottom: i < lines - 1 ? gap : 0,
+      },
+      'aria-hidden': 'true',
+    }));
+  }
+  return React.createElement('div', { 'aria-hidden': 'true', style: props.style || {} }, lineEls);
+}
+SkeletonText.displayName = 'SkeletonText';
+
+/* ── SkeletonAvatar ── */
+function SkeletonAvatar(props) {
+  var anim = useAnim(props.animation);
+  var size = props.size || '40px';
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'circle'),
+    style:         Object.assign({ width: size, height: size, display: 'block', flexShrink: 0 }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+
+/* ── SkeletonImage ── */
+function SkeletonImage(props) {
+  var anim = useAnim(props.animation);
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'rounded'),
+    style:         Object.assign({ width: '100%', height: props.height || '200px', display: 'block' }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonImage.displayName = 'SkeletonImage';
+
+/* ── SkeletonBadge ── */
+function SkeletonBadge(props) {
+  var anim = useAnim(props.animation);
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'pill'),
+    style:         Object.assign({ width: props.width || '60px', height: '20px', display: 'inline-block' }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonBadge.displayName = 'SkeletonBadge';
+
+/* ── SkeletonButton ── */
+function SkeletonButton(props) {
+  var anim = useAnim(props.animation);
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'pill'),
+    style:         Object.assign({ width: props.width || '100px', height: props.height || '36px', display: 'block' }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonButton.displayName = 'SkeletonButton';
+
+/* ── SkeletonInput ── */
+function SkeletonInput(props) {
+  var anim = useAnim(props.animation);
+  return React.createElement('span', {
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'rounded'),
+    style:         Object.assign({ width: '100%', height: props.height || '38px', display: 'block' }, props.style || {}),
+    'aria-hidden': 'true',
+  });
+}
+SkeletonInput.displayName = 'SkeletonInput';
+
+/* ── SkeletonList ── */
+function SkeletonList(props) {
+  var anim    = useAnim(props.animation);
+  var count   = props.count   || 3;
+  var gap     = props.gap     || '12px';
+  var rowH    = props.rowHeight || '60px';
+  var items   = [];
+  for (var i = 0; i < count; i++) {
+    items.push(
+      props.renderItem
+        ? React.createElement('div', { key: i }, props.renderItem({ animation: anim, index: i }))
+        : React.createElement('span', {
+            key:           i,
+            'data-ask':    '',
+            className:     styles.blockClass(anim, 'rounded'),
+            style:         { width: '100%', height: rowH, display: 'block', marginBottom: i < count - 1 ? gap : 0 },
+            'aria-hidden': 'true',
+          })
+    );
+  }
+  return React.createElement('div', { role: 'status', 'aria-label': 'Loading list', 'aria-busy': 'true' }, items);
+}
+SkeletonList.displayName = 'SkeletonList';
+
+/* ── SkeletonForm ── */
+function SkeletonForm(props) {
+  var anim   = useAnim(props.animation);
+  var fields = props.fields || 3;
+  var rows   = [];
+  for (var i = 0; i < fields; i++) {
+    rows.push(React.createElement('div', { key: i, style: { marginBottom: '16px' } },
+      // label line
+      React.createElement('span', {
+        'data-ask':    '',
+        className:     styles.blockClass(anim),
+        style:         { width: '120px', height: '0.8em', display: 'block', marginBottom: '6px' },
+        'aria-hidden': 'true',
+      }),
+      // input box
+      React.createElement('span', {
+        'data-ask':    '',
+        className:     styles.blockClass(anim, 'rounded'),
+        style:         { width: '100%', height: '38px', display: 'block' },
+        'aria-hidden': 'true',
+      })
+    ));
+  }
+  // Submit button
+  rows.push(React.createElement('span', {
+    key:           'submit',
+    'data-ask':    '',
+    className:     styles.blockClass(anim, 'pill'),
+    style:         { width: '120px', height: '38px', display: 'block', marginTop: '8px' },
+    'aria-hidden': 'true',
+  }));
+  return React.createElement('div', { role: 'status', 'aria-busy': 'true', 'aria-label': 'Loading form' }, rows);
+}
+SkeletonForm.displayName = 'SkeletonForm';
+
+/* ── SkeletonCard ── */
+function SkeletonCard(props) {
+  var anim      = useAnim(props.animation);
+  var showImg   = props.image   !== false;
+  var showAvatar = props.avatar !== false;
+  var lines     = props.lines   || 3;
+  var showFooter = props.footer !== false;
+  var imgH      = props.imageHeight || '180px';
+
+  var parts = [];
+  if (showImg) parts.push(
+    React.createElement('span', {
+      key:           'img',
+      'data-ask':    '',
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         { width: '100%', height: imgH, display: 'block', marginBottom: '12px' },
+      'aria-hidden': 'true',
+    })
+  );
+
+  // header row: avatar + two text lines
+  parts.push(React.createElement('div', {
+    key:   'hdr',
+    style: { display: 'flex', gap: '10px', alignItems: 'center', marginBottom: '12px' },
+  },
+    showAvatar && React.createElement('span', {
+      'data-ask':    '',
+      className:     styles.blockClass(anim, 'circle'),
+      style:         { width: '36px', height: '36px', flexShrink: 0 },
+      'aria-hidden': 'true',
+    }),
+    React.createElement('div', { style: { flex: 1 } },
+      React.createElement('span', {
+        'data-ask':    '',
+        className:     styles.blockClass(anim),
+        style:         { width: '55%', height: '0.9em', display: 'block', marginBottom: '5px' },
+        'aria-hidden': 'true',
+      }),
+      React.createElement('span', {
+        'data-ask':    '',
+        className:     styles.blockClass(anim),
+        style:         { width: '35%', height: '0.75em', display: 'block' },
+        'aria-hidden': 'true',
+      })
+    )
+  ));
+
+  // body text
+  for (var i = 0; i < lines; i++) {
+    parts.push(React.createElement('span', {
+      key:           'line-' + i,
+      'data-ask':    '',
+      className:     styles.blockClass(anim),
+      style:         {
+        width:        i === lines - 1 ? '65%' : '100%',
+        height:       '0.85em',
+        display:      'block',
+        marginBottom: i < lines - 1 ? '6px' : '12px',
+      },
+      'aria-hidden': 'true',
+    }));
+  }
+
+  if (showFooter) {
+    parts.push(React.createElement('div', {
+      key:   'footer',
+      style: { display: 'flex', gap: '8px' },
+    },
+      React.createElement('span', {
+        'data-ask': '', className: styles.blockClass(anim, 'pill'),
+        style: { width: '60px', height: '24px' }, 'aria-hidden': 'true',
+      }),
+      React.createElement('span', {
+        'data-ask': '', className: styles.blockClass(anim, 'pill'),
+        style: { width: '60px', height: '24px' }, 'aria-hidden': 'true',
+      })
+    ));
+  }
+
+  return React.createElement('div', {
+    role: 'status', 'aria-busy': 'true', 'aria-label': 'Loading card',
+    style: props.style || {},
+  }, parts);
+}
+SkeletonCard.displayName = 'SkeletonCard';
+
+module.exports = {
+  SkeletonBlock,
+  SkeletonText,
+  SkeletonAvatar,
+  SkeletonImage,
+  SkeletonBadge,
+  SkeletonButton,
+  SkeletonInput,
+  SkeletonList,
+  SkeletonForm,
+  SkeletonCard,
+};

package/src/renderer.js

@@ -1,84 +1,259 @@
-const React = require('react');
-const { ELEMENT_TYPES } = require('./analyzer');
-const { blockClass } = require('./styles');
-
-const DEFAULTS = {
-  text:    { width: '80%',  height: '1em'   },
-  heading: { width: '60%',  height: '1.4em' },
-  image:   { width: '100%', height: '200px' },
-  avatar:  { width: '40px', height: '40px'  },
-  button:  { width: '100px',height: '36px'  },
-  input:   { width: '100%', height: '38px'  },
-  icon:    { width: '24px', height: '24px'  },
+'use strict';
+
+/**
+ * renderer.js — V2
+ *
+ * Improvements over V1:
+ *  - Handles REPEAT node type (renders N identical skeleton children)
+ *  - Handles HEADING with level-aware sizing
+ *  - Handles MEDIA (video/iframe) as wide rectangle
+ *  - Handles BADGE as inline pill
+ *  - Handles TEXTAREA as tall input
+ *  - Handles SELECT as input with chevron indicator
+ *  - Handles CARD node type with appropriate padding wrapper
+ *  - Smart sizing: prefers inline style hints, falls back to type defaults
+ *  - Aspect ratio support from style hints
+ *  - Passes aria-busy + aria-label to all wrappers for accessibility
+ *  - Minimal key counter reset per render call for SSR safety
+ */
+
+var React  = require('react');
+var N      = require('./analyzer').NODE;
+var styles = require('./styles');
+
+/* ── size defaults per node type ── */
+var DEFAULTS = {
+  [N.TEXT]:     { width: '80%',   height: '1em'    },
+  [N.HEADING]:  { width: '55%',   height: '1.4em'  },
+  [N.IMAGE]:    { width: '100%',  height: '200px'  },
+  [N.AVATAR]:   { width: '40px',  height: '40px'   },
+  [N.MEDIA]:    { width: '100%',  height: '220px'  },
+  [N.BUTTON]:   { width: '100px', height: '36px'   },
+  [N.INPUT]:    { width: '100%',  height: '38px'   },
+  [N.TEXTAREA]: { width: '100%',  height: '100px'  },
+  [N.SELECT]:   { width: '100%',  height: '38px'   },
+  [N.BADGE]:    { width: '60px',  height: '20px'   },
+  [N.ICON]:     { width: '24px',  height: '24px'   },
 };
 
-let _key = 0;
-function nk() { return 'ask-' + (++_key); }
+/* heading level → size */
+var HEADING_SIZES = ['1.8em','1.5em','1.3em','1.15em','1em','0.9em'];
+
+/* ── key factory ── */
+var _k = 0;
+function nk() { return 'sk2-' + (++_k); }
+function resetKeys() { _k = 0; }
 
-function bStyle(def, hints, extra) {
+/* ── style builder ── */
+function sz(defaults, hints, extra) {
   hints = hints || {};
   extra = extra || {};
-  return Object.assign({ width: hints.width || def.width, height: hints.height || def.height, display: 'block', margin: hints.margin || '0' }, extra);
+  var s = {
+    width:  hints.width  || defaults.width,
+    height: hints.height || defaults.height,
+    display: 'block',
+  };
+  if (hints.aspectRatio) { delete s.height; s.aspectRatio = hints.aspectRatio; }
+  if (hints.margin) s.margin = hints.margin;
+  if (hints.borderRadius) s.borderRadius = hints.borderRadius;
+  return Object.assign(s, extra);
 }
 
+/* ── multi-line text skeleton ── */
+function textLines(node, anim, extra) {
+  var content = node.content || '';
+  var len     = content.length;
+  var lines   = Math.min(Math.max(1, Math.ceil(len / 45)), 5);
+  var h       = (node.styleHints && node.styleHints.height) || (node.styleHints && node.styleHints.fontSize) || '1em';
+
+  if (lines <= 1) {
+    return React.createElement('span', {
+      key:          nk(),
+      className:    styles.blockClass(anim),
+      style:        Object.assign(sz(DEFAULTS[N.TEXT], node.styleHints, extra), { width: node.width || '80%' }),
+      'aria-hidden': 'true',
+    });
+  }
+
+  var lineEls = [];
+  for (var i = 0; i < lines; i++) {
+    lineEls.push(React.createElement('span', {
+      key:       nk(),
+      className: styles.blockClass(anim),
+      style: {
+        display:      'block',
+        width:        i === lines - 1 ? '60%' : (i === 0 ? '95%' : '100%'),
+        height:       h,
+        marginBottom: i < lines - 1 ? '6px' : 0,
+      },
+      'aria-hidden': 'true',
+    }));
+  }
+  return React.createElement('div', { key: nk(), 'aria-hidden': 'true' }, lineEls);
+}
+
+/* ── main render function ── */
 function renderNode(node, options) {
   if (!node) return null;
   options = options || {};
-  var animation = options.animation || 'shimmer';
-  var nodeType = node.nodeType;
-  var hints = node.styleHints || {};
-
-  if (nodeType === ELEMENT_TYPES.TEXT) {
-    var isHeading = node.isHeading;
-    var def = isHeading ? DEFAULTS.heading : DEFAULTS.text;
-    var len = (node.content || '').length;
-    var lines = Math.min(Math.max(1, Math.round(len / 40)), 4);
-    if (lines <= 1) {
-      return React.createElement('span', { key: nk(), className: blockClass(animation), style: bStyle(def, hints, { width: hints.width || (len > 60 ? '95%' : def.width) }), 'aria-hidden': 'true' });
-    }
-    var lineEls = [];
-    for (var i = 0; i < lines; i++) {
-      lineEls.push(React.createElement('span', { key: nk(), className: blockClass(animation), style: { display: 'block', width: i === lines-1 ? '65%' : '100%', height: def.height, marginBottom: '6px' }, 'aria-hidden': 'true' }));
-    }
-    return React.createElement('div', { key: nk() }, lineEls);
+  var anim  = options.animation || 'shimmer';
+  var hints = node.styleHints   || {};
+  var nt    = node.nodeType;
+
+  /* TEXT */
+  if (nt === N.TEXT) return textLines(node, anim, {});
+
+  /* HEADING */
+  if (nt === N.HEADING) {
+    var lvl    = node.level || 2;
+    var hStyle = sz(DEFAULTS[N.HEADING], hints, {
+      width:  node.width || hints.width || (lvl === 1 ? '70%' : lvl <= 3 ? '55%' : '45%'),
+      height: hints.fontSize || HEADING_SIZES[Math.min(lvl - 1, 5)],
+    });
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim),
+      style:         hStyle,
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.IMAGE) {
-    return React.createElement('span', { key: nk(), className: blockClass(animation, 'rounded'), style: bStyle(DEFAULTS.image, hints), 'aria-hidden': 'true' });
+  /* IMAGE */
+  if (nt === N.IMAGE) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         sz(DEFAULTS[N.IMAGE], hints),
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.AVATAR) {
-    return React.createElement('span', { key: nk(), className: blockClass(animation, 'circle'), style: bStyle(DEFAULTS.avatar, hints), 'aria-hidden': 'true' });
+  /* AVATAR */
+  if (nt === N.AVATAR) {
+    var avSize = hints.width || hints.height || '40px';
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'circle'),
+      style:         { width: avSize, height: avSize, display: 'block', flexShrink: 0 },
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.ICON) {
-    return React.createElement('span', { key: nk(), className: blockClass(animation, 'circle'), style: bStyle(DEFAULTS.icon, hints), 'aria-hidden': 'true' });
+  /* MEDIA (video / iframe) */
+  if (nt === N.MEDIA) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         sz(DEFAULTS[N.MEDIA], hints),
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.BUTTON) {
-    return React.createElement('span', { key: nk(), className: blockClass(animation, 'pill'), style: bStyle(DEFAULTS.button, hints), 'aria-hidden': 'true' });
+  /* BUTTON */
+  if (nt === N.BUTTON) {
+    var btnW = hints.width || (node.label ? Math.max(80, node.label.length * 9) + 'px' : '100px');
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'pill'),
+      style:         sz(DEFAULTS[N.BUTTON], hints, { width: btnW }),
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.INPUT) {
-    return React.createElement('span', { key: nk(), className: blockClass(animation, 'rounded'), style: bStyle(DEFAULTS.input, hints), 'aria-hidden': 'true' });
+  /* INPUT */
+  if (nt === N.INPUT) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         sz(DEFAULTS[N.INPUT], hints),
+      'aria-hidden': 'true',
+    });
   }
 
-  if (nodeType === ELEMENT_TYPES.CONTAINER) {
-    var children = (node.children || []).map(function(c) { return renderNode(c, options); }).filter(Boolean);
-    var tag = node.tag || 'div';
-    var cStyle = {};
-    if (hints.display) cStyle.display = hints.display;
-    if (hints.flexDirection) cStyle.flexDirection = hints.flexDirection;
-    if (hints.gap) cStyle.gap = hints.gap;
-    if (hints.padding) cStyle.padding = hints.padding;
-    if (hints.margin) cStyle.margin = hints.margin;
-    if (children.length === 0) {
-      return React.createElement('span', { key: nk(), className: blockClass(animation), style: bStyle({ width: '100%', height: '20px' }, hints), 'aria-hidden': 'true' });
+  /* TEXTAREA */
+  if (nt === N.TEXTAREA) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         sz(DEFAULTS[N.TEXTAREA], hints),
+      'aria-hidden': 'true',
+    });
+  }
+
+  /* SELECT */
+  if (nt === N.SELECT) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'rounded'),
+      style:         sz(DEFAULTS[N.SELECT], hints),
+      'aria-hidden': 'true',
+    });
+  }
+
+  /* BADGE */
+  if (nt === N.BADGE) {
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'pill'),
+      style:         sz(DEFAULTS[N.BADGE], hints),
+      'aria-hidden': 'true',
+    });
+  }
+
+  /* ICON */
+  if (nt === N.ICON) {
+    var iconSz = hints.width || hints.height || hints.fontSize || '24px';
+    return React.createElement('span', {
+      key:           nk(),
+      className:     styles.blockClass(anim, 'circle'),
+      style:         { width: iconSz, height: iconSz, display: 'block', flexShrink: 0 },
+      'aria-hidden': 'true',
+    });
+  }
+
+  /* REPEAT — detected list pattern */
+  if (nt === N.REPEAT) {
+    var items = [];
+    for (var ri = 0; ri < node.count; ri++) {
+      items.push(React.createElement('div', { key: nk() }, renderNode(node.template, options)));
     }
-    return React.createElement(tag, { key: nk(), style: cStyle, className: 'ask-wrapper' }, children);
+    var repStyle = {};
+    if (hints.display) repStyle.display = hints.display;
+    if (hints.gap)     repStyle.gap     = hints.gap;
+    return React.createElement('div', { key: nk(), className: 'ask-wrap', style: repStyle }, items);
+  }
+
+  /* CARD */
+  if (nt === N.CARD || nt === N.CONTAINER) {
+    var kids = (node.children || []).map(function(c) { return renderNode(c, options); }).filter(Boolean);
+    var t    = node.tag || 'div';
+
+    // Empty container → show a single block
+    if (kids.length === 0) {
+      return React.createElement('span', {
+        key:           nk(),
+        className:     styles.blockClass(anim),
+        style:         sz({ width: '100%', height: '24px' }, hints),
+        'aria-hidden': 'true',
+      });
+    }
+
+    var cStyle = {};
+    if (hints.display)    cStyle.display       = hints.display;
+    if (hints.flexDir)    cStyle.flexDirection  = hints.flexDir;
+    if (hints.gap)        cStyle.gap            = hints.gap;
+    if (hints.padding)    cStyle.padding        = hints.padding;
+    if (hints.margin)     cStyle.margin         = hints.margin;
+    if (hints.alignItems) cStyle.alignItems     = hints.alignItems;
+
+    return React.createElement(t, {
+      key:       nk(),
+      className: 'ask-wrap',
+      style:     cStyle,
+    }, kids);
   }
 
   return null;
 }
 
-module.exports = { renderNode };
+module.exports = { renderNode, resetKeys };