@nysds/codegen 0.0.0-stage → 1.22.1

package/dist/transform/parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../src/transform/parse.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAEpD,MAAM,MAAM,MAAM,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,MAAM,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AACvD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAExD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,SAAS,CAEzD;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,MAAM,CAEnD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,SAAS,CAEzD;AAED,yDAAyD;AACzD,wBAAgB,YAAY,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,EAAE,CAMzD;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM,CAKtD"}

package/dist/transform/parse.js

@@ -0,0 +1,33 @@
+import { parseFragment } from "parse5";
+/**
+ * Parses an HTML fragment (a docs `preview` block or an `@example` block)
+ * into parse5 nodes. parse5 lowercases element and attribute names, matching
+ * what a browser does to the same markup.
+ */
+export function parseHtmlFragment(html) {
+    return parseFragment(html).childNodes;
+}
+export function isElement(node) {
+    return "tagName" in node;
+}
+export function isText(node) {
+    return node.nodeName === "#text";
+}
+export function isComment(node) {
+    return node.nodeName === "#comment";
+}
+/** Child nodes, reading through `<template>` content. */
+export function childNodesOf(element) {
+    const template = element;
+    if (template.content) {
+        return template.content.childNodes;
+    }
+    return element.childNodes;
+}
+/** Concatenated text content of an element's direct text children. */
+export function textContent(element) {
+    return childNodesOf(element)
+        .filter(isText)
+        .map((node) => node.value)
+        .join("");
+}

package/dist/transform/shared.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Rules shared by both emitters: component lookup, attribute
+ * classification, and the script/style/inline-handler policy.
+ */
+import type { ComponentMeta, Manifest, PropMeta } from "../manifest/types.js";
+import { type P5Element } from "./parse.js";
+export type FormsMode = "none" | "template" | "reactive";
+export interface TransformResult {
+    /** The transformed snippet. Imports are listed separately. */
+    code: string;
+    language: "jsx" | "html";
+    warnings: string[];
+    /**
+     * True when the example depends on something the target framework snippet
+     * cannot express (imperative script against a component, inline handlers).
+     * The code is still returned as a best effort.
+     */
+    unsupported: boolean;
+    /**
+     * Names the docs partial needs to import: component class names for
+     * React, Angular component class names for Angular.
+     */
+    imports: string[];
+}
+export interface TransformContext {
+    byTag: Map<string, ComponentMeta>;
+    propLookups: Map<string, Map<string, PropMeta>>;
+    warnings: string[];
+    imports: Set<string>;
+    unsupported: boolean;
+    formsMode: FormsMode;
+}
+export declare function buildContext(manifest: Manifest, formsMode: FormsMode): TransformContext;
+/**
+ * Props indexed by lowercased attribute name and lowercased property name.
+ * parse5 lowercases attribute names, so a camelCase manifest attribute
+ * (`errorMessage`) arrives as `errormessage`.
+ */
+export declare function propLookup(context: TransformContext, component: ComponentMeta): Map<string, PropMeta>;
+/** True for a component tag from this design system. */
+export declare function isNysTag(tagName: string): boolean;
+/** True for `onclick`-style inline handler attributes. */
+export declare function isInlineHandler(attrName: string): boolean;
+/** Global attributes that pass through without a warning. */
+export declare function isSilentGlobalAttr(attrName: string): boolean;
+/**
+ * Handles `<script>`, `<style>`, and inline handlers for both emitters.
+ * Returns true when the element was consumed (dropped) by the policy.
+ */
+export declare function dropScriptOrStyle(context: TransformContext, element: P5Element): boolean;
+export declare function warnInlineHandler(context: TransformContext, attrName: string, tagName: string): void;
+export declare function warnUnknownAttr(context: TransformContext, attrName: string, tagName: string): void;
+/** True when an attribute value is a numeric literal. */
+export declare function isNumericLiteral(value: string): boolean;
+/**
+ * The name a form model field gets in generated form bindings, taken from
+ * the example's own `name` (then `id`) attribute, then the component
+ * subpath.
+ */
+export declare function modelFieldName(element: P5Element, component: ComponentMeta): string;
+export declare function elementChildren(element: P5Element): P5Element[];
+//# sourceMappingURL=shared.d.ts.map

package/dist/transform/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/transform/shared.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAG9E,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB;;;;OAIG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAClC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACnB,gBAAgB,CAalB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,aAAa,GACvB,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAavB;AAED,wDAAwD;AACxD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAQ5D;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,SAAS,GACjB,OAAO,CAcT;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,GACd,IAAI,CAKN;AAED,wBAAgB,eAAe,CAC7B,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,GACd,IAAI,CAIN;AAED,yDAAyD;AACzD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEvD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,aAAa,GACvB,MAAM,CAMR;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,SAAS,GAAG,SAAS,EAAE,CAE/D"}

