@dropins/mcp 0.1.0

package/dist/operations/scaffold-block.d.ts

@@ -0,0 +1,31 @@
+import { z } from "zod";
+export declare const ScaffoldBlockSchema: z.ZodObject<{
+    blockName: z.ZodString;
+    containers: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    dropin: z.ZodOptional<z.ZodString>;
+    containersByDropin: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
+    slots: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
+    withEvents: z.ZodOptional<z.ZodBoolean>;
+    projectDir: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    projectDir: string;
+    blockName: string;
+    dropin?: string | undefined;
+    slots?: Record<string, string[]> | undefined;
+    containers?: string[] | undefined;
+    containersByDropin?: Record<string, string[]> | undefined;
+    withEvents?: boolean | undefined;
+}, {
+    projectDir: string;
+    blockName: string;
+    dropin?: string | undefined;
+    slots?: Record<string, string[]> | undefined;
+    containers?: string[] | undefined;
+    containersByDropin?: Record<string, string[]> | undefined;
+    withEvents?: boolean | undefined;
+}>;
+export declare function scaffoldBlock(params: z.infer<typeof ScaffoldBlockSchema>): Promise<{
+    success: boolean;
+    message: string;
+    data: unknown;
+}>;

package/dist/operations/scaffold-block.js

@@ -0,0 +1,331 @@
+import { z } from "zod";
+import { formatSuccessResponse, formatExceptionResponse, } from "../common/response-handling.js";
+import { getContainersByDropin, getSlotsByContainer, getAllDropinNames, } from "../common/registry-loader.js";
+import { projectDirGuard, INITIALIZER_ALIASES, } from "../common/project-reader.js";
+import { validateBlockName, validateIdentifier, sanitizeForComment, } from "../common/sanitize.js";
+export const ScaffoldBlockSchema = z.object({
+    blockName: z
+        .string()
+        .describe("Block name (e.g. commerce-custom-cart). Will be used as folder and file name."),
+    containers: z
+        .array(z.string())
+        .optional()
+        .describe('Container names for single-dropin mode (e.g. ["CartSummaryList", "OrderSummary"]). Requires dropin.'),
+    dropin: z
+        .string()
+        .optional()
+        .describe("Primary dropin for single-dropin mode (e.g. storefront-cart). Requires containers."),
+    containersByDropin: z
+        .record(z.string(), z.array(z.string()))
+        .optional()
+        .describe('Multi-dropin mode: map of dropin to containers, e.g. { "storefront-cart": ["MiniCart"], "storefront-wishlist": ["WishlistToggle"] }'),
+    slots: z
+        .record(z.string(), z.array(z.string()))
+        .optional()
+        .describe('Slots per container. Use "ContainerName" when unique, or "dropin/ContainerName" when the same container name exists in multiple dropins. E.g. { "CartSummaryList": ["Thumbnail"], "storefront-cart/EstimateShipping": ["Header"] }'),
+    withEvents: z
+        .boolean()
+        .optional()
+        .describe("Include event bus wiring boilerplate (default: false)"),
+    projectDir: z
+        .string()
+        .describe("Absolute path to the merchant storefront project root"),
+});
+function dropinPrefix(dropin) {
+    const short = dropin.replace("storefront-", "");
+    return short
+        .split("-")
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join("");
+}
+function providerAlias(dropin, isSingle) {
+    if (isSingle)
+        return "provider";
+    const prefix = dropinPrefix(dropin);
+    return prefix.charAt(0).toLowerCase() + prefix.slice(1) + "Provider";
+}
+function resolveContainerIds(groups) {
+    const nameCount = new Map();
+    for (const g of groups) {
+        for (const c of g.containers) {
+            nameCount.set(c, (nameCount.get(c) ?? 0) + 1);
+        }
+    }
+    const resolved = [];
+    for (const g of groups) {
+        for (const c of g.containers) {
+            const collides = (nameCount.get(c) ?? 0) > 1;
+            resolved.push({
+                name: c,
+                jsId: collides ? `${dropinPrefix(g.dropin)}${c}` : c,
+                dropin: g.dropin,
+            });
+        }
+    }
+    return resolved;
+}
+function generateImportsMulti(groups, resolved, withEvents) {
+    const lines = [];
+    if (withEvents) {
+        lines.push("import { events } from '@dropins/tools/event-bus.js';");
+    }
+    for (const g of groups) {
+        lines.push(`import { render as ${g.alias} } from '@dropins/${g.dropin}/render.js';`);
+        const groupContainers = resolved.filter((r) => r.dropin === g.dropin);
+        for (const rc of groupContainers) {
+            if (rc.jsId !== rc.name) {
+                lines.push(`import { default as ${rc.jsId} } from '@dropins/${g.dropin}/containers/${rc.name}.js';`);
+            }
+            else {
+                lines.push(`import ${rc.jsId} from '@dropins/${g.dropin}/containers/${rc.name}.js';`);
+            }
+        }
+    }
+    lines.push("");
+    lines.push("import { readBlockConfig } from '../../scripts/aem.js';");
+    for (const g of groups) {
+        const initName = INITIALIZER_ALIASES[g.dropin] ?? g.dropin.replace("storefront-", "");
+        lines.push(`import '../../scripts/initializers/${initName}.js';`);
+    }
+    return lines.join("\n");
+}
+function generateSlotStubs(dropin, containerName, slotNames) {
+    if (slotNames.length === 0)
+        return "";
+    const stubs = slotNames.map((slotName) => {
+        const containerSlots = getSlotsByContainer(dropin, containerName);
+        const slotDef = containerSlots?.slots?.find((s) => s.name === slotName);
+        const contextType = slotDef?.contextType ?? "DefaultSlotContext";
+        const description = slotDef?.description ?? `Custom ${slotName} slot`;
+        return `      ${slotName}: (ctx) => {
+        // ${sanitizeForComment(description)}
+        // Context type: ${sanitizeForComment(contextType)}
+        // Available methods: appendChild, prependChild, replaceWith, removeChild, replaceHTML
+        const element = document.createElement('div');
+        element.textContent = 'Custom ${slotName}';
+        ctx.appendChild(element);
+      },`;
+    });
+    return `    slots: {\n${stubs.join("\n")}\n    },`;
+}
+function generateContainerRender(rc, slotNames, domVar, alias) {
+    const slotsCode = generateSlotStubs(rc.dropin, rc.name, slotNames);
+    if (slotsCode) {
+        return `  ${alias}.render(${rc.jsId}, {\n${slotsCode}\n  })(${domVar});`;
+    }
+    return `  ${alias}.render(${rc.jsId}, {})(${domVar});`;
+}
+function generateLayout(containers) {
+    if (containers.length === 1) {
+        return `  block.textContent = '';
+  const $container = document.createElement('div');
+  $container.classList.add('block__content');
+  block.appendChild($container);`;
+    }
+    const vars = containers.map((_, i) => `$section${i + 1}`);
+    const declarations = containers
+        .map((name, i) => `  const ${vars[i]} = document.createElement('div');\n  ${vars[i]}.classList.add('block__${name.toLowerCase()}');`)
+        .join("\n");
+    return `  block.textContent = '';
+  const $wrapper = document.createElement('div');
+  $wrapper.classList.add('block__content');
+
+${declarations}
+
+  $wrapper.append(${vars.join(", ")});
+  block.appendChild($wrapper);`;
+}
+function generateEventStubs() {
+    return `
+  // Event wiring — subscribe to cross-dropin events
+  // events.on('cart/data', (cartData) => {
+  //   // React to cart data changes
+  // });
+  //
+  // events.on('authenticated', ({ isAuthenticated }) => {
+  //   // React to authentication state changes
+  // });`;
+}
+function generateCss(blockName, containers) {
+    const sections = containers.length > 1
+        ? containers
+            .map((name) => `.${blockName} .block__${name.toLowerCase()} {
+  /* Styles for ${name} section */
+}`)
+            .join("\n\n")
+        : "";
+    return `.${blockName} {
+  display: block;
+  max-width: var(--grid-5-columns, 1440px);
+  margin: 0 auto;
+  padding: var(--spacing-medium, 16px);
+}
+
+.${blockName} .block__content {
+  display: ${containers.length > 1 ? "grid" : "block"};${containers.length > 1
+        ? "\n  grid-template-columns: 1fr 1fr;\n  gap: var(--spacing-large, 24px);"
+        : ""}
+}
+
+${sections}
+`;
+}
+export async function scaffoldBlock(params) {
+    try {
+        const blockNameError = validateBlockName(params.blockName);
+        if (blockNameError) {
+            return formatSuccessResponse("Invalid block name", {
+                error: blockNameError,
+            });
+        }
+        let dropinContainerMap;
+        if (params.containersByDropin) {
+            dropinContainerMap = params.containersByDropin;
+        }
+        else if (params.dropin && params.containers) {
+            dropinContainerMap = { [params.dropin]: params.containers };
+        }
+        else {
+            return formatSuccessResponse("Missing required parameters", {
+                error: 'Provide either "dropin" + "containers" for single-dropin mode, or "containersByDropin" for multi-dropin mode.',
+            });
+        }
+        const allContainerNames = [];
+        for (const containers of Object.values(dropinContainerMap)) {
+            allContainerNames.push(...containers);
+        }
+        for (const container of allContainerNames) {
+            const containerError = validateIdentifier(container, "container name");
+            if (containerError) {
+                return formatSuccessResponse("Invalid container name", {
+                    error: containerError,
+                });
+            }
+        }
+        if (params.slots) {
+            for (const slotNames of Object.values(params.slots)) {
+                for (const slotName of slotNames) {
+                    const slotError = validateIdentifier(slotName, "slot name");
+                    if (slotError) {
+                        return formatSuccessResponse("Invalid slot name", {
+                            error: slotError,
+                        });
+                    }
+                }
+            }
+        }
+        const guard = projectDirGuard(params.projectDir);
+        if (guard)
+            return guard;
+        const isSingle = Object.keys(dropinContainerMap).length === 1;
+        const groups = [];
+        for (const [dropin, containers] of Object.entries(dropinContainerMap)) {
+            const dropinData = getContainersByDropin(dropin);
+            if (!dropinData) {
+                return formatSuccessResponse(`Dropin "${dropin}" not found`, {
+                    availableDropins: getAllDropinNames(),
+                });
+            }
+            const availableContainers = dropinData.containers.map((c) => c.name);
+            const invalidContainers = containers.filter((c) => !availableContainers.includes(c));
+            if (invalidContainers.length > 0) {
+                return formatSuccessResponse(`Invalid container names for "${dropin}"`, {
+                    invalidContainers,
+                    availableContainers,
+                });
+            }
+            groups.push({
+                dropin,
+                containers,
+                alias: providerAlias(dropin, isSingle),
+            });
+        }
+        const withEvents = params.withEvents ?? false;
+        const slots = params.slots ?? {};
+        const resolved = resolveContainerIds(groups);
+        const imports = generateImportsMulti(groups, resolved, withEvents);
+        const layout = generateLayout(resolved.map((r) => r.jsId));
+        const aliasMap = new Map();
+        for (const g of groups) {
+            aliasMap.set(g.dropin, g.alias);
+        }
+        const collidingNames = new Set(resolved.filter((rc) => rc.jsId !== rc.name).map((rc) => rc.name));
+        function slotsForContainer(rc) {
+            const scopedKey = `${rc.dropin}/${rc.name}`;
+            if (slots[scopedKey])
+                return slots[scopedKey];
+            if (rc.jsId === rc.name)
+                return slots[rc.name] ?? [];
+            return [];
+        }
+        const resolvedSlotCounts = resolved.map((rc) => slotsForContainer(rc));
+        const effectiveSlotCount = resolvedSlotCounts.reduce((sum, s) => sum + s.length, 0);
+        const ignoredSlotKeys = Object.keys(slots).filter((key) => !key.includes("/") && collidingNames.has(key));
+        const renderCalls = resolved
+            .map((rc, i) => {
+            const containerSlots = slotsForContainer(rc);
+            const domVar = resolved.length === 1 ? "$container" : `$section${i + 1}`;
+            return generateContainerRender(rc, containerSlots, domVar, aliasMap.get(rc.dropin));
+        })
+            .join("\n\n");
+        const eventStubs = withEvents ? generateEventStubs() : "";
+        const jsContent = `${imports}
+
+export default async function decorate(block) {
+  // Read block configuration from AEM metadata
+  // const config = readBlockConfig(block);
+
+${layout}
+
+  // Render containers
+${renderCalls}
+${eventStubs}
+}
+`;
+        const cssContent = generateCss(params.blockName, resolved.map((r) => r.jsId));
+        const blockDir = `blocks/${params.blockName}`;
+        const jsPath = `${blockDir}/${params.blockName}.js`;
+        const cssPath = `${blockDir}/${params.blockName}.css`;
+        const slotInstruction = effectiveSlotCount > 0
+            ? "Slot stubs are included - customize the implementation in each slot callback"
+            : ignoredSlotKeys.length > 0
+                ? `Slot keys ignored because container name is ambiguous across dropins: ${ignoredSlotKeys.join(", ")}. Use scoped keys like "dropin/ContainerName" instead.`
+                : "No slots configured - add slots to customize container rendering";
+        return formatSuccessResponse(`Block "${params.blockName}" scaffolded successfully`, {
+            files: {
+                [jsPath]: jsContent,
+                [cssPath]: cssContent,
+            },
+            dropins: groups.map((g) => g.dropin),
+            ignoredSlotKeys: ignoredSlotKeys.length > 0 ? ignoredSlotKeys : undefined,
+            instructions: [
+                `Create directory: ${blockDir}/`,
+                `Write JS file: ${jsPath}`,
+                `Write CSS file: ${cssPath}`,
+                `The block will be auto-discovered when a "${params.blockName}" section is added to a page`,
+                slotInstruction,
+                withEvents
+                    ? "Event bus is imported - uncomment and wire the events you need"
+                    : "Add withEvents: true to include event bus boilerplate",
+                groups.length > 1
+                    ? `Multi-dropin block: ${groups.map((g) => `${g.alias} (${g.dropin})`).join(", ")}`
+                    : "",
+            ].filter(Boolean),
+            containersSummary: resolved.map((rc) => {
+                const dropinData = getContainersByDropin(rc.dropin);
+                const containerDef = dropinData.containers.find((c) => c.name === rc.name);
+                return {
+                    name: rc.name,
+                    jsId: rc.jsId,
+                    dropin: rc.dropin,
+                    description: containerDef?.description,
+                    availableSlots: containerDef?.slotNames ?? [],
+                    configuredSlots: slotsForContainer(rc),
+                };
+            }),
+        });
+    }
+    catch (error) {
+        return formatExceptionResponse(error, "scaffolding block");
+    }
+}

package/dist/operations/scaffold-extension.d.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+export declare const ScaffoldExtensionSchema: z.ZodObject<{
+    extensionName: z.ZodString;
+    extensionId: z.ZodString;
+    hooks: z.ZodArray<z.ZodString, "many">;
+    externalScripts: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    externalStyles: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    projectDir: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    projectDir: string;
+    extensionName: string;
+    extensionId: string;
+    hooks: string[];
+    externalScripts?: string[] | undefined;
+    externalStyles?: string[] | undefined;
+}, {
+    projectDir: string;
+    extensionName: string;
+    extensionId: string;
+    hooks: string[];
+    externalScripts?: string[] | undefined;
+    externalStyles?: string[] | undefined;
+}>;
+export declare function scaffoldExtension(params: z.infer<typeof ScaffoldExtensionSchema>): Promise<{
+    success: boolean;
+    message: string;
+    data: unknown;
+}>;