Redesign site and streamline playground
This commit is contained in:
@@ -2,7 +2,20 @@
|
||||
import { nav } from '../lib/docs.js';
|
||||
import '../style.css';
|
||||
|
||||
const { title = 'Decodal', active = '', playground = false, frontpage = false } = Astro.props;
|
||||
const {
|
||||
title = 'Decodal',
|
||||
description = 'Decodal is a deterministic data language for configuration, constraints, and defaults.',
|
||||
active = '',
|
||||
playground = false,
|
||||
frontpage = false,
|
||||
} = Astro.props;
|
||||
|
||||
const pathname = Astro.url.pathname;
|
||||
const language = active ? 'ja' : 'en';
|
||||
|
||||
function isCurrent(path) {
|
||||
return pathname === path || (path !== '/' && pathname.startsWith(path));
|
||||
}
|
||||
|
||||
function renderNav(items, prefix = []) {
|
||||
return `<ul class="nav-tree">${items
|
||||
@@ -17,22 +30,26 @@ function renderNav(items, prefix = []) {
|
||||
}
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang={language}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/">Decodal</a>
|
||||
<nav class="topnav">
|
||||
<a href="/docs/introduction/">Docs</a>
|
||||
<a href="/playground/">Playground</a>
|
||||
<a class="brand" href="/" aria-label="Decodal home">
|
||||
<strong>Decodal</strong>
|
||||
<span>Deferred Constraint Data Language</span>
|
||||
</a>
|
||||
<nav class="topnav" aria-label="Primary navigation">
|
||||
<a class:list={{ current: isCurrent('/docs/') }} aria-current={isCurrent('/docs/') ? 'page' : undefined} href="/docs/introduction/">Manual</a>
|
||||
<a class:list={{ current: isCurrent('/playground/') }} aria-current={isCurrent('/playground/') ? 'page' : undefined} href="/playground/">Playground</a>
|
||||
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class={playground || frontpage ? 'layout playground-layout' : 'layout'}>
|
||||
<div class:list={{ layout: true, 'wide-layout': playground || frontpage, 'playground-layout': playground }}>
|
||||
{!playground && !frontpage && (
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-content">
|
||||
@@ -45,16 +62,20 @@ function renderNav(items, prefix = []) {
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
<footer class="site-footer">
|
||||
<span>2026 Hare</span>
|
||||
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
|
||||
</footer>
|
||||
{!playground && (
|
||||
<footer class="site-footer">
|
||||
<span>Decodal</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>MIT or Apache-2.0</span>
|
||||
<a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
|
||||
</footer>
|
||||
)}
|
||||
<script>
|
||||
const sidebar = document.querySelector('.sidebar-content');
|
||||
|
||||
if (sidebar instanceof HTMLElement) {
|
||||
const updateStickyOffset = () => {
|
||||
const stickyTop = Math.min(0, window.innerHeight - sidebar.offsetHeight);
|
||||
const stickyTop = Math.min(16, window.innerHeight - sidebar.offsetHeight - 16);
|
||||
sidebar.style.setProperty('--sidebar-sticky-top', `${stickyTop}px`);
|
||||
};
|
||||
|
||||
|
||||
@@ -94,6 +94,17 @@ export function allDocSlugs() {
|
||||
return Object.keys(docs).filter((slug) => slug !== 'index');
|
||||
}
|
||||
|
||||
export function docTitle(slug, items = nav) {
|
||||
for (const item of items) {
|
||||
if (item.slug === slug) return item.title;
|
||||
if (item.children) {
|
||||
const childTitle = docTitle(slug, item.children);
|
||||
if (childTitle) return childTitle;
|
||||
}
|
||||
}
|
||||
return slug;
|
||||
}
|
||||
|
||||
export function renderMarkdown(slug) {
|
||||
const source = docs[slug] ?? docs.index;
|
||||
const html = marked.parse(source ?? '# Not found\n');
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const DECODAL_KEYWORDS = new Set(['let', 'in', 'fn', 'match', 'import', 'default']);
|
||||
const DECODAL_KEYWORDS = new Set(['let', 'in', 'fn', 'match', 'import', 'as', 'default']);
|
||||
const DECODAL_TYPES = new Set(['String', 'Int', 'Float', 'Bool', 'Unknown']);
|
||||
const DECODAL_LITERALS = new Set(['true', 'false']);
|
||||
|
||||
@@ -60,7 +60,7 @@ export function highlightDecodalTokens(source, tokens) {
|
||||
}
|
||||
|
||||
function tokenClass(kind, text) {
|
||||
if (['let', 'in', 'fn', 'match', 'import', 'default'].includes(kind)) return 'tok-keyword';
|
||||
if (['let', 'in', 'fn', 'match', 'import', 'as', 'default'].includes(kind)) return 'tok-keyword';
|
||||
if (kind === 'ident' && ['String', 'Int', 'Float', 'Bool', 'Unknown'].includes(text)) return 'tok-type';
|
||||
if (kind === 'ident') return '';
|
||||
if (['true', 'false'].includes(kind)) return 'tok-literal';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import ManualLayout from '../../layouts/ManualLayout.astro';
|
||||
import { allDocSlugs, renderMarkdown } from '../../lib/docs.js';
|
||||
import { allDocSlugs, docTitle, renderMarkdown } from '../../lib/docs.js';
|
||||
|
||||
export function getStaticPaths() {
|
||||
return allDocSlugs().map((slug) => ({
|
||||
@@ -11,7 +11,8 @@ export function getStaticPaths() {
|
||||
|
||||
const { slug } = Astro.props;
|
||||
const html = renderMarkdown(slug);
|
||||
const title = docTitle(slug);
|
||||
---
|
||||
<ManualLayout title={`Decodal - ${slug}`} active={slug}>
|
||||
<ManualLayout title={`${title} — Decodal Manual`} active={slug}>
|
||||
<article class="markdown" set:html={html} />
|
||||
</ManualLayout>
|
||||
|
||||
@@ -4,6 +4,6 @@ import { renderMarkdown } from '../../lib/docs.js';
|
||||
|
||||
const html = renderMarkdown('index');
|
||||
---
|
||||
<ManualLayout title="Decodal Manual" active="index">
|
||||
<ManualLayout title="Decodal Manual" description="Decodalの言語仕様と、アプリケーションへ組み込むための公開API。" active="index">
|
||||
<article class="markdown" set:html={html} />
|
||||
</ManualLayout>
|
||||
|
||||
@@ -1,75 +1,163 @@
|
||||
---
|
||||
import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
import { highlightCode } from '../lib/highlight.js';
|
||||
|
||||
const example = `Port = Int >= 1 & <= 65535 default 8080;
|
||||
const example = `let
|
||||
Port = Int & >= 1 & <= 65535;
|
||||
Service = {
|
||||
host = String;
|
||||
port = Port default 8080;
|
||||
};
|
||||
in
|
||||
{
|
||||
host = "127.0.0.1";
|
||||
} as Service;`;
|
||||
|
||||
Server = {
|
||||
host = String default "localhost";
|
||||
port = Port;
|
||||
};
|
||||
|
||||
Production = Server & {
|
||||
host = "example.com";
|
||||
};`;
|
||||
const result = `{
|
||||
"host": "127.0.0.1",
|
||||
"port": 8080
|
||||
}`;
|
||||
---
|
||||
<ManualLayout title="Decodal" frontpage>
|
||||
<section class="hero">
|
||||
<h1>Decodal keeps configuration, constraints, and defaults in one composable value.</h1>
|
||||
<p class="hero-copy">
|
||||
Define structured data with constraints, compose it with patches, and materialize the result from Rust,
|
||||
WebAssembly, or the browser playground.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button primary" href="/playground/">Try the playground</a>
|
||||
<a class="button secondary" href="/docs/introduction/">Read the manual</a>
|
||||
<ManualLayout
|
||||
title="Decodal — Deferred Constraint Data Language"
|
||||
description="Decodal is a deterministic data language for describing, composing, validating, and materializing structured data."
|
||||
frontpage
|
||||
>
|
||||
<section class="home-intro" aria-labelledby="home-title">
|
||||
<div class="home-intro-copy">
|
||||
<h1 id="home-title">Configuration, constraints, and defaults are values.</h1>
|
||||
<p class="home-lead">
|
||||
Decodal is a small deterministic language for describing, composing, validating, and materializing
|
||||
structured data. The same expression can carry concrete data and the range that data must satisfy.
|
||||
</p>
|
||||
<div class="home-actions">
|
||||
<a class="button primary" href="/playground/">Open the playground</a>
|
||||
<a class="text-action" href="/docs/introduction/">Read the introduction <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<dl class="home-facts">
|
||||
<div>
|
||||
<dt>Source</dt>
|
||||
<dd><code>.dcdl</code></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Runtime</dt>
|
||||
<dd>Rust · WebAssembly</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Output</dt>
|
||||
<dd>Validated structured data</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="home-code" aria-label="Decodal example and materialized result">
|
||||
<div class="code-caption">
|
||||
<span>service.dcdl</span>
|
||||
<span>DCDL</span>
|
||||
</div>
|
||||
<pre class="code-block"><code class="language-dcdl" set:html={highlightCode(example, 'dcdl')} /></pre>
|
||||
<div class="materialized-result">
|
||||
<span>materialize</span>
|
||||
<pre><code>{result}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home-packages" aria-label="Official packages">
|
||||
<h2>Official packages</h2>
|
||||
<a class="primary-package" href="https://crates.io/crates/decodal">
|
||||
<span>Rust crate</span>
|
||||
<strong>crates.io/crates/decodal</strong>
|
||||
</a>
|
||||
<ul class="package-list">
|
||||
<li>decodal-wasm on <a href="https://jsr.io/@hare/decodal-wasm@0.3.0">jsr</a> / <a href="https://www.npmjs.com/package/decodal-wasm">npm</a></li>
|
||||
<li>decodal-codemirror on <a href="https://jsr.io/@hare/decodal-codemirror@0.3.0">jsr</a> / <a href="https://www.npmjs.com/package/decodal-codemirror">npm</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="home-grid" aria-label="Decodal overview">
|
||||
<article class="home-card">
|
||||
<h2>What it is</h2>
|
||||
<p>
|
||||
Decodal is a small data language for configuration shapes that need validation, defaults,
|
||||
lazy imports, and predictable composition.
|
||||
</p>
|
||||
</article>
|
||||
<article class="home-card">
|
||||
<h2>Where it runs</h2>
|
||||
<p>
|
||||
Use the Rust crate for runtime embedding, the WASM package in browsers, CodeMirror/Lezer for Web editing
|
||||
and formatting, and Tree-sitter for general editor integration.
|
||||
</p>
|
||||
</article>
|
||||
<article class="home-card">
|
||||
<h2>Start here</h2>
|
||||
<p>
|
||||
Open the playground to run examples in your browser, or read the components page to see how the runtime and
|
||||
editor pieces fit together.
|
||||
</p>
|
||||
<p><a href="/docs/components/">View components →</a></p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="home-example" aria-label="Decodal example">
|
||||
<div>
|
||||
<h2>A compact example</h2>
|
||||
<p>
|
||||
Constraints and defaults are values. Compose them with concrete data and materialize when the host knows what
|
||||
output shape it expects.
|
||||
</p>
|
||||
<section class="home-section" aria-labelledby="model-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="model-title">One expression system, from abstract range to concrete data.</h2>
|
||||
</header>
|
||||
<div class="definition-list">
|
||||
<article>
|
||||
<code>&</code>
|
||||
<div>
|
||||
<h3>Compose without discarding constraints</h3>
|
||||
<p>Symmetric composition keeps information from both sides and fails when their ranges cannot overlap.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>as</code>
|
||||
<div>
|
||||
<h3>Verify that a value is more specific</h3>
|
||||
<p>The left side must fit inside the wider range on the right. Wider abstract fields remain available for later materialization.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>//</code>
|
||||
<div>
|
||||
<h3>Apply an explicit structural patch</h3>
|
||||
<p>Right-biased composition replaces the selected structure while preserving unrelated fields.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<code>default</code>
|
||||
<div>
|
||||
<h3>Choose a fallback only when materializing</h3>
|
||||
<p>A default does not erase the range. It is selected only when no more concrete value has been supplied.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<pre><code>{example}</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="home-section host-section" aria-labelledby="host-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="host-title">The host owns I/O. Decodal owns evaluation.</h2>
|
||||
<p>
|
||||
Filesystems, Markdown, JSON, network resources, and application globals stay under host control. Decodal
|
||||
receives source or structured values and evaluates them with the same rules in production and editor tooling.
|
||||
</p>
|
||||
</header>
|
||||
<ol class="evaluation-flow" aria-label="Evaluation flow">
|
||||
<li>
|
||||
<span>1</span>
|
||||
<strong>Host environment</strong>
|
||||
<small>globals · source · structured imports</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>2</span>
|
||||
<strong>Evaluate</strong>
|
||||
<small>lazy references · constraints · composition</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>3</span>
|
||||
<strong>Materialize</strong>
|
||||
<small>defaults · validation · diagnostics</small>
|
||||
</li>
|
||||
<li>
|
||||
<span>4</span>
|
||||
<strong>Application data</strong>
|
||||
<small>Data · Rust type · JavaScript value</small>
|
||||
</li>
|
||||
</ol>
|
||||
<p class="section-link"><a href="/docs/embedding/">Read the embedding guide <span aria-hidden="true">→</span></a></p>
|
||||
</section>
|
||||
|
||||
<section class="home-section package-section" aria-labelledby="packages-title">
|
||||
<header class="section-heading">
|
||||
<h2 id="packages-title">Use only the layer your application needs.</h2>
|
||||
</header>
|
||||
<div class="package-rows">
|
||||
<article>
|
||||
<div><code>decodal</code><span>Rust</span></div>
|
||||
<p>Runtime, host embedding, schema derivation, and typed decoding.</p>
|
||||
<a href="https://crates.io/crates/decodal">crates.io</a>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-wasm</code><span>JavaScript</span></div>
|
||||
<p>Browser runtime and host-configurable semantic language service.</p>
|
||||
<span class="package-links"><a href="https://jsr.io/@hare/decodal-wasm@0.3.0">JSR</a><a href="https://www.npmjs.com/package/decodal-wasm">npm</a></span>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-lsp</code><span>Rust</span></div>
|
||||
<p>Language Server Protocol with application-defined environments.</p>
|
||||
<a href="https://crates.io/crates/decodal-lsp">crates.io</a>
|
||||
</article>
|
||||
<article>
|
||||
<div><code>decodal-codemirror</code><span>JavaScript</span></div>
|
||||
<p>CodeMirror 6 syntax, indentation, folding, highlighting, and formatter integration.</p>
|
||||
<span class="package-links"><a href="https://jsr.io/@hare/decodal-codemirror@0.3.0">JSR</a><a href="https://www.npmjs.com/package/decodal-codemirror">npm</a></span>
|
||||
</article>
|
||||
</div>
|
||||
<p class="section-link"><a href="/docs/components/">Compare packages and integrations <span aria-hidden="true">→</span></a></p>
|
||||
</section>
|
||||
</ManualLayout>
|
||||
|
||||
@@ -4,27 +4,23 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
<ManualLayout title="Decodal Playground" playground>
|
||||
<section class="playground-page">
|
||||
<div class="playground-header">
|
||||
<div>
|
||||
<h1>Playground</h1>
|
||||
</div>
|
||||
<div class="playground-actions">
|
||||
<div class="action-group example-actions">
|
||||
<label class="example-picker">
|
||||
<span>Example</span>
|
||||
<select id="example-select" aria-label="Playground example"></select>
|
||||
</label>
|
||||
<button id="load-example" type="button">Load</button>
|
||||
<button id="load-example" class="secondary-button" type="button">Load</button>
|
||||
</div>
|
||||
<span class="action-separator" aria-hidden="true">|</span>
|
||||
<div class="action-group run-actions">
|
||||
<button id="format" disabled>Format</button>
|
||||
<button id="format" class="secondary-button" type="button" disabled>Format</button>
|
||||
<label class="entry-picker">
|
||||
<span>Entry</span>
|
||||
<select id="entry-select" aria-label="Entry point file"></select>
|
||||
</label>
|
||||
<button id="run" disabled>Run</button>
|
||||
<button id="run" type="button" disabled>Run</button>
|
||||
</div>
|
||||
<p id="status" class="status">Loading WASM...</p>
|
||||
<p id="status" class="status" aria-live="polite">Loading WASM...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,10 +28,20 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
<aside class="file-panel">
|
||||
<div class="panel-header">
|
||||
<span>Files</span>
|
||||
<button id="new-file" type="button">New</button>
|
||||
<form id="new-file-form" class="new-file-control">
|
||||
<button id="new-file" type="button" aria-label="New file" title="New file"></button>
|
||||
<input
|
||||
id="new-file-path"
|
||||
class="new-file-input"
|
||||
type="text"
|
||||
aria-label="New file path"
|
||||
placeholder="path/to/file.dcdl"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div id="file-tree" class="file-tree"></div>
|
||||
<button id="delete-file" class="danger-button" type="button">Delete file</button>
|
||||
</aside>
|
||||
|
||||
<section class="pane input-pane">
|
||||
@@ -44,7 +50,7 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
||||
</section>
|
||||
|
||||
<section class="pane output-pane">
|
||||
<span>Output</span>
|
||||
<span>Materialized output</span>
|
||||
<pre id="output"></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,8 @@ const status = document.getElementById('status');
|
||||
const fileTree = document.getElementById('file-tree');
|
||||
const activeFile = document.getElementById('active-file');
|
||||
const newFile = document.getElementById('new-file');
|
||||
const deleteFile = document.getElementById('delete-file');
|
||||
const newFileForm = document.getElementById('new-file-form');
|
||||
const newFilePath = document.getElementById('new-file-path');
|
||||
const exampleSelect = document.getElementById('example-select');
|
||||
const entrySelect = document.getElementById('entry-select');
|
||||
const loadExample = document.getElementById('load-example');
|
||||
@@ -30,51 +31,51 @@ let languageService;
|
||||
|
||||
const editorTheme = EditorView.theme({
|
||||
'&': {
|
||||
backgroundColor: '#0f172a',
|
||||
color: '#e5e7eb',
|
||||
backgroundColor: '#202124',
|
||||
color: '#f1f3f4',
|
||||
height: '100%',
|
||||
},
|
||||
'.cm-scroller': {
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.5',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.45',
|
||||
overflow: 'auto',
|
||||
},
|
||||
'.cm-content': {
|
||||
caretColor: '#e5e7eb',
|
||||
caretColor: '#f1f3f4',
|
||||
minHeight: '100%',
|
||||
padding: '12px',
|
||||
padding: '8px',
|
||||
},
|
||||
'.cm-gutters': {
|
||||
backgroundColor: '#111827',
|
||||
borderRight: '1px solid #334155',
|
||||
color: '#94a3b8',
|
||||
backgroundColor: '#292a2d',
|
||||
borderRight: '1px solid #3c4043',
|
||||
color: '#9aa0a6',
|
||||
},
|
||||
'&.cm-focused': {
|
||||
outline: 'none',
|
||||
},
|
||||
'&.cm-focused .cm-cursor': {
|
||||
borderLeftColor: '#e5e7eb',
|
||||
borderLeftColor: '#f1f3f4',
|
||||
},
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
|
||||
backgroundColor: 'rgb(59 130 246 / 0.35)',
|
||||
backgroundColor: '#3c5f8a',
|
||||
},
|
||||
'.cm-tooltip-autocomplete': {
|
||||
backgroundColor: '#111827',
|
||||
border: '1px solid #334155',
|
||||
borderRadius: '8px',
|
||||
color: '#e5e7eb',
|
||||
backgroundColor: '#292a2d',
|
||||
border: '1px solid #5f6368',
|
||||
borderRadius: '4px',
|
||||
color: '#f1f3f4',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
'.cm-tooltip-autocomplete > ul > li': {
|
||||
padding: '3px 8px',
|
||||
},
|
||||
'.cm-tooltip-autocomplete > ul > li[aria-selected]': {
|
||||
backgroundColor: '#1d4ed8',
|
||||
color: '#fff',
|
||||
backgroundColor: '#174ea6',
|
||||
color: '#ffffff',
|
||||
},
|
||||
'.cm-completionDetail': {
|
||||
color: '#94a3b8',
|
||||
color: '#9aa0a6',
|
||||
fontStyle: 'normal',
|
||||
marginLeft: '1.5em',
|
||||
},
|
||||
@@ -215,7 +216,6 @@ function setActiveFile(path) {
|
||||
project.activePath = normalized;
|
||||
setEditorText(project.files[normalized]);
|
||||
activeFile.textContent = normalized;
|
||||
deleteFile.disabled = Object.keys(project.files).length <= 1;
|
||||
renderFileTree();
|
||||
updateRunLabel();
|
||||
saveProject();
|
||||
@@ -276,6 +276,32 @@ function renderFileTree() {
|
||||
fileTree.replaceChildren(renderTreeList(tree.children));
|
||||
}
|
||||
|
||||
function deleteProjectFile(path) {
|
||||
const normalized = normalizePath(path);
|
||||
const paths = Object.keys(project.files).sort();
|
||||
if (project.files[normalized] === undefined || paths.length <= 1) return;
|
||||
if (!confirm(`Delete ${normalized}?`)) return;
|
||||
|
||||
const deletedIndex = paths.indexOf(normalized);
|
||||
const wasActive = normalized === project.activePath;
|
||||
delete project.files[normalized];
|
||||
|
||||
const remainingPaths = Object.keys(project.files).sort();
|
||||
const nextPath = remainingPaths[Math.min(deletedIndex, remainingPaths.length - 1)];
|
||||
if (project.files[project.entryPath] === undefined) {
|
||||
project.entryPath = wasActive ? nextPath : project.activePath;
|
||||
}
|
||||
|
||||
if (wasActive) {
|
||||
setActiveFile(nextPath);
|
||||
return;
|
||||
}
|
||||
|
||||
renderFileTree();
|
||||
updateRunLabel();
|
||||
saveProject();
|
||||
}
|
||||
|
||||
function buildTree(paths) {
|
||||
const root = { name: '', children: new Map(), path: '' };
|
||||
for (const path of paths) {
|
||||
@@ -298,6 +324,7 @@ function renderTreeList(children) {
|
||||
for (const child of [...children.values()].sort(compareNodes)) {
|
||||
const item = document.createElement('li');
|
||||
if (child.file) {
|
||||
item.className = 'file-row';
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = child.path === project.activePath ? 'file active' : 'file';
|
||||
@@ -305,6 +332,16 @@ function renderTreeList(children) {
|
||||
button.title = child.path;
|
||||
button.addEventListener('click', () => setActiveFile(child.path));
|
||||
item.append(button);
|
||||
|
||||
if (Object.keys(project.files).length > 1) {
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.type = 'button';
|
||||
deleteButton.className = 'file-delete';
|
||||
deleteButton.title = `Delete ${child.path}`;
|
||||
deleteButton.setAttribute('aria-label', `Delete ${child.path}`);
|
||||
deleteButton.addEventListener('click', () => deleteProjectFile(child.path));
|
||||
item.append(deleteButton);
|
||||
}
|
||||
} else {
|
||||
const label = document.createElement('span');
|
||||
label.className = 'folder';
|
||||
@@ -322,7 +359,10 @@ function compareNodes(a, b) {
|
||||
}
|
||||
|
||||
try {
|
||||
await Promise.all([initRuntime(runtimeWasmUrl), initDecodalFormatter(toolsWasmUrl)]);
|
||||
await Promise.all([
|
||||
initRuntime({ module_or_path: runtimeWasmUrl }),
|
||||
initDecodalFormatter({ module_or_path: toolsWasmUrl }),
|
||||
]);
|
||||
languageService = new DecodalLanguageService(
|
||||
createPlaygroundEnvironment(() => project.files),
|
||||
);
|
||||
@@ -348,22 +388,42 @@ loadExample.addEventListener('click', () => {
|
||||
if (!example) return;
|
||||
loadExampleProject(example.id);
|
||||
});
|
||||
function closeNewFileInput() {
|
||||
newFileForm.classList.remove('editing');
|
||||
newFilePath.value = '';
|
||||
}
|
||||
|
||||
newFile.addEventListener('click', () => {
|
||||
const path = normalizePath(prompt('New virtual file path', 'schemas/types.dcdl') ?? '');
|
||||
if (!path) return;
|
||||
newFileForm.classList.add('editing');
|
||||
newFilePath.value = '';
|
||||
newFilePath.focus();
|
||||
});
|
||||
|
||||
newFileForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
const path = normalizePath(newFilePath.value);
|
||||
if (!path) {
|
||||
newFilePath.focus();
|
||||
return;
|
||||
}
|
||||
closeNewFileInput();
|
||||
if (project.files[path] !== undefined) {
|
||||
setActiveFile(path);
|
||||
editor.focus();
|
||||
return;
|
||||
}
|
||||
project.files[path] = 'value = "new";\n';
|
||||
setActiveFile(path);
|
||||
editor.focus();
|
||||
});
|
||||
deleteFile.addEventListener('click', () => {
|
||||
if (Object.keys(project.files).length <= 1) return;
|
||||
if (!confirm(`Delete ${project.activePath}?`)) return;
|
||||
delete project.files[project.activePath];
|
||||
if (project.files[project.entryPath] === undefined) {
|
||||
project.entryPath = Object.keys(project.files).sort()[0];
|
||||
}
|
||||
setActiveFile(Object.keys(project.files).sort()[0]);
|
||||
|
||||
newFilePath.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
event.preventDefault();
|
||||
closeNewFileInput();
|
||||
newFile.focus();
|
||||
});
|
||||
|
||||
newFilePath.addEventListener('blur', () => {
|
||||
closeNewFileInput();
|
||||
});
|
||||
|
||||
+1052
-372
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user