Skip to content

Commit daeed01

Browse files
dai-shidai-shi
authored
Module-first setup (#48)
* Module-first setup * update CHANGELOG * remove a file * remove unused exceptions
1 parent daba8b3 commit daeed01

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+4017
-5450
lines changed

‎.codesandbox/ci.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"buildCommand": "compile",
33
"sandboxes": ["new", "react-typescript-react-ts"],
4-
"node": "14"
4+
"node": "18"
55
}

‎.eslintrc.cjs

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* eslint-env node */
2+
module.exports = {
3+
root: true,
4+
parser: '@typescript-eslint/parser',
5+
plugins: ['@typescript-eslint'],
6+
extends: [
7+
'eslint:recommended',
8+
'plugin:@typescript-eslint/recommended',
9+
'plugin:import/recommended',
10+
'plugin:import/typescript',
11+
'plugin:react/recommended',
12+
'plugin:react/jsx-runtime',
13+
'plugin:react-hooks/recommended',
14+
'plugin:jsx-a11y/recommended',
15+
'prettier',
16+
],
17+
ignorePatterns: ['dist/'],
18+
settings: {
19+
'import/resolver': {
20+
typescript: true,
21+
},
22+
react: { version: 'detect' },
23+
},
24+
rules: {
25+
'import/no-unresolved': ['error', { ignore: ['valtio-yjs'] }],
26+
'@typescript-eslint/no-unused-vars': [
27+
'error',
28+
{
29+
args: 'all',
30+
argsIgnorePattern: '^_',
31+
caughtErrors: 'all',
32+
caughtErrorsIgnorePattern: '^_',
33+
destructuredArrayIgnorePattern: '^_',
34+
varsIgnorePattern: '^_',
35+
ignoreRestSiblings: true,
36+
},
37+
],
38+
},
39+
};

‎.eslintrc.json

-43
This file was deleted.

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/pnpm-lock.yaml
2+
/dist

‎.prettierrc

-4
This file was deleted.

‎CHANGELOG.md

+34
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,97 @@
22

33
## [Unreleased]
44

5+
### Changed
6+
7+
- Module-first setup #48
8+
59
## [0.5.1] - 2023-12-02
10+
611
### Changed
12+
713
- fix: guard against deleted parent and child #42
814

915
## [0.5.0] - 2023-02-14
16+
1017
### Added
18+
1119
- refactor to use root level subscriptions #37
1220

1321
## [0.4.1] - 2023-01-29
22+
1423
### Changed
24+
1525
- Use ymap value on nested map bind initialization #36
1626

1727
## [0.4.0] - 2022-10-07
28+
1829
### Changed
30+
1931
- refactor: use bind api #34
2032
- [BREAKING CHANGE] `bindProxyAndYMap` and `bindProxyAndYArray` are combined to `bind`.
2133

