Merge pull request #47 from webdevnerdstuff/dev

Dev

.gitignore

@@ -23,6 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
+.history
+
 .stylelintcache
 src/plugin/themes/scss/highlight-template.scss
 dist/themes/scss/highlight-template.scss

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.2
+13-03-2024
+[main] (@webdevnerdstuff)
+* Change component to use `defineAsyncComponent`
+
 ## v2.3.1
 12-02-2023
 [main] (@webdevnerdstuff)

dist/plugin/VCodeBlock.vue.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../plugin/types';
+import { Props } from './types';
 declare function copyCode(): void;
 declare function runCode(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
@@ -30,7 +30,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     run: (...args: any[]) => void;
     "update:copy-status": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     browserWindow: boolean;
     cssPath: undefined;
     code: string;

dist/plugin/components/StatusIcons.vue.d.ts

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: StringConstructor;
         required: true;

dist/plugin/composables/classes.d.ts

@@ -1,4 +1,4 @@
-import { UseCodeBlockClasses, UseCopyButtonClasses, UseIconClasses, UseLabelClasses, UseTabClasses } from '../../plugin/types';
+import { UseCodeBlockClasses, UseCopyButtonClasses, UseIconClasses, UseLabelClasses, UseTabClasses } from '../types';
 export declare const useCodeBlockClasses: UseCodeBlockClasses;
 export declare const useCopyButtonClasses: UseCopyButtonClasses;
 export declare const useIconClasses: UseIconClasses;

dist/plugin/composables/helpers.d.ts

@@ -1,4 +1,4 @@
-import { UseConvertToUnit } from '../../plugin/types';
+import { UseConvertToUnit } from '../types';
 /**
 * Converts a string to a number with a unit.
 */

dist/plugin/composables/styles.d.ts

@@ -1,4 +1,4 @@
-import { UseCodeTagStyles, UseHeaderStyles, UsePreTagStyles, UseTabGroupStyles } from '../../plugin/types';
+import { UseCodeTagStyles, UseHeaderStyles, UsePreTagStyles, UseTabGroupStyles } from '../types';
 export declare const useCodeTagStyles: UseCodeTagStyles;
 export declare const useHeaderStyles: UseHeaderStyles;
 export declare const usePreTagStyles: UsePreTagStyles;

dist/plugin/types/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MaybeRef } from 'vue';
+import type { CSSProperties, MaybeRef } from 'vue';
 import VCodeBlock from '../VCodeBlock.vue';
 export * from '../index';
 export type UseTheme = MaybeRef<string | boolean>;

dist/scss/themeStyles.scss

@@ -475,76 +475,75 @@
 			// Themes that use common styles  //
 			// ? New themes that do not require additional styles should be added her (alpha order please) //
 			$hljs-themes: 'default',
-			'a11y-dark',
-			'a11y-light',
-			'agate',
-			'an-old-hope',
-			'androidstudio',
-			'arduino-light',
-			'arta',
-			'ascetic',
-			'atom-one-dark-reasonable',
-			'atom-one-dark',
-			'atom-one-light',
-			'base16-onedark',
-			'codepen-embed',
-			'color-brewer',
-			'dark',
-			'devibeans',
-			'docco',
-			'far',
-			'felipec',
-			'foundation',
-			'github-dark-dimmed',
-			'github-dark',
-			'github',
-			'gml',
-			'googlecode',
-			'grayscale',
-			'hybrid',
-			'idea',
-			'intellij-light',
-			'ir-black',
-			'isbl-editor-dark',
-			'isbl-editor-light',
-			'kimbie-dark',
-			'kimbie-light',
-			'lightfair',
-			'lioshi',
-			'magula',
-			'mono-blue',
-			'monokai-sublime',
-			'monokai',
-			'night-owl',
-			'nnfx-dark',
-			'nnfx-light',
-			'nord',
-			'obsidian',
-			'panda-syntax-dark',
-			'panda-syntax-light',
-			'paraiso-dark',
-			'paraiso-light',
-			'purebasic',
-			'qtcreator-dark',
-			'qtcreator-light',
-			'rainbow',
-			'routeros',
-			'school-book',
-			'shades-of-purple',
-			'srcery',
-			'stackoverflow-dark',
-			'stackoverflow-light',
-			'sunburst',
-			'tokyo-night-dark',
-			'tokyo-night-light',
-			'tomorrow-night-blue',
-			'tomorrow-night-bright',
-			'vs',
-			'vs2015',
-			'xcode',
-			'xt256',
-			'base16-onedark',
-			;
+				'a11y-dark',
+				'a11y-light',
+				'agate',
+				'an-old-hope',
+				'androidstudio',
+				'arduino-light',
+				'arta',
+				'ascetic',
+				'atom-one-dark-reasonable',
+				'atom-one-dark',
+				'atom-one-light',
+				'base16-onedark',
+				'codepen-embed',
+				'color-brewer',
+				'dark',
+				'devibeans',
+				'docco',
+				'far',
+				'felipec',
+				'foundation',
+				'github-dark-dimmed',
+				'github-dark',
+				'github',
+				'gml',
+				'googlecode',
+				'grayscale',
+				'hybrid',
+				'idea',
+				'intellij-light',
+				'ir-black',
+				'isbl-editor-dark',
+				'isbl-editor-light',
+				'kimbie-dark',
+				'kimbie-light',
+				'lightfair',
+				'lioshi',
+				'magula',
+				'mono-blue',
+				'monokai-sublime',
+				'monokai',
+				'night-owl',
+				'nnfx-dark',
+				'nnfx-light',
+				'nord',
+				'obsidian',
+				'panda-syntax-dark',
+				'panda-syntax-light',
+				'paraiso-dark',
+				'paraiso-light',
+				'purebasic',
+				'qtcreator-dark',
+				'qtcreator-light',
+				'rainbow',
+				'routeros',
+				'school-book',
+				'shades-of-purple',
+				'srcery',
+				'stackoverflow-dark',
+				'stackoverflow-light',
+				'sunburst',
+				'tokyo-night-dark',
+				'tokyo-night-light',
+				'tomorrow-night-blue',
+				'tomorrow-night-bright',
+				'vs',
+				'vs2015',
+				'xcode',
+				'xt256',
+				'base16-onedark',;
 
 			// Generate the styles for each commonly styled themes //
 			// ! Do not adjust the following code ! //

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wdns/vue-code-block",
-	"version": "2.3.1",
+	"version": "2.3.2",
 	"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
 	"private": false,
 	"publishConfig": {

src/plugin/index.ts

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue';
 import type { App } from 'vue';
 import type { Props } from './types';
 import './styles/cssVariables.css';
@@ -12,8 +13,9 @@ export const codeBlockOptions = Symbol();
 export function createVCodeBlock(options: Props = {}) {
 	const install = (app: App) => {
 		app.provide(codeBlockOptions, options);
-		app.component('CodeBlock', VCodeBlock);
-		app.component('VCodeBlock', VCodeBlock);
+
+		app.component('CodeBlock', defineAsyncComponent(() => import('./VCodeBlock.vue')));
+		app.component('VCodeBlock', defineAsyncComponent(() => import('./VCodeBlock.vue')));
 	};
 
 	return {