feat(examples): refactor examples to use CRA

Author: solkimicreb

README.md

@@ -185,14 +185,14 @@ That's it, You know everything to master React state management! Check some of t
 
 *Beginner*
 
-- [Clock Widget](https://solkimicreb.github.io/react-easy-state/examples/clock/dist) ([source](/examples/clock/)): a reusable clock widget with a tiny local state store.
-- [Stopwatch](https://solkimicreb.github.io/react-easy-state/examples/stopWatch/dist) ([source](/examples/stopWatch/)) ([tutorial](https://hackernoon.com/introducing-react-easy-state-1210a156fa16)): a stopwatch with a mix of normal and computed state properties.
+- [Clock Widget](https://solkimicreb.github.io/react-easy-state/examples/clock/build) ([source](/examples/clock/)): a reusable clock widget with a tiny local state store.
+- [Stopwatch](https://solkimicreb.github.io/react-easy-state/examples/stop-watch/build) ([source](/examples/stopWatch/)) ([tutorial](https://hackernoon.com/introducing-react-easy-state-1210a156fa16)): a stopwatch with a mix of normal and computed state properties.
 
 *Advanced*
 
-- [TodoMVC](https://solkimicreb.github.io/react-easy-state/examples/todoMVC/dist) ([source](/examples/todoMVC/)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
-- [Contacts Table](https://solkimicreb.github.io/react-easy-state/examples/contacts/dist) ([source](/examples/contacts/)): a data grid implementation with a mix of global and local state.
-- [Beer Finder](https://solkimicreb.github.io/react-easy-state/examples/beerFinder/dist) ([source](/examples/beerFinder/)) ([tutorial](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c)): an app with async actions and a mix of local and global state, which finds matching beers for your meal.
+- [TodoMVC](https://solkimicreb.github.io/react-easy-state/examples/todo-mvc/build) ([source](/examples/todoMVC/)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
+- [Contacts Table](https://solkimicreb.github.io/react-easy-state/examples/contacts/build) ([source](/examples/contacts/)): a data grid implementation with a mix of global and local state.
+- [Beer Finder](https://solkimicreb.github.io/react-easy-state/examples/beer-finder/build) ([source](/examples/beerFinder/)) ([tutorial](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c)): an app with async actions and a mix of local and global state, which finds matching beers for your meal.
 
 ## Articles
 

__tests__/Clock.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
-import App from '../examples/clock/App'
+import App from '../examples/clock/src/App'
 
 describe('Clock App', () => {
   const clock = sinon.useFakeTimers()

__tests__/Contacts.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import App from '../examples/contacts/App'
+import App from '../examples/contacts/src/App'
 
 describe('Contacts App', () => {
   const app = mount(<App />)

__tests__/TodoMVC.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
-import App from '../examples/todoMVC/App'
+import App from '../examples/todo-mvc/src/App'
 
 describe('TodoMVC App', () => {
   const app = mount(<App />)

examples/beer-finder/README.md

@@ -1,3 +1,3 @@
-# Beer Finder · [Live Demo](https://solkimicreb.github.io/react-easy-state/examples/beerFinder/dist)
+# Beer Finder · [Live Demo](https://solkimicreb.github.io/react-easy-state/examples/beer-finder/dist)
 
 An app to find matching beers for your meal. It features networking and async actions with a mix of global and local state. The styling is partially done with the awesome [React Material UI](http://www.material-ui.com/#/) library.

examples/beer-finder/build/service-worker.js

@@ -1 +1,190 @@
-"use strict";var precacheConfig=[["/react-easy-state/examples/beer-finder/build/index.html","594fe3c38b40f80567036619503cbf40"],["/react-easy-state/examples/beer-finder/build/static/css/main.629c1060.css","a2f35a78fbcda6a481a585ec6d684ee5"],["/react-easy-state/examples/beer-finder/build/static/js/main.6cc66dc8.js","516f8d22aa6c480e65fdc34890dc31df"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var r=new Request(n,{credentials:"same-origin"});return fetch(r).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching),r="index.html";(t=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),t=urlsToCacheKeys.has(n));var a="/react-easy-state/examples/beer-finder/build/index.html";!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL(a,self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});
+'use strict'
+var precacheConfig = [
+  [
+    '/react-easy-state/examples/beer-finder/build/index.html',
+    '594fe3c38b40f80567036619503cbf40'
+  ],
+  [
+    '/react-easy-state/examples/beer-finder/build/static/css/main.629c1060.css',
+    'a2f35a78fbcda6a481a585ec6d684ee5'
+  ],
+  [
+    '/react-easy-state/examples/beer-finder/build/static/js/main.6cc66dc8.js',
+    '516f8d22aa6c480e65fdc34890dc31df'
+  ]
+  ],
+  cacheName =
+    'sw-precache-v3-sw-precache-webpack-plugin-' +
+    (self.registration ? self.registration.scope : ''),
+  ignoreUrlParametersMatching = [/^utm_/],
+  addDirectoryIndex = function (e, t) {
+    var n = new URL(e)
+    return n.pathname.slice(-1) === '/' && (n.pathname += t), n.toString()
+  },
+  cleanResponse = function (e) {
+    return e.redirected
+      ? ('body' in e ? Promise.resolve(e.body) : e.blob()).then(function (t) {
+        return new Response(t, {
+          headers: e.headers,
+          status: e.status,
+          statusText: e.statusText
+        })
+      })
+      : Promise.resolve(e)
+  },
+  createCacheKey = function (e, t, n, r) {
+    var a = new URL(e)
+    return (
+      (r && a.pathname.match(r)) ||
+        (a.search +=
+          (a.search ? '&' : '') +
+          encodeURIComponent(t) +
+          '=' +
+          encodeURIComponent(n)),
+      a.toString()
+    )
+  },
+  isPathWhitelisted = function (e, t) {
+    if (e.length === 0) return !0
+    var n = new URL(t).pathname
+    return e.some(function (e) {
+      return n.match(e)
+    })
+  },
+  stripIgnoredUrlParameters = function (e, t) {
+    var n = new URL(e)
+    return (
+      (n.hash = ''),
+      (n.search = n.search
+        .slice(1)
+        .split('&')
+        .map(function (e) {
+          return e.split('=')
+        })
+        .filter(function (e) {
+          return t.every(function (t) {
+            return !t.test(e[0])
+          })
+        })
+        .map(function (e) {
+          return e.join('=')
+        })
+        .join('&')),
+      n.toString()
+    )
+  },
+  hashParamName = '_sw-precache',
+  urlsToCacheKeys = new Map(
+    precacheConfig.map(function (e) {
+      var t = e[0],
+        n = e[1],
+        r = new URL(t, self.location),
+        a = createCacheKey(r, hashParamName, n, /\.\w{8}\./)
+      return [r.toString(), a]
+    })
+  )
+function setOfCachedUrls (e) {
+  return e
+    .keys()
+    .then(function (e) {
+      return e.map(function (e) {
+        return e.url
+      })
+    })
+    .then(function (e) {
+      return new Set(e)
+    })
+}
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches
+      .open(cacheName)
+      .then(function (e) {
+        return setOfCachedUrls(e).then(function (t) {
+          return Promise.all(
+            Array.from(urlsToCacheKeys.values()).map(function (n) {
+              if (!t.has(n)) {
+                var r = new Request(n, { credentials: 'same-origin' })
+                return fetch(r).then(function (t) {
+                  if (!t.ok) {
+                    throw new Error(
+                      'Request for ' +
+                        n +
+                        ' returned a response with status ' +
+                        t.status
+                    )
+                  }
+                  return cleanResponse(t).then(function (t) {
+                    return e.put(n, t)
+                  })
+                })
+              }
+            })
+          )
+        })
+      })
+      .then(function () {
+        return self.skipWaiting()
+      })
+  )
+}),
+  self.addEventListener('activate', function (e) {
+    var t = new Set(urlsToCacheKeys.values())
+    e.waitUntil(
+      caches
+        .open(cacheName)
+        .then(function (e) {
+          return e.keys().then(function (n) {
+            return Promise.all(
+              n.map(function (n) {
+                if (!t.has(n.url)) return e.delete(n)
+              })
+            )
+          })
+        })
+        .then(function () {
+          return self.clients.claim()
+        })
+    )
+  }),
+  self.addEventListener('fetch', function (e) {
+    if (e.request.method === 'GET') {
+      var t,
+        n = stripIgnoredUrlParameters(
+          e.request.url,
+          ignoreUrlParametersMatching
+        ),
+        r = 'index.html';
+      (t = urlsToCacheKeys.has(n)) ||
+        ((n = addDirectoryIndex(n, r)), (t = urlsToCacheKeys.has(n)))
+      var a = '/react-easy-state/examples/beer-finder/build/index.html'
+      !t &&
+        e.request.mode === 'navigate' &&
+        isPathWhitelisted(['^(?!\\/__).*'], e.request.url) &&
+        ((n = new URL(a, self.location).toString()),
+        (t = urlsToCacheKeys.has(n))),
+        t &&
+          e.respondWith(
+            caches
+              .open(cacheName)
+              .then(function (e) {
+                return e.match(urlsToCacheKeys.get(n)).then(function (e) {
+                  if (e) return e
+                  throw Error(
+                    'The cached response that was expected is missing.'
+                  )
+                })
+              })
+              .catch(function (t) {
+                return (
+                  console.warn(
+                    'Couldn\'t serve response for "%s" from cache: %O',
+                    e.request.url,
+                    t
+                  ),
+                  fetch(e.request)
+                )
+              })
+          )
+    }
+  })