@dropins/mcp 0.1.0

package/dist/registry/block-patterns.json

@@ -0,0 +1,78 @@
+{
+  "version": "1.0.0",
+  "description": "Common AEM block patterns for rendering dropin containers. Each block is a folder under blocks/ with a JS and CSS file. The JS file exports a default decorate(block) function.",
+  "blockLifecycle": "1. decorateBlocks() finds block divs by class name\n2. loadBlock() loads blocks/{name}/{name}.css and blocks/{name}/{name}.js\n3. The module's default export (decorate) is called with the block element\n4. decorate() renders dropin containers into the block element via provider.render(Container, props)(element)",
+  "initializerPattern": "Each dropin has an initializer at scripts/initializers/{name}.js that:\n1. Calls setEndpoint(CORE_FETCH_GRAPHQL)\n2. Fetches placeholders from placeholders/{name}.json\n3. Calls initializers.mountImmediately(initialize, { langDefinitions })\n\nBlocks import the initializer to ensure the dropin is initialized before rendering.",
+  "patterns": [
+    {
+      "name": "basic-single-container",
+      "description": "Simplest block pattern: render a single dropin container",
+      "template": "import '../../scripts/initializers/{{initializer}}.js';\nimport { render as provider } from '@dropins/storefront-{{dropin}}/render.js';\nimport {{Container}} from '@dropins/storefront-{{dropin}}/containers/{{Container}}.js';\n\nexport default async function decorate(block) {\n  provider.render({{Container}}, {\n    // props\n  })(block);\n}",
+      "requiredImports": ["initializer", "render (as provider)", "container"],
+      "examples": [
+        "commerce-customer-information",
+        "commerce-order-status",
+        "commerce-shipping-status"
+      ]
+    },
+    {
+      "name": "container-with-slots",
+      "description": "Block that renders a container with custom slot implementations",
+      "template": "import '../../scripts/initializers/{{initializer}}.js';\nimport { render as provider } from '@dropins/storefront-{{dropin}}/render.js';\nimport {{Container}} from '@dropins/storefront-{{dropin}}/containers/{{Container}}.js';\n\nexport default async function decorate(block) {\n  provider.render({{Container}}, {\n    slots: {\n      {{SlotName}}: (ctx) => {\n        // ctx contains slot-specific context\n        // ctx.replaceWith(element) — replace slot content\n        // ctx.appendChild(element) — append to slot\n        // ctx.prependChild(element) — prepend to slot\n        // ctx.remove() — remove slot\n        // ctx.onRender(callback) — run on each re-render\n      },\n    },\n  })(block);\n}",
+      "requiredImports": ["initializer", "render (as provider)", "container"],
+      "examples": [
+        "commerce-cart",
+        "commerce-mini-cart",
+        "commerce-orders-list"
+      ]
+    },
+    {
+      "name": "multi-container-layout",
+      "description": "Block that creates a layout (main + aside) and renders multiple containers",
+      "template": "import '../../scripts/initializers/{{initializer}}.js';\nimport { render as provider } from '@dropins/storefront-{{dropin}}/render.js';\nimport {{Container1}} from '@dropins/storefront-{{dropin}}/containers/{{Container1}}.js';\nimport {{Container2}} from '@dropins/storefront-{{dropin}}/containers/{{Container2}}.js';\n\nexport default async function decorate(block) {\n  const main = document.createElement('div');\n  main.classList.add('{{blockName}}__main');\n\n  const aside = document.createElement('div');\n  aside.classList.add('{{blockName}}__aside');\n\n  block.replaceChildren(main, aside);\n\n  provider.render({{Container1}}, { /* props */ })(main);\n  provider.render({{Container2}}, { /* props */ })(aside);\n}",
+      "requiredImports": [
+        "initializer",
+        "render (as provider)",
+        "multiple containers"
+      ],
+      "examples": ["commerce-checkout", "commerce-checkout-success"]
+    },
+    {
+      "name": "block-with-config",
+      "description": "Block that reads metadata configuration from the AEM block table",
+      "template": "import { readBlockConfig } from '../../scripts/aem.js';\nimport '../../scripts/initializers/{{initializer}}.js';\nimport { render as provider } from '@dropins/storefront-{{dropin}}/render.js';\nimport {{Container}} from '@dropins/storefront-{{dropin}}/containers/{{Container}}.js';\n\nexport default async function decorate(block) {\n  const config = readBlockConfig(block);\n  block.innerHTML = '';\n\n  provider.render({{Container}}, {\n    // Use config values as props\n    routeCheckout: () => config['checkout-url'] || '/checkout',\n    enableUpdateItemQuantity: config['enable-updating-product'] !== 'false',\n  })(block);\n}",
+      "requiredImports": [
+        "readBlockConfig from scripts/aem.js",
+        "initializer",
+        "render (as provider)",
+        "container"
+      ],
+      "examples": ["commerce-cart", "commerce-addresses"]
+    },
+    {
+      "name": "block-with-events",
+      "description": "Block that listens to dropin events for cross-dropin communication",
+      "template": "import { events } from '@dropins/tools/event-bus.js';\nimport '../../scripts/initializers/{{initializer}}.js';\nimport { render as provider } from '@dropins/storefront-{{dropin}}/render.js';\nimport {{Container}} from '@dropins/storefront-{{dropin}}/containers/{{Container}}.js';\n\nexport default async function decorate(block) {\n  // Listen for events\n  events.on('{{eventName}}', (payload) => {\n    // React to the event\n  });\n\n  provider.render({{Container}}, {\n    // props\n  })(block);\n}",
+      "requiredImports": [
+        "events from @dropins/tools/event-bus.js",
+        "initializer",
+        "render (as provider)",
+        "container"
+      ],
+      "examples": ["commerce-order-header", "commerce-checkout"]
+    },
+    {
+      "name": "block-with-extensions",
+      "description": "Checkout block with the extension system for custom payment methods, validation, and order placement",
+      "template": "import { getExtensionManager } from './extensions.js';\nimport '../../scripts/initializers/checkout.js';\nimport { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';\nimport PaymentMethods from '@dropins/storefront-checkout/containers/PaymentMethods.js';\nimport PlaceOrder from '@dropins/storefront-checkout/containers/PlaceOrder.js';\n\nexport default async function decorate(block) {\n  const extensionManager = await getExtensionManager();\n\n  // Handle payment redirects\n  const redirectContext = { block, shouldExit: false };\n  await extensionManager.executeHook('checkout/payment-response', redirectContext);\n  if (redirectContext.shouldExit) return;\n\n  // Get custom payment methods from extensions\n  const paymentMethodsContext = { paymentMethods: {} };\n  await extensionManager.executeHook('checkout/payment-methods', paymentMethodsContext);\n\n  // Render with custom payment methods\n  CheckoutProvider.render(PaymentMethods, {\n    slots: {\n      Methods: {\n        ...paymentMethodsContext.paymentMethods,\n      },\n    },\n  })(paymentMethodsContainer);\n\n  // Place order with extension hooks\n  CheckoutProvider.render(PlaceOrder, {\n    handleValidation: async () => {\n      const validationContext = { code, isValid: true };\n      await extensionManager.executeHook('checkout/validate', validationContext);\n      return validationContext.isValid;\n    },\n    handlePlaceOrder: async ({ cartId, code }) => {\n      const placeOrderContext = { cartId, code, preventDefault: false };\n      await extensionManager.executeHook('checkout/place-order', placeOrderContext);\n      if (placeOrderContext.preventDefault) return;\n      await orderApi.placeOrder(cartId);\n    },\n  })(placeOrderContainer);\n}",
+      "requiredImports": [
+        "getExtensionManager from ./extensions.js",
+        "checkout initializer",
+        "checkout render (as CheckoutProvider)",
+        "checkout containers",
+        "order API (for placeOrder)"
+      ],
+      "examples": ["commerce-checkout-with-extensions"]
+    }
+  ]
+}