Vite example

[curran]

Towards #593 by cloning the counter-json1 example and attempting to adapt it to use Vite.

Desired workflows:

• In dev, npm start to start the server, then in another terminal/tab npm run dev to load the front end with hot reloading enabled (still need to set up the WebSocket proxy for this, but there are blockers in the way of getting to this point)
• In prod npm run build followed by npm start, like in the other examples.

[curran]

Current status:

npm run dev should in theory work (aside from the WebSocket connection, which is solvable).

Currently the build results in the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object.mixin (emitter.js:7:32)
    at node_modules/sharedb/lib/client/doc.js (doc.js:124:9)
    at __require (chunk-RSJERJUL.js?v=7d3727ba:3:50)
    at node_modules/sharedb/lib/client/connection.js (connection.js:1:11)
    at __require (chunk-RSJERJUL.js?v=7d3727ba:3:50)
    at node_modules/sharedb/lib/client/index.js (index.js:1:22)
    at __require (chunk-RSJERJUL.js?v=7d3727ba:3:50)
    at index.js:6:18

Also, a warning is emitted

browser-external:events:9 Module "events" has been externalized for browser compatibility. Cannot access "events.EventEmitter" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

This page has some interesting information http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility, ultimately recommending that client-side libraries expose entry points that don't rely on Node polyfills.

[curran]

I'm not sure what the best solution for this would be, but ideally ShareDB would provide a build for the client entrypoint that is compatible with Vite and other build systems that do not have built-in support for Node polyfills.

Proposal

Introduce a new asset published to NPM that is a pre-built bundle of the client-side only.

For consumers of ShareDB, instead of saying

import sharedb from 'sharedb/lib/client'

we could say

import sharedb from 'sharedb/lib/client-browser.js'

To produce client-browser.js, the prepublish step of ShareDB itself could include a step that runs sharedb/lib/client through browserify, much like the examples do, which would include the appropriate Node polyfills.

Thoughts?

[curran]

This is odd.. Node 15 breaks in CI, but the breakage seems unrelated to the new changes:

[curran]

CI breakage is unrelated to this change.

See also:

• CI sanity check #599
• ShareDB CI Breakage sharedb-mongo#147

[coveralls]

Coverage: 97.507% (+0.04%) from 97.471% when pulling c219205 on curran:counter-json1-vite into f4845fd on share:master.

[curran]

This is working and ready for review.

[ericyhwang]

I haven't used Vite before, but seems straightforward enough! Just one suggestion around the ESLint config.

Re-review should happen without much delay, I was on vacation then got sick, so I'm just now getting caught up.

[ericyhwang]

Since this repo in general uses ES3 syntax at the moment, I'd recommend doing a glob override to use this custom config just for the new example, instead of for the entire repo:
https://eslint.org/docs/latest/use/configure/configuration-files#configuration-based-on-glob-patterns

[curran]

Thanks for the review @ericyhwang ! Feedback addressed.

[ericyhwang]

LGTM, thanks for the new example!

[curran]

Amazing! Thanks a ton.