Skip to content

Commit faee5a7

Browse files
deadlyjackdeadlyjack
authored
Merge pull request #2 from deadlyjack/web_workers
Web workers
2 parents f3f7123 + ccc9cb8 commit faee5a7

12 files changed

Lines changed: 197 additions & 51 deletions

File tree

‎dist/744.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js.LICENSE.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

‎dist/vendor.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vendor.js.LICENSE.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"webpack-cli": "^4.10.0"
1919
},
2020
"scripts": {
21-
"build": "webpack"
21+
"build": "node ./scripts/build.js"
2222
},
2323
"resolutions": {
2424
"terser": ">=5.14.2"

‎plugin.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
"id": "acode.plugin.prettier",
33
"name": "Prettier",
44
"main": "dist/main.js",
5-
"version": "1.0.2",
5+
"version": "1.0.3",
66
"readme": "readme.md",
77
"icon": "icon.png",
88
"type": "free",
9-
"files": [],
9+
"files": [
10+
"744.js",
11+
"vendor.js"
12+
],
1013
"author": {
1114
"name": "Ajit Kumar",
1215
"email": "me@ajitkumar.dev",
1316
"github": "deadlyjack"
1417
}
15-
}
18+
}

‎scripts/build.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const { exec } = require("child_process");
2+
const fs = require("fs");
3+
const path = require("path");
4+
5+
const distDir = path.resolve(__dirname, "../dist");
6+
7+
console.log("Cleaning dist directory...");
8+
9+
for (const filename of fs.readdirSync(distDir)) {
10+
if (filename.includes("vendor")) {
11+
continue;
12+
}
13+
14+
fs.unlinkSync(path.join(distDir, filename));
15+
}
16+
17+
console.log("Building with webpack...");
18+
19+
const args = process.argv.slice(2);
20+
exec(`npx webpack ${args.join(" ")}`, (error, stdout, stderr) => {
21+
if (error) {
22+
console.error(error.message);
23+
return;
24+
}
25+
if (stderr) {
26+
console.error(stderr);
27+
return;
28+
}
29+
30+
if (stdout) {
31+
console.log(stdout);
32+
}
33+
34+
console.log("Saving files info in plugin.json...");
35+
36+
const pluginJSONPath = path.resolve(__dirname, "../plugin.json");
37+
38+
const pluginInfo = JSON.parse(fs.readFileSync(pluginJSONPath));
39+
const files = [];
40+
for (const filename of fs.readdirSync(distDir)) {
41+
if (filename !== "main.js" && filename.endsWith(".js")) {
42+
files.push(filename);
43+
}
44+
}
45+
46+
pluginInfo.files = files;
47+
fs.writeFileSync(pluginJSONPath, JSON.stringify(pluginInfo, null, 2));
48+
});

‎src/main.js‎

Lines changed: 91 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,29 @@
1-
import prettier from "prettier/standalone";
2-
import pretterParserHTML from "prettier/parser-html";
3-
import prettierParserBabel from "prettier/parser-babel";
4-
import prettierParserGraphql from "prettier/parser-graphql";
5-
import prettierParserAngular from "prettier/parser-angular";
6-
import prettierParserAspree from "prettier/parser-espree";
7-
import prettierParserFlow from "prettier/parser-flow";
8-
import prettierParserGlimmer from "prettier/parser-glimmer";
9-
import prettierParserMd from "prettier/parser-markdown";
10-
import prettierParserMeriyah from "prettier/parser-meriyah";
11-
import prettierParserPostcss from "prettier/parser-postcss";
12-
import prettierParserTypescript from "prettier/parser-typescript";
13-
import prettierParserYaml from "prettier/parser-yaml";
14-
import plugin from '../plugin.json';
15-
16-
const plugins = [
17-
prettierParserBabel,
18-
prettierParserGraphql,
19-
prettierParserAngular,
20-
prettierParserAspree,
21-
prettierParserFlow,
22-
prettierParserGlimmer,
23-
pretterParserHTML,
24-
prettierParserMd,
25-
prettierParserMeriyah,
26-
prettierParserPostcss,
27-
prettierParserTypescript,
28-
prettierParserYaml,
29-
];
1+
import plugin from "../plugin.json";
302

313
const pluginId = plugin.id;
324

