@jbpark/live-editor 4.4.0 → 4.5.0

package/README.md

@@ -130,8 +130,8 @@ can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — s
 ## ⚙️ Requirements
 
 - Peer deps: `react >=19`, `react-dom >=19`
-- Package metadata declares Node.js >=20; repository development/builds and CI use the version pinned in `.nvmrc` (currently 24.18.0).
-- **pnpm**: 10.x or higher (managed via [Corepack](https://nodejs.org/api/corepack.html))
+- Package metadata declares Node.js >=20. CI checks that the entries meant for Node (`utils`, `utils/ast`, `utils/tailwind`, `provider`, `error`) load on Node 20. Repository development, builds and the rest of CI use the version pinned in `.nvmrc` (currently 24.18.0).
+- **pnpm** (developing this repo only): the version in `packageManager` (currently 12.8.1), managed via [Corepack](https://nodejs.org/api/corepack.html). Installing the package works with any package manager.
 
 ## 🚀 Development (this repo)
 

package/dist/{boundary-B17cepvm.js → boundary-DnjGgsK6.js}

@@ -1,8 +1,10 @@
+import { i as useLiveMessages, t as MessagesContext } from "./messages-CzUPVnzH.js";
 import { t as cn } from "./cn-CAnad2vL.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/error/error.tsx
-const Error = ({ message, title = "An error occurred", className, onReset }) => {
+const Error = ({ message, title, className, onReset }) => {
+	const messages = useLiveMessages();
 	if (!message) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(className),
@@ -20,7 +22,7 @@ const Error = ({ message, title = "An error occurred", className, onReset }) =>
 					fontWeight: "bold",
 					margin: 0
 				},
-				children: title
+				children: title ?? messages.errors.default
 			}),
 			/* @__PURE__ */ jsx("pre", {
 				style: {
@@ -43,7 +45,7 @@ const Error = ({ message, title = "An error occurred", className, onReset }) =>
 					cursor: "pointer"
 				},
 				onClick: onReset,
-				children: "Try Again"
+				children: messages.errors.tryAgain
 			})
 		]
 	});
