auto-loading-skeleton 1.0.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-loading-skeleton",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Automatically generate loading skeleton UIs from your existing React components — no manual skeleton screens needed.",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/AutoSkeleton.js

@@ -0,0 +1,117 @@
+'use strict';
+
+/**
+ * AutoSkeleton.js — V2
+ *
+ * Improvements over V1:
+ *  - Reads defaults from SkeletonContext (SkeletonProvider)
+ *  - Memoized descriptor via cache.js
+ *  - fadeIn prop smoothly transitions real content in after loading
+ *  - theme preset + themeOverrides merged into CSS vars
+ *  - aria-live="polite" so screen readers announce content arrival
+ *  - count renders siblings separated by gap (configurable)
+ *  - renderSkeleton render prop for full manual override
+ *  - onLoaded callback fired when loading transitions false
+ *  - SSR safe (injectStyles is no-op on server)
+ */
+
+var React           = require('react');
+var analyzeElement  = require('./analyzer').analyzeElement;
+var renderNode      = require('./renderer').renderNode;
+var resetKeys       = require('./renderer').resetKeys;
+var injectStyles    = require('./styles').injectStyles;
+var buildThemeStyle = require('./styles').buildThemeStyle;
+var cache           = require('./cache');
+var ctx             = require('./context');
+
+function AutoSkeleton(props) {
+  var loading         = props.loading;
+  var children        = props.children;
+  var className       = props.className       || '';
+  var style           = props.style           || {};
+  var count           = props.count           || 1;
+  var gap             = props.gap             || '16px';
+  var ariaLabel       = props.ariaLabel       || 'Loading…';
+  var onLoaded        = props.onLoaded;
+  var renderSkeleton  = props.renderSkeleton;  // render prop override
+
+  // Read context
+  var context         = React.useContext(ctx.SkeletonContext);
+  var animation       = props.animation       || context.animation;
+  var theme           = props.theme           || context.theme;
+  var themeOverrides  = props.themeOverrides  || context.themeOverrides;
+  var fadeIn          = props.fadeIn          != null ? props.fadeIn : context.fadeIn;
+  var maxDepth        = props.maxDepth        != null ? props.maxDepth : context.maxDepth;
+  var detectRepeats   = props.detectRepeats   != null ? props.detectRepeats : context.detectRepeats;
+
+  // Inject base CSS once
+  React.useEffect(function() { injectStyles(); }, []);
+  if (typeof document !== 'undefined') injectStyles();
+
+  // Fire onLoaded when loading transitions to false
+  var prevLoading = React.useRef(loading);
+  React.useEffect(function() {
+    if (prevLoading.current === true && loading === false && typeof onLoaded === 'function') {
+      onLoaded();
+    }
+    prevLoading.current = loading;
+  }, [loading]);
+
+  // Build theme CSS vars
+  var themeStyle = buildThemeStyle(theme, themeOverrides);
+  var wrapStyle  = Object.assign({}, style, themeStyle);
+
+  if (!loading) {
+    // Render real children with optional fade-in animation
+    return React.createElement('div', {
+      'data-ask':   '',
+      className:    'ask-wrap' + (className ? ' ' + className : '') + (fadeIn ? ' ask-fade-in' : ''),
+      style:        wrapStyle,
+      'aria-live':  'polite',
+      'aria-busy':  'false',
+    }, children);
+  }
+
+  // Use render prop if provided
+  if (typeof renderSkeleton === 'function') {
+    return React.createElement('div', {
+      'data-ask':   '',
+      className:    'ask-wrap' + (className ? ' ' + className : ''),
+      style:        wrapStyle,
+      'aria-busy':  'true',
+      'aria-label': ariaLabel,
+    }, renderSkeleton({ animation: animation }));
+  }
+
+  // Analyze + render skeleton
+  var descriptor = cache.get(children);
+  if (!descriptor) {
+    descriptor = analyzeElement(children, 0, { maxDepth: maxDepth, detectRepeats: detectRepeats });
+    cache.set(children, descriptor);
+  }
+
+  resetKeys();
+  var skeletonEl = renderNode(descriptor, { animation: animation });
+
+  // Render count copies
+  var items = [];
+  for (var i = 0; i < Math.max(1, count); i++) {
+    items.push(React.createElement('div', {
+      key:   'ask-item-' + i,
+      style: i < count - 1 ? { marginBottom: gap } : {},
+    }, skeletonEl));
+  }
+
+  return React.createElement('div', {
+    'data-ask':   '',
+    className:    'ask-wrap' + (className ? ' ' + className : ''),
+    style:        wrapStyle,
+    'aria-busy':  'true',
+    'aria-label': ariaLabel,
+    role:         'status',
+  }, items);
+}
+
+AutoSkeleton.displayName = 'AutoSkeleton';
+
+module.exports = AutoSkeleton;