2234
## [0.3.1] - 2022-02-14
35+
2336
### Changed
37+
2438
- Skip non-proxy objects and only warn the usage (#23)
2539

2640
## [0.3.0] - 2022-01-06
41+
2742
### Changed
43+
2844
- Pass transactionOrigin function through without calling it (#19)
2945

3046
## [0.2.0] - 2021-12-17
47+
3148
### Changed
49+
3250
- Allow variable transactionOrigin value (#18)
3351

3452
## [0.1.7] - 2021-12-13
53+
3554
### Changed
55+
3656
- fix: swapping array items (#8)
3757

3858
## [0.1.6] - 2021-11-29
59+
3960
### Changed
61+
4062
- Fix infinite loop when replacing an array inside a nested map (#16)
4163

4264
## [0.1.5] - 2021-11-28
65+
4366
### Changed
67+
4468
- Support nested map set (#15)
4569

4670
## [0.1.4] - 2021-11-23
71+
4772
### Changed
73+
4874
- Add support for transactionOrigin (#13)
4975

5076
## [0.1.3] - 2021-11-02
77+
5178
### Changed
79+
5280
- fix: initializing array with primitive values (#12)
5381

5482
## [0.1.2] - 2021-10-05
83+
5584
### Changed
85+
5686
- fix: null values in object (#10)
5787

5888
## [0.1.1] - 2021-08-18
89+
5990
### Changed
91+
6092
- fix: initializing array (#5)
6193

6294
## [0.1.0] - 2021-07-25
95+
6396
### Added
97+
6498
- Initial alpha release

‎README.md

+7-8
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ yarn add valtio-yjs valtio yjs
3232
## How to use it
3333

3434
```js
35-
import * as Y from "yjs";
36-
import { proxy } from "valtio";
37-
import { bind } from "valtio-yjs";
35+
import * as Y from 'yjs';
36+
import { proxy } from 'valtio';
37+
import { bind } from 'valtio-yjs';
3838

3939
// create a new Y doc
4040
const ydoc = new Y.Doc();
4141

4242
// create a Y map
43-
const ymap = ydoc.getMap("mymap");
43+
const ymap = ydoc.getMap('mymap');
4444

4545
// create a valtio state
4646
const state = proxy({});
@@ -73,7 +73,6 @@ Using `useSnapshot` in valtio and
7373
`WebsocketProvider` in [y-websocket](https://github.com/yjs/y-websocket),
7474
we can create multi-client React apps pretty easily.
7575

76-
- [Messages object](https://codesandbox.io/s/valtio-yjs-demo-ox3iy)
77-
- [Messages array](https://codesandbox.io/s/valtio-yjs-array-demo-j1wkp)
78-
- [Minecraft + webrtc](https://codesandbox.io/s/minecraft-valtio-yjs-demo-656tq)
79-
- (...open a PR to add your demos)
76+
- [Messages object](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/01_obj)
77+
- [Messages array](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/02_array)
78+
- [Minecraft + webrtc](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/03_minecraft)

‎examples/01_obj/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>example</title>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script type="module" src="/src/main.tsx"></script>
8+
</body>
9+
</html>

‎examples/01_obj/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"dependencies": {
7+
"react": "latest",
8+
"react-dom": "latest",
9+
"valtio": "latest",
10+
"valtio-yjs": "latest",
11+
"y-websocket": "latest"
12+
},
13+
"devDependencies": {
14+
"@types/react": "latest",
15+
"@types/react-dom": "latest",
16+
"typescript": "latest",
17+
"vite": "latest"
18+
},
19+
"scripts": {
20+
"dev": "vite"
21+
}
22+
}

‎examples/01_obj/src/app.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as Y from 'yjs';
2+
import { WebsocketProvider } from 'y-websocket';
3+
import { bind } from 'valtio-yjs';
4+
import { proxy, useSnapshot } from 'valtio';
5+
import { useState } from 'react';
6+
7+
const ydoc = new Y.Doc();
8+
9+
new WebsocketProvider('wss://demos.yjs.dev', 'valtio-yjs-demo', ydoc);
10+
11+
const ymap = ydoc.getMap('messages.v1');
12+
const mesgMap = proxy({} as Record<string, string>);
13+
bind(mesgMap, ymap);
14+
15+
const MyMessage = () => {
16+
const [name, setName] = useState('');
17+
const [message, setMessage] = useState('');
18+
const send = () => {
19+
if (name && message) {
20+
mesgMap[name] = message;
21+
}
22+
};
23+
return (
24+
<div>
25+
<div>
26+
Name: <input value={name} onChange={(e) => setName(e.target.value)} />
27+
</div>
28+
<div>
29+
Message:{' '}
30+
<input value={message} onChange={(e) => setMessage(e.target.value)} />
31+
</div>
32+
<button disabled={!name || !message} onClick={send}>
33+
Send
34+
</button>
35+
</div>
36+
);
37+
};
38+
39+
const Messages = () => {
40+
const snap = useSnapshot(mesgMap);
41+
return (
42+
<div>
43+
{Object.keys(snap)
44+
.reverse()
45+
.map((key) => (
46+
<p key={key}>
47+
{key}: {snap[key]}
48+
</p>
49+
))}
50+
</div>
51+
);
52+
};
53+
54+
const App = () => (
55+
<div>
56+
<h2>My Message</h2>
57+
<MyMessage />
58+
<h2>Messages</h2>
59+
<Messages />
60+
</div>
61+
);
62+
63+
export default App;

‎examples/01_obj/src/main.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
4+
import App from './app';
5+
6+
createRoot(document.getElementById('root')!).render(
7+
<StrictMode>
8+
<App />
9+
</StrictMode>,
10+
);

‎examples/01_obj/tsconfig.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "es2018",
5+
"esModuleInterop": true,
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"skipLibCheck": true,
9+
"allowJs": true,
10+
"noUncheckedIndexedAccess": true,
11+
"exactOptionalPropertyTypes": true,
12+
"jsx": "react-jsx"
13+
}
14+
}

‎examples/02_array/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>example</title>
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script type="module" src="/src/main.tsx"></script>
8+
</body>
9+
</html>

‎examples/02_array/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"dependencies": {
7+
"react": "latest",
8+
"react-dom": "latest",
9+
"valtio": "latest",
10+
"valtio-yjs": "latest",
11+
"y-websocket": "latest"
12+
},
13+
"devDependencies": {
14+
"@types/react": "latest",
15+
"@types/react-dom": "latest",
16+
"typescript": "latest",
17+
"vite": "latest"
18+
},
19+
"scripts": {
20+
"dev": "vite"
21+
}
22+
}

0 commit comments

Comments
 (0)