Merge pull request #6 from x0k/monorepo

Monorepo

.github/workflows/deploy.yml

@@ -17,15 +17,34 @@ permissions:
 jobs:
   build:
     runs-on: ubuntu-latest
+    # Remote Caching.
+    env:
+     TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+     TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+     TURBO_REMOTE_ONLY: true
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
-      - name: Install, build, and upload your site
-        uses: withastro/action@v2
-        # with:
-          # path: . # The root location of your Astro project inside the repository. (optional)
-          # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
-          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "apps/ppp/dist/"
 
   deploy:
     needs: build

.gitignore

@@ -1,5 +1,8 @@
 # build output
 dist/
+.turbo/
+.eslintcache
+.pnpm-store
 
 # generated types
 .astro/
@@ -22,3 +25,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+*.tsbuildinfo
+*.log

apps/ppp/astro.config.mjs

@@ -0,0 +1,42 @@
+import { defineConfig } from "astro/config";
+import { fileURLToPath } from "node:url";
+
+import mdx from "@astrojs/mdx";
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://x0k.github.io",
+  base: "/ppp",
+  integrations: [tailwind(), icon(), mdx(), svelte()],
+  vite: {
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
+    },
+    worker: {
+      format: "es",
+    },
+    build: {
+      rollupOptions: {
+        external: ["sharp"],
+      },
+    },
+  },
+  markdown: {
+    shikiConfig: {
+      wrap: true,
+      theme: "dracula",
+    },
+  },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "ru"],
+    fallback: {
+      ru: "en",
+    },
+  },
+});

apps/ppp/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ppp",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "check": "astro check",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/mdx": "^3.1.0",
+    "@astrojs/svelte": "^5.5.0",
+    "@astrojs/tailwind": "^5.1.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "astro": "^4.10.2",
+    "astro-icon": "^1.1.0",
+    "monaco-editor": "^0.49.0",
+    "monaco-vim": "^0.4.1",
+    "tailwindcss": "^3.4.4",
+    "libs": "workspace:*",
+    "testing": "workspace:*",
+    "design-patterns-factory": "workspace:*"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.1.191",
+    "@iconify/svelte": "^4.0.2",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/color": "^3.0.6",
+    "color": "^4.2.3",
+    "daisyui": "^4.12.2",
+    "svelte": "5.0.0-next.133"
+  }
+}

src/adapters/monaco.ts → apps/ppp/src/adapters/monaco.ts

@@ -1,4 +1,4 @@
-import { Language } from "@/lib/testing";
+import { Language } from "@/lib/languages";
 
 export const MONACO_LANGUAGE_ID: Record<Language, string> = {
   [Language.PHP]: "php",

apps/ppp/src/adapters/svelte-editor.ts

@@ -0,0 +1,26 @@
+import { mount } from "svelte";
+
+import type { TestData, TestRunnerFactory } from "testing";
+
+import Editor, { type Props } from "@/components/editor/editor.svelte";
+import type { Language } from "@/lib/languages";
+
+export function mountEditor<L extends Language, I, O>(
+  testsData: TestData<I, O>[],
+  runtimes: Record<
+    L,
+    { initialValue: string; testRunnerFactory: TestRunnerFactory<I, O> }
+  >
+) {
+  const element = document.getElementById("editor-placeholder")!;
+  const props = {
+    contentId: element.dataset.contentId!,
+    testsData,
+    runtimes,
+  } satisfies Props<L, I, O>;
+  mount(Editor, {
+    target: element.parentElement!,
+    // @ts-expect-error svelte types are wrong
+    props,
+  });
+}

src/adapters/testing-actor.ts → apps/ppp/src/adapters/testing-actor.ts

@@ -1,3 +1,5 @@
+import { createContext, inContext, type Context } from "libs/context";
+import { createLogger } from "libs/logger";
 import {
   Actor,
   MessageType,
@@ -7,10 +9,9 @@ import {
   type EventMessage,
   type IncomingMessage,
   type OutgoingMessage,
-} from "@/lib/actor";
-import { createContext, inContext, type Context } from "@/lib/context";
-import { createLogger } from "@/lib/logger";
-import type { TestRunner, TestRunnerFactory } from "@/lib/testing";
+} from "libs/actor";
+import { stringifyError } from "libs/error";
+import type { TestRunner, TestRunnerFactory } from "testing";
 
 interface Handlers<I, O> {
   [key: string]: any;
@@ -77,7 +78,7 @@ class TestRunnerActor<I, O> extends Actor<Handlers<I, O>, string> {
         return this.runner.run(this.ctx, input);
       },
     };
-    super(connection, handlers, String);
+    super(connection, handlers, stringifyError);
   }
 }
 
