share · ericyhwang · Mar 30, 2023 · Mar 2, 2023 · Mar 2, 2023 · Mar 8, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -49,5 +49,17 @@ module.exports = {
   ),
   ignorePatterns: [
     '/docs/'
+  ],
+  overrides: [
+    {
+      files: ['examples/counter-json1-vite/*.js'],
+      parserOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module'
+      },
+      rules: {
+        quotes: ['error', 'single']
+      }
+    }
   ]
 };
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,4 @@ jspm_packages
 
 # Don't commit generated JS bundles
 examples/**/static/dist/bundle.js
+examples/**/dist
diff --git a/examples/counter-json1-vite/.gitignore b/examples/counter-json1-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/counter-json1-vite/index.html b/examples/counter-json1-vite/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ShareDB Counter (ottype json1 with Vite)</title>
+  </head>
+  <body>
+    <div style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 36px;">
+      You clicked <span id="num-clicks"></span> times.
+      <button style="font-size: 36px;" class="increment">+1</button>
+    </div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/examples/counter-json1-vite/main.js b/examples/counter-json1-vite/main.js
@@ -0,0 +1,33 @@
+import ReconnectingWebSocket from 'reconnecting-websocket';
+import {json1} from 'sharedb-client-browser/dist/ot-json1-umd.cjs';
+import sharedb from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
+
+// Open WebSocket connection to ShareDB server
+var socket = new ReconnectingWebSocket('ws://' + window.location.host + '/ws');
+sharedb.types.register(json1.type);
+var connection = new sharedb.Connection(socket);
+
+// Create local Doc instance mapped to 'examples' collection document with id 'counter'
+var doc = connection.get('examples', 'counter');
+
+// Get initial value of document and subscribe to changes
+doc.subscribe(showNumbers);
+// When document changes (by this client or any other, or the server),
+// update the number on the page
+doc.on('op', showNumbers);
+
+function showNumbers() {
+  document.querySelector('#num-clicks').textContent = doc.data.numClicks;
+};
+
+// When clicking on the '+1' button, change the number in the local
+// document and sync the change to the server and other connected
+// clients
+function increment() {
+  // Increment `doc.data.numClicks`. See
+  // https://github.com/ottypes/json1/blob/master/spec.md for list of valid operations.
+  doc.submitOp(['numClicks', {ena: 1}]);
+}
+
+var button = document.querySelector('button.increment');
+button.addEventListener('click', increment);
diff --git a/examples/counter-json1-vite/package.json b/examples/counter-json1-vite/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "counter-json1-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@teamwork/websocket-json-stream": "^2.0.0",
+    "express": "^4.18.2",
+    "ot-json1": "^1.0.2",
+    "reconnecting-websocket": "^4.4.0",
+    "sharedb": "^3.3.1",
+    "sharedb-client-browser": "^4.2.1",
+    "ws": "^8.13.0"
+  },
+  "devDependencies": {
+    "vite": "^4.2.1"
+  }
+}
diff --git a/examples/counter-json1-vite/server.js b/examples/counter-json1-vite/server.js
@@ -0,0 +1,41 @@
+import http from 'http';
+import express from 'express';
+import ShareDB from 'sharedb';
+import {WebSocketServer} from 'ws';
+import WebSocketJSONStream from '@teamwork/websocket-json-stream';
+import json1 from 'ot-json1';
+
+ShareDB.types.register(json1.type);
+var backend = new ShareDB();
+createDoc(startServer);
+
+// Create initial document then fire callback
+function createDoc(callback) {
+  var connection = backend.connect();
+  var doc = connection.get('examples', 'counter');
+  doc.fetch(function(err) {
+    if (err) throw err;
+    if (doc.type === null) {
+      doc.create({numClicks: 0}, json1.type.uri, callback);
+      return;
+    }
+    callback();
+  });
+}
+
+function startServer() {
+  // Create a web server to serve files and listen to WebSocket connections
+  var app = express();
+  app.use(express.static('dist'));
+  var server = http.createServer(app);
+
+  // Connect any incoming WebSocket connection to ShareDB
+  var wss = new WebSocketServer({server: server, path: '/ws'});
+  wss.on('connection', function(ws) {
+    var stream = new WebSocketJSONStream(ws);
+    backend.listen(stream);
+  });
+
+  server.listen(8080);
+  console.log('Listening on http://localhost:8080');
+}
diff --git a/examples/counter-json1-vite/vite.config.js b/examples/counter-json1-vite/vite.config.js
@@ -0,0 +1,13 @@
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  server: {
+    proxy: {
+      // Proxy websockets to ws://localhost:8080 for `npm run dev`
+      '/ws': {
+        target: 'ws://localhost:8080',
+        ws: true
+      }
+    }
+  }
+});