@monkeyplus/flow

@monkeyplus/flow

@monkeyplus/flow es ahora un paquete reusable con un playground/ de referencia dentro del mismo workspace.

Desarrollo diario

• pnpm dev: arranca el proyecto de referencia en playground/
• pnpm build: construye el playground/
• pnpm preview: previsualiza el playground/

Empaquetado del paquete

• pnpm build:package: compila el paquete publicable en dist/
• pnpm pack:package: genera un tarball npm desde dist/
• pnpm publish:package: publica el paquete desde dist/ con acceso publico

El workspace consume la API fuente del root para mantener DX local, mientras que dist/ genera un artefacto publicable con exports ya compilados.

Guia de uso

La guia detallada de authoring vive en docs/authoring.md e incluye:

• como registrar y configurar modulos
• como definir paginas estaticas y dinamicas
• como organizar templates, layouts y *.context.ts
• como trabajar con FlowIsland y client/islands/*

Documentacion complementaria:

• docs/modules.md: referencia de modulos builtin
• docs/recipes.md: recetas basadas en el playground actual

Si vas a crear o mantener una app en Flow, ese archivo deberia ser el punto de entrada principal.

API pública

import { defineFlowConfig, defineLayoutContext, definePage } from '@monkeyplus/flow';
import { FlowIsland } from '@monkeyplus/flow/components';
import { getClientHead } from '@monkeyplus/flow/head';
import sitemapModule from '@monkeyplus/flow/modules/sitemap';
import strapiModule from '@monkeyplus/flow/modules/strapi';
import { createFlowNitroConfig } from '@monkeyplus/flow/nitro';
import { createFlowViteConfig } from '@monkeyplus/flow/vite';
import { installFlowVuePlugins } from '@monkeyplus/flow/vue';

Contexto de layout

Los layouts pueden tener un handler de contexto colocalizado usando views/layouts/<Layout>.context.ts.

Opcionalmente puedes definir views/layouts/global.context.ts para compartir datos entre todos los layouts. Flow fusiona primero el contexto global y luego el contexto especifico del layout, por lo que el layout especifico tiene prioridad si repite una clave.

import type { GlobalLayoutContextValue } from './global.context';
// views/layouts/Default.context.ts
import { defineLayoutContext } from '@monkeyplus/flow';

const defaultLayoutContext = defineLayoutContext({
  async setup(ctx) {
    return {
      menuName: 'main',
      localeCode: ctx.locale.code,
    };
  },
});

export type DefaultLayoutContextValue = GlobalLayoutContextValue & Awaited<ReturnType<typeof defaultLayoutContext.setup>>;

export default defaultLayoutContext;

Ese resultado se expone en el layout bajo context.layout.

<script setup lang="ts">
import type { DefaultLayoutContextValue } from './Default.context';

const props = defineProps<{
  context?: {
    layout?: DefaultLayoutContextValue
  }
}>();
</script>

<template>
  <slot />
  <small>{{ props.context?.layout?.menuName }}</small>
</template>

Esto reemplaza el patrón anterior de shared/contexts para casos que pertenecen al layout. Si una lógica debe compartirse entre varios layouts, puedes ponerla en views/layouts/global.context.ts o extraerla a un helper .ts reutilizable y llamarlo desde cada *.context.ts.

Playground

La app de referencia vive en playground/ y ya no en la raíz. Eso permite mantener el root enfocado en la distribución del paquete sin perder el flujo de desarrollo existente.

Migraciones y Compatibilidad (Nuxt UI v4)

• USelect: En la versión actual de Nuxt UI (v4), el componente USelect (y similares) requiere utilizar la propiedad :items en lugar de :options para poblar el listado de opciones.