Skip to content

Commit

Permalink
Partial success
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianjenkins94
brianjenkins94 committed Nov 12, 2023
1 parent 2960ee7 commit e766076
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 56 deletions.
51 changes: 21 additions & 30 deletions extensions/hello-world/extension.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,21 @@
/* eslint-env browser */

// The module "vscode" contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from "vscode";

// This method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log("Congratulations, your extension \"helloworld - web - sample\" is now active in the web extension host!");

// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
const disposable = vscode.commands.registerCommand("helloworld-web-sample.helloWorld", () => {
// The code you place here will be executed every time your command is executed

// Display a message box to the user
vscode.window.showInformationMessage("Hello World from helloworld-web-sample in a web extension host!");
});

context.subscriptions.push(disposable);
}

// This method is called when your extension is deactivated
export function deactivate() {
// Noop
}
import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log("Congratulations, your extension \"helloworld-web-sample\" is now active in the web extension host!");

// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
const disposable = vscode.commands.registerCommand("helloworld-web-sample.helloWorld", () => {
// The code you place here will be executed every time your command is executed

// Display a message box to the user
vscode.window.showInformationMessage("Hello World from helloworld-web-sample in a web extension host!");
});

context.subscriptions.push(disposable);
}

export function deactivate() { }
1 change: 0 additions & 1 deletion extensions/hello-world/manifest.json
View file

This file was deleted.

