Add playground example loader
This commit is contained in:
parent
f928028007
commit
c26f9ca50a
|
|
@ -9,6 +9,11 @@ import ManualLayout from '../layouts/ManualLayout.astro';
|
|||
<p>Virtual files are evaluated in the browser through WebAssembly. Use import paths such as <code>./schemas/service.dcdl</code>.</p>
|
||||
</div>
|
||||
<div class="playground-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>
|
||||
<p id="status" class="status">Loading WASM...</p>
|
||||
<button id="run" disabled>Run</button>
|
||||
</div>
|
||||
|
|
|
|||
174
site/decodal-site/src/scripts/playground-examples.js
Normal file
174
site/decodal-site/src/scripts/playground-examples.js
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
export const playgroundExamples = [
|
||||
{
|
||||
id: 'service-deployment',
|
||||
title: 'Service deployment',
|
||||
activePath: 'main.dcdl',
|
||||
files: {
|
||||
'main.dcdl': `let
|
||||
schema = import "./schemas/service.dcdl";
|
||||
prod = import "./env/prod.dcdl";
|
||||
shared = import "./shared/tags.dcdl";
|
||||
in
|
||||
schema.Service & prod.ServicePatch & {
|
||||
name = "api";
|
||||
image = "registry.example.com/api:2026-06-24";
|
||||
port = 9000 + 443;
|
||||
public = prod.is_public && 9000 + 443 > 9000;
|
||||
tags = shared.common ++ ["api", "edge"];
|
||||
}
|
||||
`,
|
||||
'schemas/service.dcdl': `Service = {
|
||||
name = String;
|
||||
image = String;
|
||||
port = Int & > 443 default 8443;
|
||||
replicas = Int & > 0 default 2;
|
||||
public = Bool default false;
|
||||
feature.metrics = Bool default true;
|
||||
feature.tracing = Bool default false;
|
||||
};
|
||||
`,
|
||||
'env/prod.dcdl': `is_public = true;
|
||||
|
||||
ServicePatch = {
|
||||
replicas = 3;
|
||||
feature.tracing = true;
|
||||
};
|
||||
`,
|
||||
'shared/tags.dcdl': `common = ["decodal", "prod"];
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'access-policy',
|
||||
title: 'Access policy',
|
||||
activePath: 'main.dcdl',
|
||||
files: {
|
||||
'main.dcdl': `let
|
||||
policy = import "./policy/base.dcdl";
|
||||
teams = import "./policy/teams.dcdl";
|
||||
env = "prod";
|
||||
in
|
||||
{
|
||||
service = "payments";
|
||||
readers = policy.defaultReaders ++ teams.observability;
|
||||
writers = policy.defaultWriters ++ teams.payments;
|
||||
admins = match env {
|
||||
"prod": policy.breakglassAdmins;
|
||||
_: teams.platform;
|
||||
};
|
||||
audit.required = env == "prod";
|
||||
audit.retention_days = match env {
|
||||
"prod": 365;
|
||||
_: 30;
|
||||
};
|
||||
}
|
||||
`,
|
||||
'policy/base.dcdl': `defaultReaders = ["group:engineering", "group:support"];
|
||||
defaultWriters = ["group:platform"];
|
||||
breakglassAdmins = ["user:oncall-primary", "user:oncall-secondary"];
|
||||
`,
|
||||
'policy/teams.dcdl': `platform = ["group:platform-admins"];
|
||||
payments = ["group:payments-api", "group:payments-sre"];
|
||||
observability = ["group:observability"];
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'edge-worker',
|
||||
title: 'Edge worker config',
|
||||
activePath: 'main.dcdl',
|
||||
files: {
|
||||
'main.dcdl': `let
|
||||
schema = import "./schemas/worker.dcdl";
|
||||
routes = import "./routes.dcdl";
|
||||
production = true;
|
||||
in
|
||||
schema.Worker & {
|
||||
name = "decodal-docs";
|
||||
compatibility_date = "2026-06-15";
|
||||
workers_dev = !production;
|
||||
route.host = routes.primary_host;
|
||||
route.paths = routes.docs_paths ++ routes.playground_paths;
|
||||
cache.ttl_seconds = 60 * 60;
|
||||
cache.bypass = !production;
|
||||
}
|
||||
`,
|
||||
'schemas/worker.dcdl': `Worker = {
|
||||
name = String;
|
||||
compatibility_date = String;
|
||||
workers_dev = Bool default false;
|
||||
route.host = String;
|
||||
cache.ttl_seconds = Int & >= 0 default 300;
|
||||
cache.bypass = Bool default false;
|
||||
};
|
||||
`,
|
||||
'routes.dcdl': `primary_host = "decodal.example.com";
|
||||
docs_paths = ["/docs/*", "/assets/*"];
|
||||
playground_paths = ["/playground/*"];
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'data-pipeline',
|
||||
title: 'Data pipeline',
|
||||
activePath: 'main.dcdl',
|
||||
files: {
|
||||
'main.dcdl': `let
|
||||
schema = import "./schemas/pipeline.dcdl";
|
||||
presets = import "./presets/batch.dcdl";
|
||||
env = "staging";
|
||||
in
|
||||
schema.Pipeline & presets.Batch & {
|
||||
name = "events-rollup";
|
||||
source.topic = "events.raw";
|
||||
sink.table = "analytics.events_daily";
|
||||
workers = match env {
|
||||
"prod": 8;
|
||||
"staging": 3;
|
||||
_: 1;
|
||||
};
|
||||
alerts.enabled = env != "dev";
|
||||
transforms = presets.standardTransforms ++ ["dedupe", "aggregate_daily"];
|
||||
}
|
||||
`,
|
||||
'schemas/pipeline.dcdl': `Pipeline = {
|
||||
name = String;
|
||||
source.topic = String;
|
||||
sink.table = String;
|
||||
workers = Int & > 0 default 1;
|
||||
batch.size = Int & >= 100 default 1000;
|
||||
batch.timeout_seconds = Int & > 0 default 60;
|
||||
alerts.enabled = Bool default false;
|
||||
};
|
||||
`,
|
||||
'presets/batch.dcdl': `standardTransforms = ["parse_json", "validate_schema", "enrich_metadata"];
|
||||
|
||||
Batch = {
|
||||
batch.size = 5000;
|
||||
batch.timeout_seconds = 30 + 30;
|
||||
};
|
||||
`,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'diagnostics',
|
||||
title: 'Diagnostics: invalid port',
|
||||
activePath: 'main.dcdl',
|
||||
files: {
|
||||
'main.dcdl': `let
|
||||
schema = import "./schemas/service.dcdl";
|
||||
in
|
||||
schema.Service & {
|
||||
name = "broken-api";
|
||||
port = 442;
|
||||
}
|
||||
`,
|
||||
'schemas/service.dcdl': `Service = {
|
||||
name = String;
|
||||
port = Int & > 443 default 8443;
|
||||
replicas = Int & > 0 default 2;
|
||||
};
|
||||
`,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -1,26 +1,9 @@
|
|||
import init, { evaluateProject } from '../wasm/decodal_wasm.js';
|
||||
import { highlightDecodal } from '../lib/highlight.js';
|
||||
import { playgroundExamples } from './playground-examples.js';
|
||||
|
||||
const STORAGE_KEY = 'decodal-playground-project-v1';
|
||||
|
||||
const starterFiles = {
|
||||
'main.dcdl': `let
|
||||
schema = import "./schemas/service.dcdl";
|
||||
in
|
||||
schema.Service & {
|
||||
name = "api";
|
||||
port = 9000 + 443;
|
||||
tags = ["web"] ++ ["prod"];
|
||||
feature.enable = 9000 + 443 > 9000 && true;
|
||||
}
|
||||
`,
|
||||
'schemas/service.dcdl': `Service = {
|
||||
name = String;
|
||||
port = Int & > 443 default 8443;
|
||||
feature.enable = Bool default true;
|
||||
};
|
||||
`,
|
||||
};
|
||||
const starterProject = playgroundExamples[0];
|
||||
|
||||
const source = document.getElementById('source');
|
||||
const sourceHighlight = document.getElementById('source-highlight');
|
||||
|
|
@ -31,9 +14,19 @@ 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 exampleSelect = document.getElementById('example-select');
|
||||
const loadExample = document.getElementById('load-example');
|
||||
|
||||
const project = loadProject();
|
||||
|
||||
for (const example of playgroundExamples) {
|
||||
const option = document.createElement('option');
|
||||
option.value = example.id;
|
||||
option.textContent = example.title;
|
||||
exampleSelect.append(option);
|
||||
}
|
||||
exampleSelect.value = starterProject.id;
|
||||
|
||||
setActiveFile(project.activePath);
|
||||
renderFileTree();
|
||||
updateHighlight();
|
||||
|
|
@ -49,7 +42,11 @@ function loadProject() {
|
|||
} catch (_error) {
|
||||
// Fall back to the starter project.
|
||||
}
|
||||
return { files: { ...starterFiles }, activePath: 'main.dcdl' };
|
||||
return { files: cloneFiles(starterProject.files), activePath: starterProject.activePath };
|
||||
}
|
||||
|
||||
function cloneFiles(files) {
|
||||
return Object.fromEntries(Object.entries(files).map(([path, source]) => [path, source]));
|
||||
}
|
||||
|
||||
function normalizeFiles(files) {
|
||||
|
|
@ -65,6 +62,17 @@ function saveProject() {
|
|||
localStorage.setItem(STORAGE_KEY, JSON.stringify(project));
|
||||
}
|
||||
|
||||
function loadExampleProject(exampleId) {
|
||||
const example = playgroundExamples.find((item) => item.id === exampleId) ?? starterProject;
|
||||
project.files = cloneFiles(example.files);
|
||||
project.activePath = example.activePath;
|
||||
exampleSelect.value = example.id;
|
||||
setActiveFile(project.activePath);
|
||||
output.textContent = '';
|
||||
output.classList.remove('error');
|
||||
execute();
|
||||
}
|
||||
|
||||
function normalizePath(path) {
|
||||
const parts = [];
|
||||
for (const part of String(path).replaceAll('\\', '/').split('/')) {
|
||||
|
|
@ -165,6 +173,12 @@ try {
|
|||
}
|
||||
|
||||
run.addEventListener('click', execute);
|
||||
loadExample.addEventListener('click', () => {
|
||||
const example = playgroundExamples.find((item) => item.id === exampleSelect.value);
|
||||
if (!example) return;
|
||||
if (!confirm(`Load example "${example.title}"? This replaces the current virtual files.`)) return;
|
||||
loadExampleProject(example.id);
|
||||
});
|
||||
newFile.addEventListener('click', () => {
|
||||
const path = normalizePath(prompt('New virtual file path', 'schemas/types.dcdl') ?? '');
|
||||
if (!path) return;
|
||||
|
|
@ -172,7 +186,7 @@ newFile.addEventListener('click', () => {
|
|||
setActiveFile(path);
|
||||
return;
|
||||
}
|
||||
project.files[path] = path.endsWith('.dcdl') ? '' : '// Decodal source\n';
|
||||
project.files[path] = 'value = "new";\n';
|
||||
setActiveFile(path);
|
||||
});
|
||||
deleteFile.addEventListener('click', () => {
|
||||
|
|
|
|||
|
|
@ -281,7 +281,30 @@ main.playground {
|
|||
.playground-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.example-picker {
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
gap: 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.example-picker select {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
min-width: 180px;
|
||||
padding: 7px 10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user