package/src/analyzer.js

@@ -1,113 +1,336 @@
-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 };
+'use strict';
+
+/**
+ * analyzer.js — V2
+ *
+ * Improvements over V1:
+ *  - Depth-limited recursion with configurable maxDepth
+ *  - ARIA role awareness (role="img", role="button", etc.)
+ *  - Smart width inference from text content length & element type
+ *  - Detects flex/grid containers and replicates their direction
+ *  - Detects repeat patterns (lists of similar children) for count-based skeletons
+ *  - Extracts computed className hints (card, title, subtitle, badge, tag, chip…)
+ *  - Inline style extraction: width, height, borderRadius, display, flexDirection, gap, padding, margin, aspectRatio
+ *  - Handles React.Fragment and arrays
+ *  - Skips purely decorative elements (aria-hidden, role="presentation")
+ *  - Detects video/audio/iframe as media placeholders
+ *  - Result memoization keyed on element type + props shape
+ */
+
+const NODE = {
+  TEXT:       'text',
+  HEADING:    'heading',
+  IMAGE:      'image',
+  AVATAR:     'avatar',
+  MEDIA:      'media',        // video / audio / iframe
+  BUTTON:     'button',
+  INPUT:      'input',
+  TEXTAREA:   'textarea',
+  SELECT:     'select',
+  BADGE:      'badge',
+  ICON:       'icon',
+  CARD:       'card',
+  CONTAINER:  'container',
+  REPEAT:     'repeat',       // detected list pattern
+  SKIP:       'skip',         // decorative / aria-hidden
+};
+
+/* ── helpers ── */
+
+function tag(el) {
+  return typeof el.type === 'string' ? el.type.toLowerCase() : null;
+}
+
+function cls(el) {
+  return ((el.props && el.props.className) || '').toLowerCase();
+}
+
+function role(el) {
+  return ((el.props && el.props.role) || '').toLowerCase();
+}
+
+function aria(el, key) {
+  return el.props && el.props[key];
+}
+
+function styleOf(el) {
+  return (el.props && el.props.style) || {};
+}
+
+function isDecorativeEl(el) {
+  if (!el || typeof el !== 'object') return false;
+  return aria(el, 'aria-hidden') === true ||
+    aria(el, 'aria-hidden') === 'true' ||
+    role(el) === 'presentation' ||
+    role(el) === 'none';
+}
+
+function extractStyle(el) {
+  const s = styleOf(el);
+  return {
+    width:        s.width        || null,
+    height:       s.height       || null,
+    borderRadius: s.borderRadius || null,
+    display:      s.display      || null,
+    flexDir:      s.flexDirection|| null,
+    gap:          s.gap          || null,
+    padding:      s.padding      || s.p || null,
+    margin:       s.margin       || s.m || null,
+    aspectRatio:  s.aspectRatio  || null,
+    maxWidth:     s.maxWidth     || null,
+    minHeight:    s.minHeight    || null,
+    alignItems:   s.alignItems   || null,
+    fontSize:     s.fontSize     || null,
+    fontWeight:   s.fontWeight   || null,
+  };
+}
+
+const CLASS_PATTERNS = {
+  avatar:   /\b(avatar|profile[-_]?pic|user[-_]?img|user[-_]?photo|pfp)\b/,
+  badge:    /\b(badge|chip|tag|label|pill|status[-_]?dot)\b/,
+  icon:     /\b(icon|ico|svg[-_]?icon|material[-_]?icon|fa[-_]|bi[-_]|ri[-_]|heroicon)\b/,
+  heading:  /\b(heading|title|headline|h[1-6]|display[-_]?(text|title))\b/,
+  card:     /\b(card|panel|tile|widget|box[-_]?container)\b/,
+  button:   /\b(btn|button)\b/,
+  input:    /\b(input|field|text[-_]?box|form[-_]?control)\b/,
+  media:    /\b(media|video|player|thumbnail|cover[-_]?img|hero[-_]?img|banner)\b/,
+  list:     /\b(list|feed|grid|gallery|results)\b/,
+};
+
+function matchesClass(el, key) {
+  return CLASS_PATTERNS[key] && CLASS_PATTERNS[key].test(cls(el));
+}
+
+/* ── text content extraction ── */
+function getTextContent(children) {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(c => getTextContent(c && c.props ? c.props.children : c)).join('');
+  }
+  return '';
+}
+
+function isTextLeaf(el) {
+  const c = el.props && el.props.children;
+  if (typeof c === 'string' || typeof c === 'number') return true;
+  if (Array.isArray(c)) return c.every(x => typeof x === 'string' || typeof x === 'number' || x == null);
+  return false;
+}
+
+/* ── list/repeat pattern detection ── */
+function detectRepeat(children) {
+  if (!Array.isArray(children) || children.length < 2) return null;
+  const real = children.filter(c => c && typeof c === 'object');
+  if (real.length < 2) return null;
+
+  // Check if all children share the same element type
+  const firstType = real[0].type;
+  const allSame = real.every(c => c.type === firstType);
+  if (allSame && real.length >= 2) {
+    return { count: real.length, template: real[0] };
+  }
+
+  // Check if all children share the same className prefix
+  const firstCls = cls(real[0]).split(' ')[0];
+  if (firstCls && real.every(c => cls(c).startsWith(firstCls))) {
+    return { count: real.length, template: real[0] };
+  }
+
+  return null;
+}
+
+/* ── main analyzer ── */
+function analyzeElement(element, depth, opts) {
+  depth = depth || 0;
+  opts  = opts  || {};
+  var maxDepth = opts.maxDepth != null ? opts.maxDepth : 8;
+
+  if (element === null || element === undefined) return null;
+  if (typeof element === 'boolean') return null;
+
+  // String / number node
+  if (typeof element === 'string' || typeof element === 'number') {
+    var str = String(element).trim();
+    if (!str) return null;
+    return {
+      nodeType: NODE.TEXT,
+      content:  str,
+      width:    estimateTextWidth(str),
+      depth:    depth,
+    };
+  }
+
+  // Array / Fragment
+  if (Array.isArray(element)) {
+    var results = [];
+    element.forEach(function(el) {
+      var r = analyzeElement(el, depth, opts);
+      if (Array.isArray(r)) results = results.concat(r);
+      else if (r) results.push(r);
+    });
+    return results.length === 1 ? results[0] : results;
+  }
+
+  // React.Fragment
+  if (element.type && (element.type === Symbol.for('react.fragment') || element.type.toString() === 'Symbol(react.fragment)')) {
+    return analyzeElement(element.props && element.props.children, depth, opts);
+  }
+
+  // Non-DOM component (function/class) — analyse its children if present
+  if (typeof element.type === 'function') {
+    var fc = element.props && element.props.children;
+    if (fc) return analyzeElement(fc, depth, opts);
+    // treat as opaque container
+    return { nodeType: NODE.CONTAINER, children: [], styleHints: {}, tag: 'div', depth: depth };
+  }
+
+  // Skip decorative
+  if (isDecorativeEl(element)) {
+    return { nodeType: NODE.SKIP, depth: depth };
+  }
+
+  var t       = tag(element);
+  var c       = cls(element);
+  var r       = role(element);
+  var sHints  = extractStyle(element);
+  var props   = element.props || {};
+
+  // ── specific tag classification ──
+
+  if (t === 'img') {
+    var isAvatar = matchesClass(element, 'avatar') ||
+      /avatar|profile|pfp/i.test(props.alt || '') ||
+      (sHints.width && sHints.height && sHints.width === sHints.height && sHints.borderRadius);
+    return {
+      nodeType:   isAvatar ? NODE.AVATAR : NODE.IMAGE,
+      styleHints: sHints,
+      alt:        props.alt || '',
+      depth:      depth,
+    };
+  }
+
+  if (t === 'video' || t === 'audio' || t === 'iframe') {
+    return { nodeType: NODE.MEDIA, styleHints: sHints, depth: depth };
+  }
+
+  if (t === 'svg' || r === 'img' && !sHints.width) {
+    return { nodeType: NODE.ICON, styleHints: sHints, depth: depth };
+  }
+
+  if (t === 'button' || r === 'button' || matchesClass(element, 'button')) {
+    return {
+      nodeType:   NODE.BUTTON,
+      label:      typeof props.children === 'string' ? props.children : '',
+      styleHints: sHints,
+      depth:      depth,
+    };
+  }
+
+  if (t === 'input') {
+    var inputType = (props.type || 'text').toLowerCase();
+    if (inputType === 'checkbox' || inputType === 'radio') {
+      return { nodeType: NODE.ICON, styleHints: { width: '18px', height: '18px' }, depth: depth };
+    }
+    return { nodeType: NODE.INPUT, inputType: inputType, styleHints: sHints, depth: depth };
+  }
+
+  if (t === 'textarea') return { nodeType: NODE.TEXTAREA, styleHints: sHints, depth: depth };
+  if (t === 'select')   return { nodeType: NODE.SELECT,   styleHints: sHints, depth: depth };
+
+  // Heading tags
+  if (/^h[1-6]$/.test(t || '') || matchesClass(element, 'heading')) {
+    if (isTextLeaf(element)) {
+      var hContent = getTextContent(props.children);
+      return {
+        nodeType:   NODE.HEADING,
+        level:      t ? parseInt(t[1]) : 2,
+        content:    hContent,
+        width:      estimateTextWidth(hContent) || '60%',
+        styleHints: sHints,
+        depth:      depth,
+      };
+    }
+  }
+
+  // Class-based inference
+  if (matchesClass(element, 'avatar')) {
+    return { nodeType: NODE.AVATAR, styleHints: sHints, depth: depth };
+  }
+  if (matchesClass(element, 'badge')) {
+    return { nodeType: NODE.BADGE, styleHints: sHints, depth: depth };
+  }
+  if (matchesClass(element, 'icon')) {
+    return { nodeType: NODE.ICON, styleHints: sHints, depth: depth };
+  }
+  if (matchesClass(element, 'media')) {
+    return { nodeType: NODE.IMAGE, styleHints: sHints, depth: depth };
+  }
+
+  // Text leaf inside any tag
+  if (isTextLeaf(element)) {
+    var content  = getTextContent(props.children);
+    var isHead   = matchesClass(element, 'heading') || /^h[1-6]$/.test(t || '');
+    var isBadge  = matchesClass(element, 'badge');
+    if (isBadge) return { nodeType: NODE.BADGE, content: content, styleHints: sHints, depth: depth };
+    return {
+      nodeType:   isHead ? NODE.HEADING : NODE.TEXT,
+      content:    content,
+      width:      sHints.width || estimateTextWidth(content),
+      styleHints: sHints,
+      depth:      depth,
+    };
+  }
+
+  // Depth limit — treat as opaque block
+  if (depth >= maxDepth) {
+    return { nodeType: NODE.CONTAINER, children: [], styleHints: sHints, tag: t || 'div', depth: depth };
+  }
+
+  // ── Container: recurse ──
+  var rawChildren = props.children;
+  var childArr    = rawChildren == null ? [] : (Array.isArray(rawChildren) ? rawChildren : [rawChildren]);
+
+  // Detect repeat pattern
+  var repeat = opts.detectRepeats !== false ? detectRepeat(childArr) : null;
+  if (repeat && depth > 0) {
+    return {
+      nodeType:  NODE.REPEAT,
+      count:     repeat.count,
+      template:  analyzeElement(repeat.template, depth + 1, opts),
+      styleHints: sHints,
+      depth:     depth,
+    };
+  }
+
+  var children = [];
+  childArr.forEach(function(child) {
+    var res = analyzeElement(child, depth + 1, opts);
+    if (Array.isArray(res)) { res.forEach(function(r2) { if (r2 && r2.nodeType !== NODE.SKIP) children.push(r2); }); }
+    else if (res && res.nodeType !== NODE.SKIP) children.push(res);
+  });
+
+  // Card heuristic: contains image + text children
+  var isCard = matchesClass(element, 'card') || t === 'article' || t === 'section';
+
+  return {
+    nodeType:   isCard ? NODE.CARD : NODE.CONTAINER,
+    tag:        t || 'div',
+    styleHints: sHints,
+    children:   children,
+    depth:      depth,
+  };
+}
+
+/* ── text width estimation ── */
+function estimateTextWidth(text) {
+  if (!text) return '80%';
+  var len = text.length;
+  if (len <= 10)  return Math.min(100, Math.max(20, len * 7)) + 'px';
+  if (len <= 30)  return Math.min(90, 30 + len) + '%';
+  if (len <= 80)  return '90%';
+  return '100%';
+}
+
+module.exports = { analyzeElement, NODE, estimateTextWidth };

