diff --git a/README.md b/README.md index ec7dbaa..ee9b1c1 100644 --- a/README.md +++ b/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 diff --git a/__tests__/UsingTypeScript.test.tsx b/__tests__/UsingTypeScript.test.tsx new file mode 100644 index 0000000..fa979b0 --- /dev/null +++ b/__tests__/UsingTypeScript.test.tsx @@ -0,0 +1,16 @@ +import React, { StrictMode, ChangeEvent, forwardRef } from 'react'; +import { render, cleanup } from '@testing-library/react/pure'; +import App from '../examples/using-typescript/src/App'; + +describe('Using TypeScript App', () => { + afterAll(cleanup); + + test('should render without warnings', () => { + const { container } = render( + + + , + ); + expect(container).toHaveTextContent('Hello'); + }); +}); diff --git a/examples/using-typescript/.gitignore b/examples/using-typescript/.gitignore new file mode 100644 index 0000000..8996736 --- /dev/null +++ b/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* diff --git a/examples/using-typescript/README.md b/examples/using-typescript/README.md new file mode 100644 index 0000000..1227b54 --- /dev/null +++ b/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. diff --git a/examples/using-typescript/build/asset-manifest.json b/examples/using-typescript/build/asset-manifest.json new file mode 100644 index 0000000..1812255 --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/examples/using-typescript/build/favicon.ico b/examples/using-typescript/build/favicon.ico new file mode 100644 index 0000000..bcd5dfd Binary files /dev/null and b/examples/using-typescript/build/favicon.ico differ diff --git a/examples/using-typescript/build/index.html b/examples/using-typescript/build/index.html new file mode 100644 index 0000000..e78a840 --- /dev/null +++ b/examples/using-typescript/build/index.html @@ -0,0 +1 @@ +React App
\ No newline at end of file diff --git a/examples/using-typescript/build/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js b/examples/using-typescript/build/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js new file mode 100644 index 0000000..66fcabb --- /dev/null +++ b/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" + } +]); \ No newline at end of file diff --git a/examples/using-typescript/build/robots.txt b/examples/using-typescript/build/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/examples/using-typescript/build/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/examples/using-typescript/build/service-worker.js b/examples/using-typescript/build/service-worker.js new file mode 100644 index 0000000..7868a84 --- /dev/null +++ b/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: [/^\/_/,/\/[^\/?]+\.[^\/]+$/], +}); diff --git a/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css b/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css new file mode 100644 index 0000000..88db1dd --- /dev/null +++ b/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css @@ -0,0 +1,2 @@ +body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} +/*# sourceMappingURL=main.5ecd60fb.chunk.css.map */ \ No newline at end of file diff --git a/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css.map b/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css.map new file mode 100644 index 0000000..521399c --- /dev/null +++ b/examples/using-typescript/build/static/css/main.5ecd60fb.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF","file":"main.5ecd60fb.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n"]} \ No newline at end of file diff --git a/examples/using-typescript/build/static/js/2.840eea7f.chunk.js b/examples/using-typescript/build/static/js/2.840eea7f.chunk.js new file mode 100644 index 0000000..79e8eca --- /dev/null +++ b/examples/using-typescript/build/static/js/2.840eea7f.chunk.js @@ -0,0 +1,3 @@ +/*! For license information please see 2.840eea7f.chunk.js.LICENSE.txt */ +(this["webpackJsonpusing-typescript"]=this["webpackJsonpusing-typescript"]||[]).push([[2],[function(e,t,n){"use strict";function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";n.d(t,"c",(function(){return v})),n.d(t,"e",(function(){return g})),n.d(t,"b",(function(){return z})),n.d(t,"a",(function(){return M})),n.d(t,"d",(function(){return I}));var r=new WeakMap,l=Symbol("iteration key");function o(e,t,n){var r=t.get(n);r&&r.forEach(e.add,e)}function i(e){e.cleaners&&e.cleaners.forEach(a,e),e.cleaners=[]}function a(e){e.delete(this)}var u=[],c=!1;function f(e,t,n,r){if(e.unobserved)return Reflect.apply(t,n,r);if(-1===u.indexOf(e)){i(e);try{return u.push(e),Reflect.apply(t,n,r)}finally{u.pop()}}}function s(e){var t=u[u.length-1];t&&(m(t,e),function(e,t){var n=t.target,o=t.key;"iterate"===t.type&&(o=l);var i=r.get(n),a=i.get(o);a||(a=new Set,i.set(o,a)),a.has(e)||(a.add(e),e.cleaners.push(a))}(t,e))}function d(e){(function(e){var t=e.target,n=e.key,i=e.type,a=r.get(t),u=new Set;if("clear"===i?a.forEach((function(e,t){o(u,a,t)})):o(u,a,n),"add"===i||"delete"===i||"clear"===i){var c=Array.isArray(t)?"length":l;o(u,a,c)}return u})(e).forEach(p,e)}function p(e){m(e,this),"function"===typeof e.scheduler?e.scheduler(e):"object"===typeof e.scheduler?e.scheduler.add(e):e()}function m(e,t){if(e.debugger&&!c)try{c=!0,e.debugger(t)}finally{c=!1}}function h(){return u.length>0}var y=Symbol("is reaction");function v(e,t){void 0===t&&(t={});var n=e[y]?e:function t(){return f(t,e,this,arguments)};return n.scheduler=t.scheduler,n.debugger=t.debugger,n[y]=!0,t.lazy||n(),n}function g(e){e.unobserved||(e.unobserved=!0,i(e)),"object"===typeof e.scheduler&&e.scheduler.delete(e)}var b=new WeakMap,w=new WeakMap,k=Object.prototype.hasOwnProperty;function x(e){var t=w.get(e);return h()&&"object"===typeof e&&null!==e?t||z(e):t||e}function E(e,t){var n=e.next;return e.next=function(){var r=n.call(e),l=r.done,o=r.value;return l||(t?o[1]=x(o[1]):o=x(o)),{done:l,value:o}},e}var T={has:function(e){var t=b.get(this),n=Reflect.getPrototypeOf(this);return s({target:t,key:e,type:"has"}),n.has.apply(t,arguments)},get:function(e){var t=b.get(this),n=Reflect.getPrototypeOf(this);return s({target:t,key:e,type:"get"}),x(n.get.apply(t,arguments))},add:function(e){var t=b.get(this),n=Reflect.getPrototypeOf(this),r=n.has.call(t,e),l=n.add.apply(t,arguments);return r||d({target:t,key:e,value:e,type:"add"}),l},set:function(e,t){var n=b.get(this),r=Reflect.getPrototypeOf(this),l=r.has.call(n,e),o=r.get.call(n,e),i=r.set.apply(n,arguments);return l?t!==o&&d({target:n,key:e,value:t,oldValue:o,type:"set"}):d({target:n,key:e,value:t,type:"add"}),i},delete:function(e){var t=b.get(this),n=Reflect.getPrototypeOf(this),r=n.has.call(t,e),l=n.get?n.get.call(t,e):void 0,o=n.delete.apply(t,arguments);return r&&d({target:t,key:e,oldValue:l,type:"delete"}),o},clear:function(){var e=b.get(this),t=Reflect.getPrototypeOf(this),n=0!==e.size,r=e instanceof Map?new Map(e):new Set(e),l=t.clear.apply(e,arguments);return n&&d({target:e,oldTarget:r,type:"clear"}),l},forEach:function(e){for(var t=[],n=arguments.length-1;n-- >0;)t[n]=arguments[n+1];var r=b.get(this),l=Reflect.getPrototypeOf(this);s({target:r,type:"iterate"});var o,i=function(t){for(var n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return e.apply(void 0,[x(t)].concat(n))};return(o=l.forEach).call.apply(o,[r,i].concat(t))},keys:function(){var e=b.get(this),t=Reflect.getPrototypeOf(this);return s({target:e,type:"iterate"}),t.keys.apply(e,arguments)},values:function(){var e=b.get(this),t=Reflect.getPrototypeOf(this);s({target:e,type:"iterate"});var n=t.values.apply(e,arguments);return E(n,!1)},entries:function(){var e=b.get(this),t=Reflect.getPrototypeOf(this);s({target:e,type:"iterate"});var n=t.entries.apply(e,arguments);return E(n,!0)},get size(){var e=b.get(this),t=Reflect.getPrototypeOf(this);return s({target:e,type:"iterate"}),Reflect.get(t,"size",e)}};T[Symbol.iterator]=function(){var e=b.get(this),t=Reflect.getPrototypeOf(this);s({target:e,type:"iterate"});var n=t[Symbol.iterator].apply(e,arguments);return E(n,e instanceof Map)};var S={get:function(e,t,n){return e=k.call(T,t)?T:e,Reflect.get(e,t,n)}},C="object"===typeof window?window:Function("return this")(),P=new Map([[Map,S],[Set,S],[WeakMap,S],[WeakSet,S],[Object,!1],[Array,!1],[Int8Array,!1],[Uint8Array,!1],[Uint8ClampedArray,!1],[Int16Array,!1],[Uint16Array,!1],[Int32Array,!1],[Uint32Array,!1],[Float32Array,!1],[Float64Array,!1]]);function _(e){return P.get(e.constructor)}var O=Object.prototype.hasOwnProperty,N=new Set(Object.getOwnPropertyNames(Symbol).map((function(e){return Symbol[e]})).filter((function(e){return"symbol"===typeof e})));var R={get:function(e,t,n){var r=Reflect.get(e,t,n);if("symbol"===typeof t&&N.has(t))return r;s({target:e,key:t,receiver:n,type:"get"});var l=w.get(r);if(h()&&"object"===typeof r&&null!==r){if(l)return l;var o=Reflect.getOwnPropertyDescriptor(e,t);if(!o||!1!==o.writable||!1!==o.configurable)return z(r)}return l||r},has:function(e,t){var n=Reflect.has(e,t);return s({target:e,key:t,type:"has"}),n},ownKeys:function(e){return s({target:e,type:"iterate"}),Reflect.ownKeys(e)},set:function(e,t,n,r){"object"===typeof n&&null!==n&&(n=b.get(n)||n);var l=O.call(e,t),o=e[t],i=Reflect.set(e,t,n,r);return e!==b.get(r)||(l?n!==o&&d({target:e,key:t,value:n,oldValue:o,receiver:r,type:"set"}):d({target:e,key:t,value:n,receiver:r,type:"add"})),i},deleteProperty:function(e,t){var n=O.call(e,t),r=e[t],l=Reflect.deleteProperty(e,t);return n&&d({target:e,key:t,oldValue:r,type:"delete"}),l}};function z(e){return void 0===e&&(e={}),b.has(e)||!function(e){var t=e.constructor;return!("function"===typeof t&&t.name in C&&C[t.name]===t)||P.has(t)}(e)?e:w.get(e)||function(e){var t=_(e)||R,n=new Proxy(e,t);return w.set(e,n),b.set(n,e),function(e){r.set(e,new Map)}(e),n}(e)}function M(e){return b.has(e)}function I(e){return b.get(e)||e}},function(e,t,n){"use strict";var r=n(0);function l(e,t,n){return(l="undefined"!==typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var l=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=Object(r.a)(e)););return e}(e,t);if(l){var o=Object.getOwnPropertyDescriptor(l,t);return o.get?o.get.call(n):o.value}})(e,t,n||e)}n.d(t,"a",(function(){return l}))},function(e,t,n){"use strict";e.exports=n(23)},function(e,t,n){"use strict";e.exports=n(17)},function(e,t,n){"use strict";function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}n.d(t,"a",(function(){return r}))},,function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function i(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(l){return!1}}()?Object.assign:function(e,t){for(var n,a,u=i(e),c=1;cN.length&&N.push(e)}function M(e,t,n){return null==e?0:function e(t,n,r,l){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var u=!1;if(null===t)u=!0;else switch(a){case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case o:case i:u=!0}}if(u)return r(l,t,""===n?"."+I(t,0):n),1;if(u=0,n=""===n?".":n+":",Array.isArray(t))for(var c=0;c