Crear un widget Beyond

{
	"platforms": ["web", "node"],
	"entry": "index.ts",
	"widget": {
		"element": { "name": "hello-widget", "attrs": ["subject"] }
	},
	"tailwind": { "sources": ["view.tsx"] }
}

{
	"name": "@testbed/widget-app",
	"version": "0.1.0",
	"private": true,
	"description": "A root React 19 widget with its own Tailwind stylesheet, a shared global stylesheet and a styled public dependency of another package",
	"exports": {
		"./global": "./global.css"
	},
	"beyond": {
		"modules": ".",
		"bundler": "ts"
	},
	"bundlers": {
		"ts": {
			"specifier": "@beyond-js/packages/bundlers/ts",
			"runtime": "@beyond-js/local-2026/bundle"
		}
	},
	"dependencies": {
		"@testbed/badge": "0.1.0",
		"@beyond-js/widgets": "^1.1.0",
		"@beyond-js/react-19-widgets": "^1.0.0",
		"react": "^19.0.0",
		"react-dom": "^19.0.0"
	}
}

/**
 * The controller of the widget `hello-widget`: a React 19 widget whose view is `View`. The same controller
 * serves the browser, where the adapter mounts the view, and Node, where the adapter renders it to HTML.
 */
import { ReactWidgetController } from '@beyond-js/react-19-widgets/base';
import { View } from './view';

export class Controller extends ReactWidgetController {
	get Widget() {
		return View;
	}
}

import * as React from 'react';
import { badge } from '@testbed/badge/badge';

/**
 * The view of the widget: a heading styled by the module's own stylesheet, a badge supplied by another
 * public module with its own stylesheet, and a counter that survives updates of the code and the styles
 */
export function View({ attributes }: { attributes: Map<string, string> }) {
	const [count, setCount] = React.useState(0);
	const subject = attributes.get('subject') ?? 'Beyond';

	return (
		<div className="card p-4">
			<h1 className="greeting text-brand">Hello {subject}!</h1>
			<span className="badge-slot" dangerouslySetInnerHTML={{ __html: badge('React 19') }} />
			<button className="counter" onClick={() => setCount(count + 1)}>
				Clicked {count}
			</button>
		</div>
	);
}

/* The stylesheet of the widget: Tailwind utilities for the classes in view.tsx, the theme, and its own rules */
@import "tailwindcss";

@theme {
	--color-brand: rgb(30, 64, 175);
}

.greeting {
	font-size: 28px;
	margin: 0 0 8px;
}

.counter {
	background-color: rgb(30, 64, 175);
	color: rgb(255, 255, 255);
	border: 0;
	padding: 8px 12px;
}

{
	"name": "@testbed/badge",
	"version": "0.1.0",
	"private": true,
	"description": "A public module with its own stylesheet, imported by the widget of another package by its bare specifier",
	"beyond": {
		"modules": ".",
		"bundler": "ts"
	},
	"bundlers": {
		"ts": {
			"specifier": "@beyond-js/packages/bundlers/ts",
			"runtime": "@beyond-js/local-2026/bundle"
		}
	}
}

/**
 * A badge: markup styled by this module's stylesheet, which the widget that imports the module adopts in
 * its root together with its own sheets
 */
export const badge = (text: string): string => `<span class="badge">${text}</span>`;

.badge {
	display: inline-block;
	background-color: rgb(22, 101, 52);
	color: rgb(255, 255, 255);
	border-radius: 4px;
	padding: 2px 8px;
}

/**
 * The entry point of the application: importing the widget module registers its element, and the page
 * gets one instance. Nothing else is needed to show a widget.
 */
import '@testbed/widget-app/hello';

const widget = document.createElement('hello-widget');
widget.setAttribute('subject', 'Beyond');
document.body.append(widget);

{
	"platforms": ["web", "node"],
	"entry": "index.ts",
	"widget": {
		"element": { "name": "hello-vue", "attrs": ["label"] }
	}
}

import { VueWidgetController } from '@beyond-js/vue-widgets/base';
import View from './view.vue';

/**
 * A Vue widget with a label attribute and a counter of its own. The same controller renders on Node.
 */
export class Controller extends VueWidgetController {
	get Widget() {
		return View;
	}
}

<script setup lang="ts">
import { ref } from 'vue';
import { label } from '@testbed/boundaries/shared';

const props = defineProps<{ attributes: Map<string, string> }>();
const count = ref(0);
</script>

<template>
	<div class="vue">
		<h2 class="title">{{ props.attributes.get('label') }}</h2>
		<p class="shared-label">{{ label('Vue count', count) }}</p>
		<button class="counter" @click="count++">Add</button>
	</div>
</template>

<style scoped>
.title {
	color: rgb(202, 138, 4);
	margin: 0;
}
</style>

import { SvelteWidgetController } from '@beyond-js/svelte-widgets/base';
import View from './view.svelte';

/**
 * A Svelte 5 widget with a label attribute and a counter of its own. The same controller renders on Node.
 */
export class Controller extends SvelteWidgetController {
	get Widget() {
		return View;
	}
}

<script lang="ts">
	import { label } from '@testbed/boundaries/shared';

	let { attributes }: { attributes: Map<string, string> } = $props();
	let count = $state(0);
</script>

<div class="svelte">
	<h2 class="title">{attributes.get('label')}</h2>
	<p class="shared-label">{label('Svelte count', count)}</p>
	<button class="counter" onclick={() => count++}>Add</button>
</div>

<style>
	.title {
		color: rgb(190, 24, 93);
		margin: 0;
	}
</style>