package/src/cache.js

@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * cache.js — V2
+ *
+ * LRU-style descriptor cache so repeated renders of the same component
+ * tree skip the recursive analyzeElement walk.
+ *
+ * Key: shallow fingerprint of the React element (type + prop keys + child count)
+ * Value: the analyzed descriptor
+ * Capacity: 32 entries (configurable)
+ */
+
+var MAX = 32;
+var _cache = new Map();
+
+function fingerprint(element) {
+  if (!element || typeof element !== 'object') return String(element);
+  var t = typeof element.type === 'string' ? element.type : (element.type && element.type.displayName) || '?';
+  var p = element.props ? Object.keys(element.props).sort().join(',') : '';
+  var c = element.props && element.props.children;
+  var cl = Array.isArray(c) ? c.length : (c ? 1 : 0);
+  return t + '|' + p + '|' + cl;
+}
+
+function get(element) {
+  var key = fingerprint(element);
+  if (!_cache.has(key)) return null;
+  // LRU: move to end
+  var val = _cache.get(key);
+  _cache.delete(key);
+  _cache.set(key, val);
+  return val;
+}
+
+function set(element, descriptor) {
+  var key = fingerprint(element);
+  if (_cache.size >= MAX) {
+    // evict oldest entry
+    _cache.delete(_cache.keys().next().value);
+  }
+  _cache.set(key, descriptor);
+}
+
+function clear() { _cache.clear(); }
+
+module.exports = { get, set, clear, fingerprint };

