Merge pull request #9 from x0k/runtimes-info

Runtimes info

apps/ppp/package.json

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.1.191",
+    "@iconify-json/simple-icons": "^1.1.107",
     "@iconify/svelte": "^4.0.2",
     "@tailwindcss/typography": "^0.5.13",
     "@types/color": "^3.0.6",

apps/ppp/src/adapters/workers/go-worker-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { version } from "testing-go/version";
+</script>
+
+<p>
+  Go {version}.
+</p>
+
+<p>
+  Your code is interpreted by <a
+    target="_blank"
+    class="link"
+    href="https://github.com/WordPress/wordpress-playground/tree/trunk/packages/go-wasm/web"
+    >Yaegi</a
+  > (compiled to WebAssembly with stdlib) in a web worker environment.
+</p>

apps/ppp/src/adapters/workers/index.ts

@@ -0,0 +1,20 @@
+import type { ComponentType, SvelteComponent } from "svelte";
+
+import { Language } from "@/shared/languages";
+
+import JsWorkerDescription from "./js-worker-description.svelte";
+import TsWorkerDescription from "./ts-worker-description.svelte";
+import PhpWorkerDescription from "./php-worker-description.svelte";
+import PyWorkerDescription from "./python-worker-description.svelte";
+import GoWorkerDescription from "./go-worker-description.svelte";
+
+export const WORKER_DESCRIPTIONS: Record<
+  Language,
+  ComponentType<SvelteComponent<Record<string, never>>>
+> = {
+  [Language.JavaScript]: JsWorkerDescription,
+  [Language.TypeScript]: TsWorkerDescription,
+  [Language.PHP]: PhpWorkerDescription,
+  [Language.Python]: PyWorkerDescription,
+  [Language.Go]: GoWorkerDescription,
+};

apps/ppp/src/adapters/workers/js-worker-description.svelte

@@ -0,0 +1,11 @@
+<p>Your code is executed in a web worker environment.</p>
+
+<p>
+  <a
+    class="link"
+    target="_blank"
+    href="https://compat-table.github.io/compat-table/es2016plus/"
+  >
+    Check supported features in your browser
+  </a>.
+</p>

apps/ppp/src/adapters/workers/php-worker-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { version } from "testing-php/version";
+</script>
+
+<p>
+  PHP {version}.
+</p>
+
+<p>
+  Your code is executed by <a
+    target="_blank"
+    class="link"
+    href="https://github.com/WordPress/wordpress-playground/tree/trunk/packages/php-wasm/web"
+    >WebAssembly PHP</a
+  > in a web worker environment.
+</p>

apps/ppp/src/adapters/workers/python-worker-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { version } from "testing-python/version";
+</script>
+
+<p>
+  Python {version}.
+</p>
+
+<p>
+  Your code is executed by <a
+    target="_blank"
+    class="link"
+    href="https://pyodide.org/en/stable/"
+    >Pyodide</a
+  > (Python distribution based on WebAssembly) in a web worker environment.
+</p>

apps/ppp/src/adapters/workers/ts-worker-description.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { version } from "testing-typescript/version";
+</script>
+
+<p>TypeScript {version}. Transpilation options:</p>
+
+<pre>
+<code>
+target: ScriptTarget.ES2022,
+strict: true,
+strictBindCallApply: true,
+strictFunctionTypes: true,
+</code>
+</pre>
+
+<p>Your code is executed in a web worker environment.</p>
+
+<p>
+  <a
+    class="link"
+    target="_blank"
+    href="https://compat-table.github.io/compat-table/es2016plus/"
+  >
+    Check supported features in your browser
+  </a>.
+</p>

