Comments (3)
This is what lexical's prod build looks like, which would be what next.js's minifier is using as input and explains why next.js got this wrong in this specific way.
function Vi(t, n) {
const i = t._rootElement;
if (...) {
try {
const i = t._dirtyLeaves;
} catch (e) {
return;
} finally {
g.observe(i, Ii);
}
}
}
A correct minifier implementation would realize that the try {}
and finally {}
do not have the same scope.
You can try it yourself in any JavaScript implementation:
(() => { const i = 'outer'; try { const i = 'inner'; } finally { console.log(i); } })()
outer
from lexical.
As far as I can tell this looks like a bug in next.js, the minifier is doing an incorrect rename
Here's a segment of the production code that's broken:
minified commitPendingUpdates
function so(t, e) {
const n = t._pendingEditorState,
r = t._rootElement,
i = t._headless || null === r;
if (null === n) return;
const s = t._editorState,
l = s._selection,
c = n._selection,
a = 0 !== t._dirtyType,
u = qr,
d = Jr,
f = Ur,
h = t._updating,
g = t._observer;
let _ = null;
if (
((t._pendingEditorState = null),
(t._editorState = n),
!i && a && null !== g)
) {
(Ur = t), (qr = n), (Jr = !1), (t._updating = !0);
try {
const e = t._dirtyType,
r = t._dirtyElements,
o = t._dirtyLeaves;
g.disconnect(),
(_ = (function (t, e, n, r, o, i) {
(Xe = ""),
(Qe = ""),
(Ye = ""),
(tn = 2 === r),
(nn = null),
(Ke = n),
(Be = n._config),
(Ve = n._nodes),
(je = Ke._listeners.mutation),
(qe = o),
(Ue = i),
(Je = t._nodeMap),
($e = e._nodeMap),
(en = e._readOnly),
(Ge = new Map(n._keyToDOMMap));
const s = new Map();
return (
(He = s),
_n("root", null),
(Ke = void 0),
(Ve = void 0),
(qe = void 0),
(Ue = void 0),
(Je = void 0),
($e = void 0),
(Be = void 0),
(Ge = void 0),
(He = void 0),
s
);
})(s, n, t, e, r, o));
} catch (o) {
if ((o instanceof Error && t._onError(o), $r)) throw o;
return (
Po(t, null, r, n),
Pt(t),
(t._dirtyType = 2),
($r = !0),
so(t, s),
void ($r = !1)
);
} finally {
g.observe(o, Hr), (t._updating = h), (qr = u), (Jr = d), (Ur = f);
}
// removed code here
}
// removed code here
}
Here are just the relevant parts:
function so(t, e) {
const r = t._rootElement;
if (…) {
try {
const o = t._dirtyLeaves;
} catch (o) {
return;
} finally {
g.observe(o, Hr);
}
}
}
This is the original (only relevant parts):
export function commitPendingUpdates(
editor: LexicalEditor,
recoveryEditorState?: EditorState,
): void {
const rootElement = editor._rootElement;
if (…) {
try {
const dirtyLeaves = editor._dirtyLeaves;
} catch (error) {
return;
} finally {
observer.observe(rootElement as Node, observerOptions);
}
}
}
It looks like there's an unsafe and incorrect renaming in the production output. Maybe upgrading next.js would help fix this, I don't think there's anything that can be done in lexical to work around it.
from lexical.
Related Issues (20)
- How to keep styles between lines? HOT 6
- Feature: Lexical collaboration editor doesnt clear cache
- Bug: Inserting a paragraph after a table within a custom ElementNode causes an infinite loop
- Bug: failed to toggle link using TOGGLE_LINK_COMMAND HOT 3
- Feature: Full featured vanillajs example HOT 4
- Cleanup ArtificialNode__DO_NOT_USE
- Bug: Should not focus on root element HOT 2
- Bug: Cursor jump to the end of the document when a collaborator deletes focusing paragraph HOT 2
- Bug: Passing an empty ParagraphNode to $dfs incorrectly returns content from subsequent paragraphs
- Bug: Select all in copy pasted table broken
- Feature: bring all examples into the monorepo HOT 2
- Feature: document and export common/known update tags
- Bug: Changing the font size when inputting does not take effect HOT 12
- better support for keyboard accessibility
- Bug: Selection is removed when changing style of 2 different nodes HOT 1
- Bug: Cursor jumps to the end of the document after undo checkbox adding HOT 3
- Chore: Update vite, rollup, and associated build-related packages
- Bug: $getSelection always returns null. HOT 1
- Bug: CSS property `scroll-padding` not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lexical.