/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};

;// CONCATENATED MODULE: ./node_modules/fre/dist/fre.js
const e={},n=(n,t,o)=>{n=n||e,t=t||e,Object.keys(n).forEach(e=>o(e,n[e],t[e])),Object.keys(t).forEach(e=>!n.hasOwnProperty(e)&&o(e,void 0,t[e]))},t=(e,t,o)=>{n(t,o,(t,o,r)=>{o===r||"children"===t||("style"!==t||X(r)?"o"===t[0]&&"n"===t[1]?(t=t.slice(2).toLowerCase(),o&&e.removeEventListener(t,o),e.addEventListener(t,r)):!(t in e)||e instanceof SVGElement?null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,r):e[t]=r||"":n(o,r,(n,o,r)=>{o!==r&&(e[t][n]=r||"")}))})};let o=0;const r=e=>l(null,e),l=(e,n)=>{const[t,r]=d(o++);return[0===t.length?t[0]=n:t[0],n=>{t[0]=e?e(t[0],n):W(n)?n(t[0]):n,x(r)}]},s=(e,n)=>a(e,n,"effect"),i=(e,n)=>a(e,n,"layout"),a=(e,n,t)=>{const[r,l]=d(o++);c(r[1],n)&&(r[0]=e,r[1]=n,l.hooks[t].push(r))},f=(e,n)=>{const t=d(o++)[0];return c(t[1],n)?(t[1]=n,t[0]=e()):t[0]},p=(e,n)=>f(()=>e,n),u=e=>f(()=>({current:e}),[]),d=e=>{const n=U(),t=n.hooks||(n.hooks={list:[],effect:[],layout:[]});return e>=t.list.length&&t.list.push([]),[t.list[e],n]},c=(e,n)=>!e||e.length!==n.length||n.some((n,t)=>!Object.is(n,e[t])),h=[];let y=0;const k=e=>{h.push(e)&&m()},g=e=>{if(!e&&"undefined"!=typeof Promise)return()=>Promise.resolve().then(v);if("undefined"!=typeof MessageChannel){const{port1:e,port2:n}=new MessageChannel;return e.onmessage=v,()=>n.postMessage(null)}return()=>setTimeout(v)};let m=g(!1);const v=()=>{let e,n;for(y=b()+5;(e=h.pop())&&!E();)(n=e())&&h.push(n)&&k(n)},E=()=>{const e=b()>=y;return m=g(e),e},b=()=>performance.now(),w=e=>{2&e.lane&&t(e.node,e.oldProps||{},e.props),4&e.lane&&e.parentNode.insertBefore(e.node,e.after),C(e.ref,e.node)},C=(e,n)=>{e&&(W(e)?e(n):e.current=n)},N=e=>{e.forEach(e=>{e.kids&&N(e.kids),C(e.ref,null)})},A=e=>{e.isComp?(8&e.lane&&e.hooks&&e.hooks.list.forEach(e=>e[2]&&e[2]()),e.kids.forEach(A)):(N(e.kids),e.parentNode.removeChild(e.node),C(e.ref,null))};let P,L=null,O=null,j=null,M={};const T=(e,n,t)=>{t&&(M=t),x({node:n,props:{children:e}})},x=e=>{!e||32&e.lane||(e.lane=34,k(()=>(O=j=e,S(e))))},S=e=>{for(;e&&!E();)e=V(e);return e?S.bind(null,e):(L&&((e=>{let n=e,t=n.e;e.e=null;do{w(t)}while(t=t.e);for(;n=n.d;)A(n);e.d=null})(L),L=null,M.done&&M.done()),null)},V=e=>{if(e.isComp=W(e.type),e.isComp?B(e):G(e),e.child)return e.child;for(;e;){if(_(e),!L&&32&e.lane)return L=e,e.lane&=-33,null;if(e.sibling)return e.sibling;e=e.parent}},_=e=>{e.isComp?e.hooks&&(K(e.hooks.layout),k(()=>K(e.hooks.effect))):(O.e=e,O=e)},B=e=>{o=0,P=e;let n=e.type(e.props);D(e,q(n))},G=e=>{e.parentNode=z(e)||{},e.node||("svg"===e.type&&(e.lane|=16),e.node=(e=>{const n=""===e.type?document.createTextNode(""):16&e.lane?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type);return t(n,{},e.props),n})(e)),e.after=e.parentNode.prev,e.parentNode.prev=e.node,e.node.prev=null,D(e,e.props.children)},q=e=>X(e)?ee(e):e,z=e=>{for(;e=e.parent;)if(!e.isComp)return e.node},D=(e,n)=>{let t=e.kids||[],o=e.kids=J(n),r=0,l=0,s=t.length-1,i=o.length-1;for(;r<=s&&l<=i&&I(t[s],o[i]);)H(t[s--],o[i],2,e,i--);for(;r<=s&&l<=i&&I(t[r],o[l]);)o[l].lane|=64,r++,l++;if(r>s)for(;l<=i;){let n=o[i];n.lane=4,F(n,e,i--)}else if(l>i)for(;r<=s;){let e=t[s--];e.lane=8,j.d=e,j=e}else{let n={},a=[];for(let e=l;e<=i;e++)n[o[e].key||".1"]=e,a[e]=-1;for(let e=r;e<=s;e++){let o=n[t[e].key||"."+e];if(null!=o)a[o]=e;else{let n=t[e];n.lane=8,j.d=n,j=n}}let f=Q(a,l),p=f.length-1;for(;l<=i;){let n=o[i];i===f[p]?(H(t[a[i]],n,2,e,i--),p--):-1===a[i]?(n.lane=4,F(n,e,i--)):H(t[a[i]],n,4,e,i--)}}for(;l-- >0;)H(t[l],o[l],2,e,l)};function F(e,n,t){e.parent=n,16&n.lane&&(e.lane|=16),n.isComp&&4&n.lane&&(e.lane|=4),t===n.kids.length-1?n.child=e:n._prev.sibling=e,n._prev=e}function H(e,n,t,o,r){I(e,n)&&(n.hooks=e.hooks,n.ref=e.ref,n.node=e.node,n.oldProps=e.props),n.kids=e.kids,n.lane=t,F(n,o,r)}const I=(e,n)=>e&&n&&e.key===n.key&&e.type===n.type,J=e=>e?te(e)?e:[e]:[],K=e=>{e.forEach(e=>e[2]&&e[2]()),e.forEach(e=>e[2]=e[0]()),e.length=0},Q=(e,n)=>{let t=[],o=[],r=-1,l=new Array(e.length);for(var s=n,i=e.length;s<i;s++){let n=e[s];if(n<0)continue;let i=R(t,n);-1!==i&&(l[s]=o[i]),i===r?(r++,t[r]=n,o[r]=s):n<t[i+1]&&(t[i+1]=n,o[i+1]=s)}for(s=o[r];r>=0;s=l[s],r--)t[r]=s;return t},R=(e,n)=>{let t=-1,o=e.length;if(o>0&&e[o-1]<=n)return o-1;for(;o-t>1;){let r=t+o>>1;e[r]>n?o=r:t=r}return t},U=()=>P||null,W=e=>"function"==typeof e,X=e=>"number"==typeof e||"string"==typeof e,Y=(e,n,...t)=>{(t=Z(J((n=n||{}).children||t))).length&&(n.children=1===t.length?t[0]:t);const o=n.key||null,r=n.ref||null;return o&&(n.key=void 0),r&&(n.ref=void 0),$(e,n,o,r)},Z=(e,n=[])=>(e.forEach(e=>{var t;te(e)?Z(e,n):null!=(t=e)&&!0!==t&&!1!==t&&n.push(X(e)?ee(e):e)}),n),$=(e,n,t,o)=>({type:e,props:n,key:t,ref:o}),ee=e=>({type:"",props:{nodeValue:e+""}});function ne(e){return e.children}const te=Array.isArray;
//# sourceMappingURL=fre.js.map

