Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat: do syntax highlight in web worker (closes #964) * chore(.gitignore): ignore generated js/core/hightlight.js file * chore(.gitignore): ignore generated js/core/worker.js file * chore(profile-w3c-common): load hljs directly from w3c * feat(core/worker): opportunistically preload syntax highlighter * tests: fix tests to work with hljs worker * refactor(core/worker): load worker.js as Blob URL * feat(core/markdown): apply 'nolinks' on all elements
- Loading branch information
Marcos Cáceres
committed
Feb 1, 2017
1 parent
37990c1
commit 701d542
Showing
9 changed files
with
186 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /** | ||
| * Module core/highlight | ||
| * | ||
| * Performs syntax highlighting to all pre and code elements. | ||
| */ | ||
| import { pub, sub } from "core/pubsubhub"; | ||
| import utils from "core/utils"; | ||
| import { worker } from "core/worker"; | ||
| import ghCss from "deps/text!core/css/github.css"; | ||
| export const name = "core/highlight"; | ||
|
|
||
| // Opportunistically insert the style into the head to reduce FOUC. | ||
| var codeStyle = document.createElement("style"); | ||
| codeStyle.textContent = ghCss; | ||
| var swapStyleOwner = utils.makeOwnerSwapper(codeStyle); | ||
| swapStyleOwner(document.head); | ||
|
|
||
| function getLanguageHint(classList) { | ||
| return Array | ||
| .from(classList) | ||
| .filter(item => item !== "highlight") | ||
| .map(item => item.toLowerCase()); | ||
| } | ||
| let doneResolver; | ||
| let doneRejector; | ||
| export const done = new Promise((resolve, reject) => { | ||
| doneResolver = resolve; | ||
| doneRejector = reject; | ||
| }); | ||
|
|
||
| export async function run(conf, doc, cb) { | ||
| // Nothing to do | ||
| if (conf.noHighlightCSS) { | ||
| doneResolver(); | ||
| return cb(); | ||
| } | ||
|
|
||
| if (codeStyle.ownerDocument !== doc) { | ||
| swapStyleOwner(doc.head); | ||
| } | ||
|
|
||
| if (doc.querySelector(".highlight")) { | ||
| pub("warn", "pre elements don't need a 'highlight' class anymore."); | ||
| } | ||
|
|
||
| const promisesToHighlight = Array | ||
| .from( | ||
| doc.querySelectorAll("pre:not(.idl):not(.highlightdone)") | ||
| ) | ||
| .map(element => { | ||
| return new Promise((resolve, reject) => { | ||
| if (element.textContent.trim() === "") { | ||
| return resolve(); // no work to do | ||
| } | ||
| const msg = { | ||
| action: "highlight", | ||
| code: element.textContent, | ||
| id: Math.random().toString(), | ||
| languages: getLanguageHint(element.classList), | ||
| }; | ||
|
|
||
| worker.postMessage(msg); | ||
| worker.addEventListener("message", function listener(ev) { | ||
| if (ev.data.id !== msg.id) { | ||
| return; // not for us! | ||
| } | ||
| worker.removeEventListener("message", listener); | ||
| element.innerHTML = ev.data.value; | ||
| element.classList.add("hljs"); | ||
| resolve(); | ||
| }); | ||
| setTimeout(() => { | ||
| const errMsg = "Timeout error trying to process: " + msg.code; | ||
| const err = new Error(errMsg); | ||
| reject(err); | ||
| }, 5000); | ||
| }); | ||
| }); | ||
| try { | ||
| await Promise.all(promisesToHighlight); | ||
| doneResolver(); | ||
| } catch (err) { | ||
| console.error(err); | ||
| doneRejector(err); | ||
| } | ||
| cb(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * Module core/worker | ||
| * | ||
| * Exports a Web Worker for ReSpec, allowing for | ||
| * multi-threaded processing of things. | ||
| */ | ||
|
|
||
| // Opportunistically preload syntax highlighter, which is used by the worker | ||
| import utils from "core/utils"; | ||
| import workerScript from "deps/text!../../worker/respec-worker.js"; | ||
| // Opportunistically preload syntax highlighter | ||
| const hint = { | ||
| hint: "preload", | ||
| href: "https://www.w3.org/Tools/respec/respec-highlight.js", | ||
| as: "script", | ||
| }; | ||
| const link = utils.createResourceHint(hint); | ||
| document.head.appendChild(link); | ||
|
|
||
| const workerURL = URL.createObjectURL(new Blob([workerScript], {type : 'application/javascript'})); | ||
| export const worker = new Worker(workerURL); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,27 @@ | ||
| // ReSpec Worker v0 | ||
| // ReSpec Worker v0.1.0 | ||
| "use strict"; | ||
| importScripts("https://www.w3.org/Tools/respec/respec-highlight.js"); | ||
|
|
||
| hljs.configure({ | ||
| tabReplace: " ", // 2 spaces | ||
| languages: [ | ||
| "css", | ||
| "http", | ||
| "javascript", | ||
| "json", | ||
| "markdown", | ||
| "xml", | ||
| "xquery", | ||
| ], | ||
| }); | ||
|
|
||
| self.addEventListener("message", function(e) { | ||
| switch (e.data.action) { | ||
| case "highlight": | ||
| const code = e.data.code; | ||
| const langs = e.data.languages.length ? e.data.languages : undefined; | ||
| const result = self.hljs.highlightAuto(code, langs); | ||
| const data = Object.assign({}, e.data, result); | ||
| self.postMessage(data); | ||
| } | ||
| }); |