webdevnerdstuff · webdevnerdstuff · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023 · Dec 2, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # Change Log
 All notable changes to the "vue-code-block" plugin will be documented in this file.
 
+## v2.3.0
+12-02-2023
+[main] (@webdevnerdstuff)
+* Improve/Fix TypeScript support
+
 ## v2.2.15
 11-13-2023
 [main] (@webdevnerdstuff)

diff --git a/dist/plugin/VCodeBlock.vue.d.ts b/dist/plugin/VCodeBlock.vue.d.ts
@@ -1,4 +1,4 @@
-import { Props } from '../types';
+import { Props } from '../plugin/types';
 declare function copyCode(): void;
 declare function runCode(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
@@ -70,16 +70,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     codeBlockRadius: string;
     runTab: boolean;
     tabs: boolean;
-    code: string | number | object | [];
-    label: string;
     browserWindow: boolean;
     cssPath: string;
+    code: string | number | object | [];
     copyButton: boolean;
     copyIcons: boolean;
     copyFailedText: string;
     copyText: string;
     copySuccessText: string;
     indent: number;
+    label: string;
     lang: string;
     prismjs: boolean;
     prismPlugin: boolean;

diff --git a/dist/plugin/composables/classes.d.ts b/dist/plugin/composables/classes.d.ts
@@ -1,4 +1,4 @@
-import { UseCodeBlockClasses, UseCopyButtonClasses, UseIconClasses, UseLabelClasses, UseTabClasses } from '../../types';
+import { UseCodeBlockClasses, UseCopyButtonClasses, UseIconClasses, UseLabelClasses, UseTabClasses } from '../../plugin/types';
 export declare const useCodeBlockClasses: UseCodeBlockClasses;
 export declare const useCopyButtonClasses: UseCopyButtonClasses;
 export declare const useIconClasses: UseIconClasses;

diff --git a/dist/plugin/composables/styles.d.ts b/dist/plugin/composables/styles.d.ts
@@ -1,4 +1,4 @@
-import { UseCodeTagStyles, UseHeaderStyles, UsePreTagStyles, UseTabGroupStyles } from '../../types';
+import { UseCodeTagStyles, UseHeaderStyles, UsePreTagStyles, UseTabGroupStyles } from '../../plugin/types';
 export declare const useCodeTagStyles: UseCodeTagStyles;
 export declare const useHeaderStyles: UseHeaderStyles;
 export declare const usePreTagStyles: UsePreTagStyles;

diff --git a/dist/plugin/index.d.ts b/dist/plugin/index.d.ts
@@ -1 +1,6 @@
-export { default as VCodeBlock } from './VCodeBlock.vue';
+import type { App } from 'vue';
+import type { Props } from './types';
+import VCodeBlock from './VCodeBlock.vue';
+export declare const codeBlockOptions: unique symbol;
+export declare function createVCodeBlock(options?: Props): (app: App) => void;
+export { VCodeBlock, };
diff --git a/dist/types/index.d.ts → dist/plugin/types/index.d.ts b/dist/types/index.d.ts → dist/plugin/types/index.d.ts
@@ -1,4 +1,6 @@
 import { CSSProperties, MaybeRef } from 'vue';
+import VCodeBlock from '../VCodeBlock.vue';
+export * from '../index';
 export type UseTheme = MaybeRef<string | boolean>;
 export interface Props {
     browserWindow?: boolean;
@@ -88,3 +90,10 @@ export interface UseTabGroupStyles {
         tabGap: MaybeRef<Props['tabGap']>;
     }): CSSProperties;
 }
+declare module "vue" {
+    interface ComponentCustomProperties {
+    }
+    interface GlobalComponents {
+        VCodeBlock: typeof VCodeBlock;
+    }
+}
diff --git a/dist/vue-code-block.cjs.js b/dist/vue-code-block.cjs.js
diff --git a/dist/vue-code-block.es.js b/dist/vue-code-block.es.js
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
 	"name": "@wdns/vue-code-block",
