docs(example): add typescript example

RisingStack · Mar 18, 2020 · e18b8c9 · e18b8c9
1 parent d0a0297
commit e18b8c9
Show file tree

Hide file tree

Showing 34 changed files with 21,766 additions and 12,550 deletions.
diff --git 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
@@ -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(
+      <StrictMode>
+        <App greeting="Hello" />
+      </StrictMode>,
+    );
+    expect(container).toHaveTextContent('Hello');
+  });
+});
diff --git a/examples/using-typescript/.gitignore 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
@@ -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
@@ -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"
+  ]
+}
diff --git a/examples/using-typescript/build/favicon.ico b/examples/using-typescript/build/favicon.ico
diff --git a/examples/using-typescript/build/index.html b/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>
diff --git a/examples/using-typescript/build/precache-manifest.154edcce5d6e469f33c99ca5c0fde9b8.js 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"
+  }
+]);
diff --git a/examples/using-typescript/build/robots.txt 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
@@ -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
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
diff --git a/examples/using-typescript/build/static/js/2.840eea7f.chunk.js b/examples/using-typescript/build/static/js/2.840eea7f.chunk.js
diff --git a/examples/using-typescript/build/static/js/2.840eea7f.chunk.js.LICENSE.txt b/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.
+ */
diff --git a/examples/using-typescript/build/static/js/2.840eea7f.chunk.js.map b/examples/using-typescript/build/static/js/2.840eea7f.chunk.js.map
diff --git a/examples/using-typescript/build/static/js/main.c910b7b7.chunk.js b/examples/using-typescript/build/static/js/main.c910b7b7.chunk.js
Original file line number	Diff line number	Diff line change
		@@ -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.
Original file line number	Diff line number	Diff line change
		@@ -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>