example: Added example of using UmiJS with valtio
ADD
examples/with-valtio/app.tsx
+import React from 'react';
+import './style.css';
+
+export function rootContainer(container: any, opts: any) {
+ return React.createElement(Foo, opts, container);
+}
+
+export function innerProvider(container: any) {
+ return React.createElement(Foo, {title: 'innerProvider'}, container);
+}
+
+export function i18nProvider(container: any) {
+ return React.createElement(Foo, {title: 'i18nProvider'}, container);
+}
+
+export function dataflowProvider(container: any) {
+ return React.createElement(Foo, {title: 'dataflowProvider'}, container);
+}
+
+export function outerProvider(container: any) {
+ return React.createElement(Foo, {title: 'outerProvider'}, container);
+}
+
+function Foo(props: any) {
+ return <div>{props.children}</div>;
+}

ADD
examples/with-valtio/components/ControlCount.tsx
+import React from "react";
+import state from "../state";
+
+function ControlCount() {
+ return <div>
+ <button onClick={() => state.number++}>+</button>
+ <button onClick={() => state.number--}>-</button>
+ </div>
+}
+
+export default ControlCount;

ADD
examples/with-valtio/components/DisplayCount.tsx
+import React from "react";
+import {useSnapshot} from "valtio";
+import state from "../state";
+
+function DisplayCount() {
+ const snap = useSnapshot(state);
+ return <p className="display-count">{snap.number}</p>
+}
+
+export default DisplayCount;

ADD
examples/with-valtio/favicon.png
examples/with-valtio/favicon.png
Binary files /dev/null and b/examples/with-valtio/favicon.png differ

ADD
examples/with-valtio/package.json
+{
+ "scripts": {
+ "build": "umi build",
+ "dev": "umi dev",
+ "start": "npm run dev"
+ },
+ "dependencies": {
+ "umi": "4.0.0-beta.16",
+ "valtio": "^1.2.9"
+ },
+ "devDependencies": {
+ "@types/three": "^0.136.1"
+ }
+}

ADD
examples/with-valtio/pages/index.tsx
+import React from 'react';
+import DisplayCount from "../components/DisplayCount";
+import ControlCount from "../components/ControlCount";
+
+export default function HomePage() {
+ return (
+ <div className="container">
+ <p className="title">UmiJS x Valtio</p>
+ <DisplayCount/>
+ <ControlCount/>
+ <div className="description">
+ <p>The buttons and the display number is not in one component.</p>
+ <p>They share the state by a proxy using valtio.</p>
+ </div>
+ </div>
+ );
+}

ADD
examples/with-valtio/readme.md
+# with-valtio
+
+An example of using [UmiJS](https://umijs.org/zh-CN) with [valtio](https://github.com/pmndrs/valtio).

ADD
examples/with-valtio/state.ts
+import {proxy} from 'valtio'
+
+const state = proxy({number: 0})
+
+export default state;

ADD
examples/with-valtio/style.css
+body {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'Lucida Sans', sans-serif;
+}
+
+.title {
+ font-size: 64px;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+button {
+ background-color: #2eabff;
+ outline: none;
+ border: none;
+ color: white;
+ font-size: 24px;
+ padding: 16px;
+ width: 96px;
+ margin: 0 16px;
+ cursor: pointer;
+ transition: background-color .15s;
+ border-radius: 12px;
+}
+
+button:hover {
+ background-color: #79c4ff;
+}
+
+.display-count {
+ font-size: 36px;
+}
+
+.description {
+ margin-top: 32px;
+}
+
+.description > p {
+ text-align: center;
+ opacity: 0.3;
+}

example: Added example of using UmiJS with valtio (#283)