ES Modules Demo

Show
1

I made a demo that loads the basic ProseMirror demo using native ES modules from the browser! No bundling!

Try it out…

https://prosemirror-es-modules.glitch.me/

Source:

It uses the ES modules support from the UNPKG CDN.

I had to fork all the ProseMirror modules used so I could add the “module” property to the package.json in order to resolve the top-level source module for unpkg.

The imports now look like this (from index.js):

import {EditorState} from "https://unpkg.com/@jimpick/prosemirror-state?module"
import {EditorView} from "https://unpkg.com/@jimpick/prosemirror-view?module"
import {Schema, DOMParser} from "https://unpkg.com/@jimpick/prosemirror-model?module"
import {schema} from "https://unpkg.com/@jimpick/prosemirror-schema-basic?module"
import {addListNodes} from "https://unpkg.com/@jimpick/prosemirror-schema-list?module"
import {exampleSetup} from "https://unpkg.com/@jimpick/prosemirror-example-setup?module"

Supporting native ES modules from the browser would be nice for people who just want to quickly experiment without having to set up a whole toolchain on their computer.

I also had to fork crel, orderedmap, rope-sequence and w3c-keyname in order to convert them to have ES exports.

As opposed to using a bundler, this results in a lot of HTTP requests (but HTTP/2, QUIC and WebPackage should reduce that penalty over time). Personally, I have some applications in mind that use ES modules with IPFS and Dat.

4 Likes
2

Nice!

(But, as I mentioned on twitter, not practical enough to adjust the main distributed packages for—I’m keeping an eye on the way node and browsers are dealing with ES modules, and will move to conform to what they decide on when there’s a practical solution, but they aren’t there yet, and them getting there is taking an unexpectedly long time.)

3

The nice thing about unpkg is that the only modification needed for the prosemirror-* modules is the addition of a “module” property to the package.json to point at the top level source file.

4

I came here specifically looking to see if anyone was providing ES module builds so that I wouldn’t have to have a build step in my application. Thanks for publishing these on npm, it certainly makes things faster during development.

5

I provide a solution that is discussed on the next page:

If you are still interested in buildless ESM build for Prose Mirror, I suggest joining this thread.