chore(examples): add example for typescript

unix · unix · commit 13451b87e6e9 · 2020-06-05T18:37:38.000+08:00
diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md
@@ -0,0 +1,18 @@
+## Quick start for Backset
+
+### About
+
+This is a React project with Backset, you can learn how to use Backset with this project.
+
+### Getting Started
+
+First, run the development server:
+
+```bash
+yarn && yarn dev
+# or
+npm i && npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "quick-start",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "dependencies": {
+    "backset": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "react-scripts": "^3.4.1",
+    "typescript": "^3.9.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/with-typescript/public/index.html b/examples/with-typescript/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Quick start for Backset</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/with-typescript/src/app.tsx b/examples/with-typescript/src/app.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { create } from 'backset'
+
+const { useStores, useUpdates, withContext } = create({
+  title: 'Hello World',
+})
+
+const Child = () => {
+  const updates = useUpdates()
+  return (
+    <>
+      <button onClick={() => updates.title('Hello Backset')}>Edit</button>
+      <button onClick={() => updates.title('Hello World')}>Reset</button>
+    </>
+  )
+}
+
+const App = () => {
+  const { title } = useStores()
+  return (
+    <div>
+      <p>{title}</p>
+      <Child />
+    </div>
+  )
+}
+
+export default withContext(App)
diff --git a/examples/with-typescript/src/index.tsx b/examples/with-typescript/src/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import App from './app'
+
+ReactDom.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('app'),
+)
+
+export default App
diff --git a/examples/with-typescript/src/react-app-env.d.ts b/examples/with-typescript/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/examples/with-typescript/tsconfig.json b/examples/with-typescript/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/examples/with-typescript/yarn.lock b/examples/with-typescript/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+/// <reference types="react-scripts" />`