From 72e47b17ae514d84fb4a2f76871d11fbea3042ee Mon Sep 17 00:00:00 2001 From: Curran Date: Thu, 2 Mar 2023 04:22:11 -0500 Subject: [PATCH 1/6] Start on Vite example --- examples/counter-json1-vite/.gitignore | 24 ++++++++++++++ examples/counter-json1-vite/index.html | 14 ++++++++ examples/counter-json1-vite/main.js | 33 +++++++++++++++++++ examples/counter-json1-vite/package.json | 23 +++++++++++++ examples/counter-json1-vite/server.js | 41 ++++++++++++++++++++++++ 5 files changed, 135 insertions(+) create mode 100644 examples/counter-json1-vite/.gitignore create mode 100644 examples/counter-json1-vite/index.html create mode 100644 examples/counter-json1-vite/main.js create mode 100644 examples/counter-json1-vite/package.json create mode 100644 examples/counter-json1-vite/server.js diff --git a/examples/counter-json1-vite/.gitignore b/examples/counter-json1-vite/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ 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 new file mode 100644 index 000000000..8b3d96714 --- /dev/null +++ b/examples/counter-json1-vite/index.html @@ -0,0 +1,14 @@ + + + + + ShareDB Counter (ottype json1 with Vite) + + +
+ You clicked times. + +
+ + + diff --git a/examples/counter-json1-vite/main.js b/examples/counter-json1-vite/main.js new file mode 100644 index 000000000..ec2aada13 --- /dev/null +++ b/examples/counter-json1-vite/main.js @@ -0,0 +1,33 @@ +import ReconnectingWebSocket from 'reconnecting-websocket'; +import sharedb from 'sharedb/lib/client'; +import json1 from 'ot-json1'; + +// Open WebSocket connection to ShareDB server +var socket = new ReconnectingWebSocket('ws://' + window.location.host); +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}]); +} + +// Expose to index.html +global.increment = increment; diff --git a/examples/counter-json1-vite/package.json b/examples/counter-json1-vite/package.json new file mode 100644 index 000000000..d2f8a6c75 --- /dev/null +++ b/examples/counter-json1-vite/package.json @@ -0,0 +1,23 @@ +{ + "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.2.4", + "ws": "^8.12.1" + }, + "devDependencies": { + "vite": "^4.1.4" + } +} diff --git a/examples/counter-json1-vite/server.js b/examples/counter-json1-vite/server.js new file mode 100644 index 000000000..1c24334c4 --- /dev/null +++ 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}); + wss.on('connection', function(ws) { + var stream = new WebSocketJSONStream(ws); + backend.listen(stream); + }); + + server.listen(8080); + console.log('Listening on http://localhost:8080'); +} From 280d681914ff588718f79152149fa6f0b5805d71 Mon Sep 17 00:00:00 2001 From: Curran Date: Thu, 2 Mar 2023 07:17:44 -0500 Subject: [PATCH 2/6] Fix CI --- .eslintrc.js | 9 +++++++-- .gitignore | 1 + examples/counter-json1-vite/server.js | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 50a30441f..cf96acb8d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,13 +34,18 @@ var SHAREDB_RULES = { // as-needed quote props are easier to write 'quote-props': ['error', 'as-needed'], 'require-jsdoc': 'off', - 'valid-jsdoc': 'off' + 'valid-jsdoc': 'off', + + // Required after upgrade to ecmaVersion: 6 + 'no-invalid-this': 'off' }; module.exports = { extends: 'google', parserOptions: { - ecmaVersion: 3 + // Support ES6 imports and exports + ecmaVersion: 6, + sourceType: 'module' }, rules: Object.assign( {}, diff --git a/.gitignore b/.gitignore index 7c27974e1..1086994ce 100644 --- 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/server.js b/examples/counter-json1-vite/server.js index 1c24334c4..68e628d2e 100644 --- a/examples/counter-json1-vite/server.js +++ b/examples/counter-json1-vite/server.js @@ -1,7 +1,7 @@ import http from 'http'; import express from 'express'; import ShareDB from 'sharedb'; -import { WebSocketServer } from 'ws'; +import {WebSocketServer} from 'ws'; import WebSocketJSONStream from '@teamwork/websocket-json-stream'; import json1 from 'ot-json1'; From 0f4b21156ead6c07b8e9afa7c25020218aa6572a Mon Sep 17 00:00:00 2001 From: Curran Date: Wed, 8 Mar 2023 06:23:36 -0500 Subject: [PATCH 3/6] Got Vite example to work --- examples/counter-json1-vite/index.html | 2 +- examples/counter-json1-vite/main.js | 6 +++--- examples/counter-json1-vite/package.json | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/examples/counter-json1-vite/index.html b/examples/counter-json1-vite/index.html index 8b3d96714..35ad9051a 100644 --- a/examples/counter-json1-vite/index.html +++ b/examples/counter-json1-vite/index.html @@ -7,7 +7,7 @@
You clicked times. - +
diff --git a/examples/counter-json1-vite/main.js b/examples/counter-json1-vite/main.js index ec2aada13..5c3450ac6 100644 --- a/examples/counter-json1-vite/main.js +++ b/examples/counter-json1-vite/main.js @@ -1,6 +1,6 @@ import ReconnectingWebSocket from 'reconnecting-websocket'; -import sharedb from 'sharedb/lib/client'; import json1 from 'ot-json1'; +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); @@ -29,5 +29,5 @@ function increment() { doc.submitOp(['numClicks', {ena: 1}]); } -// Expose to index.html -global.increment = increment; +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 index d2f8a6c75..cadb5e3ec 100644 --- a/examples/counter-json1-vite/package.json +++ b/examples/counter-json1-vite/package.json @@ -15,6 +15,7 @@ "ot-json1": "^1.0.2", "reconnecting-websocket": "^4.4.0", "sharedb": "^3.2.4", + "sharedb-client-browser": "^4.2.0", "ws": "^8.12.1" }, "devDependencies": { From ff5d5152fea4ed3ecc885bc728b4811093c307d0 Mon Sep 17 00:00:00 2001 From: Curran Date: Wed, 29 Mar 2023 01:38:43 -0400 Subject: [PATCH 4/6] Use glob override for .eslintrc --- .eslintrc.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index cf96acb8d..eb5ad9671 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -34,18 +34,13 @@ var SHAREDB_RULES = { // as-needed quote props are easier to write 'quote-props': ['error', 'as-needed'], 'require-jsdoc': 'off', - 'valid-jsdoc': 'off', - - // Required after upgrade to ecmaVersion: 6 - 'no-invalid-this': 'off' + 'valid-jsdoc': 'off' }; module.exports = { extends: 'google', parserOptions: { - // Support ES6 imports and exports - ecmaVersion: 6, - sourceType: 'module' + ecmaVersion: 3 }, rules: Object.assign( {}, @@ -54,5 +49,17 @@ module.exports = { ), ignorePatterns: [ '/docs/' + ], + overrides: [ + { + files: ['examples/counter-json1-vite/*.js'], + parserOptions: { + ecmaVersion: 6, + sourceType: 'module' + }, + rules: { + quotes: ['error', 'single'] + } + } ] }; From c637650af4168de91e9cd64e7038f7f3f554117d Mon Sep 17 00:00:00 2001 From: Curran Date: Wed, 29 Mar 2023 01:58:04 -0400 Subject: [PATCH 5/6] Make it work --- examples/counter-json1-vite/main.js | 4 ++-- examples/counter-json1-vite/package.json | 8 ++++---- examples/counter-json1-vite/server.js | 2 +- examples/counter-json1-vite/vite.config.js | 13 +++++++++++++ 4 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 examples/counter-json1-vite/vite.config.js diff --git a/examples/counter-json1-vite/main.js b/examples/counter-json1-vite/main.js index 5c3450ac6..d742a0658 100644 --- a/examples/counter-json1-vite/main.js +++ b/examples/counter-json1-vite/main.js @@ -1,9 +1,9 @@ import ReconnectingWebSocket from 'reconnecting-websocket'; -import json1 from 'ot-json1'; +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); +var socket = new ReconnectingWebSocket('ws://' + window.location.host + '/ws'); sharedb.types.register(json1.type); var connection = new sharedb.Connection(socket); diff --git a/examples/counter-json1-vite/package.json b/examples/counter-json1-vite/package.json index cadb5e3ec..534780718 100644 --- a/examples/counter-json1-vite/package.json +++ b/examples/counter-json1-vite/package.json @@ -14,11 +14,11 @@ "express": "^4.18.2", "ot-json1": "^1.0.2", "reconnecting-websocket": "^4.4.0", - "sharedb": "^3.2.4", - "sharedb-client-browser": "^4.2.0", - "ws": "^8.12.1" + "sharedb": "^3.3.1", + "sharedb-client-browser": "^4.2.1", + "ws": "^8.13.0" }, "devDependencies": { - "vite": "^4.1.4" + "vite": "^4.2.1" } } diff --git a/examples/counter-json1-vite/server.js b/examples/counter-json1-vite/server.js index 68e628d2e..966927467 100644 --- a/examples/counter-json1-vite/server.js +++ b/examples/counter-json1-vite/server.js @@ -30,7 +30,7 @@ function startServer() { var server = http.createServer(app); // Connect any incoming WebSocket connection to ShareDB - var wss = new WebSocketServer({server: server}); + var wss = new WebSocketServer({server: server, path:'/ws'}); wss.on('connection', function(ws) { var stream = new WebSocketJSONStream(ws); backend.listen(stream); diff --git a/examples/counter-json1-vite/vite.config.js b/examples/counter-json1-vite/vite.config.js new file mode 100644 index 000000000..487d0009c --- /dev/null +++ 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, + }, + }, + }, +}) From c219205cee29cab3a3cfa6b6f220204b617634b5 Mon Sep 17 00:00:00 2001 From: Curran Date: Wed, 29 Mar 2023 02:03:20 -0400 Subject: [PATCH 6/6] Lint --- examples/counter-json1-vite/main.js | 2 +- examples/counter-json1-vite/server.js | 2 +- examples/counter-json1-vite/vite.config.js | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/counter-json1-vite/main.js b/examples/counter-json1-vite/main.js index d742a0658..8fd401aab 100644 --- a/examples/counter-json1-vite/main.js +++ b/examples/counter-json1-vite/main.js @@ -1,5 +1,5 @@ import ReconnectingWebSocket from 'reconnecting-websocket'; -import { json1 } from 'sharedb-client-browser/dist/ot-json1-umd.cjs'; +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 diff --git a/examples/counter-json1-vite/server.js b/examples/counter-json1-vite/server.js index 966927467..b00bfa524 100644 --- a/examples/counter-json1-vite/server.js +++ b/examples/counter-json1-vite/server.js @@ -30,7 +30,7 @@ function startServer() { var server = http.createServer(app); // Connect any incoming WebSocket connection to ShareDB - var wss = new WebSocketServer({server: server, path:'/ws'}); + var wss = new WebSocketServer({server: server, path: '/ws'}); wss.on('connection', function(ws) { var stream = new WebSocketJSONStream(ws); backend.listen(stream); diff --git a/examples/counter-json1-vite/vite.config.js b/examples/counter-json1-vite/vite.config.js index 487d0009c..f124d1bf5 100644 --- a/examples/counter-json1-vite/vite.config.js +++ b/examples/counter-json1-vite/vite.config.js @@ -1,4 +1,4 @@ -import { defineConfig } from 'vite'; +import {defineConfig} from 'vite'; export default defineConfig({ server: { @@ -6,8 +6,8 @@ export default defineConfig({ // Proxy websockets to ws://localhost:8080 for `npm run dev` '/ws': { target: 'ws://localhost:8080', - ws: true, - }, - }, - }, -}) + ws: true + } + } + } +});