105 lines
2.7 KiB
Plaintext
105 lines
2.7 KiB
Plaintext
// Real page for checking compiler, formatter, LSP navigation, rename, and reactivity.
|
|
page LanguageTools {
|
|
layout = "public"
|
|
|
|
state count: number = 0
|
|
state message: string = "The shared language server is active."
|
|
|
|
computed doubled: number = count * 2
|
|
|
|
seo {
|
|
title = "WRN language tools"
|
|
description = "Interactive WRN page used to verify editor and compiler features."
|
|
canonical = "/language-tools"
|
|
}
|
|
|
|
functions {
|
|
function increment() {
|
|
count++
|
|
message = `Renaming count updates all ${count} references safely.`
|
|
}
|
|
|
|
function reset() {
|
|
count = 0
|
|
message = "State reset. Try hover, definition, references, and rename in your editor."
|
|
}
|
|
}
|
|
|
|
view {
|
|
<main class="language-tools">
|
|
<header>
|
|
<span class="eyebrow">Editor-neutral WRN tooling</span>
|
|
<h1>Language server playground</h1>
|
|
<p>{message}</p>
|
|
</header>
|
|
|
|
<section aria-labelledby="counter-heading" class="demo-card">
|
|
<h2 id="counter-heading">Reactive Data symbol test</h2>
|
|
<p aria-live="polite">Count: {count}; computed double: {doubled}</p>
|
|
<div class="actions">
|
|
<button type="button" @click="increment()">Increment</button>
|
|
<button type="button" class="secondary" @click="reset()">Reset</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-labelledby="features-heading" class="demo-card">
|
|
<h2 id="features-heading">Features exercised by this file</h2>
|
|
<ul>
|
|
<li>Compiler and accessibility diagnostics</li>
|
|
<li>Canonical formatting and completion</li>
|
|
<li>Hover, symbols, definition, references, and rename</li>
|
|
<li>Typed state, computed values, and browser events</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
}
|
|
|
|
style {
|
|
.language-tools {
|
|
display: grid;
|
|
max-width: 58rem;
|
|
gap: 1.25rem;
|
|
margin: 3rem auto;
|
|
}
|
|
|
|
.language-tools header,
|
|
.demo-card {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--wrn-color-primary);
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.demo-card {
|
|
padding: 1.25rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius-lg);
|
|
background: var(--wrn-color-surface);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.actions button {
|
|
padding: 0.65rem 1rem;
|
|
border: 1px solid var(--wrn-color-primary);
|
|
border-radius: var(--wrn-radius-md);
|
|
background: var(--wrn-color-primary);
|
|
color: var(--wrn-color-primary-contrast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.actions .secondary {
|
|
background: transparent;
|
|
color: var(--wrn-color-primary);
|
|
}
|
|
}
|
|
}
|