package/dist/transform/shared.js

@@ -0,0 +1,96 @@
+import { listComponents } from "../manifest/components.js";
+import { NYS_PREFIX } from "../manifest/naming.js";
+import { isElement, textContent } from "./parse.js";
+export function buildContext(manifest, formsMode) {
+    const byTag = new Map();
+    for (const component of listComponents(manifest)) {
+        byTag.set(component.tag, component);
+    }
+    return {
+        byTag,
+        propLookups: new Map(),
+        warnings: [],
+        imports: new Set(),
+        unsupported: false,
+        formsMode,
+    };
+}
+/**
+ * Props indexed by lowercased attribute name and lowercased property name.
+ * parse5 lowercases attribute names, so a camelCase manifest attribute
+ * (`errorMessage`) arrives as `errormessage`.
+ */
+export function propLookup(context, component) {
+    let lookup = context.propLookups.get(component.tag);
+    if (!lookup) {
+        lookup = new Map();
+        for (const prop of component.props) {
+            if (prop.attribute)
+                lookup.set(prop.attribute.toLowerCase(), prop);
+            if (!lookup.has(prop.name.toLowerCase())) {
+                lookup.set(prop.name.toLowerCase(), prop);
+            }
+        }
+        context.propLookups.set(component.tag, lookup);
+    }
+    return lookup;
+}
+/** True for a component tag from this design system. */
+export function isNysTag(tagName) {
+    return tagName.startsWith(NYS_PREFIX);
+}
+/** True for `onclick`-style inline handler attributes. */
+export function isInlineHandler(attrName) {
+    return /^on[a-z]/.test(attrName);
+}
+/** Global attributes that pass through without a warning. */
+export function isSilentGlobalAttr(attrName) {
+    return (attrName === "id" ||
+        attrName === "name" ||
+        attrName === "part" ||
+        attrName.startsWith("data-") ||
+        attrName.startsWith("aria-"));
+}
+/**
+ * Handles `<script>`, `<style>`, and inline handlers for both emitters.
+ * Returns true when the element was consumed (dropped) by the policy.
+ */
+export function dropScriptOrStyle(context, element) {
+    if (element.tagName !== "script" && element.tagName !== "style") {
+        return false;
+    }
+    context.warnings.push(`Dropped <${element.tagName}> block: examples must be declarative markup.`);
+    if (element.tagName === "script" &&
+        textContent(element).includes(NYS_PREFIX)) {
+        context.unsupported = true;
+    }
+    return true;
+}
+export function warnInlineHandler(context, attrName, tagName) {
+    context.warnings.push(`Inline handler "${attrName}" on <${tagName}> cannot be transformed.`);
+    context.unsupported = true;
+}
+export function warnUnknownAttr(context, attrName, tagName) {
+    context.warnings.push(`Unknown attribute "${attrName}" on <${tagName}> passed through unchanged.`);
+}
+/** True when an attribute value is a numeric literal. */
+export function isNumericLiteral(value) {
+    return /^-?\d+(\.\d+)?$/.test(value);
+}
+/**
+ * The name a form model field gets in generated form bindings, taken from
+ * the example's own `name` (then `id`) attribute, then the component
+ * subpath.
+ */
+export function modelFieldName(element, component) {
+    const byName = element.attrs.find((attr) => attr.name === "name")?.value;
+    if (byName)
+        return byName;
+    const byId = element.attrs.find((attr) => attr.name === "id")?.value;
+    if (byId)
+        return byId;
+    return component.subpath;
+}
+export function elementChildren(element) {
+    return element.childNodes.filter(isElement);
+}

package/dist/transform/to-angular.d.ts

@@ -0,0 +1,7 @@
+/**
+ * HTML example to Angular template snippet.
+ */
+import type { Manifest } from "../manifest/types.js";
+import { type FormsMode, type TransformResult } from "./shared.js";
+export declare function toAngular(html: string, manifest: Manifest, formsMode?: FormsMode): TransformResult;
+//# sourceMappingURL=to-angular.d.ts.map

package/dist/transform/to-angular.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-angular.d.ts","sourceRoot":"","sources":["../../src/transform/to-angular.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAA2B,MAAM,sBAAsB,CAAC;AAW9E,OAAO,EAWL,KAAK,SAAS,EAEd,KAAK,eAAe,EACrB,MAAM,aAAa,CAAC;AAqBrB,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,GAAE,SAAkB,GAC5B,eAAe,CAUjB"}