51 changes: 51 additions & 0 deletions extensions/hello-world/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"name": "helloworld-web-sample",
"displayName": "helloworld-web-sample",
"description": "HelloWorld example for VS Code in the browser",
"version": "0.0.1",
"publisher": "vscode-samples",
"private": true,
"license": "MIT",
"repository": "https://github.com/microsoft/vscode-extension-samples/helloworld-web-sample",
"engines": {
"vscode": "^1.74.0"
},
"categories": [
"Other"
],
"activationEvents": [],
"browser": "./extension.js",
"contributes": {
"commands": [
{
"command": "helloworld-web-sample.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"test": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=.",
"pretest": "npm run compile-web",
"vscode:prepublish": "npm run package-web",
"compile-web": "webpack",
"watch-web": "webpack --watch",
"package-web": "webpack --mode production --devtool hidden-source-map",
"lint": "eslint src --ext ts"
},
"devDependencies": {
"@types/mocha": "^9.0.0",
"@types/vscode": "^1.73.0",
"@types/webpack-env": "^1.16.2",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"@vscode/test-web": "^0.0.22",
"assert": "^2.0.0",
"eslint": "^8.26.0",
"mocha": "^9.2.0",
"process": "^0.11.10",
"ts-loader": "^9.2.5",
"typescript": "^5.1.3",
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
}
}
6 changes: 3 additions & 3 deletions main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { ExtensionHostKind, createModelReference, monaco, registerExtension, vscode } from "./monaco";

const extensionManifest = new URL("./extensions/helloworld-web-sample/package.json", import.meta.url);
const extensionManifest = "./assets" + new URL("./extensions/hello-world/package.json", import.meta.url).pathname;

const { registerFileUrl } = registerExtension(await (await fetch(extensionManifest)).json(), ExtensionHostKind.LocalProcess);

registerFileUrl("/package.json", extensionManifest.toString());
registerFileUrl("/dist/web/extension.js", new URL(new URL("./extensions/helloworld-web-sample/dist/web/extension.js", import.meta.url).toString(), import.meta.url).toString());
registerFileUrl("/package.json", extensionManifest);
registerFileUrl("/extension.js", new URL("./extensions/hello-world/extension.ts", import.meta.url).toString());

const modelReference = await createModelReference(monaco.Uri.file("/tmp/test.js"), `// import anotherfile
let variable = 1
Expand Down
56 changes: 34 additions & 22 deletions tsup.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { copyFileSync, existsSync, promises as fs, readFileSync, writeFileSync } from "fs";
import { existsSync, promises as fs } from "fs";
import { createHash } from "crypto";
import { defineConfig } from "tsup";
import { resolve } from "import-meta-resolve";
Expand All @@ -20,9 +20,11 @@ async function tsup(options) {
"treeshake": true,
...options,
// WORKAROUND: `tsup` gives the entry straight to `globby` and `globby` doesn't get along with Windows paths.
"entry": options.entry.map(function(entry) {
"entry": Array.isArray(options.entry) ? options.entry.map(function(entry) {
return entry.replace(/\\/gu, "/");
})
}) : Object.fromEntries(Object.entries(options.entry).map(function([key, value]) {
return [key, value.replace(/\\/gu, "/")];
}))
});
}

Expand Down Expand Up @@ -61,23 +63,33 @@ const importMetaUrlPlugin = {
const parentDirectory = path.dirname(filePath);

if (newUrlRegEx.test(contents)) {
// TODO: This whole function could use a review.
contents = await replaceAsync(newUrlRegEx, contents, async function([_, match]) {
if (match.endsWith("src/web/extension.ts") || match.endsWith("helloworld-web-sample/package.json")) {
debugger;
}

let filePath = path.join(parentDirectory, match);
let baseName = path.basename(filePath);

if (filePath.endsWith(".ts")) {
baseName = path.basename(filePath);
match = "./assets/" + baseName;
const file = await fs.readFile(filePath, { "encoding": "utf8" });

const hash = createHash("sha256").update(file).digest("hex").substring(0, 6);

const extension = path.extname(baseName);
baseName = path.basename(baseName, extension);

baseName = baseName + "-" + hash;
match = "./assets/" + baseName + ".js";

await tsup({
"config": false,
"entry": [baseName],
"outfile": "./assets/" + baseName
"config": false, // Is this needed?
"entry": {
[baseName]: filePath
},
"outDir": assetsDirectory
});

filePath = path.join(assetsDirectory, baseName + ".js");

await fs.writeFile(filePath, "module.exports.activate = " + (await import(url.pathToFileURL(filePath).toString()))["activate"].toString());
}

if (!existsSync(filePath)) {
Expand All @@ -87,18 +99,18 @@ const importMetaUrlPlugin = {
if (existsSync(fallbackPath)) {
filePath = fallbackPath;
baseName = path.basename(filePath);
match = "./assets/" + baseName;
match = "./" + baseName;

copyFileSync(filePath, path.join(assetsDirectory, baseName));
await fs.copyFile(filePath, path.join(assetsDirectory, baseName));
} else {
const fallbackPath = path.join(__dirname, "monaco-vscode-api", "demo", "node_modules", "vscode", match);

if (existsSync(fallbackPath)) {
filePath = fallbackPath;
baseName = path.basename(filePath);
match = "./assets/" + baseName;
match = "./" + baseName;

copyFileSync(filePath, path.join(assetsDirectory, baseName));
await fs.copyFile(filePath, path.join(assetsDirectory, baseName));
} else {
throw new Error("This should never happen.");
}
Expand All @@ -113,22 +125,22 @@ const importMetaUrlPlugin = {
case filePath.endsWith(".map"):
return "\"" + match + "\"";
case filePath.endsWith(".json"):
writeFileSync(filePath, JSON.stringify(JSON5.parse(readFileSync(filePath, { "encoding": "utf8" })), undefined, "\t") + "\n");
await fs.writeFile(filePath, JSON.stringify(JSON5.parse(await fs.readFile(filePath, { "encoding": "utf8" }) || "{}"), undefined, "\t") + "\n");
break;
case filePath.endsWith(".mp3"):
return "\"data:audio/mpeg;base64,\"";
case filePath.endsWith(".html"):
case filePath.endsWith(".tmLanguage"):
case filePath.endsWith(".woff"):
copyFileSync(filePath, path.join(assetsDirectory, baseName));
await fs.copyFile(filePath, path.join(assetsDirectory, baseName));

return "\"./assets/" + baseName + "\"";
return "\"./" + baseName + "\"";
default:
}

try {
// Caching opportunity here:
const file = readFileSync(filePath);
const file = await fs.readFile(filePath);

// If it's JSON-like
JSON.parse(file.toString("utf8"));
Expand All @@ -141,10 +153,10 @@ const importMetaUrlPlugin = {
baseName = baseName + "-" + hash + extension;

// Copy it to the assets directory
copyFileSync(filePath, path.join(assetsDirectory, baseName));
await fs.copyFile(filePath, path.join(assetsDirectory, baseName));

// So that we can refer to it by its unique name.
return "\"./assets/" + baseName + "\"";
return "\"./" + baseName + "\"";
} catch (error) {
// Otherwise, leave it unchanged.
return "\"" + match + "\"";
Expand Down

0 comments on commit e766076

Please sign in to comment.