(chore) no longer bundle Vue.js plugin

joshgoebel · Mar 22, 2021 · fbdbc7b · fbdbc7b
1 parent bfa6600
commit fbdbc7b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -147,10 +147,11 @@ div.code {
 
 ## Using with Vue.js
 
-Simply register the plugin with Vue:
+Simply build & register the plugin with Vue:
 
 ```js
-Vue.use(hljs.vuePlugin);
+import { buildVuePlugin } from "highlight.js/lib/vue_plugin.js";
+Vue.use(buildVuePlugin(hljs).VuePlugin);
 ```
 
 And you'll be provided with a `highlightjs` component for use

diff --git a/src/highlight.js b/src/highlight.js
@@ -12,7 +12,6 @@ import * as utils from './lib/utils.js';
 import * as MODES from './lib/modes.js';
 import { compileLanguage } from './lib/mode_compiler.js';
 import * as packageJSON from '../package.json';
-import { BuildVuePlugin } from "./plugins/vue.js";
 import * as logger from "./lib/logger.js";
 
 const escape = utils.escapeHTML;
@@ -898,9 +897,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/src/plugins/vue.js b/src/plugins/vue.js
@@ -5,7 +5,7 @@ function hasValueOrEmptyAttribute(value) {
   return Boolean(value || value === "");
 }
 
-export function BuildVuePlugin(hljs) {
+export default function BuildVuePlugin(hljs) {
   const Component = {
     props: ["language", "code", "autodetect"],
     data: function() {
@@ -61,8 +61,9 @@ export function BuildVuePlugin(hljs) {
   const VuePlugin = {
     install(Vue) {
       Vue.component('highlightjs', Component);
-    }
+    },
+    component: Component
   };
 
-  return { Component, VuePlugin };
+  return VuePlugin;
 }
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: "hljsVuePlugin", 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/build_node.js b/tools/build_node.js
@@ -34,6 +34,13 @@ async function buildNodeLanguage(language) {
   await rollupWrite(input, output);
 }
 
+async function buildNodeVuePluginJS() {
+  const input = { ...config.rollup.node.input, input: `src/plugins/vue.js` };
+  const output = { ...config.rollup.node.output, file: `${process.env.BUILD_DIR}/lib/vue_plugin.js` };
+  await rollupWrite(input, output);
+}
+
+
 async function buildNodeHighlightJS() {
   const input = { ...config.rollup.node.input, input: `src/highlight.js` };
   const output = { ...config.rollup.node.output, file: `${process.env.BUILD_DIR}/lib/core.js` };
@@ -81,9 +88,11 @@ async function buildNode(options) {
 
   await buildNodeIndex(languages);
   await buildLanguages(languages);
+  await buildNodeVuePluginJS();
 
   log("Writing highlight.js");
   await buildNodeHighlightJS();
+
 }
 
 module.exports.build = buildNode;

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,7 @@ <h3>Markup</h3>
       });
     }());
 
-    Vue.use(hljs.vuePlugin);
+    Vue.use(hljsVuePlugin(hljs));
     let vue = new Vue({
       el: '#app',
       data: { code: "", language: "" },