package/src/context.js

@@ -0,0 +1,38 @@
+'use strict';
+
+/**
+ * context.js — V2
+ *
+ * SkeletonProvider lets you set default animation, theme, and options
+ * globally so every <AutoSkeleton> in the tree inherits them without
+ * passing props repeatedly.
+ */
+
+var React = require('react');
+
+var DEFAULT_CTX = {
+  animation:      'shimmer',
+  theme:          'default',
+  themeOverrides: {},
+  fadeIn:         true,
+  maxDepth:       8,
+  detectRepeats:  true,
+};
+
+var SkeletonContext = React.createContext(DEFAULT_CTX);
+
+function SkeletonProvider(props) {
+  var value = Object.assign({}, DEFAULT_CTX, {
+    animation:      props.animation      || DEFAULT_CTX.animation,
+    theme:          props.theme          || DEFAULT_CTX.theme,
+    themeOverrides: props.themeOverrides || DEFAULT_CTX.themeOverrides,
+    fadeIn:         props.fadeIn         != null ? props.fadeIn : DEFAULT_CTX.fadeIn,
+    maxDepth:       props.maxDepth       != null ? props.maxDepth : DEFAULT_CTX.maxDepth,
+    detectRepeats:  props.detectRepeats  != null ? props.detectRepeats : DEFAULT_CTX.detectRepeats,
+  });
+  return React.createElement(SkeletonContext.Provider, { value: value }, props.children);
+}
+
+SkeletonProvider.displayName = 'SkeletonProvider';
+
+module.exports = { SkeletonContext, SkeletonProvider, DEFAULT_CTX };