diff --git a/.eslintrc.js b/.eslintrc.js index 50a30441f..eb5ad9671 100644 --- 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 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/.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..35ad9051a --- /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..8fd401aab --- /dev/null +++ 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 new file mode 100644 index 000000000..534780718 --- /dev/null +++ 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 new file mode 100644 index 000000000..b00bfa524 --- /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, 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 new file mode 100644 index 000000000..f124d1bf5 --- /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 + } + } + } +});