Basic webpack setup

2022-12-08 10:22:47 -08:00
parent d34fe648d4
commit b9247b6123
9 changed files with 6842 additions and 0 deletions
@@ -0,0 +1,30 @@
+{
+  "name": "browser-playground",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "main": "index.js",
+  "type": "module",
+  "dependencies": {
+    "monaco-editor-webpack-plugin": "^7.0.1",
+    "monaco-editor-workers": "^0.34.2",
+    "monaco-languageclient": "^4.0.3",
+    "path-browserify": "^1.0.1",
+    "vscode-languageserver": "^8.0.2",
+    "vscode-languageserver-protocol": "^3.17.2"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "webpack --watch --mode development --env esbuild"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^6.7.2",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  }
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>GitHub Actions Language Services</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script defer type="module" src="./index.js"></script>
+</head>
+
+<body>
+	<div id="container" style="width:1024x;height:768px;border:1px solid gray"></div>
+</body>
+
+</html>
@@ -0,0 +1,66 @@
+import * as monaco from "monaco-editor";
+
+import { buildWorkerDefinition } from "monaco-editor-workers";
+
+import { MonacoServices } from "monaco-languageclient";
+import getMessageServiceOverride from "vscode/service-override/messages";
+import { StandaloneServices } from "vscode/services";
+
+StandaloneServices.initialize({
+  ...getMessageServiceOverride(document.body),
+});
+
+buildWorkerDefinition("dist", new URL("", window.location.href).href, false);
+
+// register Monaco languages
+monaco.languages.register({
+  id: "plaintext",
+  extensions: [".txt"],
+  aliases: ["PLAINTEXT", "plaintext"],
+  mimetypes: ["text/plain"],
+});
+
+// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+// if shipping only a subset of the features & languages is desired
+
+monaco.editor.create(document.getElementById("container")!, {
+  value: 'console.log("Hello, world")',
+  language: "yaml",
+});
+
+// function createLanguageClient(
+//   transports: MessageTransports
+// ): MonacoLanguageClient {
+//   return new MonacoLanguageClient({
+//     name: "Sample Language Client",
+//     clientOptions: {
+//       // use a language id as a document selector
+//       documentSelector: [{ language: "plaintext" }],
+//       // disable the default error handler
+//       errorHandler: {
+//         error: () => ({ action: ErrorAction.Continue }),
+//         closed: () => ({ action: CloseAction.DoNotRestart }),
+//       },
+//     },
+//     // create a language client connection to the server running in the web worker
+//     connectionProvider: {
+//       get: () => {
+//         return Promise.resolve(transports);
+//       },
+//     },
+//   });
+// }
+
+// install Monaco language client services
+MonacoServices.install();
+
+// const worker = new Worker(
+//   new URL("./src/serverWorker.ts", window.location.href).href,
+//   { type: "module" }
+// );
+// const reader = new BrowserMessageReader(worker);
+// const writer = new BrowserMessageWriter(worker);
+// const languageClient = createLanguageClient({ reader, writer });
+// languageClient.start();
+
+// reader.onClose(() => languageClient.stop());
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "dom"]
+  },
+  "references": [
+    { "path": "../service-worker" }
+  ]
+}
@@ -0,0 +1,15 @@
+// import {
+//   BrowserMessageReader,
+//   BrowserMessageWriter,
+//   createConnection,
+// } from "vscode-languageserver/browser.js";
+
+// // work around typing issues
+// declare const self: any;
+
+// const messageReader = new BrowserMessageReader(self);
+// const messageWriter = new BrowserMessageWriter(self);
+
+// // const connection = createConnection(messageReader, messageWriter);
+
+// // TODO: Setup lang server
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "WebWorker"],
+  }
+}
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Node16",
+    "lib": ["ES2022", "dom"],
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": false,
+    "stripInternal": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "importHelpers": true,
+    "downlevelIteration": false,
+    "noImplicitReturns": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    // Disallow inconsistently-cased references to the same file
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts"],
+}
@@ -0,0 +1,49 @@
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/client/client.ts",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "./index.js",
+  },
+  resolve: {
+    fallback: {
+      path: require.resolve("path-browserify"),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              compilerOptions: {
+                sourceMap: true,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.ttf$/,
+        type: "asset/resource",
+      },
+    ],
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public"),
+    },
+    compress: true,
+    port: 3000,
+  },
+  plugins: [new MonacoWebpackPlugin()],
+};