Generadores

MageObsidian incluye generadores de bin/magento que crean módulos, temas y componentes Vue ya cableados para el frontend —de modo que el resolver los detecta sin configuración manual. Viven en el paquete mage-obsidian/module-modern-frontend-cli.

Comando	Qué crea
mage-obsidian:generate:module	Un módulo nuevo en app/code, adherido al frontend.
mage-obsidian:generate:theme	Un tema de frontend nuevo en app/design, precableado.
mage-obsidian:generate:component	Un componente Vue single-file dentro de un módulo o tema.

---

Generar un Módulo

bin/magento mage-obsidian:generate:module Acme_Catalog

El nombre debe tener la forma Vendor_Module. Crea, bajo app/code/Acme/Catalog/:

• registration.php
• etc/module.xml (secuenciado después del core)
• etc/mage_obsidian_compatibility.xml (el opt-in del frontend)
• view/frontend/web/module.config.ts

Un módulo es invisible para el stack de frontend hasta que entrega el archivo de compatibilidad, por eso se genera por defecto. Sigue los próximos pasos impresos para activarlo:

bin/magento module:enable Acme_Catalog
bin/magento setup:upgrade
bin/magento mage-obsidian:frontend:config --generate
bin/magento mage-obsidian:generate:component <Name> --module=Acme_Catalog

Opción	Descripción
--force, -f	Sobrescribe los archivos si ya existen.

---

Generar un Tema

bin/magento mage-obsidian:generate:theme Acme/aurora --parent=Magento/blank --title="Aurora"

El código debe tener la forma Vendor/theme. Crea, bajo app/design/frontend/Acme/aurora/:

• registration.php
• theme.xml (con el <parent> si se pasa --parent)
• etc/mage_obsidian_compatibility.xml
• web/theme.config.js
• web/css/theme.source.css (una fuente de Tailwind 4)
• .gitignore

Opción	Descripción
--parent	Tema padre, p. ej. Magento/blank.
--title	Título legible del tema (por defecto, el código).
--force, -f	Sobrescribe archivos existentes.

Luego actívalo en Content → Design → Configuration (o vía config) y regenera el contrato:

bin/magento mage-obsidian:frontend:config --generate

---

Generar un Componente

Apunta a exactamente uno de módulo o tema:

# dentro de un módulo
bin/magento mage-obsidian:generate:component Button --module=Acme_Catalog

# dentro de un tema
bin/magento mage-obsidian:generate:component ProductCard --theme=Acme/aurora

El destino debe ser un módulo/tema habilitado y compatible con el frontend; de lo contrario el comando te indica que entregues el archivo de compatibilidad y ejecutes mage-obsidian:frontend:config --generate.

El componente se escribe siguiendo la convención del framework, así que el resolver lo encuentra sin registro:

• módulo → view/frontend/web/components/<name>.vue
• tema → web/components/<name>.vue

Funcionan las rutas anidadas (elements/Button), y un components/ inicial o un .vue final en el nombre se normalizan. El comando imprime entonces cómo renderizarlo:

$block->renderVueComponent('Acme_Catalog::Button');

(Para un destino de tema la referencia usa el namespace Theme::, p. ej. Theme::ProductCard.)

Opción	Descripción
--module	Módulo destino (Vendor_Module).
--theme	Tema destino (Vendor/theme).
--wire	Genera además un stub .phtml que renderiza el componente.
--force, -f	Sobrescribe archivos existentes.

Cablear un stub phtml

Con --wire, el comando también escribe un .phtml que renderiza el nuevo componente e imprime un snippet de bloque de layout para colocarlo en un handle:

• módulo → view/frontend/templates/<name>.phtml
• tema → Magento_Theme/templates/<name>.phtml

<referenceContainer name="content">
    <block class="MageObsidian\ModernFrontend\Block\Template"
           name="acme.catalog.button"
           template="Acme_Catalog::button.phtml"/>
</referenceContainer>

---

Ejemplo de Punta a Punta

# 1. Módulo nuevo, habilitado y compatible
bin/magento mage-obsidian:generate:module Acme_Catalog
bin/magento module:enable Acme_Catalog
bin/magento setup:upgrade
bin/magento mage-obsidian:frontend:config --generate

# 2. Un componente cableado con un stub phtml
bin/magento mage-obsidian:generate:component ProductCard --module=Acme_Catalog --wire

# 3. Agrega el <block> impreso a un handle de layout, luego haz build

El componente se renderiza como una isla Vue de hidratación perezosa. Edita el .vue generado y el watcher de desarrollo mantiene sincronizadas la resolución y el autocompletado del editor.