@mocanvas/sync 4.1.1 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MIGRATION.md +34 -0
- package/package.json +4 -4
package/MIGRATION.md
CHANGED
|
@@ -253,6 +253,40 @@ during the zero-rename step. Under pnpm's strict `node_modules` that means
|
|
|
253
253
|
adding `@mocanvas/mocanvas` to your own dependencies alongside
|
|
254
254
|
`@mocanvas/compat`.
|
|
255
255
|
|
|
256
|
+
**If your own CSS reads tldraw's custom properties, add a second line:**
|
|
257
|
+
|
|
258
|
+
```ts
|
|
259
|
+
import "@mocanvas/compat/compat.css"
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
This is the half of the compat layer that nothing checks for you. The package
|
|
263
|
+
alias covers the symbols TypeScript sees; it cannot cover the `--tl-*` names in
|
|
264
|
+
your stylesheets. Without it a migration goes green — build, types, tests — and
|
|
265
|
+
the damage shows up only to the eye, because a `var()` that resolves to nothing
|
|
266
|
+
does not fail, it deletes the declaration it sits in (and inside `calc()`, the
|
|
267
|
+
whole property). One consumer found it as a cursor whose white outline had
|
|
268
|
+
quietly stopped being drawn.
|
|
269
|
+
|
|
270
|
+
`compat.css` maps tldraw's tokens onto mocanvas's and gives **every** one a
|
|
271
|
+
literal fallback, so a token with no counterpart cannot take a rule down with
|
|
272
|
+
it. Two groups are worth knowing about:
|
|
273
|
+
|
|
274
|
+
| tldraw token | What you get |
|
|
275
|
+
| --- | --- |
|
|
276
|
+
| `--tl-zoom`, `--tl-scale` | Real values. mocanvas now stamps `--mocanvas-zoom` and `--mocanvas-scale` on the canvas container and restamps them on zoom, so `calc()` rules that hold a constant on-screen size keep working. |
|
|
277
|
+
| `--tl-color-overlay`, `--tl-color-background-overlay`, `--tl-color-warn` | A static fallback. mocanvas has no equivalent, so these do not follow your theme — set them yourself if they matter. |
|
|
278
|
+
|
|
279
|
+
Everything else maps onto a themed mocanvas variable and follows a theme swap
|
|
280
|
+
or a flip to dark. The stylesheet is scoped to `.mocanvas` rather than `:root`,
|
|
281
|
+
so a page that still renders a real tldraw editor somewhere keeps its own
|
|
282
|
+
values.
|
|
283
|
+
|
|
284
|
+
**Next.js**: an app coming from tldraw almost certainly lists it in
|
|
285
|
+
`serverExternalPackages`. Next matches that by package name, so leaving
|
|
286
|
+
`@mocanvas/mocanvas` in the list turns `…/mocanvas.css` into a request Node has
|
|
287
|
+
to resolve — and Node has no loader for `.css`. Take mocanvas out of the list
|
|
288
|
+
entirely; there is nothing in it that needs to be external.
|
|
289
|
+
|
|
256
290
|
### Step 2 — drop the prefixes
|
|
257
291
|
|
|
258
292
|
Once the app builds and runs against `@mocanvas/compat`, rename `TLFoo` →
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mocanvas/sync",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"description": "Multiplayer for a mocanvas store: record diffs over a transport, plus presence and cursors.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Symbio Digital",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@mocanvas/editor": "4.
|
|
47
|
-
"@mocanvas/state": "4.
|
|
48
|
-
"@mocanvas/store": "4.
|
|
46
|
+
"@mocanvas/editor": "4.3.0",
|
|
47
|
+
"@mocanvas/state": "4.3.0",
|
|
48
|
+
"@mocanvas/store": "4.3.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/react": "^19.1.0",
|