@jbpark/live-editor 4.3.0 → 4.4.0

package/README.ko.md

@@ -140,18 +140,13 @@ export default function Example() {
 
 ### pnpm 설정 (권장)
 
-본 프로젝트는 **pnpm@10**을 [Corepack](https://nodejs.org/api/corepack.html)으로 관리합니다. Corepack을 활성화하고 지정된 버전을 적용하세요:
+pnpm 버전은 `package.json`(그리고 `website/package.json`)의 `packageManager` 필드에 고정되어 있습니다. [Corepack](https://nodejs.org/api/corepack.html)을 활성화하면 저장소에서 `pnpm`을 실행할 때 그 버전을 그대로 쓰고, 처음 실행할 때 내려받습니다:
 
 ```bash
 corepack enable
-corepack prepare pnpm@10.29.3 --activate
 ```
 
-또는 수동으로 설치:
-
-```bash
-npm install -g pnpm@10
-```
+직접 설치하려면 `packageManager`에 적힌 버전으로 설치하세요(`npm install -g pnpm@<버전>`). pnpm 11 이상은 Node.js 22 이상이 필요합니다.
 
 ### 설치
 

package/README.md

@@ -140,18 +140,13 @@ can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — s
 
 ### pnpm Setup (Recommended)
 
-This project uses **pnpm@10** with [Corepack](https://nodejs.org/api/corepack.html) for reproducibility. Enable Corepack and activate the specified pnpm version:
+The pnpm version is pinned by the `packageManager` field in `package.json` (and in `website/package.json`). With [Corepack](https://nodejs.org/api/corepack.html) enabled, running `pnpm` in the repo uses exactly that version, downloading it on first use:
 
 ```bash
 corepack enable
-corepack prepare pnpm@10.29.3 --activate
 ```
 
-Or, if you prefer a manual install:
-
-```bash
-npm install -g pnpm@10
-```
+Or install the pinned version yourself (`npm install -g pnpm@<version>`, with the version from `packageManager`). pnpm 11 and later need Node.js 22 or newer.
 
 ### Install
 

package/dist/{ast-BFbDWO-l.js → ast-dYb78955.js}

@@ -1,5 +1,5 @@
-import { C as require_lib, S as require_lib$1, _ as nanoid, b as unwrap, d as traverse, g as getJSXTagName, v as attrValue, w as __toESM, x as wrap, y as generateCode } from "./document-cEEdFERz.js";
-import { c as RESERVED_BINDING_PROPERTIES, n as CONFIG, r as DATA_ATTR, s as REGEX, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
+import { C as require_lib, S as require_lib$1, _ as nanoid, b as unwrap, d as traverse, g as getJSXTagName, v as attrValue, w as __toESM, x as wrap, y as generateCode } from "./document-BDn_f08_.js";
+import { c as RESERVED_BINDING_PROPERTIES, n as CONFIG, r as DATA_ATTR, s as REGEX, t as BINDING_PROP } from "./constants-h1JAgOeW.js";
 import { n as registerEditorCache } from "./editor-caches-ClMvdcQF.js";
 import { t as createBoundedCache } from "./cache-B0-XcIxJ.js";
 import { z } from "zod";
@@ -372,6 +372,63 @@ const buildBindingItems = (raw) => {
 		}];
 	});
 };
+const registryEntries = /* @__PURE__ */ new WeakMap();
+const isComponentTagName = (tagName) => tagName !== "" && (tagName.includes(".") || !/^[a-z]/.test(tagName));
+const getRegistryBindings = (registry, tagName) => {
+	if (!registry) return;
+	let entries = registryEntries.get(registry);
+	if (!entries) {
+		entries = /* @__PURE__ */ new Map();
+		registryEntries.set(registry, entries);
+		const ignored = Object.keys(registry).filter((key) => !isComponentTagName(key));
+		if (ignored.length > 0) console.warn(`Live.Dnd \`bindings\` only applies to components. Ignored: ${ignored.join(", ")}. Bind an HTML element with its own data-binding.`);
+	}
+	if (!isComponentTagName(tagName) || !Object.hasOwn(registry, tagName)) return;
+	let bindings = entries.get(tagName);
+	if (!bindings) {
+		bindings = buildBindingItems(registry[tagName]);
+		entries.set(tagName, bindings);
+	}
+	return bindings;
+};
+const keyEntries = /* @__PURE__ */ new WeakMap();
+const warnedKeys = /* @__PURE__ */ new Set();
+const warnOnce = (id, message) => {
+	if (!warnedKeys.has(id)) {
+		warnedKeys.add(id);
+		console.warn(message);
+	}
+};
+const getKeyBindings = (bindingKeys, key) => {
+	if (!bindingKeys || !Object.hasOwn(bindingKeys, key)) return;
+	let entries = keyEntries.get(bindingKeys);
+	if (!entries) {
+		entries = /* @__PURE__ */ new Map();
+		keyEntries.set(bindingKeys, entries);
+	}
+	let bindings = entries.get(key);
+	if (!bindings) {
+		bindings = buildBindingItems(bindingKeys[key]);
+		entries.set(key, bindings);
+	}
+	return bindings;
+};
+const resolveBindings = (own, key, tagName, options = {}) => {
+	if (own) {
+		if (key !== void 0) warnOnce(`both:${key}`, `Live.Dnd: an element has both data-binding and data-binding-key="${key ?? ""}". Its data-binding is used; remove one of them.`);
+		return own;
+	}
+	if (key === null) {
+		warnOnce("not-a-string", "Live.Dnd: data-binding-key must be a plain string, such as data-binding-key=\"hero-title\". The element has no fields.");
+		return [];
+	}
+	if (key !== void 0) {
+		const bindings = getKeyBindings(options.bindingKeys, key);
+		if (!bindings) warnOnce(`missing:${key}`, `Live.Dnd: data-binding-key="${key}" isn't in bindingKeys. The element has no fields.`);
+		return bindings ?? [];
+	}
+	return getRegistryBindings(options.bindings, tagName) ?? [];
+};
 const parseBinding = (bindingValue) => {
 	if (!bindingValue) return [];
 	const ast = parseArrayExpression(bindingValue);
@@ -420,11 +477,12 @@ const getStructuredValue = (node, property, type) => {
 		}
 	}
 };
-const hasEditableBindings = (node) => {
+const readNodeBindings = (node) => {
+	if (node.bindings) return node.bindings;
 	const bindingAttr = node.dataAttributes.find((attr) => attr.name === DATA_ATTR.BINDING);
-	if (!bindingAttr?.value) return false;
-	return (node.bindings || parseBinding(bindingAttr.value)).length > 0;
+	return bindingAttr?.value ? parseBinding(bindingAttr.value) : [];
 };
+const hasEditableBindings = (node) => readNodeBindings(node).length > 0;
 const findEditableChildren = (node) => {
 	const editableChildren = [];
 	const traverse = (children) => {
@@ -781,6 +839,22 @@ const parseJSXName = (tagName) => {
 	return expr;
 };
 const extractCache = createBoundedCache(CONFIG.CACHE_LIMIT);
+const NO_MAP = {};
+let optionExtractCaches = /* @__PURE__ */ new WeakMap();
+const cacheFor = ({ bindings, bindingKeys }) => {
+	if (!bindings && !bindingKeys) return extractCache;
+	let byKeys = optionExtractCaches.get(bindings ?? NO_MAP);
+	if (!byKeys) {
+		byKeys = /* @__PURE__ */ new WeakMap();
+		optionExtractCaches.set(bindings ?? NO_MAP, byKeys);
+	}
+	let cache = byKeys.get(bindingKeys ?? NO_MAP);
+	if (!cache) {
+		cache = createBoundedCache(CONFIG.CACHE_LIMIT);
+		byKeys.set(bindingKeys ?? NO_MAP, cache);
+	}
+	return cache;
+};
 const extractAttributes = (attributes, source) => {
 	const allAttrs = [];
 	const dataAttrs = [];
@@ -872,13 +946,13 @@ const createFragmentNode = (textContent, children) => ({
 	children,
 	isFragment: true
 });
-const processChildrenBinding = (jsxElement, processedNodes, shouldWrap = true, source) => {
+const processChildrenBinding = (jsxElement, processedNodes, shouldWrap = true, source, options) => {
 	const jsxChildren = jsxElement.children.filter((child) => import_lib$1.isJSXElement(child) || import_lib$1.isJSXFragment(child));
 	if (!jsxChildren.length) return;
 	const childrenNodes = [];
 	jsxChildren.forEach((child) => {
 		if (import_lib$1.isJSXElement(child)) {
-			const childResults = extractFromNode(child, processedNodes, source);
+			const childResults = extractFromNode(child, processedNodes, source, options);
 			if (shouldWrap) {
 				const wrapperNode = createWrapperNode(collectText(child.children), childResults);
 				wrapperNode.source = source?.slice(child.start, child.end);
@@ -891,7 +965,7 @@ const processChildrenBinding = (jsxElement, processedNodes, shouldWrap = true, s
 			const fragmentChildren = [];
 			child.children.forEach((fragmentChild) => {
 				if (import_lib$1.isJSXElement(fragmentChild)) {
-					const childResults = extractFromNode(fragmentChild, processedNodes, source);
+					const childResults = extractFromNode(fragmentChild, processedNodes, source, options);
 					fragmentChildren.push(...childResults);
 				}
 			});
@@ -928,13 +1002,14 @@ const getBindingExpression = (opening) => {
 	}
 	return null;
 };
-const readNodeBindingInfo = (node, source) => {
+const readNodeBindingInfo = (node, source, options) => {
 	const opening = node.openingElement;
 	const tagName = getJSXTagName(opening);
 	const { allAttrs, dataAttrs } = extractAttributes(opening.attributes, source);
 	const bindingAttr = dataAttrs.find((attr) => attr.name === DATA_ATTR.BINDING);
 	const bindingExpr = getBindingExpression(opening);
-	const bindings = bindingExpr ? parseBindingExpression(bindingExpr) : bindingAttr?.value ? parseBinding(bindingAttr.value) : [];
+	const keyAttr = dataAttrs.find((attr) => attr.name === DATA_ATTR.BINDING_KEY);
+	const bindings = resolveBindings(bindingExpr ? parseBindingExpression(bindingExpr) : bindingAttr ? parseBinding(bindingAttr.value) : void 0, keyAttr && (keyAttr.isStringLiteral ? keyAttr.value : null), tagName, options);
 	const childrenBinding = bindings.find((b) => b.property === BINDING_PROP.CHILDREN);
 	const arrayBindings = bindings.filter((b) => b.property === BINDING_PROP.ITEMS || b.type === "array");
 	const innerHtmlBinding = bindings.find((b) => b.property === BINDING_PROP.INNER_HTML);
@@ -950,7 +1025,7 @@ const readNodeBindingInfo = (node, source) => {
 		rawChildren
 	};
 };
-const parseToNodes = (raw) => {
+const parseToNodes = (raw, options) => {
 	const wrapped = wrap(raw);
 	const ast = (0, import_lib.parse)(wrapped, {
 		sourceType: "module",
@@ -961,10 +1036,10 @@ const parseToNodes = (raw) => {
 	const processedNodes = /* @__PURE__ */ new WeakSet();
 	traverse(ast, { JSXElement(path) {
 		if (processedNodes.has(path.node)) return;
-		const { tagName, allAttrs, dataAttrs, bindings, childrenBinding, arrayBindings, rawChildren } = readNodeBindingInfo(path.node, wrapped);
+		const { tagName, allAttrs, dataAttrs, bindings, childrenBinding, arrayBindings, rawChildren } = readNodeBindingInfo(path.node, wrapped, options);
 		if (!tagName || !dataAttrs.length) return;
 		let childrenNodes;
-		if (childrenBinding) childrenNodes = processChildrenBinding(path.node, processedNodes, true, wrapped);
+		if (childrenBinding) childrenNodes = processChildrenBinding(path.node, processedNodes, true, wrapped, options);
 		for (const arrayBinding of arrayBindings) skipItemsChildren(path.node, processedNodes, arrayBinding.property);
 		results.push({
 			tagName,
@@ -988,18 +1063,19 @@ const parseToNodes = (raw) => {
 	} });
 	return results;
 };
-function extract(raw) {
-	if (extractCache.has(raw)) return extractCache.get(raw);
-	const results = parseToNodes(raw);
-	extractCache.set(raw, results);
+function extract(raw, options = {}) {
+	const cache = cacheFor(options);
+	if (cache.has(raw)) return cache.get(raw);
+	const results = parseToNodes(raw, options);
+	cache.set(raw, results);
 	return results;
 }
-function extractFromNode(node, processedNodes, source) {
+function extractFromNode(node, processedNodes, source, options) {
 	processedNodes?.add(node);
-	const { tagName, allAttrs, dataAttrs, bindings, childrenBinding, rawChildren } = readNodeBindingInfo(node, source);
+	const { tagName, allAttrs, dataAttrs, bindings, childrenBinding, rawChildren } = readNodeBindingInfo(node, source, options);
 	let childrenNodes;
-	if (childrenBinding) childrenNodes = processChildrenBinding(node, processedNodes, true, source);
-	if (!childrenNodes) childrenNodes = processChildrenBinding(node, processedNodes, false, source);
+	if (childrenBinding) childrenNodes = processChildrenBinding(node, processedNodes, true, source, options);
+	if (!childrenNodes) childrenNodes = processChildrenBinding(node, processedNodes, false, source, options);
 	return [{
 		tagName,
 		attributes: allAttrs,
@@ -1012,6 +1088,7 @@ function extractFromNode(node, processedNodes, source) {
 }
 function clearExtractCache() {
 	extractCache.clear();
+	optionExtractCaches = /* @__PURE__ */ new WeakMap();
 }
 registerEditorCache(clearExtractCache);
 //#endregion
@@ -1061,13 +1138,13 @@ const copySource = (source, usedIds) => {
 	});
 	return applyEdits(source, edits);
 };
-const editChildrenSource = (source, parent, input) => {
+const editChildrenSource = (source, parent, input, options) => {
 	try {
 		if (!parent.closingElement || parent.start == null || parent.end == null) return null;
 		const value = typeof input === "string" ? JSON.parse(input) : input;
 		const children = parent.children.filter((child) => import_lib$1.isJSXElement(child) || import_lib$1.isJSXFragment(child));
 		const raw = children.map((child) => source.slice(child.start, child.end));
-		const models = extract(source.slice(parent.start, parent.end))[0]?.children ?? [];
+		const models = extract(source.slice(parent.start, parent.end), options)[0]?.children ?? [];
 		if (models.length !== children.length) return null;
 		const signatures = modeledSignatures(models);
 		const replaceSlots = (next) => {
@@ -1340,7 +1417,7 @@ const canEditAttributeValue = (attribute, value, type) => {
 	if (!import_lib$1.isJSXExpressionContainer(attribute.value) || import_lib$1.isJSXEmptyExpression(attribute.value.expression) || isLosslesslyEvaluable(attribute.value.expression)) return true;
 	return typeof value === "string" && holdsStructuralExpression(attribute.value) && !(type && STRING_VALUED_TYPES.has(type)) && structuralSource(value) !== null;
 };
-const update = (code, dataId, label, value, property) => {
+const update = (code, dataId, label, value, property, options = {}) => {
 	try {
 		const wrapped = wrap(code);
 		const ast = (0, import_lib.parse)(wrapped, {
@@ -1364,25 +1441,38 @@ const update = (code, dataId, label, value, property) => {
 				return import_lib$1.isJSXAttribute(attr) && import_lib$1.isJSXIdentifier(attr.name) && attr.name.name === DATA_ATTR.ID && attr.value && import_lib$1.isStringLiteral(attr.value) && attr.value.value === dataId;
 			})) return;
 			const bindingAttr = opening.attributes.find((attr) => import_lib$1.isJSXAttribute(attr) && import_lib$1.isJSXIdentifier(attr.name) && attr.name.name === DATA_ATTR.BINDING);
-			if (!bindingAttr?.value) {
+			if (bindingAttr && !bindingAttr.value) {
 				failure = {
 					reason: "no-binding",
 					dataId
 				};
 				return;
 			}
-			let bindingValue = "";
-			if (import_lib$1.isStringLiteral(bindingAttr.value)) bindingValue = bindingAttr.value.value;
-			else if (import_lib$1.isJSXExpressionContainer(bindingAttr.value)) try {
-				bindingValue = generateCode(bindingAttr.value.expression);
-			} catch (error) {
+			let own;
+			if (bindingAttr?.value) {
+				let bindingValue = "";
+				if (import_lib$1.isStringLiteral(bindingAttr.value)) bindingValue = bindingAttr.value.value;
+				else if (import_lib$1.isJSXExpressionContainer(bindingAttr.value)) try {
+					bindingValue = generateCode(bindingAttr.value.expression);
+				} catch (error) {
+					failure = {
+						reason: "parse-error",
+						error
+					};
+					return;
+				}
+				own = parseBinding(bindingValue);
+			}
+			const keyAttr = opening.attributes.find((attr) => import_lib$1.isJSXAttribute(attr) && import_lib$1.isJSXIdentifier(attr.name) && attr.name.name === DATA_ATTR.BINDING_KEY);
+			const bindings = resolveBindings(own, keyAttr && (keyAttr.value && import_lib$1.isStringLiteral(keyAttr.value) ? keyAttr.value.value : null), getJSXTagName(opening), options);
+			if (!own && bindings.length === 0) {
 				failure = {
-					reason: "parse-error",
-					error
+					reason: "no-binding",
+					dataId
 				};
 				return;
 			}
-			const matches = parseBinding(bindingValue).filter((binding) => property !== void 0 ? binding.property === property : binding.label === label);
+			const matches = bindings.filter((binding) => property !== void 0 ? binding.property === property : binding.label === label);
 			if (matches.length === 0) {
 				failure = {
 					reason: "binding-not-declared",
@@ -1443,7 +1533,7 @@ const update = (code, dataId, label, value, property) => {
 						};
 						break;
 					}
-					collect(editChildrenSource(wrapped, path.node, value), () => ({
+					collect(editChildrenSource(wrapped, path.node, value, options), () => ({
 						reason: "parse-error",
 						error: /* @__PURE__ */ new Error("Unsupported or stale children edit; source was preserved")
 					}));
@@ -1506,10 +1596,10 @@ const update = (code, dataId, label, value, property) => {
 		};
 	}
 };
-const updateAll = (raw, entries) => {
+const updateAll = (raw, entries, options = {}) => {
 	let current = raw;
 	for (const [index, entry] of entries.entries()) {
-		const result = update(current, entry.dataId, entry.label, entry.value, entry.property);
+		const result = update(current, entry.dataId, entry.label, entry.value, entry.property, options);
 		if (!result.success) return {
 			success: false,
 			code: raw,
@@ -1598,6 +1688,6 @@ const validateBindingValue = (binding, value) => {
 	return VALID;
 };
 //#endregion
-export { parseValue as A, arrayExpressionToCode as C, extractObjectProperties as D, extractNodeValue as E, flattenEditableValue as O, parseBindingExpression as S, createNodeFromValue as T, moveSelectedIndices as _, getChildrenSignatures as a, getStructuredValue as b, appendArrayItem as c, moveArrayItems as d, parseItems as f, canStructurallyEditArray as g, updateArrayItemValue as h, updateAll as i, setEditableValue as j, parseArrayExpression as k, duplicateArrayItems as l, updateArrayItemProperty as m, bulkUpdate as n, clearExtractCache as o, removeArrayItems as p, update as r, extract as s, validateBindingValue as t, moveArrayItem as u, findEditableChildren as v, canLosslesslyEvaluateSource as w, parseBinding as x, getCurrentValue as y };
+export { createNodeFromValue as A, isComponentTagName as C, resolveBindings as D, readNodeBindings as E, parseValue as F, setEditableValue as I, extractObjectProperties as M, flattenEditableValue as N, arrayExpressionToCode as O, parseArrayExpression as P, getStructuredValue as S, parseBindingExpression as T, moveSelectedIndices as _, getChildrenSignatures as a, getKeyBindings as b, appendArrayItem as c, moveArrayItems as d, parseItems as f, canStructurallyEditArray as g, updateArrayItemValue as h, updateAll as i, extractNodeValue as j, canLosslesslyEvaluateSource as k, duplicateArrayItems as l, updateArrayItemProperty as m, bulkUpdate as n, clearExtractCache as o, removeArrayItems as p, update as r, extract as s, validateBindingValue as t, moveArrayItem as u, findEditableChildren as v, parseBinding as w, getRegistryBindings as x, getCurrentValue as y };
 
-//# sourceMappingURL=ast-BFbDWO-l.js.map
+//# sourceMappingURL=ast-dYb78955.js.map