33-
class Prettier {
5+
class AcodePrettier {
6+
worker = null;
7+
workerInitialized = false;
8+
349
constructor() {
3510
this.run = this.run.bind(this);
3611
}
12+
13+
async loadScript() {
14+
if (document.getElementById("prettier-vendor-script")) {
15+
return;
16+
}
17+
18+
const $script = document.createElement("script");
19+
$script.id = "prettier-vendor-script";
20+
$script.src = acode.joinUrl(this.baseUrl, "vendor.js");
21+
return new Promise((resolve, reject) => {
22+
$script.onload = resolve;
23+
$script.onerror = reject;
24+
});
25+
}
26+
3727
static inferParser(filename) {
3828
switch (filename.slice(filename.lastIndexOf(".") + 1)) {
3929
case "html":
@@ -83,6 +73,12 @@ class Prettier {
8373
}
8474

8575
async init() {
76+
if (typeof Worker !== undefined) {
77+
this.#initializeWorker();
78+
} else {
79+
await this.loadScript();
80+
}
81+
8682
const config = appSettings.value[pluginId];
8783
const extensions = [
8884
"html",
@@ -113,16 +109,33 @@ class Prettier {
113109
const { editor, activeFile } = editorManager;
114110
const code = editor.getValue();
115111
const cursorPos = editor.getCursorPosition();
116-
const parser = Prettier.inferParser(activeFile.name);
117-
const res = prettier.formatWithCursor(code, {
118-
parser,
119-
cursorOffset: this.#cursorPosTocursorOffset(cursorPos),
120-
filepath: activeFile.name,
121-
plugins,
112+
const parser = AcodePrettier.inferParser(activeFile.name);
113+
114+
if (typeof Worker === undefined) {
115+
const { prettier, plugins } = window.acodePluginPrettier;
116+
const res = prettier.formatWithCursor(code, {
117+
parser,
118+
cursorOffset: this.#cursorPosTocursorOffset(cursorPos),
119+
filepath: activeFile.name,
120+
plugins,
121+
});
122+
editor.setValue(res.formatted);
123+
const { row, column } = this.#cursorOffsetTocursorPos(
124+
res.cursorOffset
125+
);
126+
editor.gotoLine(row + 1, column - 1);
127+
return;
128+
}
129+
130+
this.worker.postMessage({
131+
id: activeFile.id,
132+
code,
133+
cursorOptions: {
134+
parser,
135+
cursorOffset: this.#cursorPosTocursorOffset(cursorPos),
136+
filepath: activeFile.name,
137+
},
122138
});
123-
editor.setValue(res.formatted);
124-
const { row, column } = this.#cursorOffsetTocursorPos(res.cursorOffset);
125-
editor.gotoLine(row + 1, column - 1);
126139
}
127140

128141
destroy() {
@@ -157,17 +170,49 @@ class Prettier {
157170
column,
158171
};
159172
}
173+
174+
#initializeWorker() {
175+
this.worker = new Worker(new URL("./worker.js", import.meta.url));
176+
this.worker.onmessage = (e) => {
177+
const { id, res, action } = e.data;
178+
if (action === "script loaded") {
179+
this.workerInitialized = true;
180+
return;
181+
}
182+
183+
if (action === "code format") {
184+
const file = editorManager.getFile(id, "id");
185+
if (!file) return;
186+
187+
const { session } = file;
188+
session.setValue(res.formatted);
189+
const { row, column } = this.#cursorOffsetTocursorPos(
190+
res.cursorOffset
191+
);
192+
193+
session.selection.moveCursorTo(row, column);
194+
}
195+
};
196+
197+
this.worker.postMessage({
198+
action: "load script",
199+
scriptUrl: acode.joinUrl(this.baseUrl, "vendor.js"),
200+
});
201+
}
160202
}
161203

162204
if (window.acode) {
163-
const prettier = new Prettier();
164-
acode.setPluginInit(pluginId, (baseUrl, $page, { cacheFileUrl, cacheFile }) => {
165-
if (!baseUrl.endsWith("/")) {
166-
baseUrl += "/";
205+
const prettier = new AcodePrettier();
206+
acode.setPluginInit(
207+
pluginId,
208+
(baseUrl, $page, { cacheFileUrl, cacheFile }) => {
209+
if (!baseUrl.endsWith("/")) {
210+
baseUrl += "/";
211+
}
212+
prettier.baseUrl = baseUrl;
213+
prettier.init($page, cacheFile, cacheFileUrl);
167214
}
168-
prettier.baseUrl = baseUrl;
169-
prettier.init($page, cacheFile, cacheFileUrl);
170-
});
215+
);
171216
acode.setPluginUnmount(pluginId, () => {
172217
prettier.destroy();
173218
});

‎src/vendor.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import prettier from "prettier/standalone";
2+
import pretterParserHTML from "prettier/parser-html/";
3+
import prettierParserBabel from "prettier/parser-babel";
4+
import prettierParserGraphql from "prettier/parser-graphql";
5+
import prettierParserAngular from "prettier/parser-angular";
6+
import prettierParserAspree from "prettier/parser-espree";
7+
import prettierParserFlow from "prettier/parser-flow";
8+
import prettierParserGlimmer from "prettier/parser-glimmer";
9+
import prettierParserMd from "prettier/parser-markdown";
10+
import prettierParserMeriyah from "prettier/parser-meriyah";
11+
import prettierParserPostcss from "prettier/parser-postcss";
12+
import prettierParserTypescript from "prettier/parser-typescript";
13+
import prettierParserYaml from "prettier/parser-yaml";
14+
15+
self.acodePluginPrettier = {
16+
prettier,
17+
plugins: [
18+
prettierParserBabel,
19+
prettierParserGraphql,
20+
prettierParserAngular,
21+
prettierParserAspree,
22+
prettierParserFlow,
23+
prettierParserGlimmer,
24+
pretterParserHTML,
25+
prettierParserMd,
26+
prettierParserMeriyah,
27+
prettierParserPostcss,
28+
prettierParserTypescript,
29+
prettierParserYaml,
30+
],
31+
};

0 commit comments

Comments
 (0)