@blazorapp3/counter-element

Paquete npm que distribuye el custom element <counter-element> generado por una app Blazor WebAssembly.

Instalación

npm install @blazorapp3/counter-element

Modos de uso

Este paquete soporta dos modos:

1. External host (servidor propio): Sirves tú los assets publicados de Blazor bajo una ruta (por ej. /blazor/).
2. Self-contained: Usas directamente los assets empacados en el paquete (quedan en dist/blazor/).

El build script ya copió todo wwwroot dentro del paquete, así que puedes usar self-contained inmediatamente.

1. External host

Publica tu proyecto Blazor (dotnet publish) y sirve la carpeta wwwroot resultante (por ejemplo bajo /blazor/). Asegúrate de incluir _framework/* y counter-element-events.js.

HTML (External host)

<script type="module">
  import { ensureBlazorStarted } from '@blazorapp3/counter-element';
  await ensureBlazorStarted({ base: '/blazor/', mode: 'external' });
</script>
<counter-element start="3" increment-step="2"></counter-element>

2. Self-contained

No necesitas servir tus propios assets. El loader usará los archivos empaquetados.

HTML (Self-contained)

<script type="module">
  import { ensureBlazorStarted } from '@blazorapp3/counter-element';
  await ensureBlazorStarted(); // mode self-contained por defecto
</script>
<counter-element start="1" increment-step="1"></counter-element>

Uso en React (External host)

import React, { useEffect } from 'react';
import { ensureBlazorStarted } from '@blazorapp3/counter-element';
import { CounterElement } from '@blazorapp3/counter-element/react';

export default function Demo() {
  useEffect(() => { ensureBlazorStarted({ base: '/blazor/', mode: 'external' }); }, []);
  return <CounterElement start={5} incrementStep={2} onCountChanged={v => console.log(v)} />;
}

Uso en React (Self-contained)

import React, { useEffect } from 'react';
import { ensureBlazorStarted } from '@blazorapp3/counter-element';
import { CounterElement } from '@blazorapp3/counter-element/react';

export default function Demo() {
  useEffect(() => { ensureBlazorStarted(); }, []); // self-contained
  return <CounterElement start={2} incrementStep={3} onCountChanged={v => console.log(v)} />;
}

Notas

• El loader autodetecta modo: si no pasas base, asume self-contained.
• Puedes forzar modo: ensureBlazorStarted({ mode: 'self-contained' }) o ensureBlazorStarted({ base: '/blazor/', mode: 'external' }).
• Si reduces tamaño, podrías eliminar archivos no usados (iconos, sample-data) en el paso de copia.

Licencia

MIT