@yahoo/uds-create-config 4.10.2 → 4.10.4

package/dist/spec/specToJsx.d.ts

@@ -1,4 +1,3 @@
-import { AssetComponentMap } from "./asset-jsx.js";
 import { Spec } from "@json-render/core";
 
 //#region src/spec/specToJsx.d.ts
@@ -14,21 +13,33 @@ interface SpecToJsxOptions {
    */
   omitImports?: boolean;
   /**
-   * `asset group slug → component tag used for JSX export`
-   * (e.g. `{ icons: 'Icon' }`).
-   *
-   * This is derived from `Config.assetGroups[*].component`. It does not affect
-   * asset registration or rendering; it only controls whether a stored asset node
-   * like `yahoo-os:asset:icons/Trophy` prints as `<Icon name="Trophy" />`
-   * instead of the fallback `<Trophy />`.
+   * Icon library slug → the module its members import from (`{ phosphor: '@phosphor-icons/react' }`).
+   * A placed glyph, and a glyph a prop holds, then import from that module under `memberImports`
+   * instead of joining the component imports.
    */
-  assetComponents?: AssetComponentMap;
+  glyphModules?: Readonly<Record<string, string>>;
+  /**
+   * Component type → prop → the icon libraries its values come from, in declaration order. A string
+   * value of such a prop is a member name in the stored form; authored code holds the component, so
+   * it prints as the identifier (`name={StarIcon}`) and the member is imported from the library
+   * `glyphMembers` says holds it, or from the first of those libraries `glyphModules` names a
+   * module for.
+   */
+  glyphProps?: Readonly<Record<string, Readonly<Record<string, readonly string[]>>>>;
+  /**
+   * Icon library slug → the member names it holds. A prop that binds several libraries names them
+   * all, and only this says which one a bare member name came from, so the import points at the
+   * package that exports it.
+   */
+  glyphMembers?: Readonly<Record<string, readonly string[]>>;
 }
 interface SpecToJsxResult {
   /** Generated JSX source code */
   jsx: string;
   /** Component names used (for imports) */
   imports: string[];
+  /** Glyph members used, by the module they import from — only with `glyphModules`. */
+  memberImports: Record<string, string[]>;
 }
 declare function specToJsx(spec: Spec, options?: SpecToJsxOptions): SpecToJsxResult;
 //#endregion

package/dist/spec/specToJsx.js

@@ -1,6 +1,37 @@
-import { assetJsxForm, jsxIdentifier } from "./asset-jsx.js";
+import { glyphJsxForm, jsxIdentifier, parseGlyphType } from "./glyph-jsx.js";
 import { serializeProps } from "@json-render/codegen";
 //#region src/spec/specToJsx.ts
+/** Record a glyph member as imported from the library that lists it, else from the first of `slugs`
+*  whose module is known; `false` when none of them names one. */
+function importMember({ ctx, slugs, name }) {
+	const holder = slugs.find((slug) => ctx.glyphMembers?.[slug]?.includes(name));
+	for (const slug of holder ? [holder, ...slugs] : slugs) {
+		const module = ctx.glyphModules?.[slug];
+		if (!module) continue;
+		const names = ctx.members.get(module) ?? /* @__PURE__ */ new Set();
+		names.add(name);
+		ctx.members.set(module, names);
+		return true;
+	}
+	return false;
+}
+/** A stored glyph value — the member ref, or the member's name under a prop the config declares as
+*  a glyph — as its name plus the libraries it could be imported from. A ref names its own library,
+*  so it answers with that one; a bare name answers with the prop's whole domain. */
+function glyphValue({ value, libraries }) {
+	const marker = value?.__ref;
+	if (typeof marker === "string") {
+		const parsed = parseGlyphType(marker);
+		return parsed ? {
+			slugs: [parsed.slug],
+			name: parsed.member
+		} : void 0;
+	}
+	if (typeof value === "string" && libraries && libraries.length > 0) return {
+		slugs: libraries,
+		name: value
+	};
+}
 function statePathToExpression(path) {
 	return `state${path.split("/").filter(Boolean).map((s) => `.${s}`).join("")}`;
 }
@@ -72,7 +103,7 @@ function collectUsedComponentTypes(spec) {
 	}
 	return types;
 }
