astro Architecture Docs
Home / File/ Counter.tsx — astro Source File

Counter.tsx — astro Source File

Architecture documentation for Counter.tsx, a tsx file in the astro codebase. 4 imports, 0 dependents.

File tsx CoreAstro RenderingEngine 4 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1["Counter.tsx"]
  c255b516_8c1c_2cac_e172_7c2ac88dbc23["Counter.css"]
  06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1 --> c255b516_8c1c_2cac_e172_7c2ac88dbc23
  2f0b8f2d_4c0a_3566_fa34_e9ab2517d8ad["signals"]
  06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1 --> 2f0b8f2d_4c0a_3566_fa34_e9ab2517d8ad
  0fef379e_25c0_6f95_11fd_6d0f7db42b7e["preact"]
  06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1 --> 0fef379e_25c0_6f95_11fd_6d0f7db42b7e
  cab470d1_415a_91cc_cdb3_49d91c033a90["compat"]
  06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1 --> cab470d1_415a_91cc_cdb3_49d91c033a90
  style 06bfa6fc_e1cf_07a6_3ea4_212b7a33b9c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { Signal } from '@preact/signals';
import type { ComponentChildren } from 'preact';
import { lazy, Suspense } from 'preact/compat';
import './Counter.css';

const Message = lazy(async () => import('./Message'));
const Fallback = () => <p>Loading...</p>;

type Props = {
	children: ComponentChildren;
	count: Signal<number>;
};

export default function Counter({ children, count }: Props) {
	const add = () => count.value++;
	const subtract = () => count.value--;

	return (
		<>
			<div class="counter">
				<button onClick={subtract}>-</button>
				<pre>{count}</pre>
				<button onClick={add}>+</button>
			</div>
			<Suspense fallback={Fallback}>
				<Message>{children}</Message>
			</Suspense>
		</>
	);
}

Domain

Subdomains

Functions

Types

Dependencies

Source

Frequently Asked Questions

What does Counter.tsx do?
Counter.tsx is a source file in the astro codebase, written in tsx. It belongs to the CoreAstro domain, RenderingEngine subdomain.
What functions are defined in Counter.tsx?
Counter.tsx defines 3 function(s): Counter, Fallback, Message.
What does Counter.tsx depend on?
Counter.tsx imports 4 module(s): Counter.css, compat, preact, signals.
Where is Counter.tsx in the architecture?
Counter.tsx is located at examples/framework-preact/src/components/Counter.tsx (domain: CoreAstro, subdomain: RenderingEngine, directory: examples/framework-preact/src/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free