;// CONCATENATED MODULE: ./src/main.jsx


function random(max) {
  return Math.round(Math.random() * 1000) % max;
}

const main_A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
const main_C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
const main_N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
let nextId = 1;

function buildData(count) {
  const data = new Array(count);

  for (let i = 0; i < count; i++) {
    data[i] = {
      id: nextId++,
      label: `${main_A[random(main_A.length)]} ${main_C[random(main_C.length)]} ${main_N[random(main_N.length)]}`
    };
  }

  return data;
}

function listReducer(state, action) {
  const {
    data,
    selected
  } = state;

  switch (action.type) {
    case "RUN":
      return {
        data: buildData(1000),
        selected: 0
      };

    case "RUN_LOTS":
      return {
        data: buildData(10000),
        selected: 0
      };

    case "ADD":
      return {
        data: data.concat(buildData(1000)),
        selected
      };

    case "UPDATE":
      const newData = data.slice(0);

      for (let i = 0; i < newData.length; i += 10) {
        const r = newData[i];
        newData[i] = {
          id: r.id,
          label: r.label + " !!!"
        };
      }

      return {
        data: newData,
        selected
      };

    case "CLEAR":
      return {
        data: [],
        selected: 0
      };

    case "SWAP_ROWS":
      return data.length > 998 ? {
        data: [data[0], data[998], ...data.slice(2, 998), data[1], data[999]]
      } : state;

    case "REMOVE":
      const idx = data.findIndex(d => d.id === action.id);
      return {
        data: [...data.slice(0, idx), ...data.slice(idx + 1)],
        selected
      };

    case "SELECT":
      return {
        data,
        selected: action.id
      };
  }

  return state;
}

