hydroxide-dom - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/dev-cjs.js

@@ -1,2 +0,2 @@
-/* hydroxide-dom v0.6.0 */
+/* hydroxide-dom v0.7.0 */
 'use strict';
@@ -16,2 +16,19 @@
 
+function List(props) {
+  // @ts-expect-error
+  return {
+    $$list: props
+  };
+}
+
+function Indexed(props) {
+  // @ts-expect-error
+  return {
+    $$list: props,
+    indexed: true
+  };
+}
+
+List.Indexed = Indexed;
+
 function component(comp, props) {
@@ -37,3 +54,3 @@ {
 
-  if (props && comp !== hydroxide.List) {
+  if (props && comp !== List) {
     const [deps] = hydroxide.detect(() => {
@@ -66,2 +83,10 @@ for (const propName in props) {
 
+function ErrorBoundary(props) {
+  try {
+    return props.children;
+  } catch (error) {
+    return props.fallback || 'Error';
+  }
+}
+
 function bind(node, prop, updator) {
@@ -277,3 +302,3 @@ let state;
 
-function createListItem(value, listInfo) {
+function createListItem(value, listInfo, index) {
   const elContext = {
@@ -285,4 +310,10 @@ isConnected: true
   const reactiveValue = hydroxide.reactive(value);
-  const element = listInfo.props.children(reactiveValue);
+  let reactiveIndex;
 
+  if (listInfo.indexed) {
+    reactiveIndex = hydroxide.reactive(index);
+  }
+
+  const element = listInfo.props.as(reactiveValue, reactiveIndex);
+
   if (elContext.onConnect) {
@@ -293,3 +324,3 @@ elContext.onConnect.forEach(cb => cb());
   hydroxide.coreInfo.context = parentContext;
-  return {
+  const listItemInfo = {
     el: element,
@@ -299,2 +330,8 @@ value: reactiveValue,
   };
+
+  if (listInfo.indexed) {
+    listItemInfo.index = reactiveIndex;
+  }
+
+  return listItemInfo;
 }
@@ -305,2 +342,10 @@
 
+  if (listInfo.indexed) {
+    const dirtyIndexStart = index + values.length;
+
+    if (dirtyIndexStart < listInfo.dirtyIndexStart) {
+      listInfo.dirtyIndexStart = dirtyIndexStart;
+    }
+  }
+
   if (index > listLength) {
@@ -320,3 +365,3 @@ throw new Error(`Index out of bounds: Can not insert at index ${index} in a list of length ${listLength}`);
   for (let i = 0; i < values.length; i++) {
-    const listItem = createListItem(values[i], listInfo);
+    const listItem = createListItem(values[i], listInfo, index + i);
     listInfo.parent.insertBefore(listItem.el, target);
@@ -333,3 +378,3 @@ itemsToInsert[i] = listItem;
   for (let i = 0; i < values.length; i++) {
-    const listItem = createListItem(values[i], listInfo);
+    const listItem = createListItem(values[i], listInfo, len + i);
     listInfo.parent.appendChild(listItem.el);
@@ -533,2 +578,10 @@ listInfo.list[len + i] = listItem;
 
+  if (listInfo.indexed) {
+    const dirtyIndexStart = removeAt;
+
+    if (dirtyIndexStart < listInfo.dirtyIndexStart) {
+      listInfo.dirtyIndexStart = dirtyIndexStart;
+    }
+  }
+
   for (let i = removeAt; i < removeAt + count; i++) {
@@ -565,16 +618,16 @@ const listItem = listInfo.list[i];
 function swapInList(i, j, listInfo) {
-  const len = listInfo.list.length;
+  const list = listInfo.list;
+  const el1 = list[i].el;
+  const el2 = list[j].el;
+  const temp = list[i];
+  list[i] = list[j];
+  list[j] = temp;
+  el2.replaceWith(tempComment);
+  el1.replaceWith(el2);
+  tempComment.replaceWith(el1); // fix indexes
 
-  if ((i >= len || j >= len)) {
-    throw new Error(`Index out of bounds: Can not swap indexes ${i} ${j} in a list of length ${len}`);
+  if (listInfo.indexed) {
+    list[i].index.set(i);
+    list[j].index.set(j);
   }
-
-  const el1 = listInfo.list[i].el;
-  const el2 = listInfo.list[j].el;
-  const temp = listInfo.list[i];
-  listInfo.list[i] = listInfo.list[j];
-  listInfo.list[j] = temp;
-  el2.replaceWith(tempComment);
-  el1.replaceWith(el2);
-  tempComment.replaceWith(el1);
 }
@@ -647,3 +700,3 @@
 
-function $list(marker, listProps) {
+function $list(marker, listProps, indexed = false) {
   const parent = marker.parentElement;
@@ -657,2 +710,3 @@
   const listInfo = {
+    indexed: indexed,
     context: hydroxide.coreInfo.context,
@@ -665,2 +719,7 @@ props: listProps,
   };
+
+  if (indexed) {
+    listInfo.dirtyIndexStart = Infinity;
+  }
+
   const [deps, initArrValue] = hydroxide.detect(() => listProps.each);
@@ -735,3 +794,20 @@ listInfo.prevValue = initArrValue;
 
-    hydroxide.subscribe(reactiveArr, handleUpdate, hydroxide.LIST_PHASE);
+    hydroxide.subscribe(reactiveArr, handleUpdate, hydroxide.LIST_PHASE); // update indexes in render phase
+
+    if (indexed) {
+      hydroxide.subscribe(reactiveArr, () => {
+        if (listInfo.dirtyIndexStart !== Infinity) {
+          const start = listInfo.dirtyIndexStart;
+          const list = listInfo.list;
+          const len = list.length;
+
+          for (let i = start; i < len; i++) {
+            list[i].index.set(i);
+          } // reset
+
+
+          listInfo.dirtyIndexStart = Infinity;
+        }
+      }, hydroxide.RENDER_PHASE);
+    }
   }
@@ -801,3 +877,3 @@ }
   else if (expr && expr.$$list) {
-    return $list(marker, expr.$$list);
+    return $list(marker, expr.$$list, expr.indexed);
   } // branch
@@ -822,10 +898,2 @@ else if (expr && expr.$$branch) {
 
-function template(html) {
-  const template = document.createElement('template');
-  template.innerHTML = html;
-  return template.content.firstChild;
-}
-function svg(html) {
-  return template(`<svg>${html}</svg>`).firstChild;
-}
 function render(comp, target) {
@@ -850,4 +918,14 @@ // root context
   hydroxide.coreInfo.context = null;
+} // components
+function template(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.firstChild;
 }
+function svg(html) {
+  return template(`<svg>${html}</svg>`).firstChild;
+}
 
+exports.ErrorBoundary = ErrorBoundary;
+exports.List = List;
 exports.bind = bind;
@@ -854,0 +932,0 @@ exports.branch = branch;

dist/dev-esm.js

@@ -1,3 +0,3 @@
-/* hydroxide-dom v0.6.0 */
-import { List, detect, valueAt, effect, CONNECTION_PHASE, coreInfo, reactive, invalidate, subscribe, LIST_PHASE, RENDER_PHASE } from 'hydroxide';
+/* hydroxide-dom v0.7.0 */
+import { detect, valueAt, effect, CONNECTION_PHASE, coreInfo, reactive, invalidate, subscribe, LIST_PHASE, RENDER_PHASE } from 'hydroxide';
 
@@ -12,2 +12,19 @@ const devInfo = {
 
+function List(props) {
+  // @ts-expect-error
+  return {
+    $$list: props
+  };
+}
+
+function Indexed(props) {
+  // @ts-expect-error
+  return {
+    $$list: props,
+    indexed: true
+  };
+}
+
+List.Indexed = Indexed;
+
 function component(comp, props) {
@@ -61,2 +78,10 @@ {
 
+function ErrorBoundary(props) {
+  try {
+    return props.children;
+  } catch (error) {
+    return props.fallback || 'Error';
+  }
+}
+
 function bind(node, prop, updator) {
@@ -272,3 +297,3 @@ let state;
 
-function createListItem(value, listInfo) {
+function createListItem(value, listInfo, index) {
   const elContext = {
@@ -280,4 +305,10 @@ isConnected: true
   const reactiveValue = reactive(value);
-  const element = listInfo.props.children(reactiveValue);
+  let reactiveIndex;
 
+  if (listInfo.indexed) {
+    reactiveIndex = reactive(index);
+  }
+
+  const element = listInfo.props.as(reactiveValue, reactiveIndex);
+
   if (elContext.onConnect) {
@@ -288,3 +319,3 @@ elContext.onConnect.forEach(cb => cb());
   coreInfo.context = parentContext;
-  return {
+  const listItemInfo = {
     el: element,
@@ -294,2 +325,8 @@ value: reactiveValue,
   };
+
+  if (listInfo.indexed) {
+    listItemInfo.index = reactiveIndex;
+  }
+
+  return listItemInfo;
 }
@@ -300,2 +337,10 @@
 
+  if (listInfo.indexed) {
+    const dirtyIndexStart = index + values.length;
+
+    if (dirtyIndexStart < listInfo.dirtyIndexStart) {
+      listInfo.dirtyIndexStart = dirtyIndexStart;
+    }
+  }
+
   if (index > listLength) {
@@ -315,3 +360,3 @@ throw new Error(`Index out of bounds: Can not insert at index ${index} in a list of length ${listLength}`);
   for (let i = 0; i < values.length; i++) {
-    const listItem = createListItem(values[i], listInfo);
+    const listItem = createListItem(values[i], listInfo, index + i);
     listInfo.parent.insertBefore(listItem.el, target);
@@ -328,3 +373,3 @@ itemsToInsert[i] = listItem;
   for (let i = 0; i < values.length; i++) {
-    const listItem = createListItem(values[i], listInfo);
+    const listItem = createListItem(values[i], listInfo, len + i);
     listInfo.parent.appendChild(listItem.el);
@@ -528,2 +573,10 @@ listInfo.list[len + i] = listItem;
 
+  if (listInfo.indexed) {
+    const dirtyIndexStart = removeAt;
+
+    if (dirtyIndexStart < listInfo.dirtyIndexStart) {
+      listInfo.dirtyIndexStart = dirtyIndexStart;
+    }
+  }
+
   for (let i = removeAt; i < removeAt + count; i++) {
@@ -560,16 +613,16 @@ const listItem = listInfo.list[i];
 function swapInList(i, j, listInfo) {
-  const len = listInfo.list.length;
+  const list = listInfo.list;
+  const el1 = list[i].el;
+  const el2 = list[j].el;
+  const temp = list[i];
+  list[i] = list[j];
+  list[j] = temp;
+  el2.replaceWith(tempComment);
+  el1.replaceWith(el2);
+  tempComment.replaceWith(el1); // fix indexes
 
-  if ((i >= len || j >= len)) {
-    throw new Error(`Index out of bounds: Can not swap indexes ${i} ${j} in a list of length ${len}`);
+  if (listInfo.indexed) {
+    list[i].index.set(i);
+    list[j].index.set(j);
   }
-
-  const el1 = listInfo.list[i].el;
-  const el2 = listInfo.list[j].el;
-  const temp = listInfo.list[i];
-  listInfo.list[i] = listInfo.list[j];
-  listInfo.list[j] = temp;
-  el2.replaceWith(tempComment);
-  el1.replaceWith(el2);
-  tempComment.replaceWith(el1);
 }
@@ -642,3 +695,3 @@
 
-function $list(marker, listProps) {
+function $list(marker, listProps, indexed = false) {
   const parent = marker.parentElement;
@@ -652,2 +705,3 @@
   const listInfo = {
+    indexed: indexed,
     context: coreInfo.context,
@@ -660,2 +714,7 @@ props: listProps,
   };
+
+  if (indexed) {
+    listInfo.dirtyIndexStart = Infinity;
+  }
+
   const [deps, initArrValue] = detect(() => listProps.each);
@@ -730,3 +789,20 @@ listInfo.prevValue = initArrValue;
 
-    subscribe(reactiveArr, handleUpdate, LIST_PHASE);
+    subscribe(reactiveArr, handleUpdate, LIST_PHASE); // update indexes in render phase
+
+    if (indexed) {
+      subscribe(reactiveArr, () => {
+        if (listInfo.dirtyIndexStart !== Infinity) {
+          const start = listInfo.dirtyIndexStart;
+          const list = listInfo.list;
+          const len = list.length;
+
+          for (let i = start; i < len; i++) {
+            list[i].index.set(i);
+          } // reset
+
+
+          listInfo.dirtyIndexStart = Infinity;
+        }
+      }, RENDER_PHASE);
+    }
   }
@@ -796,3 +872,3 @@ }
   else if (expr && expr.$$list) {
-    return $list(marker, expr.$$list);
+    return $list(marker, expr.$$list, expr.indexed);
   } // branch
@@ -817,10 +893,2 @@ else if (expr && expr.$$branch) {
 
-function template(html) {
-  const template = document.createElement('template');
-  template.innerHTML = html;
-  return template.content.firstChild;
-}
-function svg(html) {
-  return template(`<svg>${html}</svg>`).firstChild;
-}
 function render(comp, target) {
@@ -845,4 +913,12 @@ // root context
   coreInfo.context = null;
+} // components
+function template(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  return template.content.firstChild;
 }
+function svg(html) {
+  return template(`<svg>${html}</svg>`).firstChild;
+}
 
-export { bind, branch, component, delegateEvents, insert, render, setAttribute, svg, template };
+export { ErrorBoundary, List, bind, branch, component, delegateEvents, insert, render, setAttribute, svg, template };

dist/prod-cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("hydroxide");function t(t,n){const o=t(n||{});if(n&&t!==e.List){const[t]=e.detect((()=>{for(const e in n)n[e]}));t.size&&t.forEach((e=>{e.mutable=!1}))}return o}const n=new Set;function o(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get:()=>n||document});null!==n;){const o=n[t];if(o&&!n.disabled&&(Array.isArray(o)?o[0](o[1],e):o(e),e.cancelBubble))return;n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function c(t,n){const o={isConnected:!0},c=e.coreInfo.context;e.coreInfo.context=o;const r=e.reactive(t),s=n.props.children(r);return o.onConnect&&o.onConnect.forEach((e=>e())),e.coreInfo.context=c,{el:s,value:r,context:o}}function r(e,t,n){const o=n.list.length;if(e===o||0===o)return function(e,t){const n=t.list.length;for(let o=0;o<e.length;o++){const r=c(e[o],t);t.parent.appendChild(r.el),t.list[n+o]=r}}(t,n);const r=new Array(t.length),s=n.list[e].el;for(let e=0;e<t.length;e++){const o=c(t[e],n);n.parent.insertBefore(o.el,s),r[e]=o}n.list.splice(e,0,...r)}function s(e,t,n){if(t!==n.list.length){for(let o=e;o<e+t;o++){const e=n.list[o];e.context.onDisconnect&&e.context.onDisconnect.forEach((e=>e())),e.el.remove()}n.list.splice(e,t)}else i(n)}function i(e){const t=e.list.length;for(let n=0;n<t;n++){const t=e.list[n].context;t.onDisconnect&&t.onDisconnect.forEach((e=>e()))}e.list=[],e.parent.textContent=""}const l=document.createComment("");function a(e,t,n){n.list.length;const o=n.list[e].el,c=n.list[t].el,r=n.list[e];n.list[e]=n.list[t],n.list[t]=r,c.replaceWith(l),o.replaceWith(c),l.replaceWith(o)}function f(e){const t=e.currentValue,n=function(e,t){const n=[];if(0===e.length)return n.push({indexes:[0,t.length-1],insertAt:0}),n;if(0===t.length)return n.push({clear:!0}),n;let o,c=e.length-1,r=t.length-1,s=0,i=0,l=0;for(;s<=c||i<=r;){if(s>c){n.push({insertAt:i,indexes:i===r?[i]:[i,r]});break}if(i>r){s<=c&&(n.push({removeAt:s-l,count:c-s+1}),l++);break}if(e[s]===t[i])s++,i++;else if(e[c]===t[r])c--,r--;else if(e[s]===t[r]&&t[i]===e[c])n.push({swap:[s,c]}),s++,i++,c--,r--;else if(s+1<=c&&e[s]===t[i+1]&&e[s+1]===t[i])n.push({swap:[s,s+1]}),s+=2,i+=2;else if(s+1<=c&&e[c]===t[r-1]&&e[c-1]===t[r])n.push({swap:[c,c-1]}),c-=2,r-=2;else{if(!o){o=new Map;for(let e=i;e<=r;e++)o.set(t[e],e)}if(o.has(e[s])){const t=o.get(e[s]);if(i<=t&&t<=r){let a=1;for(let n=s+1;n<=c&&n<=r&&o.get(e[n])===t+a;n++)a++;if(t-i<a){const e=t-1;n.push({indexes:i===e?[i]:[i,e],insertAt:i}),i=t}else n.push({replace:[s-l,i]}),i++,s++}else s++}else{const e=n[n.length-1];n.length>0&&"removeAt"in e&&e.removeAt+e.count===s?e.count++:n.push({removeAt:s-l,count:1}),l++,s++}}}return n}(e.prevValue,t);for(let o=0;o<n.length;o++){const c=n[o];if("removeAt"in c)s(c.removeAt,c.count,e);else if("insertAt"in c){const[n,o=n]=c.indexes,s=[];for(let e=n;e<=o;e++)s.push(t[e]);r(c.insertAt,s,e)}else if("swap"in c){const[t,n]=c.swap;a(t,n,e)}else if("replace"in c){const[t,n]=c.replace,o=e.list[t].value,r=e.currentValue[n];o.set(r)}else"clear"in c&&i(e)}}function u(t,n){const o=t.parentElement;t.remove();const c={context:e.coreInfo.context,props:n,parent:o,prevValue:[],currentValue:[],list:[]},[l,u]=e.detect((()=>n.each));if(c.prevValue=u,r(0,u,c),0===l.size)return;let p,h=!0;if(1===l.size){p=l.values().next().value;h=p()!==u,h&&(p.mutable=!1)}if(h){function d(){c.currentValue=n.each,f(c),c.prevValue=c.currentValue}e.subscribe(p,d,e.CONNECTION_PHASE)}else{const b=(t,o,l)=>{switch(c.currentValue=n.each,t){case"insert":r(o,l,c);break;case"remove":s(o,l,c);break;case"swap":a(o,l,c);break;case"clear":i(c);break;case"set":!function(t,n,o){if(t&&t.length>1){const c=o.list[t[0]].value;if(c.mutable){let o=c.value;const r=t.length-1;for(let e=1;e<r;e++)o=o[t[e]];o[r]=n,e.invalidate(c)}else c(t.slice(1)).set(n)}else f(o)}(o,l,c)}c.prevValue=c.currentValue};e.subscribe(p,b,e.LIST_PHASE)}}function p(e){const t=document.createElement("template");return t.innerHTML=e,t.content.firstChild}exports.bind=function(t,n,o){let c,r;"reactive"in o?(c=o.reactive,r=o.path):c=o;const s=typeof(r?e.valueAt(c.value,r):c.value);t.$$input=e=>{let t=e.target[n];"number"===s&&(t=Number(t)),o.set(t)},e.effect((()=>{t[n]=r?e.valueAt(c(),r):c()}))},exports.branch=function(...t){let n,o,c;const r=[],s=[];function i(e,t){o?(o.onDisconnect&&o.onDisconnect.forEach((e=>e())),c.replaceWith(t)):n.replaceWith(t),o=e,c=t,e.onConnect&&e.onConnect.forEach((e=>e()))}function l(){let l=-1;for(let e=0;e<t.length;e++)if(t[e][0]()){l=e;break}e.coreInfo.detectorEnabled=!1,-1===l?o&&c&&(o.onDisconnect&&o.onDisconnect.forEach((e=>e())),c.replaceWith(n),o=void 0,c=void 0):function(n){if(!o||o!==r[n])if(r[n])i(r[n],s[n]);else{const o=e.coreInfo.context;e.coreInfo.context=r[n]={isConnected:!0},s[n]=t[n][1](),e.coreInfo.context=o,i(r[n],s[n])}}(l)}return{$$branch:t=>{n=t,e.effect(l,e.CONNECTION_PHASE)}}},exports.component=t,exports.delegateEvents=function(e){for(let t=0,c=e.length;t<c;t++){const c=e[t];n.has(c)||(n.add(c),document.addEventListener(c,o))}},exports.insert=function t(n,o){if(o instanceof Node)n.replaceWith(o);else if("function"==typeof o){const[c,r]=e.detect(o);if(c.size){const s=document.createTextNode(r+"");function i(){const e=o();s.textContent=e}e.coreInfo.context,s.textContent=r,c.forEach((t=>{e.subscribe(t,i,e.RENDER_PHASE)})),n.replaceWith(s)}else"object"==typeof r?t(n,r):n.replaceWith(r+"")}else if(Array.isArray(o))o.forEach((t=>{if("function"==typeof t){const[o,c]=e.detect(t);if(c instanceof Node)n.before(c);else if(o.size){const r=document.createTextNode(c+"");function s(){r.textContent=t()}o.forEach((t=>{e.subscribe(t,s,e.RENDER_PHASE)}))}}else n.before(t)})),n.remove();else{if(o&&o.$$list)return u(n,o.$$list);if(o&&o.$$branch)return o.$$branch(n);{const l=document.createTextNode(o+"");n.replaceWith(l)}}},exports.render=function(n,o){e.coreInfo.context={isConnected:!0};const c=t(n);o.appendChild(c),e.coreInfo.context.onConnect&&e.coreInfo.context.onConnect.forEach((e=>e())),e.coreInfo.context=null},exports.setAttribute=function(e,t,n){n?e.setAttribute(t,n):e.removeAttribute(t)},exports.svg=function(e){return p(`<svg>${e}</svg>`).firstChild},exports.template=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("hydroxide");function t(e){return{$$list:e}}function n(n,o){const r=n(o||{});if(o&&n!==t){const[t]=e.detect((()=>{for(const e in o)o[e]}));t.size&&t.forEach((e=>{e.mutable=!1}))}return r}t.Indexed=function(e){return{$$list:e,indexed:!0}};const o=new Set;function r(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get:()=>n||document});null!==n;){const o=n[t];if(o&&!n.disabled&&(Array.isArray(o)?o[0](o[1],e):o(e),e.cancelBubble))return;n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function c(t,n,o){const r={isConnected:!0},c=e.coreInfo.context;e.coreInfo.context=r;const s=e.reactive(t);let i;n.indexed&&(i=e.reactive(o));const l=n.props.as(s,i);r.onConnect&&r.onConnect.forEach((e=>e())),e.coreInfo.context=c;const a={el:l,value:s,context:r};return n.indexed&&(a.index=i),a}function s(e,t,n){const o=n.list.length;if(n.indexed){const o=e+t.length;o<n.dirtyIndexStart&&(n.dirtyIndexStart=o)}if(e===o||0===o)return function(e,t){const n=t.list.length;for(let o=0;o<e.length;o++){const r=c(e[o],t,n+o);t.parent.appendChild(r.el),t.list[n+o]=r}}(t,n);const r=new Array(t.length),s=n.list[e].el;for(let o=0;o<t.length;o++){const i=c(t[o],n,e+o);n.parent.insertBefore(i.el,s),r[o]=i}n.list.splice(e,0,...r)}function i(e,t,n){if(t!==n.list.length){if(n.indexed){const t=e;t<n.dirtyIndexStart&&(n.dirtyIndexStart=t)}for(let o=e;o<e+t;o++){const e=n.list[o];e.context.onDisconnect&&e.context.onDisconnect.forEach((e=>e())),e.el.remove()}n.list.splice(e,t)}else l(n)}function l(e){const t=e.list.length;for(let n=0;n<t;n++){const t=e.list[n].context;t.onDisconnect&&t.onDisconnect.forEach((e=>e()))}e.list=[],e.parent.textContent=""}const a=document.createComment("");function f(e,t,n){const o=n.list,r=o[e].el,c=o[t].el,s=o[e];o[e]=o[t],o[t]=s,c.replaceWith(a),r.replaceWith(c),a.replaceWith(r),n.indexed&&(o[e].index.set(e),o[t].index.set(t))}function u(e){const t=e.currentValue,n=function(e,t){const n=[];if(0===e.length)return n.push({indexes:[0,t.length-1],insertAt:0}),n;if(0===t.length)return n.push({clear:!0}),n;let o,r=e.length-1,c=t.length-1,s=0,i=0,l=0;for(;s<=r||i<=c;){if(s>r){n.push({insertAt:i,indexes:i===c?[i]:[i,c]});break}if(i>c){s<=r&&(n.push({removeAt:s-l,count:r-s+1}),l++);break}if(e[s]===t[i])s++,i++;else if(e[r]===t[c])r--,c--;else if(e[s]===t[c]&&t[i]===e[r])n.push({swap:[s,r]}),s++,i++,r--,c--;else if(s+1<=r&&e[s]===t[i+1]&&e[s+1]===t[i])n.push({swap:[s,s+1]}),s+=2,i+=2;else if(s+1<=r&&e[r]===t[c-1]&&e[r-1]===t[c])n.push({swap:[r,r-1]}),r-=2,c-=2;else{if(!o){o=new Map;for(let e=i;e<=c;e++)o.set(t[e],e)}if(o.has(e[s])){const t=o.get(e[s]);if(i<=t&&t<=c){let a=1;for(let n=s+1;n<=r&&n<=c&&o.get(e[n])===t+a;n++)a++;if(t-i<a){const e=t-1;n.push({indexes:i===e?[i]:[i,e],insertAt:i}),i=t}else n.push({replace:[s-l,i]}),i++,s++}else s++}else{const e=n[n.length-1];n.length>0&&"removeAt"in e&&e.removeAt+e.count===s?e.count++:n.push({removeAt:s-l,count:1}),l++,s++}}}return n}(e.prevValue,t);for(let o=0;o<n.length;o++){const r=n[o];if("removeAt"in r)i(r.removeAt,r.count,e);else if("insertAt"in r){const[n,o=n]=r.indexes,c=[];for(let e=n;e<=o;e++)c.push(t[e]);s(r.insertAt,c,e)}else if("swap"in r){const[t,n]=r.swap;f(t,n,e)}else if("replace"in r){const[t,n]=r.replace,o=e.list[t].value,c=e.currentValue[n];o.set(c)}else"clear"in r&&l(e)}}function d(t,n,o=!1){const r=t.parentElement;t.remove();const c={indexed:o,context:e.coreInfo.context,props:n,parent:r,prevValue:[],currentValue:[],list:[]};o&&(c.dirtyIndexStart=1/0);const[a,d]=e.detect((()=>n.each));if(c.prevValue=d,s(0,d,c),0===a.size)return;let p,h=!0;if(1===a.size){p=a.values().next().value;h=p()!==d,h&&(p.mutable=!1)}if(h){function x(){c.currentValue=n.each,u(c),c.prevValue=c.currentValue}e.subscribe(p,x,e.CONNECTION_PHASE)}else{const b=(t,o,r)=>{switch(c.currentValue=n.each,t){case"insert":s(o,r,c);break;case"remove":i(o,r,c);break;case"swap":f(o,r,c);break;case"clear":l(c);break;case"set":!function(t,n,o){if(t&&t.length>1){const r=o.list[t[0]].value;if(r.mutable){let o=r.value;const c=t.length-1;for(let e=1;e<c;e++)o=o[t[e]];o[c]=n,e.invalidate(r)}else r(t.slice(1)).set(n)}else u(o)}(o,r,c)}c.prevValue=c.currentValue};e.subscribe(p,b,e.LIST_PHASE),o&&e.subscribe(p,(()=>{if(c.dirtyIndexStart!==1/0){const e=c.dirtyIndexStart,t=c.list,n=t.length;for(let o=e;o<n;o++)t[o].index.set(o);c.dirtyIndexStart=1/0}}),e.RENDER_PHASE)}}function p(e){const t=document.createElement("template");return t.innerHTML=e,t.content.firstChild}exports.ErrorBoundary=function(e){try{return e.children}catch(t){return e.fallback||"Error"}},exports.List=t,exports.bind=function(t,n,o){let r,c;"reactive"in o?(r=o.reactive,c=o.path):r=o;const s=typeof(c?e.valueAt(r.value,c):r.value);t.$$input=e=>{let t=e.target[n];"number"===s&&(t=Number(t)),o.set(t)},e.effect((()=>{t[n]=c?e.valueAt(r(),c):r()}))},exports.branch=function(...t){let n,o,r;const c=[],s=[];function i(e,t){o?(o.onDisconnect&&o.onDisconnect.forEach((e=>e())),r.replaceWith(t)):n.replaceWith(t),o=e,r=t,e.onConnect&&e.onConnect.forEach((e=>e()))}function l(){let l=-1;for(let e=0;e<t.length;e++)if(t[e][0]()){l=e;break}e.coreInfo.detectorEnabled=!1,-1===l?o&&r&&(o.onDisconnect&&o.onDisconnect.forEach((e=>e())),r.replaceWith(n),o=void 0,r=void 0):function(n){if(!o||o!==c[n])if(c[n])i(c[n],s[n]);else{const o=e.coreInfo.context;e.coreInfo.context=c[n]={isConnected:!0},s[n]=t[n][1](),e.coreInfo.context=o,i(c[n],s[n])}}(l)}return{$$branch:t=>{n=t,e.effect(l,e.CONNECTION_PHASE)}}},exports.component=n,exports.delegateEvents=function(e){for(let t=0,n=e.length;t<n;t++){const n=e[t];o.has(n)||(o.add(n),document.addEventListener(n,r))}},exports.insert=function t(n,o){if(o instanceof Node)n.replaceWith(o);else if("function"==typeof o){const[r,c]=e.detect(o);if(r.size){const s=document.createTextNode(c+"");function i(){const e=o();s.textContent=e}e.coreInfo.context,s.textContent=c,r.forEach((t=>{e.subscribe(t,i,e.RENDER_PHASE)})),n.replaceWith(s)}else"object"==typeof c?t(n,c):n.replaceWith(c+"")}else if(Array.isArray(o))o.forEach((t=>{if("function"==typeof t){const[o,r]=e.detect(t);if(r instanceof Node)n.before(r);else if(o.size){const c=document.createTextNode(r+"");function s(){c.textContent=t()}o.forEach((t=>{e.subscribe(t,s,e.RENDER_PHASE)}))}}else n.before(t)})),n.remove();else{if(o&&o.$$list)return d(n,o.$$list,o.indexed);if(o&&o.$$branch)return o.$$branch(n);{const l=document.createTextNode(o+"");n.replaceWith(l)}}},exports.render=function(t,o){e.coreInfo.context={isConnected:!0};const r=n(t);o.appendChild(r),e.coreInfo.context.onConnect&&e.coreInfo.context.onConnect.forEach((e=>e())),e.coreInfo.context=null},exports.setAttribute=function(e,t,n){n?e.setAttribute(t,n):e.removeAttribute(t)},exports.svg=function(e){return p(`<svg>${e}</svg>`).firstChild},exports.template=p;

dist/prod-esm.js

@@ -1,1 +0,1 @@
-import{List as e,detect as t,valueAt as n,effect as o,CONNECTION_PHASE as c,coreInfo as s,reactive as r,invalidate as i,subscribe as l,LIST_PHASE as a,RENDER_PHASE as f}from"hydroxide";function u(n,o){const c=n(o||{});if(o&&n!==e){const[e]=t((()=>{for(const e in o)o[e]}));e.size&&e.forEach((e=>{e.mutable=!1}))}return c}function h(e,t,c){let s,r;"reactive"in c?(s=c.reactive,r=c.path):s=c;const i=typeof(r?n(s.value,r):s.value);e.$$input=e=>{let n=e.target[t];"number"===i&&(n=Number(n)),c.set(n)},o((()=>{e[t]=r?n(s(),r):s()}))}function p(...e){let t,n,r;const i=[],l=[];function a(e,o){n?(n.onDisconnect&&n.onDisconnect.forEach((e=>e())),r.replaceWith(o)):t.replaceWith(o),n=e,r=o,e.onConnect&&e.onConnect.forEach((e=>e()))}function f(){let o=-1;for(let t=0;t<e.length;t++)if(e[t][0]()){o=t;break}s.detectorEnabled=!1,-1===o?n&&r&&(n.onDisconnect&&n.onDisconnect.forEach((e=>e())),r.replaceWith(t),n=void 0,r=void 0):function(t){if(!n||n!==i[t])if(i[t])a(i[t],l[t]);else{const n=s.context;s.context=i[t]={isConnected:!0},l[t]=e[t][1](),s.context=n,a(i[t],l[t])}}(o)}return{$$branch:e=>{t=e,o(f,c)}}}const d=new Set;function g(e){for(let t=0,n=e.length;t<n;t++){const n=e[t];d.has(n)||(d.add(n),document.addEventListener(n,m))}}function m(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get:()=>n||document});null!==n;){const o=n[t];if(o&&!n.disabled&&(Array.isArray(o)?o[0](o[1],e):o(e),e.cancelBubble))return;n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function v(e,t){const n={isConnected:!0},o=s.context;s.context=n;const c=r(e),i=t.props.children(c);return n.onConnect&&n.onConnect.forEach((e=>e())),s.context=o,{el:i,value:c,context:n}}function x(e,t,n){const o=n.list.length;if(e===o||0===o)return function(e,t){const n=t.list.length;for(let o=0;o<e.length;o++){const c=v(e[o],t);t.parent.appendChild(c.el),t.list[n+o]=c}}(t,n);const c=new Array(t.length),s=n.list[e].el;for(let e=0;e<t.length;e++){const o=v(t[e],n);n.parent.insertBefore(o.el,s),c[e]=o}n.list.splice(e,0,...c)}function b(e,t,n){if(t!==n.list.length){for(let o=e;o<e+t;o++){const e=n.list[o];e.context.onDisconnect&&e.context.onDisconnect.forEach((e=>e())),e.el.remove()}n.list.splice(e,t)}else A(n)}function A(e){const t=e.list.length;for(let n=0;n<t;n++){const t=e.list[n].context;t.onDisconnect&&t.onDisconnect.forEach((e=>e()))}e.list=[],e.parent.textContent=""}const C=document.createComment("");function $(e,t,n){n.list.length;const o=n.list[e].el,c=n.list[t].el,s=n.list[e];n.list[e]=n.list[t],n.list[t]=s,c.replaceWith(C),o.replaceWith(c),C.replaceWith(o)}function E(e){const t=e.currentValue,n=function(e,t){const n=[];if(0===e.length)return n.push({indexes:[0,t.length-1],insertAt:0}),n;if(0===t.length)return n.push({clear:!0}),n;let o,c=e.length-1,s=t.length-1,r=0,i=0,l=0;for(;r<=c||i<=s;){if(r>c){n.push({insertAt:i,indexes:i===s?[i]:[i,s]});break}if(i>s){r<=c&&(n.push({removeAt:r-l,count:c-r+1}),l++);break}if(e[r]===t[i])r++,i++;else if(e[c]===t[s])c--,s--;else if(e[r]===t[s]&&t[i]===e[c])n.push({swap:[r,c]}),r++,i++,c--,s--;else if(r+1<=c&&e[r]===t[i+1]&&e[r+1]===t[i])n.push({swap:[r,r+1]}),r+=2,i+=2;else if(r+1<=c&&e[c]===t[s-1]&&e[c-1]===t[s])n.push({swap:[c,c-1]}),c-=2,s-=2;else{if(!o){o=new Map;for(let e=i;e<=s;e++)o.set(t[e],e)}if(o.has(e[r])){const t=o.get(e[r]);if(i<=t&&t<=s){let a=1;for(let n=r+1;n<=c&&n<=s&&o.get(e[n])===t+a;n++)a++;if(t-i<a){const e=t-1;n.push({indexes:i===e?[i]:[i,e],insertAt:i}),i=t}else n.push({replace:[r-l,i]}),i++,r++}else r++}else{const e=n[n.length-1];n.length>0&&"removeAt"in e&&e.removeAt+e.count===r?e.count++:n.push({removeAt:r-l,count:1}),l++,r++}}}return n}(e.prevValue,t);for(let o=0;o<n.length;o++){const c=n[o];if("removeAt"in c)b(c.removeAt,c.count,e);else if("insertAt"in c){const[n,o=n]=c.indexes,s=[];for(let e=n;e<=o;e++)s.push(t[e]);x(c.insertAt,s,e)}else if("swap"in c){const[t,n]=c.swap;$(t,n,e)}else if("replace"in c){const[t,n]=c.replace,o=e.list[t].value,s=e.currentValue[n];o.set(s)}else"clear"in c&&A(e)}}function y(e,n){const o=e.parentElement;e.remove();const r={context:s.context,props:n,parent:o,prevValue:[],currentValue:[],list:[]},[f,u]=t((()=>n.each));if(r.prevValue=u,x(0,u,r),0===f.size)return;let h,p=!0;if(1===f.size){h=f.values().next().value;p=h()!==u,p&&(h.mutable=!1)}if(p){l(h,(function(){r.currentValue=n.each,E(r),r.prevValue=r.currentValue}),c)}else{const e=(e,t,o)=>{switch(r.currentValue=n.each,e){case"insert":x(t,o,r);break;case"remove":b(t,o,r);break;case"swap":$(t,o,r);break;case"clear":A(r);break;case"set":!function(e,t,n){if(e&&e.length>1){const o=n.list[e[0]].value;if(o.mutable){let n=o.value;const c=e.length-1;for(let t=1;t<c;t++)n=n[e[t]];n[c]=t,i(o)}else o(e.slice(1)).set(t)}else E(n)}(t,o,r)}r.prevValue=r.currentValue};l(h,e,a)}}function V(e,n){if(n instanceof Node)e.replaceWith(n);else if("function"==typeof n){const[c,r]=t(n);if(c.size){const i=document.createTextNode(r+"");function o(){const e=n();i.textContent=e}s.context,i.textContent=r,c.forEach((e=>{l(e,o,f)})),e.replaceWith(i)}else"object"==typeof r?V(e,r):e.replaceWith(r+"")}else if(Array.isArray(n))n.forEach((n=>{if("function"==typeof n){const[c,s]=t(n);if(s instanceof Node)e.before(s);else if(c.size){const r=document.createTextNode(s+"");function o(){r.textContent=n()}c.forEach((e=>{l(e,o,f)}))}}else e.before(n)})),e.remove();else{if(n&&n.$$list)return y(e,n.$$list);if(n&&n.$$branch)return n.$$branch(e);{const a=document.createTextNode(n+"");e.replaceWith(a)}}}function w(e,t,n){n?e.setAttribute(t,n):e.removeAttribute(t)}function W(e){const t=document.createElement("template");return t.innerHTML=e,t.content.firstChild}function D(e){return W(`<svg>${e}</svg>`).firstChild}function N(e,t){s.context={isConnected:!0};const n=u(e);t.appendChild(n),s.context.onConnect&&s.context.onConnect.forEach((e=>e())),s.context=null}export{h as bind,p as branch,u as component,g as delegateEvents,V as insert,N as render,w as setAttribute,D as svg,W as template};
+import{detect as e,valueAt as t,effect as n,CONNECTION_PHASE as o,coreInfo as c,reactive as r,invalidate as i,subscribe as s,LIST_PHASE as l,RENDER_PHASE as a}from"hydroxide";function f(e){return{$$list:e}}function u(t,n){const o=t(n||{});if(n&&t!==f){const[t]=e((()=>{for(const e in n)n[e]}));t.size&&t.forEach((e=>{e.mutable=!1}))}return o}function d(e){try{return e.children}catch(t){return e.fallback||"Error"}}function h(e,o,c){let r,i;"reactive"in c?(r=c.reactive,i=c.path):r=c;const s=typeof(i?t(r.value,i):r.value);e.$$input=e=>{let t=e.target[o];"number"===s&&(t=Number(t)),c.set(t)},n((()=>{e[o]=i?t(r(),i):r()}))}function p(...e){let t,r,i;const s=[],l=[];function a(e,n){r?(r.onDisconnect&&r.onDisconnect.forEach((e=>e())),i.replaceWith(n)):t.replaceWith(n),r=e,i=n,e.onConnect&&e.onConnect.forEach((e=>e()))}function f(){let n=-1;for(let t=0;t<e.length;t++)if(e[t][0]()){n=t;break}c.detectorEnabled=!1,-1===n?r&&i&&(r.onDisconnect&&r.onDisconnect.forEach((e=>e())),i.replaceWith(t),r=void 0,i=void 0):function(t){if(!r||r!==s[t])if(s[t])a(s[t],l[t]);else{const n=c.context;c.context=s[t]={isConnected:!0},l[t]=e[t][1](),c.context=n,a(s[t],l[t])}}(n)}return{$$branch:e=>{t=e,n(f,o)}}}f.Indexed=function(e){return{$$list:e,indexed:!0}};const x=new Set;function g(e){for(let t=0,n=e.length;t<n;t++){const n=e[t];x.has(n)||(x.add(n),document.addEventListener(n,m))}}function m(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get:()=>n||document});null!==n;){const o=n[t];if(o&&!n.disabled&&(Array.isArray(o)?o[0](o[1],e):o(e),e.cancelBubble))return;n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function v(e,t,n){const o={isConnected:!0},i=c.context;c.context=o;const s=r(e);let l;t.indexed&&(l=r(n));const a=t.props.as(s,l);o.onConnect&&o.onConnect.forEach((e=>e())),c.context=i;const f={el:a,value:s,context:o};return t.indexed&&(f.index=l),f}function b(e,t,n){const o=n.list.length;if(n.indexed){const o=e+t.length;o<n.dirtyIndexStart&&(n.dirtyIndexStart=o)}if(e===o||0===o)return function(e,t){const n=t.list.length;for(let o=0;o<e.length;o++){const c=v(e[o],t,n+o);t.parent.appendChild(c.el),t.list[n+o]=c}}(t,n);const c=new Array(t.length),r=n.list[e].el;for(let o=0;o<t.length;o++){const i=v(t[o],n,e+o);n.parent.insertBefore(i.el,r),c[o]=i}n.list.splice(e,0,...c)}function y(e,t,n){if(t!==n.list.length){if(n.indexed){const t=e;t<n.dirtyIndexStart&&(n.dirtyIndexStart=t)}for(let o=e;o<e+t;o++){const e=n.list[o];e.context.onDisconnect&&e.context.onDisconnect.forEach((e=>e())),e.el.remove()}n.list.splice(e,t)}else $(n)}function $(e){const t=e.list.length;for(let n=0;n<t;n++){const t=e.list[n].context;t.onDisconnect&&t.onDisconnect.forEach((e=>e()))}e.list=[],e.parent.textContent=""}const A=document.createComment("");function C(e,t,n){const o=n.list,c=o[e].el,r=o[t].el,i=o[e];o[e]=o[t],o[t]=i,r.replaceWith(A),c.replaceWith(r),A.replaceWith(c),n.indexed&&(o[e].index.set(e),o[t].index.set(t))}function E(e){const t=e.currentValue,n=function(e,t){const n=[];if(0===e.length)return n.push({indexes:[0,t.length-1],insertAt:0}),n;if(0===t.length)return n.push({clear:!0}),n;let o,c=e.length-1,r=t.length-1,i=0,s=0,l=0;for(;i<=c||s<=r;){if(i>c){n.push({insertAt:s,indexes:s===r?[s]:[s,r]});break}if(s>r){i<=c&&(n.push({removeAt:i-l,count:c-i+1}),l++);break}if(e[i]===t[s])i++,s++;else if(e[c]===t[r])c--,r--;else if(e[i]===t[r]&&t[s]===e[c])n.push({swap:[i,c]}),i++,s++,c--,r--;else if(i+1<=c&&e[i]===t[s+1]&&e[i+1]===t[s])n.push({swap:[i,i+1]}),i+=2,s+=2;else if(i+1<=c&&e[c]===t[r-1]&&e[c-1]===t[r])n.push({swap:[c,c-1]}),c-=2,r-=2;else{if(!o){o=new Map;for(let e=s;e<=r;e++)o.set(t[e],e)}if(o.has(e[i])){const t=o.get(e[i]);if(s<=t&&t<=r){let a=1;for(let n=i+1;n<=c&&n<=r&&o.get(e[n])===t+a;n++)a++;if(t-s<a){const e=t-1;n.push({indexes:s===e?[s]:[s,e],insertAt:s}),s=t}else n.push({replace:[i-l,s]}),s++,i++}else i++}else{const e=n[n.length-1];n.length>0&&"removeAt"in e&&e.removeAt+e.count===i?e.count++:n.push({removeAt:i-l,count:1}),l++,i++}}}return n}(e.prevValue,t);for(let o=0;o<n.length;o++){const c=n[o];if("removeAt"in c)y(c.removeAt,c.count,e);else if("insertAt"in c){const[n,o=n]=c.indexes,r=[];for(let e=n;e<=o;e++)r.push(t[e]);b(c.insertAt,r,e)}else if("swap"in c){const[t,n]=c.swap;C(t,n,e)}else if("replace"in c){const[t,n]=c.replace,o=e.list[t].value,r=e.currentValue[n];o.set(r)}else"clear"in c&&$(e)}}function V(t,n,r=!1){const f=t.parentElement;t.remove();const u={indexed:r,context:c.context,props:n,parent:f,prevValue:[],currentValue:[],list:[]};r&&(u.dirtyIndexStart=1/0);const[d,h]=e((()=>n.each));if(u.prevValue=h,b(0,h,u),0===d.size)return;let p,x=!0;if(1===d.size){p=d.values().next().value;x=p()!==h,x&&(p.mutable=!1)}if(x){s(p,(function(){u.currentValue=n.each,E(u),u.prevValue=u.currentValue}),o)}else{const e=(e,t,o)=>{switch(u.currentValue=n.each,e){case"insert":b(t,o,u);break;case"remove":y(t,o,u);break;case"swap":C(t,o,u);break;case"clear":$(u);break;case"set":!function(e,t,n){if(e&&e.length>1){const o=n.list[e[0]].value;if(o.mutable){let n=o.value;const c=e.length-1;for(let t=1;t<c;t++)n=n[e[t]];n[c]=t,i(o)}else o(e.slice(1)).set(t)}else E(n)}(t,o,u)}u.prevValue=u.currentValue};s(p,e,l),r&&s(p,(()=>{if(u.dirtyIndexStart!==1/0){const e=u.dirtyIndexStart,t=u.list,n=t.length;for(let o=e;o<n;o++)t[o].index.set(o);u.dirtyIndexStart=1/0}}),a)}}function w(t,n){if(n instanceof Node)t.replaceWith(n);else if("function"==typeof n){const[r,i]=e(n);if(r.size){const l=document.createTextNode(i+"");function o(){const e=n();l.textContent=e}c.context,l.textContent=i,r.forEach((e=>{s(e,o,a)})),t.replaceWith(l)}else"object"==typeof i?w(t,i):t.replaceWith(i+"")}else if(Array.isArray(n))n.forEach((n=>{if("function"==typeof n){const[c,r]=e(n);if(r instanceof Node)t.before(r);else if(c.size){const i=document.createTextNode(r+"");function o(){i.textContent=n()}c.forEach((e=>{s(e,o,a)}))}}else t.before(n)})),t.remove();else{if(n&&n.$$list)return V(t,n.$$list,n.indexed);if(n&&n.$$branch)return n.$$branch(t);{const f=document.createTextNode(n+"");t.replaceWith(f)}}}function W(e,t,n){n?e.setAttribute(t,n):e.removeAttribute(t)}function I(e,t){c.context={isConnected:!0};const n=u(e);t.appendChild(n),c.context.onConnect&&c.context.onConnect.forEach((e=>e())),c.context=null}function S(e){const t=document.createElement("template");return t.innerHTML=e,t.content.firstChild}function k(e){return S(`<svg>${e}</svg>`).firstChild}export{d as ErrorBoundary,f as List,h as bind,p as branch,u as component,g as delegateEvents,w as insert,I as render,W as setAttribute,k as svg,S as template};

dist/types/hydrate/list/createElement.d.ts

 import { ListInfo, ListItem } from '../../types';
-export declare function createListItem<T>(value: T, listInfo: ListInfo<T>): ListItem<T>;
+export declare function createListItem<T>(value: T, listInfo: ListInfo<T>, index: number): ListItem<T>;

dist/types/hydrate/list/renderList.d.ts

@@ -1,2 +0,2 @@
-import { ListProps } from 'hydroxide';
-export declare function $list<T>(marker: Comment, listProps: ListProps<T>): void;
+import { ListProps } from '../../types';
+export declare function $list<T>(marker: Comment, listProps: ListProps<T>, indexed?: boolean): void;

dist/types/index.d.ts

 import { Component } from './types';
+export declare function render(comp: Component<any>, target: HTMLElement): void;
+export { List } from './components/List';
+export { ErrorBoundary } from './components/ErrorBoundary';
 export { bind } from './hydrate/bind';
@@ -10,2 +13,1 @@ export { branch } from './hydrate/branch';
 export declare function svg(html: string): HTMLElement;
-export declare function render(comp: Component<any>, target: HTMLElement): void;

dist/types/types.d.ts

@@ -1,2 +0,2 @@
-import { Context, ListProps, Reactive } from 'hydroxide';
+import { Context, ReadonlyReactive, Reactive } from 'hydroxide';
 import { JSX } from 'hydroxide-jsx';
@@ -13,2 +13,3 @@ export declare type CompData = [
 export declare type ListItem<T> = {
+    index?: Reactive<number>;
     context: Context;
@@ -19,5 +20,7 @@ el: HTMLElement;
 export declare type ListInfo<T> = {
+    indexed: boolean;
+    dirtyIndexStart?: number;
     list: ListItem<T>[];
     context: Context | null;
-    props: ListProps<T>;
+    props: ListProps<T> | IndexedListProps<T>;
     parent: HTMLElement;
@@ -27,1 +30,11 @@ prevValue: T[];
 };
+export declare type ListProps<T> = {
+    each: Array<T>;
+    as: (item: ReadonlyReactive<T>) => JSX.Element;
+    recycle?: boolean;
+};
+export declare type IndexedListProps<T> = {
+    each: Array<T>;
+    as: (item: ReadonlyReactive<T>, index: ReadonlyReactive<number>) => JSX.Element;
+    recycle?: boolean;
+};

package.json

 {
   "name": "hydroxide-dom",
   "description": "Client side renderer for Hydroxide Framework",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Manan Tank",
@@ -41,5 +41,5 @@ "license": "MIT",
     "clean": "rimraf dist",
-    "build:types": "tsc --project tsconfig.json  --emitDeclarationOnly",
+    "build:types": "tsc --project ./tsconfig-types.json  --emitDeclarationOnly",
     "build": "npm run clean && rollup -c && npm run build:types",
-    "ts-check": "tsc --noEmit --project tsconfig.json",
+    "ts-check": "tsc --noEmit --project ./tsconfig-types.json",
     "test": "jest",
@@ -49,7 +49,7 @@ "prepublishOnly": "npm run build"
   "dependencies": {
-    "hydroxide": "^0.6.0",
+    "hydroxide": "^0.7.0",
     "hydroxide-jsx": "^0.3.0"
   },
   "peerDependencies": {
-    "babel-plugin-hydroxide": "^1.2.1"
+    "babel-plugin-hydroxide": "^1.2.2"
   },
@@ -66,3 +66,3 @@ "devDependencies": {
     "babel-jest": "^28.1.1",
-    "babel-plugin-hydroxide": "^1.2.1",
+    "babel-plugin-hydroxide": "^1.2.2",
     "jest": "^27.4.5",
@@ -69,0 +69,0 @@ "rimraf": "^3.0.2",

No alert changes

Improved metrics

Total package byte prevSize

69461

increased by8.22%

Number of package files

26

increased by8.33%

Lines of code

1701

increased by9.81%

Dependency changes

• + Addedhydroxide@0.7.0(transitive)

• Updatedhydroxide@^0.7.0