-	"version": "2.2.15",
+	"version": "2.3.0",
 	"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
 	"private": false,
 	"publishConfig": {
 		"access": "public"
 	},
 	"main": "dist/vue-code-block.cjs.js",
 	"module": "dist/vue-code-block.es.js",
-	"types": "dist/types/index.d.ts",
+	"types": "dist/plugin/types/index.d.ts",
 	"scripts": {
 		"dev": "vite",
 		"watch": "pnpm dev",

diff --git a/src/documentation/sections/UsageSection.vue b/src/documentation/sections/UsageSection.vue
@@ -15,12 +15,29 @@
 			<v-row>
 				<v-col cols="12">
 					<VCodeBlock
-						:code="usageGlobal"
+						:code="usageGlobalPlugin"
 						:highlightjs="selectedLibrary.id === 'highlightjs'"
-						label="Global Registration"
 						lang="javascript"
 						:prismjs="selectedLibrary.id === 'prismjs'"
 						:theme="selectedTheme"
+					>
+						<template #label>
+							Global Plugin Registration
+							<br>
+							<i>Global options have a higher precedence and will override local props</i>
+						</template>
+					</VCodeBlock>
+				</v-col>
+			</v-row>
+
+			<v-row>
+				<v-col cols="12">
+					<VCodeBlock
+						:code="usageGlobalComponent"
+						:highlightjs="selectedLibrary.id === 'highlightjs'"
+						label="Global Component Registration"
+						lang="javascript"
+						:prismjs="selectedLibrary.id === 'prismjs'"
 					/>
 				</v-col>
 			</v-row>
@@ -33,7 +50,6 @@
 						label="Local Registration"
 						lang="html"
 						:prismjs="selectedLibrary.id === 'prismjs'"
-						:theme="selectedTheme"
 					/>
 				</v-col>
 			</v-row>
@@ -46,7 +62,21 @@ const classes = inject('classes');
 const selectedLibrary = inject('selectedLibrary');
 const selectedTheme = inject('selectedTheme');
 
-const usageGlobal = `import { createApp } from 'vue';
+const usageGlobalPlugin = `import { createApp } from 'vue';
+import App from './App.vue';
+import { createVCodeBlock } from '@wdns/vue-code-block';
+
+const VCodeBlock = createVCodeBlock({
+  // options
+});
+
+const app = createApp(App);
+
+app.plugin(VCodeBlock);
+
+app.mount('#app');`;
+
+const usageGlobalComponent = `import { createApp } from 'vue';
 import App from './App.vue';
 import { VCodeBlock } from '@wdns/vue-code-block';
 

diff --git a/src/index.ts b/src/index.ts
diff --git a/src/main.ts b/src/main.ts
@@ -1,15 +1,15 @@
 import '@/libraries/fontawesome';
 import App from './App.vue';
-import { VCodeBlock } from './index';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerPlugins } from './plugins';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { createVCodeBlock } from './plugin';
 
 
 const app = createApp(App);
 
-app.component('VCodeBlock', VCodeBlock);
+app.use(createVCodeBlock());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);

diff --git a/src/playground/configs/playground.ts b/src/playground/configs/playground.ts
@@ -4,13 +4,15 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerPlugins } from '../../plugins';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import VCodeBlock from '../../index';
+import { createVCodeBlock } from '../../plugin/index';
+
 
 const app = createApp(PlaygroundApp);
+
+app.use(createVCodeBlock());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);
-app.component('VCodeBlock', VCodeBlock);
 
 registerPlugins(app);
 

diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue
@@ -9,9 +9,9 @@
 					:label="options.label"
 					:lang="options.lang"
 					:prismjs="options.prismjs"
-					:tabs="options.tabs"
 					:theme="options.theme"
-				/>
+				>
+				</VCodeBlock>
 			</v-container>
 		</v-card>
 	</v-col>