package/dist/transform/to-angular.js

@@ -0,0 +1,153 @@
+import { classToAngularClass } from "../manifest/naming.js";
+import { parseHtmlFragment, isElement, isText, isComment, childNodesOf, } from "./parse.js";
+import { buildContext, propLookup, isNysTag, isInlineHandler, isSilentGlobalAttr, dropScriptOrStyle, warnInlineHandler, warnUnknownAttr, isNumericLiteral, modelFieldName, } from "./shared.js";
+const INLINE_TEXT_MAX = 60;
+/** Native elements with no closing tag. */
+const VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "source",
+    "track",
+    "wbr",
+]);
+export function toAngular(html, manifest, formsMode = "none") {
+    const context = buildContext(manifest, formsMode);
+    const lines = renderNodes(context, parseHtmlFragment(html), 0);
+    return {
+        code: lines.length > 0 ? lines.join("\n") + "\n" : "",
+        language: "html",
+        warnings: context.warnings,
+        unsupported: context.unsupported,
+        imports: [...context.imports].sort(),
+    };
+}
+function renderNodes(context, nodes, depth) {
+    const indent = "  ".repeat(depth);
+    const lines = [];
+    for (const node of nodes) {
+        if (isText(node)) {
+            const text = node.value.replace(/\s+/g, " ").trim();
+            if (text)
+                lines.push(indent + text);
+            continue;
+        }
+        if (isComment(node)) {
+            lines.push(`${indent}<!-- ${node.data.trim()} -->`);
+            continue;
+        }
+        if (isElement(node)) {
+            lines.push(...renderElement(context, node, depth));
+        }
+    }
+    return lines;
+}
+function renderElement(context, element, depth) {
+    if (dropScriptOrStyle(context, element))
+        return [];
+    const indent = "  ".repeat(depth);
+    const tagName = element.tagName;
+    let component;
+    if (isNysTag(tagName)) {
+        component = context.byTag.get(tagName);
+        if (!component) {
+            context.warnings.push(`Unknown component <${tagName}> is not in the manifest; passed through unchanged.`);
+        }
+    }
+    if (component) {
+        context.imports.add(classToAngularClass(component.className));
+    }
+    const formControl = component && context.formsMode !== "none"
+        ? component.formControl
+        : undefined;
+    const attrParts = [];
+    for (const attr of element.attrs) {
+        if (isInlineHandler(attr.name)) {
+            warnInlineHandler(context, attr.name, tagName);
+            continue;
+        }
+        if (formControl &&
+            ((formControl.kind === "value" && attr.name === "value") ||
+                (formControl.kind === "checked" && attr.name === "checked"))) {
+            // The form binding owns the value.
+            continue;
+        }
+        if (attr.name === "class" ||
+            attr.name === "slot" ||
+            attr.name === "style") {
+            attrParts.push(htmlAttr(attr.name, attr.value));
+            continue;
+        }
+        if (component) {
+            const prop = propLookup(context, component).get(attr.name);
+            if (prop) {
+                attrParts.push(angularPropAttr(prop, attr.value));
+                continue;
+            }
+            if (isSilentGlobalAttr(attr.name)) {
+                attrParts.push(htmlAttr(attr.name, attr.value));
+                continue;
+            }
+            warnUnknownAttr(context, attr.name, tagName);
+            attrParts.push(htmlAttr(attr.name, attr.value));
+            continue;
+        }
+        attrParts.push(htmlAttr(attr.name, attr.value));
+    }
+    if (formControl && component) {
+        const field = modelFieldName(element, component);
+        if (context.formsMode === "template") {
+            attrParts.push(`[(ngModel)]="model.${field}"`);
+        }
+        else if (context.formsMode === "reactive") {
+            attrParts.push(`formControlName="${field}"`);
+        }
+    }
+    const attrsText = attrParts.length > 0 ? ` ${attrParts.join(" ")}` : "";
+    if (VOID_ELEMENTS.has(tagName)) {
+        return [`${indent}<${tagName}${attrsText}>`];
+    }
+    const children = childNodesOf(element);
+    const childLines = renderNodes(context, children, depth + 1);
+    if (childLines.length === 0) {
+        return [`${indent}<${tagName}${attrsText}></${tagName}>`];
+    }
+    const onlyText = children.every((node) => !isElement(node) && !isComment(node));
+    if (onlyText && childLines.length === 1) {
+        const text = childLines[0].trim();
+        if (text.length <= INLINE_TEXT_MAX) {
+            return [`${indent}<${tagName}${attrsText}>${text}</${tagName}>`];
+        }
+    }
+    return [
+        `${indent}<${tagName}${attrsText}>`,
+        ...childLines,
+        `${indent}</${tagName}>`,
+    ];
+}
+function htmlAttr(name, value) {
+    if (value === "")
+        return name;
+    return value.includes('"') ? `${name}='${value}'` : `${name}="${value}"`;
+}
+function angularPropAttr(prop, value) {
+    if (prop.isBoolean) {
+        return value === "false" ? `[${prop.name}]="false"` : prop.name;
+    }
+    if (prop.isNumber && isNumericLiteral(value)) {
+        return `[${prop.name}]="${value}"`;
+    }
+    if (!prop.isPrimitive && value !== "") {
+        return value.includes('"')
+            ? `[${prop.name}]='${value}'`
+            : `[${prop.name}]="${value}"`;
+    }
+    return htmlAttr(prop.name, value);
+}