@@ -126,7 +127,7 @@ export function makeRemoteTestRunnerFactory<I, O>(
       remote.cancel();
     });
     try {
-      await remote.init(code);
+      await inContext(ctx, remote.init(code));
     } catch (err) {
       dispose();
       throw err;

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

@@ -1,36 +1,39 @@
+<script lang="ts" context="module">
+  import type { TestData, TestRunnerFactory } from "testing";
+
+  export interface Props<L extends Language, I, O> {
+    contentId: string;
+    testsData: TestData<I, O>[];
+    runtimes: Record<L, {
+      initialValue: string;
+      testRunnerFactory: TestRunnerFactory<I, O>;
+    }>
+  }
+</script>
+
 <script lang="ts" generics="Lang extends Language, Input, Output">
   import { editor } from "monaco-editor";
 
+  import { RESET_BUTTON_ID } from '@/shared';
   import {
     LANGUAGE_TITLE,
     Language,
-    type TestData,
-    type TestRunnerFactory,
-  } from "@/lib/testing";
+  } from '@/lib/languages'
   import Select from '@/components/select.svelte';
   import { MONACO_LANGUAGE_ID } from "@/adapters/monaco";
   import { createSyncStorage } from "@/adapters/storage";
 
   import Surface from "./surface.svelte";
   import Panel from "./panel/panel.svelte"
   import VimMode from './vim-mode.svelte';
-  import { RESET_BUTTON_ID } from '@/shared';
-
-  interface Props<L extends Language, I, O> {
-    contentId: string;
-    testsData: TestData<I, O>[];
-    initialValues: Record<L, string>;
-    testRunnerFactories: Record<L, TestRunnerFactory<I, O>>;
-  }
 
   const {
     contentId,
     testsData,
-    initialValues,
-    testRunnerFactories,
+    runtimes,
   }: Props<Lang, Input, Output> = $props();
 
-  const languages = Object.keys(testRunnerFactories) as Lang[];
+  const languages = Object.keys(runtimes) as Lang[];
   if (languages.length === 0) {
     throw new Error("No test runner factories provided");
   }
@@ -43,12 +46,13 @@
   const initialLang = langStorage.load();
 
   let lang = $state(
-    initialLang in testRunnerFactories ? initialLang : defaultLang
+    initialLang in runtimes ? initialLang : defaultLang
   );
+  let runtime = $derived(runtimes[lang]);
   let contentStorage = $derived(createSyncStorage(
     sessionStorage,
     `editor-${contentId}-${lang}`,
-    initialValues[lang],
+    runtime.initialValue,
   ));
 
   const model = editor.createModel("");
@@ -84,7 +88,7 @@
 
   function resetEditorContent () {
     contentStorage.clear();
-    model.setValue(initialValues[lang]);
+    model.setValue(runtime.initialValue);
     surface.api.editor?.focus();
   }
 
@@ -106,7 +110,7 @@
       {api}
       {model}
       {testsData}
-      testRunnerFactory={testRunnerFactories[lang]}
+      testRunnerFactory={runtime.testRunnerFactory}
       children={resizer}
     >
       {#snippet header()}

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

@@ -4,14 +4,16 @@
   import { Terminal } from '@xterm/xterm'
   import { FitAddon } from '@xterm/addon-fit'
   import '@xterm/xterm/css/xterm.css'
+  
+  import { createContext, type Context } from 'libs/context';
+  import { createLogger } from 'libs/logger';
+  import { stringifyError } from 'libs/error'
 
-  import { createContext, type Context } from '@/lib/context';
-  import { createLogger } from '@/lib/logger';
   import {
     runTests,
     type TestData,
     type TestRunnerFactory,
-  } from "@/lib/testing";
+  } from "testing";
   
   import { testRunnerTimeout, type SurfaceApi } from '../model';
   import { Tab } from './model';
@@ -64,6 +66,11 @@
     term.dispose()
   })
 
+  $effect(() => {
+    testRunnerFactory;
+    term.clear();
+  })
+
   let resizeFrameId: number
   $effect(() => {
     api.panelHeight;
@@ -105,7 +112,7 @@
         runner[Symbol.dispose]();
       }
     } catch (err) {
-      logger.error(String(err));
+      logger.error(stringifyError(err));
     } finally {
       isRunning = false;
       ctx = null;

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

@@ -1,7 +1,7 @@
 <script lang="ts" generics="Input, Output">
   import Icon from "@iconify/svelte";
 
-  import type { TestData } from "@/lib/testing";
+  import type { TestData } from "testing";
 
   interface Props<I, O> {
     testsData: TestData<I, O>[];

apps/ppp/src/components/hint.astro

@@ -0,0 +1,19 @@
+---
+import { Icon } from "astro-icon/components";
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="flex flex-col gap-3">
+  <div class="collapse outline outline-1">
+    <input type="checkbox" />
+    <div class="flex items-center gap-1 collapse-title">
+      <Icon name="lucide:lightbulb" />{title}
+    </div>
+    <div class="collapse-content"><slot /></div>
+  </div>
+</div>