Skip to content

Commit ed154aa

Browse files
biraj21biraj21
committed
web workers added, not working yet
1 parent f3f7123 commit ed154aa

5 files changed

Lines changed: 138 additions & 47 deletions

File tree

‎plugin.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"readme": "readme.md",
77
"icon": "icon.png",
88
"type": "free",
9-
"files": [],
9+
"files": ["src_worker_js.js", "vendor.js"],
1010
"author": {
1111
"name": "Ajit Kumar",
1212
"email": "me@ajitkumar.dev",

‎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+
};

‎src/worker.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
self.onmessage = (e) => {
2+
const { id, code, cursorOptions, action, scriptUrl } = e.data;
3+
if (action === "load script") {
4+
importScripts(scriptUrl);
5+
console.log(self.acodePluginPrettier);
6+
self.postMessage({ action: "script loaded" });
7+
return;
8+
}
9+
10+
const { prettier, plugins } = self.acodePluginPrettier;
11+
cursorOptions.plugins = plugins;
12+
const res = prettier.formatWithCursor(code, cursorOptions);
13+
self.postMessage({ id, action: "code format", res });
14+
};

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = (env, options) => {
1818
mode,
1919
entry: {
2020
main: "./src/main.js",
21+
// vendor: "./src/vendor.js",
2122
},
2223
output: {
2324
path: path.resolve(__dirname, "dist"),

0 commit comments

Comments
 (0)