stencil示例

stencil是一个web components开发框架。

pnpm create stencil

my.counter.tsx:

import { Component, h, Prop } from "@stencil/core";

@Component({
	tag: "my-counter",
	styleUrl: "my-counter.css",
	shadow: true,
})
export class MyCounter {
	@Prop({ mutable: true }) count = 0;

	render() {
		const styles = {
			color: "red",
		};
		if (this.count >= 0) {
			styles.color = "green";
		} else {
			styles.color = "red";
		}

		return (
			<div>
				<button
					onClick={() => {
						this.count--;
					}}
					type="button"
				>
					-
				</button>
				The counter is: <span style={styles}>{this.count}</span>
				<button
					onClick={() => {
						this.count++;
					}}
					type="button"
				>
					+
				</button>
			</div>
		);
	}
}

pnpm build
bun build dist/components/my-counter.js --outdir public/ --minify

经过处理后的my-counter.js可以直接导入astro中使用。