Bundle all prism languages and load them on demand

background/inject.js

@@ -29,7 +29,7 @@ md.inject = ({storage: {state}}) => (id) => {
     target: {tabId: id},
     files: [
       '/vendor/mithril.min.js',
-      state.content.syntax && '/vendor/prism.min.js',
+      state.content.syntax && ['/vendor/prism.min.js', '/vendor/prism-autoloader.min.js', '/content/prism.js'],
       state.content.emoji && '/content/emoji.js',
       state.content.mermaid && ['/vendor/mermaid.min.js', '/content/mermaid.js'],
       state.content.mathjax && ['/content/mathjax.js', '/vendor/mathjax/tex-mml-chtml.js'],

background/messages.js

@@ -25,6 +25,15 @@ md.messages = ({storage: {defaults, state, set}, compilers, mathjax, xhr, webreq
         sendResponse({err, body})
       })
     }
+    else if (req.message === 'prism') {
+      chrome.scripting.executeScript({
+        target: {tabId: sender.tab.id},
+        files: [
+          `/vendor/prism/prism-${req.language}.min.js`,
+        ],
+        injectImmediately: true
+      }, sendResponse)
+    }
     else if (req.message === 'mathjax') {
       chrome.scripting.executeScript({
         target: {tabId: sender.tab.id},

build/prism/build.sh

@@ -11,8 +11,13 @@ mkdir -p tmp
 node prism.js
 
 # copy
-cp tmp/prism.min.* ../../vendor/
+cp tmp/prism.min.js ../../vendor/
+cp tmp/prism-autoloader.min.js ../../vendor/
+cp tmp/prism.min.css ../../vendor/
 cp tmp/prism-okaidia.min.css ../../vendor/
+# languages
+mkdir -p ../../vendor/prism/
+cp node_modules/prismjs/components/prism-*.min.js ../../vendor/prism/
 
 # after
 rm -r tmp/

build/prism/prism.js

@@ -1,68 +1,43 @@
 
 var fs = require('fs')
 var path = require('path')
-var vm = require('vm')
 var terser = require('terser')
 var csso = require('csso')
 
-
-var _config = () => {
-  // load prism languages
-  var include = (file) => {
-    var fpath = path.resolve(__dirname, `node_modules/prismjs/${file}.js`)
-    var source = fs.readFileSync(fpath, 'utf8')
-    var ctx = vm.createContext()
-    vm.runInContext(source, ctx)
-    return ctx
-  }
-
-  var {components: {languages}} = include('components')
-  delete languages.meta
-
-  // update prism languages config
-  var config = require('./prism.json')
-  // sort the included ones
-  config.included = config.included.sort()
-  // update excluded
-  config.excluded = Object.keys(languages)
-    .filter((lang) => !config.included.includes(lang))
-    .sort()
-  // update config
+var js = async () => {
+  // prism.min.js
+  var prism = fs.readFileSync(
+    path.resolve(__dirname, 'node_modules/prismjs/prism.js'),
+    'utf8'
+  )
   fs.writeFileSync(
-    path.resolve(__dirname, 'prism.json'),
-    JSON.stringify(config, null, 2),
+    path.resolve(__dirname, 'tmp/prism.min.js'),
+    (await terser.minify(prism, {format: {comments: false}})).code,
     'utf8'
   )
 
-  return config
-}
-
-// prism.min.js
-var js = async (config) => {
-  var core = fs.readFileSync(
-    path.resolve(__dirname, 'node_modules/prismjs/prism.js'), 'utf8'
+  // prism-autoloader.min.js
+  var autoloader = fs.readFileSync(
+    path.resolve(__dirname, 'node_modules/prismjs/plugins/autoloader/prism-autoloader.js'),
+    'utf8'
+  ).replace(
+    // https://github.com/PrismJS/prism/issues/3654
+    'addScript(getLanguagePath(lang), function () {',
+    'Prism.plugins.autoloader.addScript(lang, function () {'
+  )
+  fs.writeFileSync(
+    path.resolve(__dirname, 'tmp/prism-autoloader.min.js'),
+    (await terser.minify(autoloader, {format: {comments: false}})).code,
+    'utf8'
   )
-
-  var source =
-    // core
-    (await terser.minify(core, {format: {comments: false}})).code +
-    // components
-    config.included.reduce((all, key) => (
-      all += fs.readFileSync(path.resolve(__dirname,
-        `node_modules/prismjs/components/prism-${key}.min.js`), 'utf8') + '\n',
-      all
-    ), '')
-
-  fs.writeFileSync(path.resolve(__dirname, 'tmp/prism.min.js'), source, 'utf8')
 }
 
-// prism.min.css
 var css = () => {
+  // prism.min.css
   var source = fs.readFileSync(
     path.resolve(__dirname, 'node_modules/prismjs/themes/prism.css'),
     'utf8'
   )
-
   fs.writeFileSync(
     path.resolve(__dirname, 'tmp/prism.min.css'),
     csso.minify(source).css
@@ -75,11 +50,11 @@ var css = () => {
     'utf8'
   )
 
+  // prism-okaidia.min.css
   var source = fs.readFileSync(
     path.resolve(__dirname, 'node_modules/prismjs/themes/prism-okaidia.css'),
     'utf8'
   )
-
   fs.writeFileSync(
     path.resolve(__dirname, 'tmp/prism-okaidia.min.css'),
     csso.minify(source).css
@@ -92,36 +67,7 @@ var css = () => {
   )
 }
 
-var stats = (config) => {
-  var included = config.included
-    .map((name) => ({
-      name,
-      size: fs.lstatSync(path.resolve(__dirname,
-        `node_modules/prismjs/components/prism-${name}.min.js`)).size
-    }))
-
-  var excluded = config.excluded
-    .map((name) => ({
-      name,
-      size: fs.lstatSync(path.resolve(__dirname,
-        `node_modules/prismjs/components/prism-${name}.min.js`)).size
-    }))
-
-  console.log('Excluded:')
-  excluded // sorted by name
-    // .sort((a, b) => b.size - a.size) // sorted by size
-    .forEach(({name, size}) => console.log(name, '\t\t\t', size))
-
-  console.log('Included:', included.length, included.reduce((total, {size}) => total += size, 0))
-  console.log('Excluded:', excluded.length, excluded.reduce((total, {size}) => total += size, 0))
-}
-
 ;(async () => {
-  var config = _config()
-  // prism.min.js
-  await js(config)
-  // prism.min.css
+  await js()
   css()
-  // print stats
-  stats(config)
 })()

build/prism/prism.json

@@ -1,303 +0,0 @@
-{
-  "included": [
-    "actionscript",
-    "apacheconf",
-    "applescript",
-    "aspnet",
-    "bash",
-    "basic",
-    "batch",
-    "bicep",
-    "c",
-    "clike",
-    "clojure",
-    "coffeescript",
-    "cpp",
-    "csharp",
-    "css",
-    "css-extras",
-    "csv",
-    "d",
-    "dart",
-    "diff",
-    "docker",
-    "editorconfig",
-    "elixir",
-    "erlang",
-    "flow",
-    "fsharp",
-    "glsl",
-    "go",
-    "graphql",
-    "groovy",
-    "haskell",
-    "haxe",
-    "hcl",
-    "hlsl",
-    "ini",
-    "java",
-    "javascript",
-    "js-extras",
-    "json",
-    "jsx",
-    "julia",
-    "kotlin",
-    "latex",
-    "less",
-    "lisp",
-    "llvm",
-    "lua",
-    "makefile",
-    "markdown",
-    "markup",
-    "markup-templating",
-    "matlab",
-    "nginx",
-    "objectivec",
-    "ocaml",
-    "perl",
-    "php",
-    "powershell",
-    "prolog",
-    "protobuf",
-    "python",
-    "r",
-    "reason",
-    "regex",
-    "ruby",
-    "rust",
-    "sass",
-    "scala",
-    "scheme",
-    "scss",
-    "shell-session",
-    "smalltalk",
-    "solidity",
-    "sql",
-    "swift",
-    "systemd",
-    "tsx",
-    "typescript",
-    "unrealscript",
-    "vala",
-    "vbnet",
-    "wasm",
-    "wgsl",
-    "wiki",
-    "wolfram",
-    "yaml"
-  ],
-  "excluded": [
-    "abap",
-    "abnf",
-    "ada",
-    "agda",
-    "al",
-    "antlr4",
-    "apex",
-    "apl",
-    "aql",
-    "arduino",
-    "arff",
-    "armasm",
-    "arturo",
-    "asciidoc",
-    "asm6502",
-    "asmatmel",
-    "autohotkey",
-    "autoit",
-    "avisynth",
-    "avro-idl",
-    "awk",
-    "bbcode",
-    "bbj",
-    "birb",
-    "bison",
-    "bnf",
-    "bqn",
-    "brainfuck",
-    "brightscript",
-    "bro",
-    "bsl",
-    "cfscript",
-    "chaiscript",
-    "cil",
-    "cilkc",
-    "cilkcpp",
-    "cmake",
-    "cobol",
-    "concurnas",
-    "cooklang",
-    "coq",
-    "crystal",
-    "cshtml",
-    "csp",
-    "cue",
-    "cypher",
-    "dataweave",
-    "dax",
-    "dhall",
-    "django",
-    "dns-zone-file",
-    "dot",
-    "ebnf",
-    "eiffel",
-    "ejs",
-    "elm",
-    "erb",
-    "etlua",
-    "excel-formula",
-    "factor",
-    "false",
-    "firestore-security-rules",
-    "fortran",
-    "ftl",
-    "gap",
-    "gcode",
-    "gdscript",
-    "gedcom",
-    "gettext",
-    "gherkin",
-    "git",
-    "gml",
-    "gn",
-    "go-module",
-    "gradle",
-    "haml",
-    "handlebars",
-    "hoon",
-    "hpkp",
-    "hsts",
-    "http",
-    "ichigojam",
-    "icon",
-    "icu-message-format",
-    "idris",
-    "iecst",
-    "ignore",
-    "inform7",
-    "io",
-    "j",
-    "javadoc",
-    "javadoclike",
-    "javastacktrace",
-    "jexl",
-    "jolie",
-    "jq",
-    "js-templates",
-    "jsdoc",
-    "json5",
-    "jsonp",
-    "jsstacktrace",
-    "keepalived",
-    "keyman",
-    "kumir",
-    "kusto",
-    "latte",
-    "lilypond",
-    "linker-script",
-    "liquid",
-    "livescript",
-    "log",
-    "lolcode",
-    "magma",
-    "mata",
-    "maxscript",
-    "mel",
-    "mermaid",
-    "metafont",
-    "mizar",
-    "mongodb",
-    "monkey",
-    "moonscript",
-    "n1ql",
-    "n4js",
-    "nand2tetris-hdl",
-    "naniscript",
-    "nasm",
-    "neon",
-    "nevod",
-    "nim",
-    "nix",
-    "nsis",
-    "odin",
-    "opencl",
-    "openqasm",
-    "oz",
-    "parigp",
-    "parser",
-    "pascal",
-    "pascaligo",
-    "pcaxis",
-    "peoplecode",
-    "php-extras",
-    "phpdoc",
-    "plant-uml",
-    "plsql",
-    "powerquery",
-    "processing",
-    "promql",
-    "properties",
-    "psl",
-    "pug",
-    "puppet",
-    "pure",
-    "purebasic",
-    "purescript",
-    "q",
-    "qml",
-    "qore",
-    "qsharp",
-    "racket",
-    "rego",
-    "renpy",
-    "rescript",
-    "rest",
-    "rip",
-    "roboconf",
-    "robotframework",
-    "sas",
-    "smali",
-    "smarty",
-    "sml",
-    "solution-file",
-    "soy",
-    "sparql",
-    "splunk-spl",
-    "sqf",
-    "squirrel",
-    "stan",
-    "stata",
-    "stylus",
-    "supercollider",
-    "t4-cs",
-    "t4-templating",
-    "t4-vb",
-    "tap",
-    "tcl",
-    "textile",
-    "toml",
-    "tremor",
-    "tt2",
-    "turtle",
-    "twig",
-    "typoscript",
-    "uorazor",
-    "uri",
-    "v",
-    "velocity",
-    "verilog",
-    "vhdl",
-    "vim",
-    "visual-basic",
-    "warpscript",
-    "web-idl",
-    "wren",
-    "xeora",
-    "xml-doc",
-    "xojo",
-    "xquery",
-    "yang",
-    "zig"
-  ]
-}

content/prism.js

@@ -0,0 +1,7 @@
+
+Prism.plugins.autoloader.addScript = (language, done) => {
+  chrome.runtime.sendMessage({
+    message: 'prism',
+    language
+  }, done)
+}