@jbpark/live-editor 4.0.1 → 4.1.1
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/dist/ast-jab6hQrT.js +1544 -0
- package/dist/ast-jab6hQrT.js.map +1 -0
- package/dist/{boundary-C90q3YsT.js → boundary-D2IFja-3.js} +2 -2
- package/dist/boundary-D2IFja-3.js.map +1 -0
- package/dist/cache-B0-XcIxJ.js +51 -0
- package/dist/cache-B0-XcIxJ.js.map +1 -0
- package/dist/{utils-BQ7WL7Jh.js → cn-CAnad2vL.js} +3 -128
- package/dist/cn-CAnad2vL.js.map +1 -0
- package/dist/compile-CBOAtQMz.js +103 -0
- package/dist/compile-CBOAtQMz.js.map +1 -0
- package/dist/constants-BD3FZKWE.js +1450 -0
- package/dist/constants-BD3FZKWE.js.map +1 -0
- package/dist/{context-Y-M9fViD.js → context-DQ-UtoyS.js} +3 -3
- package/dist/context-DQ-UtoyS.js.map +1 -0
- package/dist/{core-Co8Nlq16.js → core-DaXVtvH5.js} +3 -2
- package/dist/core-DaXVtvH5.js.map +1 -0
- package/dist/detect-typescript-b0A751v2.js +10 -0
- package/dist/detect-typescript-b0A751v2.js.map +1 -0
- package/dist/dnd/index.d.ts +1 -1
- package/dist/dnd/index.js +1 -1
- package/dist/{dnd-_0jfnnVB.js → dnd-CMrXfD8O.js} +31 -9
- package/dist/dnd-CMrXfD8O.js.map +1 -0
- package/dist/{extract-abHYmNsu.js → document-C5Dypv4_.js} +7373 -9553
- package/dist/document-C5Dypv4_.js.map +1 -0
- package/dist/editor/index.js +2 -2
- package/dist/{editor-aNRx7hRY.js → editor-C3tQaMlU.js} +2 -2
- package/dist/{editor-aNRx7hRY.js.map → editor-C3tQaMlU.js.map} +1 -1
- package/dist/editor-caches-ClMvdcQF.js +23 -0
- package/dist/editor-caches-ClMvdcQF.js.map +1 -0
- package/dist/error/index.js +2 -2
- package/dist/{error-o0SBwtTv.js → error-KW8XCcjH.js} +2 -2
- package/dist/{error-o0SBwtTv.js.map → error-KW8XCcjH.js.map} +1 -1
- package/dist/{index-Doh4VTXr.d.ts → index-C4t0OawE.d.ts} +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +5 -5
- package/dist/preview/index.js +2 -2
- package/dist/{preview-DKyKKcu7.js → preview-BwEfltgi.js} +10 -6
- package/dist/preview-BwEfltgi.js.map +1 -0
- package/dist/provider/index.js +1 -1
- package/dist/sections-B7dWoNVJ.js +19 -0
- package/dist/sections-B7dWoNVJ.js.map +1 -0
- package/dist/style.css +550 -688
- package/dist/{use-dynamic-tailwind-BF8TQ3Yy.js → use-dynamic-tailwind-DuGLeDR3.js} +20 -6
- package/dist/use-dynamic-tailwind-DuGLeDR3.js.map +1 -0
- package/dist/utils/ast/index.js +2 -2
- package/dist/utils/index.d.ts +16 -6
- package/dist/utils/index.js +6 -2
- package/dist/utils/tailwind/index.js +27 -1
- package/dist/{tailwind-CbjdLyVX.js.map → utils/tailwind/index.js.map} +1 -1
- package/package.json +2 -2
- package/dist/ast-CZwpVrJv.js +0 -851
- package/dist/ast-CZwpVrJv.js.map +0 -1
- package/dist/boundary-C90q3YsT.js.map +0 -1
- package/dist/context-Y-M9fViD.js.map +0 -1
- package/dist/core-Co8Nlq16.js.map +0 -1
- package/dist/dnd-_0jfnnVB.js.map +0 -1
- package/dist/extract-abHYmNsu.js.map +0 -1
- package/dist/preview-DKyKKcu7.js.map +0 -1
- package/dist/tailwind-CbjdLyVX.js +0 -28
- package/dist/use-dynamic-tailwind-BF8TQ3Yy.js.map +0 -1
- package/dist/utils-BQ7WL7Jh.js.map +0 -1
package/dist/editor/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as Core } from "../core-
|
|
2
|
-
import { t as Editor } from "../editor-
|
|
1
|
+
import { t as Core } from "../core-DaXVtvH5.js";
|
|
2
|
+
import { t as Editor } from "../editor-C3tQaMlU.js";
|
|
3
3
|
export { Core, Editor as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
|
|
2
|
-
import { n as useFormatCode, t as Core } from "./core-
|
|
2
|
+
import { n as useFormatCode, t as Core } from "./core-DaXVtvH5.js";
|
|
3
3
|
import { useCallback, useState } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { useDebouncedCallback } from "@jbpark/use-hooks";
|
|
@@ -63,4 +63,4 @@ Editor.Core = Core;
|
|
|
63
63
|
//#endregion
|
|
64
64
|
export { Editor as t };
|
|
65
65
|
|
|
66
|
-
//# sourceMappingURL=editor-
|
|
66
|
+
//# sourceMappingURL=editor-C3tQaMlU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor-
|
|
1
|
+
{"version":3,"file":"editor-C3tQaMlU.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { useDebouncedCallback } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\n\nimport Core, { type Props as CoreProps } from './core';\nimport { useFormatCode } from './use-format-code';\n\nexport interface EditorRenderData {\n value: string;\n onChange: (value: string) => void;\n // Same prettier-based formatting Core's own Cmd+S uses - reused rather\n // than reimplemented, so a custom editor can offer equivalent\n // format-on-save behavior without duplicating the prettier wiring.\n formatCode: (code: string) => Promise<string>;\n}\n\nexport interface Props extends Omit<CoreProps, 'value' | 'onSave' | 'onError'> {\n value?: string;\n defaultValue?: string;\n debounce?: number;\n // Full replacement for the built-in CodeMirror editor. Editor still owns\n // syncing `value` to the shared preview code (debounced), regardless of\n // which UI renders it - only the editing surface itself is customizable.\n renderEditor?: (data: EditorRenderData) => React.ReactNode;\n}\n\nconst Editor = ({\n defaultValue,\n value: _value,\n debounce = 1000,\n onChange: _onChange,\n renderEditor,\n fragment,\n prettierOptions,\n ...props\n}: Props) => {\n const { code, setCode } = usePreview();\n const { setError } = useError();\n\n // Controlled, the host owns the document. Uncontrolled, the provider does\n // (#341): `draft` shows each keystroke at once, while the provider only\n // hears about it after `debounce`. Without a draft, the editor had nowhere\n // to keep what was typed, so an uncontrolled editor dropped every edit.\n const controlled = _value !== undefined;\n const [draft, setDraft] = useState(() => defaultValue ?? code);\n\n // The last code this editor pushed, and the provider code it has already\n // seen. A provider change that isn't this editor's own push came from\n // somewhere else sharing the provider — an uncontrolled DnD, say — and the\n // draft follows it. Adjusted during render so no frame shows the old one.\n const [pushed, setPushed] = useState<string | null>(null);\n const [seenCode, setSeenCode] = useState(code);\n\n if (code !== seenCode) {\n setSeenCode(code);\n\n if (!controlled && code !== pushed) {\n setDraft(code);\n }\n }\n\n const value = controlled ? _value : draft;\n\n const pushCode = useCallback(\n (next: string) => {\n setPushed(next);\n setCode(next);\n },\n [setCode],\n );\n\n const onChange = useCallback(\n (next: string) => {\n if (!controlled) {\n setDraft(next);\n }\n\n _onChange?.(next);\n },\n [_onChange, controlled],\n );\n\n // Formatting on save reaches the provider at once, ahead of the debounce.\n const onSave = useCallback(\n (formattedCode: string) => {\n pushCode(formattedCode);\n },\n [pushCode],\n );\n\n const onError = useCallback(\n (error: string | null) => {\n setError(error);\n },\n [setError],\n );\n\n const formatCode = useFormatCode({ fragment, prettierOptions });\n\n // Pushes `value` to the provider `debounce` ms after it stops changing,\n // and at once on mount. A pending push is never dropped: it runs when the\n // editor unmounts, and when focus leaves it — so clicking into another\n // surface right after typing edits a document that includes the typing.\n const push = useDebouncedCallback(\n () => pushCode(value),\n { delay: debounce, flushOnUnmount: true },\n [value],\n );\n\n // `display: contents` so the wrapper adds a blur listener without adding a\n // box: the editor lays out against this element's parent, as before.\n return (\n <div style={{ display: 'contents' }} onBlur={push.flush}>\n {renderEditor ? (\n renderEditor({ value, onChange, formatCode })\n ) : (\n <Core\n value={value}\n onChange={onChange}\n onSave={onSave}\n onError={onError}\n fragment={fragment}\n prettierOptions={prettierOptions}\n {...props}\n />\n )}\n </div>\n );\n};\n\nexport default Editor;\n","import Core, { type Props as CoreProps } from './core';\nimport EditorImpl, { type EditorRenderData, type Props } from './editor';\n\ntype EditorComponent = typeof EditorImpl & { Core: typeof Core };\n\nconst Editor = EditorImpl as EditorComponent;\n\nEditor.Core = Core;\n\nexport { Core };\nexport type { Props, CoreProps, EditorRenderData };\nexport default Editor;\n"],"mappings":";;;;;;AA4BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,YAAY,WAAW;CACrC,MAAM,EAAE,aAAa,SAAS;CAM9B,MAAM,aAAa,WAAW,KAAA;CAC9B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,IAAI;CAM7D,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAE7C,IAAI,SAAS,UAAU;EACrB,YAAY,IAAI;EAEhB,IAAI,CAAC,cAAc,SAAS,QAC1B,SAAS,IAAI;CAEjB;CAEA,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,WAAW,aACd,SAAiB;EAChB,UAAU,IAAI;EACd,QAAQ,IAAI;CACd,GACA,CAAC,OAAO,CACV;CAEA,MAAM,WAAW,aACd,SAAiB;EAChB,IAAI,CAAC,YACH,SAAS,IAAI;EAGf,YAAY,IAAI;CAClB,GACA,CAAC,WAAW,UAAU,CACxB;CAGA,MAAM,SAAS,aACZ,kBAA0B;EACzB,SAAS,aAAa;CACxB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAM9D,MAAM,OAAO,2BACL,SAAS,KAAK,GACpB;EAAE,OAAO;EAAU,gBAAgB;CAAK,GACxC,CAAC,KAAK,CACR;CAIA,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,WAAW;EAAG,QAAQ,KAAK;EAC/C,UAAA,eACC,aAAa;GAAE;GAAO;GAAU;EAAW,CAAC,IAE5C,oBAAC,MAAD;GACS;GACG;GACF;GACC;GACC;GACO;GACjB,GAAI;EACL,CAAA;CAEA,CAAA;AAET;;;AC7HA,MAAM,SAASC;AAEf,OAAO,OAAO"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//#region src/utils/editor-caches.ts
|
|
2
|
+
const editorCaches = /* @__PURE__ */ new Set();
|
|
3
|
+
const registerEditorCache = (clear) => {
|
|
4
|
+
editorCaches.add(clear);
|
|
5
|
+
};
|
|
6
|
+
const clearEditorCaches = () => {
|
|
7
|
+
editorCaches.forEach((clear) => clear());
|
|
8
|
+
};
|
|
9
|
+
let activeEditorSessions = 0;
|
|
10
|
+
const registerEditorSession = () => {
|
|
11
|
+
activeEditorSessions += 1;
|
|
12
|
+
let released = false;
|
|
13
|
+
return () => {
|
|
14
|
+
if (released) return;
|
|
15
|
+
released = true;
|
|
16
|
+
activeEditorSessions -= 1;
|
|
17
|
+
if (activeEditorSessions === 0) clearEditorCaches();
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
//#endregion
|
|
21
|
+
export { registerEditorCache as n, registerEditorSession as r, clearEditorCaches as t };
|
|
22
|
+
|
|
23
|
+
//# sourceMappingURL=editor-caches-ClMvdcQF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editor-caches-ClMvdcQF.js","names":[],"sources":["../src/utils/editor-caches.ts"],"sourcesContent":["// Every editor-owned cache that lives for the whole page: the compilation\n// cache, the script blob cache, and the AST parse caches. Each registers its\n// own `clear` here when its module loads, so this module imports none of\n// them. The provider only needs `registerEditorSession`, and importing the\n// caches directly would pull `@babel/standalone` and Babel's AST packages\n// into every bundle that mounts `Live`, whether or not it compiles or edits\n// a document (#407). A cache whose module never loaded is empty anyway.\n//\n// Deliberately not exhaustive of every cache in the library: an instance\n// from `createSectionPreviewCache` is owned by the component that holds it\n// (`useState(() => createSectionPreviewCache())`), so it is already released\n// with that component and there is nothing global to clear.\nconst editorCaches = new Set<() => void>();\n\nexport const registerEditorCache = (clear: () => void) => {\n editorCaches.add(clear);\n};\n\nexport const clearEditorCaches = () => {\n editorCaches.forEach(clear => clear());\n};\n\n// These caches are shared across every editor session in the page, so they\n// can only be released once the *last* one is gone. Clearing on any single\n// unmount would reach into siblings that are still mounted — harmless when\n// the only casualty was a compilation cache (a cache miss costs time, not\n// correctness), but not once revoking blob URLs is part of it: a sibling\n// could be handed a URL that is dead before its iframe loads it.\nlet activeEditorSessions = 0;\n\n// Returns the release function rather than exposing the counter, so a caller\n// cannot release a session it never acquired. Idempotent, so React calling\n// an effect's cleanup twice cannot drive the count negative.\nexport const registerEditorSession = (): (() => void) => {\n activeEditorSessions += 1;\n\n let released = false;\n\n return () => {\n if (released) {\n return;\n }\n\n released = true;\n activeEditorSessions -= 1;\n\n if (activeEditorSessions === 0) {\n clearEditorCaches();\n }\n };\n};\n"],"mappings":";AAYA,MAAM,+BAAe,IAAI,IAAgB;AAEzC,MAAa,uBAAuB,UAAsB;CACxD,aAAa,IAAI,KAAK;AACxB;AAEA,MAAa,0BAA0B;CACrC,aAAa,SAAQ,UAAS,MAAM,CAAC;AACvC;AAQA,IAAI,uBAAuB;AAK3B,MAAa,8BAA4C;CACvD,wBAAwB;CAExB,IAAI,WAAW;CAEf,aAAa;EACX,IAAI,UACF;EAGF,WAAW;EACX,wBAAwB;EAExB,IAAI,yBAAyB,GAC3B,kBAAkB;CAEtB;AACF"}
|
package/dist/error/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as ErrorBoundary } from "../boundary-
|
|
2
|
-
import { n as Runtime, r as Guard, t as Error } from "../error-
|
|
1
|
+
import { t as ErrorBoundary } from "../boundary-D2IFja-3.js";
|
|
2
|
+
import { n as Runtime, r as Guard, t as Error } from "../error-KW8XCcjH.js";
|
|
3
3
|
export { ErrorBoundary, Guard as ErrorGuard, Runtime as ErrorRuntime, Error as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as useError } from "./states-Ci1AvoQ9.js";
|
|
2
|
-
import { n as Error$1, t as ErrorBoundary } from "./boundary-
|
|
2
|
+
import { n as Error$1, t as ErrorBoundary } from "./boundary-D2IFja-3.js";
|
|
3
3
|
import { useEffect, useRef, useState } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { useEventListener } from "@jbpark/use-hooks";
|
|
@@ -79,4 +79,4 @@ Error.Guard = Guard;
|
|
|
79
79
|
//#endregion
|
|
80
80
|
export { Runtime as n, Guard as r, Error as t };
|
|
81
81
|
|
|
82
|
-
//# sourceMappingURL=error-
|
|
82
|
+
//# sourceMappingURL=error-KW8XCcjH.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-
|
|
1
|
+
{"version":3,"file":"error-KW8XCcjH.js","names":["ErrorComponent","Error","ErrorImpl","ErrorRuntime","ErrorGuard"],"sources":["../src/components/error/guard.tsx","../src/components/error/runtime.tsx","../src/components/error/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport ErrorComponent from './error';\n\nexport interface Props {\n children: React.ReactNode;\n onError?: (error: Error) => void;\n}\n\nconst Guard = ({ children, onError }: Props) => {\n const [error, setError] = useState<string | null>(null);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const errorHandled = useRef(false);\n\n useEventListener(\n 'error',\n event => {\n if (errorHandled.current) {\n return;\n }\n\n errorHandled.current = true;\n\n const errorMessage =\n event.error?.message || event.message || 'Unknown error';\n\n console.error('⚡ [Guard] Event handler error:', errorMessage);\n\n event.preventDefault();\n\n setError(errorMessage);\n onError?.(event.error || new window.Error(errorMessage));\n\n setTimeout(() => {\n errorHandled.current = false;\n }, 100);\n },\n { capture: true },\n );\n\n useEffect(() => {\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const handleUnhandledRejection = (event: PromiseRejectionEvent) => {\n if (errorHandled.current) {\n return;\n }\n\n errorHandled.current = true;\n\n const errorMessage = event.reason?.message || 'Promise rejection';\n\n event.preventDefault();\n setError(errorMessage);\n onError?.(event.reason || new window.Error(errorMessage));\n\n setTimeout(() => {\n errorHandled.current = false;\n }, 100);\n };\n\n window.addEventListener(\n 'unhandledrejection',\n handleUnhandledRejection,\n true,\n );\n\n return () => {\n window.removeEventListener(\n 'unhandledrejection',\n handleUnhandledRejection,\n true,\n );\n };\n }, [onError]);\n\n if (error) {\n return (\n <ErrorComponent\n title=\"Runtime Error\"\n message={error}\n className=\"m-4\"\n onReset={() => {\n setError(null);\n errorHandled.current = false;\n }}\n />\n );\n }\n\n return <div ref={containerRef}>{children}</div>;\n};\n\nexport default Guard;\n","import { useEffect } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport { useError } from '~/components/context/states';\n\nimport Error from './error';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n open?: boolean;\n reset?: () => void;\n}\n\nconst Runtime = ({ open = true, reset }: Props) => {\n const { error: message, setError } = useError();\n\n useEventListener('error', e => {\n setError(e.message);\n e.preventDefault();\n });\n\n useEffect(() => {\n return () => setError(null);\n }, [setError]);\n\n if (!open) {\n return null;\n }\n\n return <Error message={message} onReset={reset} title=\"Runtime Error\" />;\n};\n\nexport default Runtime;\n","import ErrorBoundary from './boundary';\nimport ErrorImpl, { type Props } from './error';\nimport ErrorGuard from './guard';\nimport ErrorRuntime from './runtime';\n\ntype ErrorComponent = typeof ErrorImpl & {\n Boundary: typeof ErrorBoundary;\n Runtime: typeof ErrorRuntime;\n Guard: typeof ErrorGuard;\n};\n\nconst Error = ErrorImpl as ErrorComponent;\n\nError.Boundary = ErrorBoundary;\nError.Runtime = ErrorRuntime;\nError.Guard = ErrorGuard;\n\nexport { ErrorBoundary, ErrorRuntime, ErrorGuard };\nexport type { Props };\nexport default Error;\n"],"mappings":";;;;;;AAWA,MAAM,SAAS,EAAE,UAAU,cAAqB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,eAAe,OAAO,KAAK;CAEjC,iBACE,UACA,UAAS;EACP,IAAI,aAAa,SACf;EAGF,aAAa,UAAU;EAEvB,MAAM,eACJ,MAAM,OAAO,WAAW,MAAM,WAAW;EAE3C,QAAQ,MAAM,kCAAkC,YAAY;EAE5D,MAAM,eAAe;EAErB,SAAS,YAAY;EACrB,UAAU,MAAM,SAAS,IAAI,OAAO,MAAM,YAAY,CAAC;EAEvD,iBAAiB;GACf,aAAa,UAAU;EACzB,GAAG,GAAG;CACR,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,gBAAgB;EAGd,IAAI,CAFc,aAAa,SAG7B;EAGF,MAAM,4BAA4B,UAAiC;GACjE,IAAI,aAAa,SACf;GAGF,aAAa,UAAU;GAEvB,MAAM,eAAe,MAAM,QAAQ,WAAW;GAE9C,MAAM,eAAe;GACrB,SAAS,YAAY;GACrB,UAAU,MAAM,UAAU,IAAI,OAAO,MAAM,YAAY,CAAC;GAExD,iBAAiB;IACf,aAAa,UAAU;GACzB,GAAG,GAAG;EACR;EAEA,OAAO,iBACL,sBACA,0BACA,IACF;EAEA,aAAa;GACX,OAAO,oBACL,sBACA,0BACA,IACF;EACF;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,OACF,OACE,oBAACA,SAAD;EACE,OAAM;EACN,SAAS;EACT,WAAU;EACV,eAAe;GACb,SAAS,IAAI;GACb,aAAa,UAAU;EACzB;CACD,CAAA;CAIL,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAe;CAAc,CAAA;AAChD;;;ACrFA,MAAM,WAAW,EAAE,OAAO,MAAM,YAAmB;CACjD,MAAM,EAAE,OAAO,SAAS,aAAa,SAAS;CAE9C,iBAAiB,UAAS,MAAK;EAC7B,SAAS,EAAE,OAAO;EAClB,EAAE,eAAe;CACnB,CAAC;CAED,gBAAgB;EACd,aAAa,SAAS,IAAI;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,oBAACC,SAAD;EAAgB;EAAS,SAAS;EAAO,OAAM;CAAiB,CAAA;AACzE;;;ACnBA,MAAM,QAAQC;AAEd,MAAM,WAAW;AACjB,MAAM,UAAUC;AAChB,MAAM,QAAQC"}
|
|
@@ -98,7 +98,7 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
|
|
|
98
98
|
shouldForceSectionFallback?: (section: Section) => boolean;
|
|
99
99
|
children?: React.ReactNode;
|
|
100
100
|
}
|
|
101
|
-
declare const Dnd$1: ({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element;
|
|
101
|
+
declare const Dnd$1: ({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element;
|
|
102
102
|
//#endregion
|
|
103
103
|
//#region src/components/dnd/draggable.d.ts
|
|
104
104
|
interface DraggableItemDragState {
|
|
@@ -213,4 +213,4 @@ type DndComponent = typeof Dnd$1 & {
|
|
|
213
213
|
declare const Dnd: DndComponent;
|
|
214
214
|
//#endregion
|
|
215
215
|
export { PanelBinding as A, DraggableItemDragState as C, Props as D, DndPanel as E, FieldProps as F, DndEditError as M, DndRenderField as N, DndRenderSectionFallback as O, Field as P, DraggableItem as S, DndPalette as T, DndLayoutProps as _, ItemsEditor as a, Palette as b, ItemsEditorNestedElement as c, useItemsEditor as d, DndLayout as f, Canvas as g, useDndPanel as h, useChildrenEditor as i, PanelNodeChange as j, DndSectionFallbackArgs as k, ItemsEditorNestedGroup as l, useDndPalette as m, ChildrenEditor as n, ItemsEditorActions as o, useDndLayout as p, ChildrenEditorOptions as r, ItemsEditorItem as s, Dnd as t, ItemsEditorOptions as u, DndRegionProps as v, DraggableItemProps as w, Panel as x, Layout as y };
|
|
216
|
-
//# sourceMappingURL=index-
|
|
216
|
+
//# sourceMappingURL=index-C4t0OawE.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { v as Section } from "./document-J9Lo9p81.js";
|
|
2
2
|
import { t as FrameProps } from "./index-DpDU1IAw.js";
|
|
3
|
-
import { A as PanelBinding, D as Props, E as DndPanel, F as FieldProps, M as DndEditError, N as DndRenderField, O as DndRenderSectionFallback, T as DndPalette, a as ItemsEditor, b as Palette, f as DndLayout, g as Canvas, j as PanelNodeChange, k as DndSectionFallbackArgs, s as ItemsEditorItem, t as Dnd, u as ItemsEditorOptions, w as DraggableItemProps, x as Panel, y as Layout } from "./index-
|
|
3
|
+
import { A as PanelBinding, D as Props, E as DndPanel, F as FieldProps, M as DndEditError, N as DndRenderField, O as DndRenderSectionFallback, T as DndPalette, a as ItemsEditor, b as Palette, f as DndLayout, g as Canvas, j as PanelNodeChange, k as DndSectionFallbackArgs, s as ItemsEditorItem, t as Dnd, u as ItemsEditorOptions, w as DraggableItemProps, x as Panel, y as Layout } from "./index-C4t0OawE.js";
|
|
4
4
|
import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-13BDSrQc.js";
|
|
5
5
|
import { a as Props$5, n as Props$4, o as Props$3, s as ErrorBoundary, t as Error } from "./index-DNNj_0ba.js";
|
|
6
6
|
import { n as Preview, r as Props$6 } from "./index-DQkL37eL.js";
|
|
@@ -19,7 +19,7 @@ declare const App: {
|
|
|
19
19
|
Editor: (({ defaultValue, value: _value, debounce, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }: Props$1) => import("react").JSX.Element) & {
|
|
20
20
|
Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$2) => import("react").JSX.Element;
|
|
21
21
|
};
|
|
22
|
-
Dnd: (({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element) & {
|
|
22
|
+
Dnd: (({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element) & {
|
|
23
23
|
DraggableItem: ({ item, children }: DraggableItemProps) => import("react").ReactNode;
|
|
24
24
|
Field: (props: FieldProps) => import("react").JSX.Element;
|
|
25
25
|
Palette: typeof Palette;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { t as ContextProvider } from "./context-
|
|
2
|
-
import { t as Dnd } from "./dnd-
|
|
3
|
-
import { t as Editor } from "./editor-
|
|
4
|
-
import { t as Error } from "./error-
|
|
5
|
-
import { t as Preview } from "./preview-
|
|
1
|
+
import { t as ContextProvider } from "./context-DQ-UtoyS.js";
|
|
2
|
+
import { t as Dnd } from "./dnd-CMrXfD8O.js";
|
|
3
|
+
import { t as Editor } from "./editor-C3tQaMlU.js";
|
|
4
|
+
import { t as Error } from "./error-KW8XCcjH.js";
|
|
5
|
+
import { t as Preview } from "./preview-BwEfltgi.js";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
//#region src/index.tsx
|
|
8
8
|
const App = ({ children }) => {
|
package/dist/preview/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { r as baseModules } from "../use-dynamic-tailwind-
|
|
2
|
-
import { t as Preview } from "../preview-
|
|
1
|
+
import { r as baseModules } from "../use-dynamic-tailwind-DuGLeDR3.js";
|
|
2
|
+
import { t as Preview } from "../preview-BwEfltgi.js";
|
|
3
3
|
export { baseModules, Preview as default };
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import { i as cn } from "./utils-BQ7WL7Jh.js";
|
|
2
1
|
import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
|
|
3
|
-
import {
|
|
4
|
-
import { t as
|
|
2
|
+
import { t as cn } from "./cn-CAnad2vL.js";
|
|
3
|
+
import { a as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-DuGLeDR3.js";
|
|
4
|
+
import { t as Error } from "./error-KW8XCcjH.js";
|
|
5
5
|
import { useMemo } from "react";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/preview/defaults.ts
|
|
8
|
+
const NO_PROPS = {};
|
|
9
|
+
const NO_MODULES = {};
|
|
10
|
+
//#endregion
|
|
7
11
|
//#region src/components/preview/client.tsx
|
|
8
|
-
const Client = ({ code: _code, className, showError, props =
|
|
12
|
+
const Client = ({ code: _code, className, showError, props = NO_PROPS, modules = NO_MODULES, frame, dynamicTailwind = false, provider }) => {
|
|
9
13
|
const { code } = usePreview();
|
|
10
14
|
const { error, setError } = useError();
|
|
11
15
|
const isError = !!showError && !!error;
|
|
@@ -66,7 +70,7 @@ const Client = ({ code: _code, className, showError, props = {}, modules = {}, f
|
|
|
66
70
|
};
|
|
67
71
|
//#endregion
|
|
68
72
|
//#region src/components/preview/preview.tsx
|
|
69
|
-
const Preview = ({ code, props =
|
|
73
|
+
const Preview = ({ code, props = NO_PROPS, modules = NO_MODULES, dynamicTailwind = false, provider, ...restProps }) => {
|
|
70
74
|
return /* @__PURE__ */ jsx(Client, {
|
|
71
75
|
code,
|
|
72
76
|
props,
|
|
@@ -79,4 +83,4 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
|
|
|
79
83
|
//#endregion
|
|
80
84
|
export { Preview as t };
|
|
81
85
|
|
|
82
|
-
//# sourceMappingURL=preview-
|
|
86
|
+
//# sourceMappingURL=preview-BwEfltgi.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"preview-BwEfltgi.js","names":["LiveError"],"sources":["../src/components/preview/defaults.ts","../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["// Stable defaults for optional object props. A `= {}` default is a new\n// object on every render, which re-runs every memo keyed on it — the merged\n// module map, and so `compile()` — even when the caller passed nothing (#348).\nexport const NO_PROPS: Record<string, unknown> = {};\nexport const NO_MODULES: Record<string, unknown> = {};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport LiveError from '~/components/error';\nimport Frame, { type FrameProps } from '~/components/frame';\nimport { cn } from '~/utils/cn';\n\nimport { NO_MODULES, NO_PROPS } from './defaults';\nimport { type Props } from './preview';\nimport { useCompiledModule } from './use-compiled-module';\nimport { useDynamicTailwind } from './use-dynamic-tailwind';\n\nconst Client = ({\n code: _code,\n className,\n showError,\n props = NO_PROPS,\n modules = NO_MODULES,\n frame,\n dynamicTailwind = false,\n provider,\n}: Props) => {\n const { code } = usePreview();\n const { error, setError } = useError();\n const isError = !!showError && !!error;\n\n const classNames = cn(isError && 'hidden', className);\n\n const effectiveCode = _code === undefined ? code : _code;\n\n const module = useCompiledModule(effectiveCode, modules);\n\n // Attached to the wrapper below; scans the rendered DOM so classes coming\n // from an imported component are picked up too. See the hook for details.\n const { ref: contentRef, css: dynamicCSS } = useDynamicTailwind(\n effectiveCode,\n dynamicTailwind,\n );\n\n const componentProps = useMemo(\n () => ({\n ...props,\n }),\n [props],\n );\n\n const renderProvider = (component: React.ReactNode) => {\n return provider ? provider(component) : component;\n };\n\n if (module && module.error) {\n return (\n <>\n <div className={cn('relative h-full w-full', classNames)}>\n <LiveError message={module.error} title=\"Compile Error\" />\n </div>\n <LiveError.Runtime open={isError} />\n </>\n );\n }\n\n const Component = module?.exports?.default;\n\n if (!Component) {\n return null;\n }\n\n return (\n <>\n {frame ? (\n <div className={cn('h-full w-full', classNames)}>\n <Frame {...(frame as FrameProps)}>\n {container => (\n <div ref={contentRef} style={{ display: 'contents' }}>\n <LiveError.Boundary\n resetKeys={[effectiveCode]}\n onError={(e: Error) => setError(e.message)}\n >\n {renderProvider(\n <LiveError.Guard onError={e => setError(e.message)}>\n <Component {...componentProps} container={container} />\n {dynamicTailwind && dynamicCSS && (\n <style>{dynamicCSS}</style>\n )}\n </LiveError.Guard>,\n )}\n </LiveError.Boundary>\n </div>\n )}\n </Frame>\n </div>\n ) : (\n <div\n ref={contentRef}\n className={cn(\n 'relative h-full w-full overflow-x-hidden overflow-y-auto',\n classNames,\n )}\n style={{\n isolation: 'isolate',\n transform: 'translateZ(0)',\n containerType: 'inline-size',\n }}\n >\n <LiveError.Boundary\n resetKeys={[effectiveCode]}\n onError={e => setError(e.message)}\n >\n {renderProvider(\n <LiveError.Guard onError={e => setError(e.message)}>\n <Component {...componentProps} />\n {dynamicTailwind && dynamicCSS && <style>{dynamicCSS}</style>}\n </LiveError.Guard>,\n )}\n </LiveError.Boundary>\n </div>\n )}\n <LiveError.Runtime open={isError} />\n </>\n );\n};\n\nexport default Client;\n","import type React from 'react';\n\nimport type { FrameProps } from '../frame';\nimport Client from './client';\nimport { NO_MODULES, NO_PROPS } from './defaults';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n code?: string;\n showError?: boolean;\n props?: Record<string, unknown>;\n container?: HTMLElement | null;\n frame?: boolean | FrameProps;\n modules?: Record<string, unknown>;\n dynamicTailwind?: boolean;\n provider?: (children: React.ReactNode) => React.ReactNode;\n}\n\n// A thin wrapper around Client, which does the actual compiling, error\n// handling, and frame wrapping. This used to have its own duplicate\n// compile-and-render branch for the `code` prop that never wrapped its\n// output in <Frame>, so `frame` was silently ignored whenever `code` was\n// passed — see #187. Client already handles `code` (falling back to\n// context when absent) and `frame`, so there is only one render path now.\nconst Preview = ({\n code,\n props = NO_PROPS,\n modules = NO_MODULES,\n dynamicTailwind = false,\n provider,\n ...restProps\n}: Props) => {\n return (\n <Client\n code={code}\n props={props}\n modules={modules}\n dynamicTailwind={dynamicTailwind}\n provider={provider}\n {...restProps}\n />\n );\n};\n\nexport default Preview;\n"],"mappings":";;;;;;;AAGA,MAAa,WAAoC,CAAC;AAClD,MAAa,aAAsC,CAAC;;;ACUpD,MAAM,UAAU,EACd,MAAM,OACN,WACA,WACA,QAAQ,UACR,UAAU,YACV,OACA,kBAAkB,OAClB,eACW;CACX,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,EAAE,OAAO,aAAa,SAAS;CACrC,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;CAEjC,MAAM,aAAa,GAAG,WAAW,UAAU,SAAS;CAEpD,MAAM,gBAAgB,UAAU,KAAA,IAAY,OAAO;CAEnD,MAAM,SAAS,kBAAkB,eAAe,OAAO;CAIvD,MAAM,EAAE,KAAK,YAAY,KAAK,eAAe,mBAC3C,eACA,eACF;CAEA,MAAM,iBAAiB,eACd,EACL,GAAG,MACL,IACA,CAAC,KAAK,CACR;CAEA,MAAM,kBAAkB,cAA+B;EACrD,OAAO,WAAW,SAAS,SAAS,IAAI;CAC1C;CAEA,IAAI,UAAU,OAAO,OACnB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;EACrD,UAAA,oBAACA,OAAD;GAAW,SAAS,OAAO;GAAO,OAAM;EAAiB,CAAA;CACtD,CAAA,GACL,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;CAIN,MAAM,YAAY,QAAQ,SAAS;CAEnC,IAAI,CAAC,WACH,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAC5C,UAAA,oBAAC,OAAD;GAAO,GAAK;GACT,WAAA,cACC,oBAAC,OAAD;IAAK,KAAK;IAAY,OAAO,EAAE,SAAS,WAAW;IACjD,UAAA,oBAACA,MAAU,UAAX;KACE,WAAW,CAAC,aAAa;KACzB,UAAU,MAAa,SAAS,EAAE,OAAO;KAExC,UAAA,eACC,qBAACA,MAAU,OAAX;MAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;MAAjD,UAAA,CACE,oBAAC,WAAD;OAAW,GAAI;OAA2B;MAAY,CAAA,GACrD,mBAAmB,cAClB,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAEb;KACnB,CAAA,CAAA;IACkB,CAAA;GACjB,CAAA;EAEF,CAAA;CACJ,CAAA,IAEL,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,4DACA,UACF;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,eAAe;EACjB;EAEA,UAAA,oBAACA,MAAU,UAAX;GACE,WAAW,CAAC,aAAa;GACzB,UAAS,MAAK,SAAS,EAAE,OAAO;GAE/B,UAAA,eACC,qBAACA,MAAU,OAAX;IAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;IAAjD,UAAA,CACE,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA,GAC/B,mBAAmB,cAAc,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAC7C;GACnB,CAAA,CAAA;EACkB,CAAA;CACjB,CAAA,GAEP,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;AAEN;;;ACnGA,MAAM,WAAW,EACf,MACA,QAAQ,UACR,UAAU,YACV,kBAAkB,OAClB,UACA,GAAG,gBACQ;CACX,OACE,oBAAC,QAAD;EACQ;EACC;EACE;EACQ;EACP;EACV,GAAI;CACL,CAAA;AAEL"}
|
package/dist/provider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as ContextProvider } from "../context-
|
|
1
|
+
import { t as ContextProvider } from "../context-DQ-UtoyS.js";
|
|
2
2
|
export { ContextProvider as default };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { a as generateSectionPreview, c as parseDocument, l as replaceDocumentSections, o as generateSectionPreviews, s as getSections } from "./document-C5Dypv4_.js";
|
|
2
|
+
//#region src/utils/sections.ts
|
|
3
|
+
const extractSections = (code) => {
|
|
4
|
+
const doc = parseDocument(code);
|
|
5
|
+
return doc ? getSections(doc) : [];
|
|
6
|
+
};
|
|
7
|
+
const replaceSections = (code, sections) => {
|
|
8
|
+
return replaceDocumentSections(code, sections);
|
|
9
|
+
};
|
|
10
|
+
const generateSection = (code, fullCode) => {
|
|
11
|
+
return generateSectionPreview(fullCode, code);
|
|
12
|
+
};
|
|
13
|
+
const generateSections = (codes, fullCode) => {
|
|
14
|
+
return generateSectionPreviews(fullCode, codes);
|
|
15
|
+
};
|
|
16
|
+
//#endregion
|
|
17
|
+
export { replaceSections as i, generateSection as n, generateSections as r, extractSections as t };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=sections-B7dWoNVJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sections-B7dWoNVJ.js","names":[],"sources":["../src/utils/sections.ts"],"sourcesContent":["import type { Section } from '~/types';\n\nimport {\n createSectionPreviewCache,\n generateSectionPreview,\n generateSectionPreviews,\n getSections,\n parseDocument,\n replaceDocumentSections,\n} from './ast/document';\n\nexport const extractSections = (code: string): Section[] => {\n const doc = parseDocument(code);\n\n return doc ? getSections(doc) : [];\n};\n\nexport const replaceSections = (code: string, sections: string[]): string => {\n return replaceDocumentSections(code, sections);\n};\n\nexport const generateSection = (code: string, fullCode: string) => {\n return generateSectionPreview(fullCode, code);\n};\n\n// Batched form of generateSection() — computes every section's preview from\n// a single parse of fullCode instead of one parseDocument call per section\n// (see generateSectionPreviews). Unchanged sections come back byte-identical\n// to their previous preview string, which is what lets a caller pass each\n// one down as a stable prop (see Renderer's React.memo).\nexport const generateSections = (\n codes: string[],\n fullCode: string,\n): string[] => {\n return generateSectionPreviews(fullCode, codes);\n};\n\n// Incremental counterpart to generateSections() — see createSectionPreviewCache\n// (#131). Pass a fresh instance's `compute` in place of generateSections()\n// where the caller can keep it alive across renders (e.g. Dnd holds one via\n// `useState(() => createSectionPreviewCache())`).\nexport { createSectionPreviewCache };\nexport type { SectionPreviewCache } from './ast/document';\n"],"mappings":";;AAWA,MAAa,mBAAmB,SAA4B;CAC1D,MAAM,MAAM,cAAc,IAAI;CAE9B,OAAO,MAAM,YAAY,GAAG,IAAI,CAAC;AACnC;AAEA,MAAa,mBAAmB,MAAc,aAA+B;CAC3E,OAAO,wBAAwB,MAAM,QAAQ;AAC/C;AAEA,MAAa,mBAAmB,MAAc,aAAqB;CACjE,OAAO,uBAAuB,UAAU,IAAI;AAC9C;AAOA,MAAa,oBACX,OACA,aACa;CACb,OAAO,wBAAwB,UAAU,KAAK;AAChD"}
|