{"version":3,"sources":["Table.jsx","TableClean.jsx","TableStyledComponents.jsx","TableLinaria.jsx","TableReshadow.jsx","App.js","serviceWorker.js","index.js"],"names":["Table","styled","Row","Cell","props","value","table","toPercent","map","row","i","key","x","j","className","style","background","div","getTable","max","next","Math","random","push","toFixed","toString","LIBS","App","useState","lib","setLib","handleChange","item","type","checked","onChange","listOfLibs","TableLinaria","TableReshadow","drawTable","Boolean","window","location","hostname","match","ReactDOM","render","StrictMode","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch","error","console","message"],"mappings":"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","file":"static/js/main.ea571ee1.chunk.js","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\n\nconst Table = styled('div')`\n  display: table;\n  margin-top: 10px;\n`;\n\nconst Row = styled('div')`\n  display: table-row;\n`;\n\nconst Cell = styled('div')`\n  display: table-cell;\n  padding: 10px;\n  background: rgba(255,105,180, ${props => props.value});\n`;\n\nexport default ({ table, toPercent }) => (\n  <Table>\n    {table.map((row, i) => (\n      <Row key={i}>\n        {row.map((x, j) => (\n          <Cell key={`${i}${j}`} value={x}>{toPercent(x)}</Cell>\n        ))}\n      </Row>\n    ))}\n  </Table>\n);","import React from 'react';\nimport './TableClean.css';\n\nconst Table = ({ table, toPercent }) => (\n  <div className=\"table\">\n    {table.map((row, i) => (\n      <div key={i} className=\"row\">\n        {row.map((x, j) => (\n          <div\n            key={`${i}${j}`}\n            className=\"cell\"\n            style={{ background: `rgba(255,105,180, ${x})` }}\n          >\n            {toPercent(x)}\n          </div>\n        ))}\n      </div>\n    ))}\n  </div>\n);\n\nexport default Table;","import React from 'react';\nimport styled from 'styled-components';\n\nconst Table = styled.div`\n  display: table;\n  margin-top: 10px;\n`;\n\nconst Row = styled.div`\n  display: table-row;\n`;\n\nconst Cell = styled.div`\n  display: table-cell;\n  padding: 10px;\n  background: rgba(255,105,180, ${props => props.value});\n`;\n\nexport default ({ table, toPercent }) => (\n  <Table>\n    {table.map((row, i) => (\n      <Row key={i}>\n        {row.map((x, j) => (\n          <Cell key={`${i}${j}`} value={x}>{toPercent(x)}</Cell>\n        ))}\n      </Row>\n    ))}\n  </Table>\n)","import React from 'react';\nimport { styled } from 'linaria/react';\n\nconst Table = styled.div`\n  display: table;\n  margin-top: 10px;\n`;\n\nconst Row = styled.div`\n  display: table-row;\n`;\n\nconst Cell = styled.div`\n  display: table-cell;\n  padding: 10px;\n  background: rgba(255,105,180, ${props => props.value});\n`;\n\n\n// const Cell = styled('div')({\n//     name: 'Cell',\n//     class: 'Cell_cjdc1ue',\n//     vars: {\n//       'cjdc1ue-0': [props => props.value],\n//     },\n// });\n\n\n// --cjdc1ue-0: 0.6038\n\n// .cjdc1ue {\n//     display: table-cell;\n//     padding: 10px;\n//     background: rgba(255,105,180,var(--cjdc1ue-0));\n// }\n\nexport default ({ table, toPercent }) => (\n  <Table>\n    {table.map((row, i) => (\n      <Row key={i}>\n        {row.map((x, j) => (\n          <Cell key={`${i}${j}`} value={x}>{toPercent(x)}</Cell>\n        ))}\n      </Row>\n    ))}\n  </Table>\n)","import React from 'react';\nimport styled from 'reshadow/macro';\n\nconst Table = ({table, toPercent}) => styled`\n  table {\n    display: table;\n    margin-top: 10px 10px 10px 0;\n  }\n  row {\n    display: table-row;\n  }\n`(\n  <table as=\"div\">\n    {table.map((row, i) => (\n      <row>\n        {row.map((x, j) => styled`\n          cell {\n            display: table-cell;\n            padding: 10px;\n            background: rgba(255,105,180, ${x});\n          }\n        `(<cell>{toPercent(x)}</cell>))}\n      </row>\n    ))}\n  </table>,\n);\n\nexport default Table;","import React, { useState, useEffect } from 'react';\nimport './App.css';\n\nimport Table from './Table'\nimport TableClean from './TableClean'\nimport TableSC from './TableStyledComponents'\nimport TableLinaria from './TableLinaria'\nimport TableReshadow from './TableReshadow'\n\nfunction getTable(max = 30) {\n  let table = [];\n  for (let i = 0; i < max; i++) {\n    table[i] = [1];\n    for (let j = 1; j < max; j++) {\n      const next = table[i][j - 1] - Math.random() * table[i][j - 1] / 10;\n      table[i].push(next.toFixed(4));\n    }\n  }\n  return table;\n}\n\nfunction toPercent(x) {\n  return (x * 100).toFixed(2).toString() + '%';\n}\n\nconst LIBS = ['React Only', 'Emotion', 'Styled Components', 'Linaria', 'Reshadow']\n\nconst listOfLibs = (lib, handleChange) => {\n\n  return LIBS.map(item=>\n    <label>\n      <input\n        type=\"radio\"\n        value={item}\n        checked={lib === item}\n        onChange={()=>{\n          handleChange(item)\n        }}\n      />\n      {item}\n    </label>\n )\n}\n\nconst drawTable = (lib) => {\n  switch(lib) {\n    case 'React Only':\n      return <TableClean table={getTable()} toPercent={toPercent}/>;\n    case 'Emotion':\n      return <Table table={getTable()} toPercent={toPercent}/>;\n    case 'Styled Components':\n      return <TableSC table={getTable()} toPercent={toPercent}/>;\n    case 'Linaria':\n      return <TableLinaria table={getTable()} toPercent={toPercent}/>;\n    case 'Reshadow':\n      return <TableReshadow table={getTable()} toPercent={toPercent}/>;\n    default:\n      return <div></div>\n  }\n}\n\nfunction App() {\n  const [lib, setLib] = useState()\n\n  return (\n    <div className=\"App\">\n       {listOfLibs(lib, setLib)}\n       {drawTable(lib)}\n    </div>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}