Skip to content

Commit ab69409

Browse files
marcorothmarcoroth
committed
Playground: Implement a Ruby Prism plaground
1 parent 2402c95 commit ab69409

File tree

11 files changed

+605
-107
lines changed

11 files changed

+605
-107
lines changed

‎docs/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ dist/
22
cache/
33
docs/public/assets
44
docs/public/playground-embed.html
5+
docs/public/playground-prism-embed.html
56
.vitepress/data/contributors.json

‎docs/.vitepress/config/theme.mts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,13 @@ export function createThemeConfig() {
134134
{ text: "Home", link: "/" },
135135
{ text: "Blog", link: "/blog/whats-new-in-herb-v0-8" },
136136
{ text: "Documentation", link: "/overview" },
137-
{ text: "Playground", link: "/playground" },
137+
{
138+
text: "Playground",
139+
items: [
140+
{ text: "Herb Playground", link: "/playground/" },
141+
{ text: "Prism Playground", link: "/playground/prism" },
142+
],
143+
},
138144
],
139145
outline: [2, 4],
140146
search: {

docs/docs/playground.md renamed to docs/docs/playground/index.md

File renamed without changes.

‎docs/docs/playground/prism.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Prism Playground
3+
layout: page
4+
sidebar: false
5+
footer: false
6+
---
7+
8+
<iframe src="/playground-prism-embed.html" style="width: 100%; height: calc(100vh - var(--vp-nav-height)); border: 0px;"></iframe>

‎docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
"dev": "vitepress dev",
1414
"build": "yarn vendor:playground && yarn vendor:c-reference && yarn fetch:contributors && vitepress build",
1515
"vendor:c-reference": "cd .. && doxygen Doxyfile",
16-
"vendor:playground": "cd ../playground && yarn build && cd - && cp ../playground/dist/index.html ./docs/public/playground-embed.html && cp -R ../playground/dist/assets ./docs/public",
16+
"vendor:playground": "cd ../playground && yarn build && cd - && cp ../playground/dist/index.html ./docs/public/playground-embed.html && cp ../playground/dist/prism/index.html ./docs/public/playground-prism-embed.html && cp -R ../playground/dist/assets ./docs/public",
1717
"preview": "vitepress preview",
18-
"clean": "rimraf .vitepress/dist/ && rimraf .vitepress/cache/ && rimraf ./.vitepress/data/contributors.json && rimraf ./docs/public/assets && rimraf ./docs/public/playground-embed.html&& rimraf ./docs/public/c-reference",
18+
"clean": "rimraf .vitepress/dist/ && rimraf .vitepress/cache/ && rimraf ./.vitepress/data/contributors.json && rimraf ./docs/public/assets && rimraf ./docs/public/playground-embed.html && rimraf ./docs/public/playground-prism-embed.html && rimraf ./docs/public/c-reference",
1919
"fetch:contributors": "mkdir -p .vitepress/data/ && gh api -X get https://api.github.com/repos/marcoroth/herb/contributors > .vitepress/data/contributors.json"
2020
},
2121
"dependencies": {

‎playground/index.html‎

Lines changed: 109 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@
4444

4545
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
4646
<div class="flex flex-row-reserve space-x-4 py-0 items-center">
47+
<a
48+
href="/prism/"
49+
class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
50+
>Prism Playground &rarr;</a
51+
>
4752
<a
4853
href="https://docs.herb-tools.dev"
4954
class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
@@ -64,88 +69,11 @@
6469
<div class="px-3 lg:px-8 h-screen">
6570
<div class="mx-2 grid grid-cols-1 md:grid-cols-2 gap-4">
6671
<div class="mt-6">
67-
<div class="flex flex-wrap lg:flex-nowrap items-center gap-2 lg:gap-4 mb-2">
68-
<div class="text-gray-900 dark:text-gray-100 rounded-md py-1.5 text-sm font-medium">
72+
<div class="flex flex-wrap lg:flex-nowrap items-center gap-2 lg:gap-3 mb-2">
73+
<div class="flex items-center text-gray-900 dark:text-gray-100 rounded-md px-0 py-1.5 text-sm font-medium">
6974
HTML+ERB File
7075
</div>
7176

72-
<div
73-
class="flex flex-wrap items-center gap-3 text-sm"
74-
data-playground-target="parserOptions"
75-
>
76-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include whitespace-only text nodes in the AST">
77-
<input
78-
type="checkbox"
79-
data-option="track_whitespace"
80-
data-action="change->playground#onOptionChange"
81-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
82-
/>
83-
<span class="select-none">Track whitespace</span>
84-
</label>
85-
86-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Enable strict HTML parsing mode with additional validation">
87-
<input
88-
type="checkbox"
89-
data-option="strict"
90-
data-action="change->playground#onOptionChange"
91-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
92-
checked
93-
/>
94-
<span class="select-none">Strict</span>
95-
</label>
96-
97-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Run analysis passes on the parse tree (error detection, tag matching)">
98-
<input
99-
type="checkbox"
100-
data-option="analyze"
101-
data-action="change->playground#onOptionChange"
102-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
103-
checked
104-
/>
105-
<span class="select-none">Analyze</span>
106-
</label>
107-
108-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Transform Action View tag helpers (tag, content_tag, link_to)">
109-
<input
110-
type="checkbox"
111-
data-option="action_view_helpers"
112-
data-action="change->playground#onOptionChange"
113-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
114-
/>
115-
<span class="select-none">Action View helpers</span>
116-
</label>
117-
118-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Serialize the full Prism ProgramNode for the entire extracted Ruby on the DocumentNode">
119-
<input
120-
type="checkbox"
121-
data-option="prism_program"
122-
data-action="change->playground#onOptionChange"
123-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
124-
/>
125-
<span class="select-none">Prism program</span>
126-
</label>
127-
128-
<label class="flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Attach Prism AST subtrees to each ERB node for its Ruby content">
129-
<input
130-
type="checkbox"
131-
data-option="prism_nodes"
132-
data-action="change->playground#onOptionChange change->playground#onPrismNodesChange"
133-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
134-
/>
135-
<span class="select-none">Prism nodes</span>
136-
</label>
137-
138-
<label data-playground-target="prismNodesDeepLabel" class="hidden flex items-center gap-2 text-gray-700 dark:text-gray-300" title="Include nested body content in control-flow Prism nodes (e.g. if/else body statements)">
139-
<input
140-
type="checkbox"
141-
data-option="prism_nodes_deep"
142-
data-action="change->playground#onOptionChange"
143-
class="rounded border-gray-300 dark:border-gray-600 text-green-600 focus:ring-green-500 dark:focus:ring-green-400"
144-
/>
145-
<span class="select-none">Prism nodes (deep)</span>
146-
</label>
147-
</div>
148-
14977
<div class="hidden lg:flex items-center gap-4 font-mono whitespace-break-spaces text-gray-400 dark:text-gray-500 text-[8pt] lg:ml-auto">
15078
<div data-playground-target="position"></div>
15179

@@ -166,7 +94,7 @@
16694
</div>
16795
</div>
16896

169-
<div class="flex flex-wrap gap-2 mb-2">
97+
<div class="flex flex-wrap items-center gap-2 mb-2">
17098
<div class="relative">
17199
<button
172100
data-action="click->playground#copyEditorContent"
@@ -298,6 +226,19 @@
298226
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-transparent border-b-black"></div>
299227
</div>
300228
</div>
229+
230+
<div class="flex items-center gap-0 ml-auto">
231+
<a
232+
data-playground-target="switchLink"
233+
href="/"
234+
class="rounded-l-md text-white bg-green-600 hover:bg-green-700 px-3 py-1.5 text-sm font-medium"
235+
>HTML+ERB (Herb)</a>
236+
<a
237+
data-playground-target="switchLink"
238+
href="/prism/"
239+
class="rounded-r-md text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-1.5 text-sm font-medium"
240+
>Ruby (Prism)</a>
241+
</div>
301242
</div>
302243

303244
<div
@@ -446,13 +387,97 @@
446387
</div>
447388

448389
<div class="mt-2">
449-
<pre
450-
style="white-space: pre; line-height: 1.3"
390+
<div
451391
data-viewer-target="parse"
452392
data-playground-target="parseViewer"
453393
data-action="click->playground#shrinkViewer"
454-
class="w-full p-3 mb-3 rounded overflow-auto font-mono bg-[#282c34] text-[#dcdfe4] highlight h-[50vh] md:h-[calc(100vh-110px)] overflow-scroll"
455-
></pre>
394+
class="w-full mb-3 rounded overflow-auto bg-[#282c34] h-[50vh] md:h-[calc(100vh-110px)] overflow-scroll"
395+
>
396+
<div
397+
class="sticky top-0 z-10 p-3 border-b border-gray-600 flex flex-wrap gap-3 items-center bg-[#282c34]"
398+
data-playground-target="parserOptions"
399+
>
400+
<span class="text-sm text-gray-300 mr-1">Parser Options:</span>
401+
402+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Include whitespace-only text nodes in the AST">
403+
<input
404+
type="checkbox"
405+
data-option="track_whitespace"
406+
data-action="change->playground#onOptionChange"
407+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
408+
/>
409+
<span class="select-none">Track whitespace</span>
410+
</label>
411+
412+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Enable strict HTML parsing mode with additional validation">
413+
<input
414+
type="checkbox"
415+
data-option="strict"
416+
data-action="change->playground#onOptionChange"
417+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
418+
checked
419+
/>
420+
<span class="select-none">Strict</span>
421+
</label>
422+
423+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Run analysis passes on the parse tree (error detection, tag matching)">
424+
<input
425+
type="checkbox"
426+
data-option="analyze"
427+
data-action="change->playground#onOptionChange"
428+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
429+
checked
430+
/>
431+
<span class="select-none">Analyze</span>
432+
</label>
433+
434+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Transform Action View tag helpers (tag, content_tag, link_to)">
435+
<input
436+
type="checkbox"
437+
data-option="action_view_helpers"
438+
data-action="change->playground#onOptionChange"
439+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
440+
/>
441+
<span class="select-none">Action View helpers</span>
442+
</label>
443+
444+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Serialize the full Prism ProgramNode for the entire extracted Ruby on the DocumentNode">
445+
<input
446+
type="checkbox"
447+
data-option="prism_program"
448+
data-action="change->playground#onOptionChange"
449+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
450+
/>
451+
<span class="select-none">Prism program</span>
452+
</label>
453+
454+
<label class="flex items-center gap-1.5 text-gray-300 text-sm" title="Attach Prism AST subtrees to each ERB node for its Ruby content">
455+
<input
456+
type="checkbox"
457+
data-option="prism_nodes"
458+
data-action="change->playground#onOptionChange change->playground#onPrismNodesChange"
459+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
460+
/>
461+
<span class="select-none">Prism nodes</span>
462+
</label>
463+
464+
<label data-playground-target="prismNodesDeepLabel" class="hidden flex items-center gap-1.5 text-gray-300 text-sm" title="Include nested body content in control-flow Prism nodes (e.g. if/else body statements)">
465+
<input
466+
type="checkbox"
467+
data-option="prism_nodes_deep"
468+
data-action="change->playground#onOptionChange"
469+
class="rounded border-gray-600 text-green-600 focus:ring-green-500 bg-gray-700"
470+
/>
471+
<span class="select-none">Prism nodes (deep)</span>
472+
</label>
473+
</div>
474+
475+
<pre
476+
data-playground-target="parseOutput"
477+
class="w-full p-3 m-0 font-mono bg-[#282c34] text-[#dcdfe4] highlight"
478+
style="white-space: pre; line-height: 1.3"
479+
></pre>
480+
</div>
456481

457482
<pre
458483
style="white-space: pre; line-height: 1.3"

0 commit comments

Comments
 (0)