const Row = ({
  selected,
  item,
  dispatch
}) => {
  return Y("tr", {
    className: selected ? "danger" : ""
  }, Y("td", {
    className: "col-md-1"
  }, item.id), Y("td", {
    className: "col-md-4"
  }, Y("a", {
    onClick: () => dispatch({
      type: 'SELECT',
      id: item.id
    })
  }, item.label)), Y("td", {
    className: "col-md-1"
  }, Y("a", {
    onClick: () => dispatch({
      type: 'REMOVE',
      id: item.id
    })
  }, Y("span", {
    className: "glyphicon glyphicon-remove",
    "aria-hidden": "true"
  }))), Y("td", {
    className: "col-md-6"
  }));
};

const Button = ({
  id,
  cb,
  title
}) => Y("div", {
  className: "col-sm-6 smallpad"
}, Y("button", {
  type: "button",
  className: "btn btn-primary btn-block",
  id: id,
  onClick: cb
}, title));

const Jumbotron = ({
  dispatch
}) => Y("div", {
  className: "jumbotron"
}, Y("div", {
  className: "row"
}, Y("div", {
  className: "col-md-6"
}, Y("h1", null, "Fre Hooks keyed")), Y("div", {
  className: "col-md-6"
}, Y("div", {
  className: "row"
}, Y(Button, {
  id: "run",
  title: "Create 1,000 rows",
  cb: () => dispatch({
    type: "RUN"
  })
}), Y(Button, {
  id: "runlots",
  title: "Create 10,000 rows",
  cb: () => dispatch({
    type: "RUN_LOTS"
  })
}), Y(Button, {
  id: "add",
  title: "Append 1,000 rows",
  cb: () => dispatch({
    type: "ADD"
  })
}), Y(Button, {
  id: "update",
  title: "Update every 10th row",
  cb: () => dispatch({
    type: "UPDATE"
  })
}), Y(Button, {
  id: "clear",
  title: "Clear",
  cb: () => dispatch({
    type: "CLEAR"
  })
}), Y(Button, {
  id: "swaprows",
  title: "Swap Rows",
  cb: () => dispatch({
    type: "SWAP_ROWS"
  })
})))));

const Main = () => {
  const [state, setState] = l(listReducer, {
    data: [],
    selected: 0
  });
  const dispatch = p(setState, []);
  return Y("div", {
    className: "container"
  }, Y(Jumbotron, {
    dispatch: dispatch
  }), Y("table", {
    className: "table table-hover table-striped test-data"
  }, Y("tbody", null, state.data.map(item => {
    return Y(Row, {
      key: item.id + '',
      item: item,
      selected: state.selected === item.id,
      dispatch: dispatch
    });
  }))), Y("span", {
    class: "preloadicon glyphicon glyphicon-remove",
    "aria-hidden": "true"
  }));
};

T(Y(Main, null), document.getElementById("main"), {
  sync: true
});
/******/ })()
;