docs(example): add typescript example

README.md

@@ -617,6 +617,7 @@ Instead of returning an object, you should directly mutate the received stores.
 - [TodoMVC](https://risingstack.github.io/react-easy-state/examples/todo-mvc/build) ([source](/examples/todo-mvc/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/todo-mvc)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
 - [Contacts Table](https://risingstack.github.io/react-easy-state/examples/contacts/build) ([source](/examples/contacts/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/contacts)): a data grid implementation with a mix of global and local state.
 - [Beer Finder](https://risingstack.github.io/react-easy-state/examples/beer-finder/build) ([source](/examples/beer-finder/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/beer-finder)) ([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.
+- [Using it with TypeScript](https://risingstack.github.io/react-easy-state/examples/typescript-usage/build) ([source](/examples/typescript-usage/)) ([codesandbox](https://codesandbox.io/s/github/RisingStack/react-easy-state/tree/master/examples/typescript-usage)) showcasing how to use react-easy-state with typescript
 
 ## Articles
 

__tests__/UsingTypeScript.test.tsx

@@ -0,0 +1,53 @@
+import React, { StrictMode, ChangeEvent, forwardRef } from 'react';
+import { view as v, store as s } from 'react-easy-state';
+import { render, cleanup } from '@testing-library/react/pure';
+
+const store = s({
+  name: 'Peter',
+  setNameEvent(ev: ChangeEvent<HTMLInputElement>) {
+    if (ev.target) {
+      this.name = ev.target.value;
+    }
+  },
+});
+
+// properly retain these props for the views
+type AppProps = {
+  greeting: string;
+};
+
+const App = v(
+  forwardRef<HTMLLabelElement, AppProps>(
+    ({ greeting, children }, ref) => (
+      <div>
+        <h1>
+          {greeting} {store.name}!
+        </h1>
+        <label ref={ref} htmlFor="name">
+          Name:
+        </label>
+        <input
+          id="name"
+          value={store.name}
+          onChange={store.setNameEvent.bind(store)}
+        />
+        {children}
+      </div>
+    ),
+  ),
+);
+
+describe('Using TypeScript App', () => {
+  afterAll(cleanup);
+
+  test('should render without warnings', () => {
+    const ref = React.createRef<HTMLLabelElement>();
+
+    const { container } = render(
+      <StrictMode>
+        <App ref={ref} greeting="Hello" />
+      </StrictMode>,
+    );
+    expect(container).toHaveTextContent('Hello');
+  });
+});

examples/using-typescript/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/using-typescript/README.md

@@ -0,0 +1,3 @@
+# TypeScript usage example · [Live Demo](https://RisingStack.github.io/react-easy-state/examples/typescript-usage/build)
+
+An example that shows how to use react-easy-state with TypeScript. Simple input field which uses a global store to persist its state. Showcases how stores and views both retain their shape of objects and parameters when wrapped with react-easy-state.

examples/using-typescript/build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "files": {
+    "main.css": "/static/css/main.5ecd60fb.chunk.css",
+    "main.js": "/static/js/main.c910b7b7.chunk.js",
+    "main.js.map": "/static/js/main.c910b7b7.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.7bf255aa.js",
+    "runtime-main.js.map": "/static/js/runtime-main.7bf255aa.js.map",
+    "static/js/2.840eea7f.chunk.js": "/static/js/2.840eea7f.chunk.js",
+    "static/js/2.840eea7f.chunk.js.map": "/static/js/2.840eea7f.chunk.js.map",
+    "index.html": "/index.html",
+    "precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js": "/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js",
+    "service-worker.js": "/service-worker.js",
+    "static/css/main.5ecd60fb.chunk.css.map": "/static/css/main.5ecd60fb.chunk.css.map",
+    "static/js/2.840eea7f.chunk.js.LICENSE.txt": "/static/js/2.840eea7f.chunk.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.7bf255aa.js",
+    "static/js/2.840eea7f.chunk.js",
+    "static/css/main.5ecd60fb.chunk.css",
+    "static/js/main.c910b7b7.chunk.js"
+  ]
+}

examples/using-typescript/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>React App</title><link href="/static/css/main.5ecd60fb.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,p=t[0],l=t[1],f=t[2],c=0,s=[];c<p.length;c++)i=p[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,p=1;p<r.length;p++){var l=r[p];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var p=this["webpackJsonpusing-typescript"]=this["webpackJsonpusing-typescript"]||[],l=p.push.bind(p);p.push=t,p=p.slice();for(var f=0;f<p.length;f++)t(p[f]);var a=l;r()}([])</script><script src="/static/js/2.840eea7f.chunk.js"></script><script src="/static/js/main.c910b7b7.chunk.js"></script></body></html>

examples/using-typescript/build/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js

@@ -0,0 +1,26 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "b65fc2e46ec668e4154804d0ef71169f",
+    "url": "/index.html"
+  },
+  {
+    "revision": "8af54212ce1c20b3677c",
+    "url": "/static/css/main.5ecd60fb.chunk.css"
+  },
+  {
+    "revision": "11064ac238ceca5ca0e9",
+    "url": "/static/js/2.840eea7f.chunk.js"
+  },
+  {
+    "revision": "5356fa2f66e46e6c05e4cbe319ac7f1d",
+    "url": "/static/js/2.840eea7f.chunk.js.LICENSE.txt"
+  },
+  {
+    "revision": "8af54212ce1c20b3677c",
+    "url": "/static/js/main.c910b7b7.chunk.js"
+  },
+  {
+    "revision": "4a2f9c44d30c4ddaa85d",
+    "url": "/static/js/runtime-main.7bf255aa.js"
+  }
+]);

examples/using-typescript/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

examples/using-typescript/build/service-worker.js

@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
+
+  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
+});

examples/using-typescript/build/static/js/2.840eea7f.chunk.js.LICENSE.txt

@@ -0,0 +1,32 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.19.0
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */