Add playground support (#34)

Signed-off-by: Mark Sujew <mark.sujew@typefox.io>
zowe · Jan 29, 2025 · aec98ee · aec98ee
1 parent 8e21dfe
commit aec98ee
Show file tree

Hide file tree

Showing 15 changed files with 2,012 additions and 24 deletions.
diff --git a/.github/workflows/playground.yml b/.github/workflows/playground.yml
@@ -0,0 +1,42 @@
+name: Publish Playground
+
+permissions:
+  pages: write
+  id-token: write
+  contents: write
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  docs:
+    name: Build and Publish PL/I Playground
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: Build Playground
+        run: |
+          pnpm install
+          pnpm build:playground
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.7.2
+        with:
+          folder: packages/playground/out
+          branch: previews
+          clean-exclude: pr/ # Ensure that we don't delete the pr previews
+          force: false # Ensure that we don't override the pr previews
diff --git a/.github/workflows/pr-previews.yml b/.github/workflows/pr-previews.yml
@@ -0,0 +1,67 @@
+name: Deploy PR preview
+
+permissions:
+  pages: write
+  id-token: write
+  contents: write
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  build-preview:
+    if: github.event_name == 'pull_request_target' && github.event.action != 'closed'
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: Build Playground
+        run: |
+          pnpm install
+          pnpm build:playground
+      - uses: rossjrw/pr-preview-action@v1.6.0
+        with:
+          action: deploy
+          source-dir: ./packages/playground/out
+          preview-branch: previews
+          umbrella-dir: pr
+
+  # remove the preview page when the PR got closed
+  remove-preview:
+    if: github.event_name == 'pull_request_target' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      # checkout required for pr-preview-action to succeed,
+      # while the content will not be used
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: rossjrw/pr-preview-action@v1.6.0
+        id: deployment
+        with:
+          action: remove
+          preview-branch: previews
+          umbrella-dir: pr
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
         "watch": "tsc -b tsconfig.build.json --watch",
         "build": "pnpm langium:generate && tsc -b tsconfig.build.json && pnpm --dir packages/vscode-extension build && node ./scripts/merge-tmlanguage.mjs",
         "build:clean": "pnpm clean && pnpm build",
+        "build:playground": "pnpm build && pnpm --dir packages/playground build",
         "langium:generate": "pnpm  --dir packages/language langium:generate",
         "langium:watch": "pnpm --dir packages/language langium:watch",
         "test": "vitest"

diff --git a/packages/language/package.json b/packages/language/package.json
@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "chevrotain": "^11.0.3",
-    "langium": "~3.2.0",
+    "langium": "~3.3.1",
     "vscode-languageserver": "~9.0.1",
     "vscode-languageserver-types": "^3.17.5"
   },
   "devDependencies": {
-    "langium-cli": "~3.2.0"
+    "langium-cli": "~3.3.0"
   }
 }
diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>PL/I Playground</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="border">
+      <div class="header">
+        <span class="name">PL/I Playground</span>
+        <span id="share-info" class="share-info hidden"
+          >Link copied to clipboard!</span
+        >
+        <span
+          id="share-button"
+          class="share"
+          title="Click to share the current code"
+          >Share</span
+        >
+      </div>
+      <div id="vscode-views-root"></div>
+      <script type="module">
+        import { startClient } from "./src/app.ts";
+
+        startClient();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "pli-playground",
+  "description": "PL/I language playground",
+  "version": "0.0.1",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "clean": "shx rm -fr *.tsbuildinfo out",
+    "build": "vite -c vite.config.ts build",
+    "serve": "vite -c vite.config.ts serve",
+    "preview": "vite -c vite.config.ts preview",
+    "build:clean": "npm run clean && npm run build",
+    "langium:generate": "langium generate",
+    "langium:watch": "langium generate --watch"
+  },
+  "dependencies": {
+    "@codingame/monaco-vscode-files-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-keybindings-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-markers-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-textmate-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-theme-defaults-default-extension": "~11.1.2",
+    "@codingame/monaco-vscode-theme-service-override": "~11.1.2",
+    "@codingame/monaco-vscode-views-service-override": "~11.1.2",
+    "langium": "3.3.1",
+    "lz-string": "~1.5.0",
+    "pli-language": "workspace:*",
+    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
+    "monaco-editor-wrapper": "~6.1.0",
+    "monaco-languageclient": "~9.1.0",
+    "vscode": "npm:@codingame/monaco-vscode-api@~11.1.2",
+    "vscode-json-languageservice": "~5.4.2",
+    "vscode-languageclient": "~9.0.1",
+    "vscode-languageserver": "~9.0.1",
+    "vscode-uri": "~3.0.8",
+    "vscode-ws-jsonrpc": "~3.4.0"
+  },
+  "devDependencies": {
+    "vite": "~6.0.7",
+    "@codingame/esbuild-import-meta-url-plugin": "~1.0.2"
+  }
+}
diff --git a/packages/playground/src/app.ts b/packages/playground/src/app.ts
@@ -0,0 +1,64 @@
+/**
+ * This program and the accompanying materials are made available under the terms of the
+ * Eclipse Public License v2.0 which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-v20.html
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Copyright Contributors to the Zowe Project.
+ *
+ */
+
+import { MonacoEditorLanguageClientWrapper } from "monaco-editor-wrapper";
+import { setupClient } from "./config.js";
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from "lz-string";
+
+let wrapper: MonacoEditorLanguageClientWrapper | undefined;
+let shareTimeout: number | undefined;
+
+export async function startClient() {
+  const url = new URL(window.location.toString());
+  const encodedContent = url.searchParams.get("content") ?? undefined;
+  registerShareButton();
+  try {
+    let content: string | undefined = undefined;
+    if (encodedContent) {
+      content = decompressFromEncodedURIComponent(encodedContent);
+    }
+    const config = await setupClient(content);
+    wrapper = new MonacoEditorLanguageClientWrapper();
+    await wrapper.init(config);
+    const element = document.getElementById("monaco-root")!;
+    wrapper.start(element);
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+export function registerShareButton() {
+  const shareButton = document.getElementById("share-button");
+  shareButton?.addEventListener("click", () => {
+    if (wrapper) {
+      const text = wrapper.getEditor()?.getValue();
+      if (typeof text === "string") {
+        share(text);
+      }
+    }
+  });
+}
+
+async function share(content: string): Promise<void> {
+  const compressedContent = compressToEncodedURIComponent(content);
+  const url = new URL("", window.origin);
+  url.searchParams.append("content", compressedContent);
+  await navigator.clipboard.writeText(url.toString());
+  const shareInfo = document.getElementById("share-info");
+  shareInfo?.classList.remove("hidden");
+  window.clearTimeout(shareTimeout);
+  shareTimeout = window.setTimeout(() => {
+    shareInfo?.classList.add("hidden");
+  }, 4000);
+}