fix: build for esm & review script names

Author: elevatebart

.github/workflows/release.yml

@@ -45,10 +45,10 @@ jobs:
           token: ${{ secrets.SURGE_TOKEN }}
 
       - name: Build
-        run: npm run lib:build
+        run: npm run build:lib
 
       - name: Typings
-        run: npm run lib:types
+        run: npm run types:lib
 
       - name: Release
         run: npx semantic-release

package.json

@@ -4,9 +4,9 @@
   "author": "Bart Ledoux <ledouxb@me.com>",
   "scripts": {
     "serve": "vite serve",
-    "lib:build": "vite build --config ./vite.config.lib.ts",
-    "lib:types": "vue-tsc --declaration --emitDeclarationOnly --project ./tsconfig.lib.json",
-    "types:check": "vue-tsc --project ./tsconfig.app.json",
+    "types": "vue-tsc --project ./tsconfig.app.json",
+    "build:lib": "vite build --config ./vite.config.lib.ts",
+    "types:lib": "vue-tsc --declaration --emitDeclarationOnly --project ./tsconfig.lib.json",
     "build:demo": "vite build",
     "start": "vite serve",
     "preview": "vite preview --port 4173",

src/utils/highlight.ts

@@ -1,11 +1,15 @@
-import { highlight as prismHighlight, languages } from "prismjs";
+// NOTE: this weird way of importing prism is necessary because 
+// prism is not a ESM ready library
+import pkg from "prismjs";
+const { highlight: prismHighlight, languages } = pkg;
+
+import "prismjs/components/prism-clike.js";
+import "prismjs/components/prism-markup.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-css.js";
 
-import "prismjs/components/prism-clike";
-import "prismjs/components/prism-markup";
-import "prismjs/components/prism-javascript";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-jsx";
-import "prismjs/components/prism-css";
 import getScript from "./getScript";
 import { parseComponent } from "vue-inbrowser-compiler-sucrase";