Module-first setup

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "buildCommand": "compile",
   "sandboxes": ["new", "react-typescript-react-ts"],
-  "node": "14"
+  "node": "18"
 }

.eslintrc.cjs

@@ -0,0 +1,39 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist/'],
+  settings: {
+    'import/resolver': {
+      typescript: true,
+    },
+    react: { version: 'detect' },
+  },
+  rules: {
+    'import/no-unresolved': ['error', { ignore: ['valtio-yjs'] }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+  },
+};

.prettierignore

@@ -0,0 +1,2 @@
+/pnpm-lock.yaml
+/dist

CHANGELOG.md

@@ -2,63 +2,97 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Module-first setup #48
+
 ## [0.5.1] - 2023-12-02
+
 ### Changed
+
 - fix: guard against deleted parent and child #42
 
 ## [0.5.0] - 2023-02-14
+
 ### Added
+
 - refactor to use root level subscriptions #37
 
 ## [0.4.1] - 2023-01-29
+
 ### Changed
+
 - Use ymap value on nested map bind initialization #36
 
 ## [0.4.0] - 2022-10-07
+
 ### Changed
+
 - refactor: use bind api #34
   - [BREAKING CHANGE] `bindProxyAndYMap` and `bindProxyAndYArray` are combined to `bind`.
 
 ## [0.3.1] - 2022-02-14
+
 ### Changed
+
 - Skip non-proxy objects and only warn the usage (#23)
 
 ## [0.3.0] - 2022-01-06
+
 ### Changed
+
 - Pass transactionOrigin function through without calling it (#19)
 
 ## [0.2.0] - 2021-12-17
+
 ### Changed
+
 - Allow variable transactionOrigin value (#18)
 
 ## [0.1.7] - 2021-12-13
+
 ### Changed
+
 - fix: swapping array items (#8)
 
 ## [0.1.6] - 2021-11-29
+
 ### Changed
+
 - Fix infinite loop when replacing an array inside a nested map (#16)
 
 ## [0.1.5] - 2021-11-28
+
 ### Changed
+
 - Support nested map set (#15)
 
 ## [0.1.4] - 2021-11-23
+
 ### Changed
+
 - Add support for transactionOrigin (#13)
 
 ## [0.1.3] - 2021-11-02
+
 ### Changed
+
 - fix: initializing array with primitive values (#12)
 
 ## [0.1.2] - 2021-10-05
+
 ### Changed
+
 - fix: null values in object (#10)
 
 ## [0.1.1] - 2021-08-18
+
 ### Changed
+
 - fix: initializing array (#5)
 
 ## [0.1.0] - 2021-07-25
+
 ### Added
+
 - Initial alpha release

README.md

@@ -32,15 +32,15 @@ yarn add valtio-yjs valtio yjs
 ## How to use it
 
 ```js
-import * as Y from "yjs";
-import { proxy } from "valtio";
-import { bind } from "valtio-yjs";
+import * as Y from 'yjs';
+import { proxy } from 'valtio';
+import { bind } from 'valtio-yjs';
 
 // create a new Y doc
 const ydoc = new Y.Doc();
 
 // create a Y map
-const ymap = ydoc.getMap("mymap");
+const ymap = ydoc.getMap('mymap');
 
 // create a valtio state
 const state = proxy({});
@@ -73,7 +73,6 @@ Using `useSnapshot` in valtio and
 `WebsocketProvider` in [y-websocket](https://github.com/yjs/y-websocket),
 we can create multi-client React apps pretty easily.
 
-- [Messages object](https://codesandbox.io/s/valtio-yjs-demo-ox3iy)
-- [Messages array](https://codesandbox.io/s/valtio-yjs-array-demo-j1wkp)
-- [Minecraft + webrtc](https://codesandbox.io/s/minecraft-valtio-yjs-demo-656tq)
-- (...open a PR to add your demos)
+- [Messages object](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/01_obj)
+- [Messages array](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/02_array)
+- [Minecraft + webrtc](https://stackblitz.com/github/valtiojs/valtio-yjs/tree/main/examples/03_minecraft)

examples/01_obj/index.html

@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/01_obj/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "valtio": "latest",
+    "valtio-yjs": "latest",
+    "y-websocket": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}

examples/01_obj/src/app.tsx

@@ -0,0 +1,63 @@
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+import { bind } from 'valtio-yjs';
+import { proxy, useSnapshot } from 'valtio';
+import { useState } from 'react';
+
+const ydoc = new Y.Doc();
+
+new WebsocketProvider('wss://demos.yjs.dev', 'valtio-yjs-demo', ydoc);
+
+const ymap = ydoc.getMap('messages.v1');
+const mesgMap = proxy({} as Record<string, string>);
+bind(mesgMap, ymap);
+
+const MyMessage = () => {
+  const [name, setName] = useState('');
+  const [message, setMessage] = useState('');
+  const send = () => {
+    if (name && message) {
+      mesgMap[name] = message;
+    }
+  };
+  return (
+    <div>
+      <div>
+        Name: <input value={name} onChange={(e) => setName(e.target.value)} />
+      </div>
+      <div>
+        Message:{' '}
+        <input value={message} onChange={(e) => setMessage(e.target.value)} />
+      </div>
+      <button disabled={!name || !message} onClick={send}>
+        Send
+      </button>
+    </div>
+  );
+};
+
+const Messages = () => {
+  const snap = useSnapshot(mesgMap);
+  return (
+    <div>
+      {Object.keys(snap)
+        .reverse()
+        .map((key) => (
+          <p key={key}>
+            {key}: {snap[key]}
+          </p>
+        ))}
+    </div>
+  );
+};
+
+const App = () => (
+  <div>
+    <h2>My Message</h2>
+    <MyMessage />
+    <h2>Messages</h2>
+    <Messages />
+  </div>
+);
+
+export default App;

examples/01_obj/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

examples/01_obj/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}

examples/02_array/index.html

@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/02_array/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "valtio": "latest",
+    "valtio-yjs": "latest",
+    "y-websocket": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}