(end) Export component individually (#11)

* Bump version in package-lock.json

* Fix type file path

Fix #7

* Upgrade to highlight.js 11

* Export component individually

README.md

@@ -67,6 +67,28 @@ app.use(hljsVuePlugin)
 app.mount('#app')
 ```
 
+## Using component locally
+
+```vue
+<template>
+    <highlightjs
+        language="js"
+        code="console.log('Hello World');"
+    />
+</template>
+
+<script>
+import hljs from 'highlight.js/lib/common';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+
+export default {
+    components: {
+        highlightjs: hljsVuePlugin.component
+    }
+}
+</script>
+```
+
 ## Building the pre-built library from source
 
 We use rollup to build the `dist` distributable.

dist/vue.d.ts

@@ -1,4 +1,36 @@
 import { Plugin } from 'vue';
-declare const plugin: Plugin;
+declare const component: import("vue").DefineComponent<{
+    code: {
+        type: StringConstructor;
+        required: true;
+    };
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    autodetect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ignoreIllegals: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    className: import("vue").ComputedRef<string>;
+    highlightedCode: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    code: string;
+    language: string;
+    autodetect: boolean;
+    ignoreIllegals: boolean;
+} & {}>, {
+    language: string;
+    autodetect: boolean;
+    ignoreIllegals: boolean;
+}>;
+declare const plugin: Plugin & {
+    component: typeof component;
+};
 export default plugin;
 //# sourceMappingURL=vue.d.ts.map

package.json

@@ -4,7 +4,7 @@
   "description": "Highlight.js Vue Plugin",
   "main": "dist/highlightjs-vue.min.js",
   "module": "dist/highlightjs-vue.esm.min.js",
-  "types": "dist/highlightjs-vue.d.ts",
+  "types": "dist/vue.d.ts",
   "scripts": {
     "build": "rollup -c",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -21,7 +21,7 @@
     "typescript": "^4.2.4"
   },
   "dependencies": {
-    "highlight.js": "^10.7.2",
+    "highlight.js": "^11.0.1",
     "vue": "^3"
   },
   "files": [

src/vue.ts

@@ -73,10 +73,11 @@ const component = defineComponent({
     },
 })
 
-const plugin: Plugin = {
+const plugin: Plugin & { component: typeof component } = {
     install(app) {
         app.component('highlightjs', component)
     },
+    component,
 }
 
 export default plugin

tsconfig.json

@@ -8,10 +8,6 @@
         "allowSyntheticDefaultImports": true,
 
         "outDir": "dist",
-
-        "paths": {
-            "highlight.js/lib/core": ["./node_modules/highlight.js/types/index.d.ts"],
-        }
     },
     "exclude": [
         "node_modules",