-function renderElement(key, spec, depth, assetComponents, ancestors) {
+function renderElement(key, spec, depth, ctx, ancestors) {
 	const element = spec.elements[key];
 	if (!element) return "";
 	const indent = "  ".repeat(depth);
@@ -82,16 +113,36 @@ function renderElement(key, spec, depth, assetComponents, ancestors) {
 	const slotKeys = collectSlotKeys(element.slots);
 	const slotAttrs = [];
 	for (const [propName, fills] of Object.entries(element.slots ?? {})) if (fills.length === 1) {
-		const rendered = renderElement(fills[0], spec, 0, assetComponents, withSelf).trim();
+		const rendered = renderElement(fills[0], spec, 0, ctx, withSelf).trim();
 		slotAttrs.push(`${propName}={${rendered}}`);
 	} else {
-		const rendered = fills.map((r) => renderElement(r, spec, 0, assetComponents, withSelf).trim()).filter(Boolean);
+		const rendered = fills.map((r) => renderElement(r, spec, 0, ctx, withSelf).trim()).filter(Boolean);
 		slotAttrs.push(`${propName}={<>${rendered.join("")}</>}`);
 	}
-	const assetForm = assetJsxForm(element.type, assetComponents);
-	const tag = assetForm?.tag ?? jsxIdentifier(element.type);
-	const nameAttr = assetForm?.nameAttr ? `name="${assetForm.nameAttr}"` : "";
-	if (assetForm?.nameAttr) delete propsWithoutSlots.name;
+	const tag = glyphJsxForm(element.type)?.tag ?? jsxIdentifier(element.type);
+	const placed = parseGlyphType(element.type);
+	if (placed) importMember({
+		ctx,
+		slugs: [placed.slug],
+		name: placed.member
+	});
+	const glyphAttrs = [];
+	const declaredGlyphs = ctx.glyphProps?.[element.type] ?? {};
+	for (const [prop, value] of Object.entries(propsWithoutSlots)) {
+		const glyph = glyphValue({
+			value,
+			libraries: declaredGlyphs[prop]
+		});
+		if (!glyph) continue;
+		glyphAttrs.push(`${prop}={${glyph.name}}`);
+		importMember({
+			ctx,
+			slugs: glyph.slugs,
+			name: glyph.name
+		});
+		delete propsWithoutSlots[prop];
+	}
+	const nameAttr = glyphAttrs.join(" ");
 	const staticAttrs = Object.keys(propsWithoutSlots).length > 0 ? serializeProps(propsWithoutSlots) : "";
 	const eventAttrs = [];
 	if (element.on && typeof element.on === "object") {
@@ -134,7 +185,7 @@ function renderElement(key, spec, depth, assetComponents, ancestors) {
 		if (inlineContent !== null) childLines.push(`${"  ".repeat(depth + 1)}${inlineContent}`);
 		for (const childKey of childKeys) {
 			if (!spec.elements[childKey]) continue;
-			childLines.push(renderElement(childKey, spec, depth + 1, assetComponents, withSelf));
+			childLines.push(renderElement(childKey, spec, depth + 1, ctx, withSelf));
 		}
 		jsxLine = `${indent}<${tag}${propsStr}>\n${childLines.join("\n")}\n${indent}</${tag}>`;
 	}
@@ -151,18 +202,28 @@ function specToJsx(spec, options) {
 	const importSource = options?.importSource ?? "./uds/components";
 	if (!spec.elements[spec.root]) return {
 		jsx: "",
-		imports: []
+		imports: [],
+		memberImports: {}
+	};
+	const ctx = {
+		glyphModules: options?.glyphModules,
+		glyphProps: options?.glyphProps,
+		glyphMembers: options?.glyphMembers,
+		members: /* @__PURE__ */ new Map()
 	};
-	const assetComponents = options?.assetComponents;
-	const sortedImports = [...new Set([...collectUsedComponentTypes(spec)].map((type) => assetJsxForm(type, assetComponents)?.importName ?? jsxIdentifier(type)))].sort();
-	const jsxTree = renderElement(spec.root, spec, 0, assetComponents, /* @__PURE__ */ new Set());
+	const jsxTree = renderElement(spec.root, spec, 0, ctx, /* @__PURE__ */ new Set());
+	const fromLibraries = new Set([...ctx.members.values()].flatMap((names) => [...names]));
+	const sortedImports = [...new Set([...collectUsedComponentTypes(spec)].map((type) => glyphJsxForm(type)?.importName ?? jsxIdentifier(type)).filter((name) => !fromLibraries.has(name)))].sort();
+	const memberImports = Object.fromEntries([...ctx.members.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([module, names]) => [module, [...names].sort()]));
 	if (options?.omitImports) return {
 		jsx: jsxTree,
-		imports: sortedImports
+		imports: sortedImports,
+		memberImports
 	};
 	return {
-		jsx: `${`import { ${sortedImports.join(", ")} } from '${importSource}';`}\n\n${jsxTree}`,
-		imports: sortedImports
+		jsx: `${[...sortedImports.length ? [`import { ${sortedImports.join(", ")} } from '${importSource}';`] : [], ...Object.entries(memberImports).map(([module, names]) => `import { ${names.join(", ")} } from '${module}';`)].join("\n")}\n\n${jsxTree}`,
+		imports: sortedImports,
+		memberImports
 	};
 }
 //#endregion