@@ -52,6 +54,7 @@ const Error = ({ message, title = "An error occurred", className, onReset }) =>
 //#region src/components/error/boundary.tsx
 const keysChanged = (prev = [], next = []) => prev.length !== next.length || next.some((key, i) => key !== prev[i]);
 var ErrorBoundary = class extends React.Component {
+	static contextType = MessagesContext;
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -85,7 +88,7 @@ var ErrorBoundary = class extends React.Component {
 		if (this.state.hasError) return this.props.fallback ? /* @__PURE__ */ jsx(Fragment, { children: this.props.fallback(this.state.error?.message, this.reset) }) : /* @__PURE__ */ jsx(Error, {
 			message: this.state.error?.message,
 			onReset: this.reset,
-			title: "Rendering Error"
+			title: this.context.errors.rendering
 		});
 		return this.props.children;
 	}
@@ -93,4 +96,4 @@ var ErrorBoundary = class extends React.Component {
 //#endregion
 export { Error as n, ErrorBoundary as t };
 
-//# sourceMappingURL=boundary-B17cepvm.js.map
+//# sourceMappingURL=boundary-DnjGgsK6.js.map

package/dist/boundary-DnjGgsK6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundary-DnjGgsK6.js","names":[],"sources":["../src/components/error/error.tsx","../src/components/error/boundary.tsx"],"sourcesContent":["import { useLiveMessages } from '~/components/context/messages';\nimport { cn } from '~/utils/cn';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  message?: string | null;\n  title?: string;\n  onReset?: () => void;\n}\n\nconst Error = ({ message, title, className, onReset }: Props) => {\n  const messages = useLiveMessages();\n\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(className)}\n      style={{\n        padding: '16px',\n        backgroundColor: '#fee2e2',\n        border: '1px solid #fca5a5',\n        borderRadius: '6px',\n        color: '#7f1d1d',\n      }}\n    >\n      <h3 style={{ fontSize: '14px', fontWeight: 'bold', margin: 0 }}>\n        {title ?? messages.errors.default}\n      </h3>\n      <pre\n        style={{\n          marginTop: '8px',\n          fontSize: '12px',\n          whiteSpace: 'pre-wrap',\n          margin: '8px 0 0 0',\n        }}\n      >\n        {message}\n      </pre>\n      {onReset && (\n        <button\n          style={{\n            marginTop: '8px',\n            padding: '4px 12px',\n            fontSize: '12px',\n            color: 'white',\n            backgroundColor: '#dc2626',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n          }}\n          onClick={onReset}\n        >\n          {messages.errors.tryAgain}\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Error;\n","import React from 'react';\n\nimport {\n  type LiveMessages,\n  MessagesContext,\n} from '~/components/context/messages';\n\nimport Error from './error';\n\ninterface Props {\n  children: React.ReactNode;\n  // `reset` clears the caught error and renders `children` again, the same\n  // thing the built-in error's reset button does.\n  fallback?: (message?: string, reset?: () => void) => React.ReactNode;\n  onError?: (e: Error, info: React.ErrorInfo) => void;\n  // Values whose identity changing (typically the code/module that produced\n  // `children`) should auto-recover a caught error without needing a\n  // remount — compared shallowly, one entry at a time, same idea as\n  // react-error-boundary's resetKeys. Without this, once tripped, render()\n  // never even attempts `children` again (see below), so a fix to the\n  // underlying code has no way to reach the screen until this array changes\n  // or something remounts the boundary via `key`.\n  resetKeys?: readonly unknown[];\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n  // The resetKeys the last render saw, so getDerivedStateFromProps can tell\n  // when they change.\n  resetKeys?: readonly unknown[];\n}\n\nconst keysChanged = (\n  prev: readonly unknown[] = [],\n  next: readonly unknown[] = [],\n) => prev.length !== next.length || next.some((key, i) => key !== prev[i]);\n\nclass ErrorBoundary extends React.Component<Props, State> {\n  static contextType = MessagesContext;\n  declare context: LiveMessages;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, resetKeys: props.resetKeys };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<State> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('🚨 [Boundary] Rendering error:', error, errorInfo);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  // Clears a caught error in the same render that sees new resetKeys, so\n  // `children` get their next chance right away and the fallback doesn't\n  // render (and run its effects) once more first (#442). If `children` throw\n  // again with the new keys, getDerivedStateFromError catches that in this\n  // same render pass.\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State,\n  ): Partial<State> | null {\n    if (!keysChanged(state.resetKeys, props.resetKeys)) {\n      return null;\n    }\n\n    return state.hasError\n      ? { hasError: false, error: undefined, resetKeys: props.resetKeys }\n      : { resetKeys: props.resetKeys };\n  }\n\n  reset = () => this.setState({ hasError: false, error: undefined });\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback ? (\n        <>{this.props.fallback(this.state.error?.message, this.reset)}</>\n      ) : (\n        <Error\n          message={this.state.error?.message}\n          onReset={this.reset}\n          title={this.context.errors.rendering}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;;AASA,MAAM,SAAS,EAAE,SAAS,OAAO,WAAW,cAAqB;CAC/D,MAAM,WAAW,gBAAgB;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,SAAS;EACvB,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,OAAO;EACT;EARF,UAAA;GAUE,oBAAC,MAAD;IAAI,OAAO;KAAE,UAAU;KAAQ,YAAY;KAAQ,QAAQ;IAAE;IAC1D,UAAA,SAAS,SAAS,OAAO;GACxB,CAAA;GACJ,oBAAC,OAAD;IACE,OAAO;KACL,WAAW;KACX,UAAU;KACV,YAAY;KACZ,QAAQ;IACV;IAEC,UAAA;GACE,CAAA;GACJ,WACC,oBAAC,UAAD;IACE,OAAO;KACL,WAAW;KACX,SAAS;KACT,UAAU;KACV,OAAO;KACP,iBAAiB;KACjB,QAAQ;KACR,cAAc;KACd,QAAQ;IACV;IACA,SAAS;IAER,UAAA,SAAS,OAAO;GACX,CAAA;EAEP;;AAET;;;AC1BA,MAAM,eACJ,OAA2B,CAAC,GAC5B,OAA2B,CAAC,MACzB,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,EAAE;AAEzE,IAAM,gBAAN,cAA4B,MAAM,UAAwB;CACxD,OAAO,cAAc;CAGrB,YAAY,OAAc;EACxB,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,UAAU;GAAO,WAAW,MAAM;EAAU;CAC7D;CAEA,OAAO,yBAAyB,OAA8B;EAC5D,OAAO;GAAE,UAAU;GAAM;EAAM;CACjC;CAEA,kBAAkB,OAAc,WAA4B;EAC1D,QAAQ,MAAM,kCAAkC,OAAO,SAAS;EAChE,KAAK,MAAM,UAAU,OAAO,SAAS;CACvC;CAOA,OAAO,yBACL,OACA,OACuB;EACvB,IAAI,CAAC,YAAY,MAAM,WAAW,MAAM,SAAS,GAC/C,OAAO;EAGT,OAAO,MAAM,WACT;GAAE,UAAU;GAAO,OAAO,KAAA;GAAW,WAAW,MAAM;EAAU,IAChE,EAAE,WAAW,MAAM,UAAU;CACnC;CAEA,cAAc,KAAK,SAAS;EAAE,UAAU;EAAO,OAAO,KAAA;CAAU,CAAC;CAEjE,SAAS;EACP,IAAI,KAAK,MAAM,UACb,OAAO,KAAK,MAAM,WAChB,oBAAA,UAAA,EAAA,UAAG,KAAK,MAAM,SAAS,KAAK,MAAM,OAAO,SAAS,KAAK,KAAK,EAAI,CAAA,IAEhE,oBAAC,OAAD;GACE,SAAS,KAAK,MAAM,OAAO;GAC3B,SAAS,KAAK;GACd,OAAO,KAAK,QAAQ,OAAO;EAC5B,CAAA;EAIL,OAAO,KAAK,MAAM;CACpB;AACF"}

package/dist/{context-DB5kW3qe.js → context-DsEXJl4h.js}

@@ -1,10 +1,11 @@
 import { a as DEFAULT_TEMPLATE } from "./constants-h1JAgOeW.js";
 import { r as registerEditorSession } from "./editor-caches-ClMvdcQF.js";
+import { r as mergeMessages, t as MessagesContext } from "./messages-CzUPVnzH.js";
 import { n as PreviewContext, t as ErrorContext } from "./states-Ci1AvoQ9.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/context/context.tsx
-const ContextProvider = ({ children }) => {
+const ContextProvider = ({ children, messages }) => {
 	const [code, setCodeState] = useState(DEFAULT_TEMPLATE);
 	const [error, setError] = useState(null);
 	const setCode = useCallback((next) => {
@@ -20,15 +21,20 @@ const ContextProvider = ({ children }) => {
 		error,
 		setError
 	}), [error, setError]);
+	const inherited = useContext(MessagesContext);
+	const messagesValue = useMemo(() => mergeMessages(messages, inherited), [messages, inherited]);
 	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
 		value: previewValue,
 		children: /* @__PURE__ */ jsx(ErrorContext.Provider, {
 			value: errorValue,
-			children
+			children: /* @__PURE__ */ jsx(MessagesContext.Provider, {
+				value: messagesValue,
+				children
+			})
 		})
 	});
 };
 //#endregion
 export { ContextProvider as t };
 
-//# sourceMappingURL=context-DB5kW3qe.js.map
+//# sourceMappingURL=context-DsEXJl4h.js.map

package/dist/context-DsEXJl4h.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-DsEXJl4h.js","names":[],"sources":["../src/components/context/context.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { DEFAULT_TEMPLATE } from '~/constants';\nimport { registerEditorSession } from '~/utils/editor-caches';\n\nimport {\n  type LiveMessagesInput,\n  MessagesContext,\n  mergeMessages,\n} from './messages';\nimport type { ErrorContextType, PreviewContextType } from './states';\nimport { ErrorContext, PreviewContext } from './states';\n\nexport interface Props {\n  children?: React.ReactNode;\n  // Replaces any of the editor's built-in text, group by group: the rest\n  // stays English, or the enclosing `Live`'s. Define it once outside render, or memoize it, since a\n  // new object re-renders every component that shows text (#524).\n  messages?: LiveMessagesInput;\n}\n\nconst ContextProvider = ({ children, messages }: Props) => {\n  const [code, setCodeState] = useState(DEFAULT_TEMPLATE);\n  const [error, setError] = useState<ErrorContextType['error']>(null);\n\n  // Clears any stale runtime/compile error in the same update batch that\n  // changes `code`, rather than in a separate useEffect — a useEffect here\n  // would race with componentDidCatch/Guard's onError firing for the *new*\n  // code's own errors within the same commit (layout effects run before\n  // passive effects, so a passive-effect reset could wipe out an error the\n  // new code just threw). Batching setError(null) into the same update as\n  // setCode guarantees stale errors are gone by the time the new code even\n  // renders, with nothing left afterward that could clobber a fresh one.\n  const setCode = useCallback<PreviewContextType['setCode']>(next => {\n    setError(null);\n    setCodeState(next);\n  }, []);\n\n  // The provider is the ownership boundary for every editor-owned cache, not\n  // just the compilation one it used to clear here: parsed documents,\n  // extracted bindings and the blob URLs generated for external scripts all\n  // outlive an editing session otherwise, released only when the LRU happens\n  // to evict them. registerEditorSession both counts this session and hands\n  // back the release, so the caches go when the last provider does.\n  useEffect(() => registerEditorSession(), []);\n\n  // Without this, a new object identity on every ContextProvider render\n  // (even ones that don't touch code/error at all, e.g. a parent\n  // re-rendering) meant every usePreview()/useError() consumer re-rendered\n  // too, regardless of whether the values they care about actually changed.\n  const previewValue = useMemo<PreviewContextType>(\n    () => ({ code, setCode }),\n    [code, setCode],\n  );\n\n  const errorValue = useMemo<ErrorContextType>(\n    () => ({ error, setError }),\n    [error, setError],\n  );\n\n  // A provider inside another one starts from the outer one's messages, so\n  // a page can set them once around several editors.\n  const inherited = useContext(MessagesContext);\n  const messagesValue = useMemo(\n    () => mergeMessages(messages, inherited),\n    [messages, inherited],\n  );\n\n  return (\n    <PreviewContext.Provider value={previewValue}>\n      <ErrorContext.Provider value={errorValue}>\n        <MessagesContext.Provider value={messagesValue}>\n          {children}\n        </MessagesContext.Provider>\n      </ErrorContext.Provider>\n    </PreviewContext.Provider>\n  );\n};\n\nexport default ContextProvider;\n"],"mappings":";;;;;;;AA6BA,MAAM,mBAAmB,EAAE,UAAU,eAAsB;CACzD,MAAM,CAAC,MAAM,gBAAgB,SAAS,gBAAgB;CACtD,MAAM,CAAC,OAAO,YAAY,SAAoC,IAAI;CAUlE,MAAM,UAAU,aAA2C,SAAQ;EACjE,SAAS,IAAI;EACb,aAAa,IAAI;CACnB,GAAG,CAAC,CAAC;CAQL,gBAAgB,sBAAsB,GAAG,CAAC,CAAC;CAM3C,MAAM,eAAe,eACZ;EAAE;EAAM;CAAQ,IACvB,CAAC,MAAM,OAAO,CAChB;CAEA,MAAM,aAAa,eACV;EAAE;EAAO;CAAS,IACzB,CAAC,OAAO,QAAQ,CAClB;CAIA,MAAM,YAAY,WAAW,eAAe;CAC5C,MAAM,gBAAgB,cACd,cAAc,UAAU,SAAS,GACvC,CAAC,UAAU,SAAS,CACtB;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,oBAAC,gBAAgB,UAAjB;IAA0B,OAAO;IAC9B;GACuB,CAAA;EACL,CAAA;CACA,CAAA;AAE7B"}

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as DndInspector, A as useDndPanel, B as DndPalette, C as useDndItems, D as DndLayout, E as useDndChildren, F as Palette, G as PanelBinding, H as Props, I as Panel, J as PanelBindingSource, K as PanelBindingData, L as DraggableItem, M as DndLayoutProps, N as DndRegionProps, O as useDndLayout, P as Layout, Q as withPanelCommit, R as DraggableItemDragState, S as DndItemsOptions, T as DndChildrenOptions, U as DndRenderSectionFallback, V as DndPanel, W as DndSectionFallbackArgs, X as PanelNodesChange, Y as PanelNodeChange, Z as resolvePanelBindings, _ as DndItemsActions, a as ItemsEditorActions, at as FieldProps, b as DndItemsNestedElement, c as ItemsEditorNestedGroup, d as useItemsEditor, et as DndNodePick, f as FieldKind, g as DndItems, h as isStructuralFieldKind, i as ItemsEditor, it as Field, j as Canvas, k as useDndPalette, l as ItemsEditorOptions, m as getFieldKind, n as ChildrenEditorOptions, nt as DndEditError, o as ItemsEditorItem, p as FieldKindBinding, q as PanelBindingElement, r as Dnd, rt as DndRenderField, s as ItemsEditorNestedElement, t as ChildrenEditor, tt as useDndInspector, u as useChildrenEditor, v as DndItemsExpansion, w as DndChildren, x as DndItemsNestedGroup, y as DndItemsItem, z as DraggableItemProps } from "../index-Dgh1JTX3.js";
+import { $ as DndInspector, A as useDndPanel, B as DndPalette, C as useDndItems, D as DndLayout, E as useDndChildren, F as Palette, G as PanelBinding, H as Props, I as Panel, J as PanelBindingSource, K as PanelBindingData, L as DraggableItem, M as DndLayoutProps, N as DndRegionProps, O as useDndLayout, P as Layout, Q as withPanelCommit, R as DraggableItemDragState, S as DndItemsOptions, T as DndChildrenOptions, U as DndRenderSectionFallback, V as DndPanel, W as DndSectionFallbackArgs, X as PanelNodesChange, Y as PanelNodeChange, Z as resolvePanelBindings, _ as DndItemsActions, a as ItemsEditorActions, at as FieldProps, b as DndItemsNestedElement, c as ItemsEditorNestedGroup, d as useItemsEditor, et as DndNodePick, f as FieldKind, g as DndItems, h as isStructuralFieldKind, i as ItemsEditor, it as Field, j as Canvas, k as useDndPalette, l as ItemsEditorOptions, m as getFieldKind, n as ChildrenEditorOptions, nt as DndEditError, o as ItemsEditorItem, p as FieldKindBinding, q as PanelBindingElement, r as Dnd, rt as DndRenderField, s as ItemsEditorNestedElement, t as ChildrenEditor, tt as useDndInspector, u as useChildrenEditor, v as DndItemsExpansion, w as DndChildren, x as DndItemsNestedGroup, y as DndItemsItem, z as DraggableItemProps } from "../index-P9Aifaui.js";
 export { Canvas, ChildrenEditor, ChildrenEditorOptions, type DndChildren, type DndChildrenOptions, type DndEditError, type DndInspector, type DndItems, type DndItemsActions, type DndItemsExpansion, type DndItemsItem, type DndItemsNestedElement, type DndItemsNestedGroup, type DndItemsOptions, type DndLayout, type DndLayoutProps, type DndNodePick, type DndPalette, type DndPanel, type DndRegionProps, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, DraggableItem, type DraggableItemDragState, type DraggableItemProps, Field, type FieldKind, type FieldKindBinding, type FieldProps, ItemsEditor, ItemsEditorActions, ItemsEditorItem, ItemsEditorNestedElement, ItemsEditorNestedGroup, ItemsEditorOptions, Layout, Palette, Panel, type PanelBinding, type PanelBindingData, type PanelBindingElement, type PanelBindingSource, type PanelNodeChange, type PanelNodesChange, type Props, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { _ as useDndPanel, a as Layout, c as Field, d as isStructuralFieldKind, f as useDndChildren, g as useDndPalette, h as useDndLayout, i as Canvas, l as useDndItems, m as withPanelCommit, n as useChildrenEditor, o as Palette, p as resolvePanelBindings, r as useItemsEditor, s as Panel, t as Dnd, u as getFieldKind, v as DraggableItem, y as useDndInspector } from "../dnd-BE5ZizqX.js";
+import { _ as useDndPanel, a as Layout, c as Field, d as isStructuralFieldKind, f as useDndChildren, g as useDndPalette, h as useDndLayout, i as Canvas, l as useDndItems, m as withPanelCommit, n as useChildrenEditor, o as Palette, p as resolvePanelBindings, r as useItemsEditor, s as Panel, t as Dnd, u as getFieldKind, v as DraggableItem, y as useDndInspector } from "../dnd-DGNp20Nk.js";
 export { Canvas, DraggableItem, Field, Layout, Palette, Panel, Dnd as default, getFieldKind, isStructuralFieldKind, resolvePanelBindings, useChildrenEditor, useDndChildren, useDndInspector, useDndItems, useDndLayout, useDndPalette, useDndPanel, useItemsEditor, withPanelCommit };