Basic webpack setup
This commit is contained in:
Christopher Schleiden
Generated
+6624
File diff suppressed because it is too large
Load Diff
@@ -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()],
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user