(chore) no longer bundle Vue.js plugin

highlightjs · Mar 22, 2021 · 94e8f7f · 94e8f7f
1 parent bfa6600
commit 94e8f7f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -147,10 +147,14 @@ div.code {
 
 ## Using with Vue.js
 
-Simply register the plugin with Vue:
+Simply load then register the plugin with Vue:
+
+```html
+<script src="/path/to/vue_plugin.min.js"></script>
+```
 
 ```js
-Vue.use(hljs.vuePlugin);
+Vue.use(hljsVue.BuildVuePlugin(hljs).VuePlugin);
 ```
 
 And you'll be provided with a `highlightjs` component for use

diff --git a/src/highlight.js b/src/highlight.js
@@ -898,9 +898,7 @@ const HLJS = function(hljs) {
     registerAliases,
     autoDetection,
     inherit,
-    addPlugin,
-    // plugins for frameworks
-    vuePlugin: BuildVuePlugin(hljs).VuePlugin
+    addPlugin
   });
 
   hljs.debugMode = function() { SAFE_MODE = false; };

diff --git a/tools/build_browser.js b/tools/build_browser.js
@@ -58,6 +58,7 @@ async function buildBrowser(options) {
 
   detailedGrammarSizes(languages);
 
+  await buildVuePluginJS({ minify: options.minify });
   const size = await buildBrowserHighlightJS(languages, { minify: options.minify });
 
   log("-----");
@@ -154,6 +155,29 @@ function installDemoStyles() {
   });
 }
 
+async function buildVuePluginJS({ minify }) {
+  log("Building vue_plugin.js.");
+
+  const outFile = `${process.env.BUILD_DIR}/vue_plugin.js`;
+  const minifiedFile = outFile.replace(/js$/, "min.js");
+
+  const input = { ...config.rollup.browser_core.input, input: `src/plugins/vue.js`};
+  const output = config.rollup.browser_core.output;
+  // output.footer = output.footer.replace("hljs", "hljsVue");
+  let pluginSrc = await rollupCode(input,
+    { ...output, file: outFile, name: "hljsVue", footer: null });
+
+  const tasks = [];
+  tasks.push(fs.writeFile(outFile, pluginSrc, { encoding: "utf8" }));
+
+  if (minify) {
+    const tersed = await Terser.minify(pluginSrc, config.terser);
+    tasks.push(fs.writeFile(minifiedFile, tersed.code, { encoding: "utf8" }));
+  }
+
+  await Promise.all(tasks);
+}
+
 async function buildBrowserHighlightJS(languages, { minify }) {
   log("Building highlight.js.");
 

diff --git a/tools/developer.html b/tools/developer.html
@@ -175,6 +175,7 @@ <h3>Markup</h3>
   </div>
 
   <script src="../build/highlight.js"></script>
+  <script src="../build/vue_plugin.js"></script>
   <script src="vendor/jquery-2.1.1.min.js"></script>
   <script src="vendor/vue.js"></script>
 
@@ -273,7 +274,8 @@ <h3>Markup</h3>
       });
     }());
 
-    Vue.use(hljs.vuePlugin);
+    let plugin = hljsVue.BuildVuePlugin(hljs).VuePlugin;
+    Vue.use(plugin);
     let vue = new Vue({
       el: '#app',
       data: { code: "", language: "" },