package/dist/transform/to-jsx.d.ts

@@ -0,0 +1,7 @@
+/**
+ * HTML example to JSX snippet.
+ */
+import type { Manifest } from "../manifest/types.js";
+import { type FormsMode, type TransformResult } from "./shared.js";
+export declare function toJsx(html: string, manifest: Manifest, formsMode?: FormsMode): TransformResult;
+//# sourceMappingURL=to-jsx.d.ts.map

package/dist/transform/to-jsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-jsx.d.ts","sourceRoot":"","sources":["../../src/transform/to-jsx.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAA2B,MAAM,sBAAsB,CAAC;AAW9E,OAAO,EAUL,KAAK,SAAS,EAEd,KAAK,eAAe,EACrB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,KAAK,CACnB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,GAAE,SAAkB,GAC5B,eAAe,CAUjB"}

package/dist/transform/to-jsx.js

@@ -0,0 +1,172 @@
+import { eventToReactProp } from "../manifest/naming.js";
+import { parseHtmlFragment, isElement, isText, isComment, childNodesOf, } from "./parse.js";
+import { buildContext, propLookup, isNysTag, isInlineHandler, isSilentGlobalAttr, dropScriptOrStyle, warnInlineHandler, warnUnknownAttr, isNumericLiteral, } from "./shared.js";
+const INLINE_TEXT_MAX = 60;
+export function toJsx(html, manifest, formsMode = "none") {
+    const context = buildContext(manifest, formsMode);
+    const lines = renderNodes(context, parseHtmlFragment(html), 0);
+    return {
+        code: lines.length > 0 ? lines.join("\n") + "\n" : "",
+        language: "jsx",
+        warnings: context.warnings,
+        unsupported: context.unsupported,
+        imports: [...context.imports].sort(),
+    };
+}
+function renderNodes(context, nodes, depth) {
+    const indent = "  ".repeat(depth);
+    const lines = [];
+    for (const node of nodes) {
+        if (isText(node)) {
+            const text = node.value.replace(/\s+/g, " ").trim();
+            if (text)
+                lines.push(indent + escapeJsxText(text));
+            continue;
+        }
+        if (isComment(node)) {
+            lines.push(`${indent}{/* ${node.data.trim()} */}`);
+            continue;
+        }
+        if (isElement(node)) {
+            lines.push(...renderElement(context, node, depth));
+        }
+    }
+    return lines;
+}
+function renderElement(context, element, depth) {
+    if (dropScriptOrStyle(context, element))
+        return [];
+    const indent = "  ".repeat(depth);
+    const tagName = element.tagName;
+    let component;
+    if (isNysTag(tagName)) {
+        component = context.byTag.get(tagName);
+        if (!component) {
+            context.warnings.push(`Unknown component <${tagName}> is not in the manifest; passed through unchanged.`);
+        }
+    }
+    const jsxName = component ? component.className : tagName;
+    if (component)
+        context.imports.add(component.className);
+    const formControl = component && context.formsMode !== "none"
+        ? component.formControl
+        : undefined;
+    const controlledAttr = formControl?.kind === "value"
+        ? "value"
+        : formControl?.kind === "checked"
+            ? "checked"
+            : undefined;
+    const isControlled = controlledAttr !== undefined &&
+        element.attrs.some((attr) => attr.name === controlledAttr);
+    const attrParts = [];
+    for (const attr of element.attrs) {
+        if (isInlineHandler(attr.name)) {
+            warnInlineHandler(context, attr.name, tagName);
+            continue;
+        }
+        if (isControlled && attr.name === controlledAttr)
+            continue;
+        if (attr.name === "class") {
+            attrParts.push(jsxStringAttr("className", attr.value));
+            continue;
+        }
+        if (attr.name === "style") {
+            const style = styleToJsx(context, attr.value, tagName);
+            if (style)
+                attrParts.push(style);
+            continue;
+        }
+        if (attr.name === "slot") {
+            attrParts.push(jsxStringAttr("slot", attr.value));
+            continue;
+        }
+        if (component) {
+            const prop = propLookup(context, component).get(attr.name);
+            if (prop) {
+                attrParts.push(jsxPropAttr(prop, attr.value));
+                continue;
+            }
+            if (isSilentGlobalAttr(attr.name)) {
+                attrParts.push(jsxStringAttr(attr.name, attr.value));
+                continue;
+            }
+            warnUnknownAttr(context, attr.name, tagName);
+            attrParts.push(jsxStringAttr(attr.name, attr.value));
+            continue;
+        }
+        // Native or unknown element.
+        if (attr.name === "for") {
+            attrParts.push(jsxStringAttr("htmlFor", attr.value));
+            continue;
+        }
+        attrParts.push(jsxStringAttr(attr.name, attr.value));
+    }
+    if (isControlled && formControl && controlledAttr) {
+        const stateName = controlledAttr;
+        const setter = `set${stateName[0].toUpperCase()}${stateName.slice(1)}`;
+        attrParts.push(`${stateName}={${stateName}}`);
+        attrParts.push(`${eventToReactProp(formControl.changeEvent)}={(e) => ${setter}(e.detail.${stateName})}`);
+    }
+    const attrsText = attrParts.length > 0 ? ` ${attrParts.join(" ")}` : "";
+    const children = childNodesOf(element);
+    const childLines = renderNodes(context, children, depth + 1);
+    if (childLines.length === 0) {
+        return [`${indent}<${jsxName}${attrsText} />`];
+    }
+    const onlyText = children.every((node) => !isElement(node) && !isComment(node));
+    if (onlyText && childLines.length === 1) {
+        const text = childLines[0].trim();
+        if (text.length <= INLINE_TEXT_MAX) {
+            return [`${indent}<${jsxName}${attrsText}>${text}</${jsxName}>`];
+        }
+    }
+    return [
+        `${indent}<${jsxName}${attrsText}>`,
+        ...childLines,
+        `${indent}</${jsxName}>`,
+    ];
+}
+function escapeJsxText(text) {
+    return /[{}]/.test(text) ? `{${JSON.stringify(text)}}` : text;
+}
+function jsxStringAttr(name, value) {
+    return value.includes('"')
+        ? `${name}={${JSON.stringify(value)}}`
+        : `${name}="${value}"`;
+}
+function jsxPropAttr(prop, value) {
+    if (prop.isBoolean) {
+        return value === "false" ? `${prop.name}={false}` : prop.name;
+    }
+    if (prop.isNumber && isNumericLiteral(value)) {
+        return `${prop.name}={${value}}`;
+    }
+    if (!prop.isPrimitive && (value.startsWith("{") || value.startsWith("["))) {
+        return `${prop.name}={${value}}`;
+    }
+    return jsxStringAttr(prop.name, value);
+}
+/** Converts an inline style string to a JSX style object. */
+function styleToJsx(context, value, tagName) {
+    const declarations = value
+        .split(";")
+        .map((declaration) => declaration.trim())
+        .filter(Boolean);
+    const pairs = [];
+    for (const declaration of declarations) {
+        const colon = declaration.indexOf(":");
+        if (colon === -1) {
+            context.warnings.push(`Dropped unparseable style attribute on <${tagName}>.`);
+            return undefined;
+        }
+        const property = declaration
+            .slice(0, colon)
+            .trim()
+            .replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        const propertyValue = declaration.slice(colon + 1).trim();
+        pairs.push(`${property}: ${JSON.stringify(propertyValue)}`);
+    }
+    if (pairs.length === 0)
+        return undefined;
+    return `style={{ ${pairs.join(", ")} }}`;
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@nysds/codegen",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.22.1",
+  "description": "Manifest readers, naming rules, CEM plugins, and the HTML snippet transformer for NYSDS framework support.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./cem-plugins": "./cem-plugins/index.mjs",
+    "./cem-plugins/*": "./cem-plugins/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "cem-plugins",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "test": "tsc -b && node --test"
+  },
+  "dependencies": {
+    "parse5": "^7.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "new-york-state",
+    "design-system",
+    "codegen",
+    "custom-elements-manifest"
+  ],
+  "author": "New York State Design System Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ITS-HCD/nysds.git",
+    "directory": "packages/codegen"
+  },
+  "sideEffects": false
+}