apps/ppp/src/components/dropdown.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" generics="T extends string">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: T;
+    options: T[];
+    label?: Snippet<[T]>;
+    preLabel?: Snippet<[T]>;
+    postLabel?: Snippet<[T]>;
+  }
+
+  let {
+    value = $bindable(),
+    options,
+    label,
+    preLabel,
+    postLabel,
+  }: Props = $props();
+
+  let detailsElement: HTMLDetailsElement;
+
+  $effect(() => {
+    const handler = (event: MouseEvent) => {
+      const withinBoundaries = event.composedPath().includes(detailsElement)
+      if (!withinBoundaries) {
+        detailsElement.open = false
+      }
+    }
+    document.addEventListener('click', handler)
+    return () => document.removeEventListener('click', handler)
+  })
+</script>
+
+<details bind:this={detailsElement} class="dropdown dropdown-top dropdown-end">
+  <summary class="btn btn-sm btn-ghost font-normal">
+    {#if label}
+      {@render label(value)}
+    {:else}
+      {value}
+    {/if}
+  </summary>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    tabindex="0"
+    class="dropdown-content bg-base-200 text-base-content rounded-box max-h-[calc(100vh-10rem)] w-43 overflow-y-auto border border-white/5 shadow-2xl outline outline-1 outline-black/5"
+  >
+    <ul class="menu menu-sm gap-1">
+      {#each options as option (option)}
+        <li>
+          <button
+            class="group"
+            class:active={value == option}
+            onclick={() => {
+              value = option;
+              detailsElement.open = false
+            }}
+          >
+            <!-- {#if $t("__code", {}, option, false) !== "__code"}
+              <span
+                class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50">
+                {$t("__code", {}, option)}
+              </span>
+            {/if} -->
+            {#if preLabel}
+              {@render preLabel(option)}
+            {/if}
+            <span class="font-[sans-serif]">
+              {#if label}
+                {@render label(option)}
+              {:else}
+                {option}
+              {/if}
+            </span>
+            {#if postLabel}
+              {@render postLabel(option)}
+            {/if}
+            <!-- {#if $t("__status", {}, option) !== "__status" && $t("__status", {}, option) !== ""}
+              <span class="badge badge-sm badge-ghost">
+                {$t("__status", {}, option)}
+              </span>
+            {/if} -->
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</details>

apps/ppp/src/components/editor/editor.svelte

@@ -1,28 +1,36 @@
 <script lang="ts" context="module">
+  import type { ComponentType, SvelteComponent } from 'svelte';
   import type { TestData, TestRunnerFactory } from "testing";
 
+  export interface Runtime<I, O> {
+    initialValue: string;
+    testRunnerFactory: TestRunnerFactory<I, O>;
+    // TODO: According to https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes-component-typing-changes
+    // this type should be just `Component`.
+    Description: ComponentType<SvelteComponent<Record<string, never>>>;
+  }
+
   export interface Props<L extends Language, I, O> {
     contentId: string;
     testsData: TestData<I, O>[];
-    runtimes: Record<L, {
-      initialValue: string;
-      testRunnerFactory: TestRunnerFactory<I, O>;
-    }>
+    runtimes: Record<L, Runtime<I, O>>
   }
 </script>
 
 <script lang="ts" generics="Lang extends Language, Input, Output">
   import { editor } from "monaco-editor";
+  import Icon from '@iconify/svelte'
 
   import { RESET_BUTTON_ID } from '@/shared';
   import {
     LANGUAGE_TITLE,
     Language,
   } from '@/shared/languages'
-  import Select from '@/components/select.svelte';
+  import Dropdown from '@/components/dropdown.svelte';
   import { MONACO_LANGUAGE_ID } from "@/adapters/monaco";
   import { createSyncStorage } from "@/adapters/storage";
 
+  import { LANG_ICONS } from './model'
   import Surface from "./surface.svelte";
   import Panel from "./panel/panel.svelte"
   import VimMode from './vim-mode.svelte';
@@ -102,6 +110,9 @@
       button.removeEventListener("click", resetEditorContent)
     }
   })
+
+  let dialogElement: HTMLDialogElement
+  let selectedLang: Lang = $state(defaultLang)
 </script>
 
 <Surface bind:this={surface} {model} {widthStorage} >
@@ -115,13 +126,44 @@
     >
       {#snippet header()}
         <VimMode {api} />
-        <Select
-          class="select-sm select-ghost"
+        <Dropdown
           bind:value={lang}
           options={languages}
-          labels={LANGUAGE_TITLE}
-        />
+        >
+          {#snippet preLabel(lang)}
+            <Icon icon={LANG_ICONS[lang]} />
+          {/snippet}
+          {#snippet label(lang)}
+            {LANGUAGE_TITLE[lang]}
+          {/snippet}
+          {#snippet postLabel(lang)}
+            <Icon onclick={(e) => {
+              selectedLang = lang
+              e.stopPropagation()
+              dialogElement.showModal()
+            }} class="invisible group-hover:visible" icon="lucide:info" />
+          {/snippet}
+        </Dropdown>
       {/snippet}
     </Panel>
   {/snippet}
 </Surface>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<dialog bind:this={dialogElement} class="modal" onclick={(e) => e.stopPropagation()}>
+  <div class="modal-box max-w-2xl w-full">
+    <h3 class="text-lg font-bold">{LANGUAGE_TITLE[selectedLang]}</h3>
+    <div class="flex flex-col items-start gap-2 py-4">
+      <svelte:component this={runtimes[selectedLang].Description} />
+    </div>
+    <div class="modal-action">
+      <form method="dialog">
+        <button class="btn btn-success">Ok</button>
+      </form>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>

apps/ppp/src/components/editor/model.ts

@@ -1,5 +1,6 @@
 import type { editor } from "monaco-editor";
 
+import { Language } from '@/shared/languages';
 import { createSyncStorage } from "@/adapters/storage";
 import { reactive } from "@/adapters/storage.svelte";
 
@@ -20,3 +21,11 @@ export const vimState = reactive(
 export const testRunnerTimeout = reactive(
   createSyncStorage(localStorage, "editor-test-runner-timeout", 60000)
 );
+
+export const LANG_ICONS: Record<Language, string> = {
+  [Language.JavaScript]: "simple-icons:javascript",
+  [Language.Python]: "simple-icons:python",
+  [Language.TypeScript]: "simple-icons:typescript",
+  [Language.Go]: "simple-icons:go",
+  [Language.PHP]: "simple-icons:php",
+};

apps/ppp/src/components/editor/panel/panel.svelte

@@ -120,7 +120,7 @@
   }
 </script>
 
-<div class="grow border-t border-base-100 relative flex flex-col bg-base-300 overflow-hidden">
+<div class="grow border-t border-base-100 relative bg-base-300 flex flex-col" style="height: {api.panelHeight}px;" >
   <TabsHeader
     bind:selectedTab
     {api}
@@ -130,12 +130,14 @@
     onRun={handleRun}
     append={header}
   />
-  {#if selectedTab === Tab.Tests}
-    <TestsTab {testsData} {lastTestId} />
-  {:else if selectedTab === Tab.Settings}
-    <SettingsTab />
-  {/if}
-  <!-- This Tab should't be unmounted -->
-  <TerminalTab terminal={term} class={selectedTab !== Tab.Output ? "hidden" : ""} />
-  {@render children()}
+  <div class="grow flex flex-col overflow-hidden">
+    {#if selectedTab === Tab.Tests}
+      <TestsTab {testsData} {lastTestId} />
+    {:else if selectedTab === Tab.Settings}
+      <SettingsTab />
+    {/if}
+    <!-- This Tab should't be unmounted -->
+    <TerminalTab terminal={term} class={selectedTab !== Tab.Output ? "hidden" : ""} />
+    {@render children()}
+  </div>
 </div>