fix(typescript): improve types

Author: ThornWalli

build.config.js

@@ -3,18 +3,14 @@ import { defineBuildConfig } from 'unbuild';
 export default defineBuildConfig({
   entries: [
     {
-      input: './src',
       builder: 'mkdist',
-      pattern: ['**/*.vue'],
-      addRelativeDeclarationExtensions: true,
-      ext: 'js',
-      esbuild: {
-        jsxImportSource: 'vue',
-        jsx: 'automatic',
-        jsxFactory: 'h'
-      }
+      input: './src',
+      pattern: ['**/*.ts'],
+      declaration: false,
+      format: 'cjs',
+      loaders: ['js'],
+      ext: 'cjs'
     },
-    { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'cjs', loaders: ['js'], ext: 'cjs' },
     { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'esm', loaders: ['js'], ext: 'js' }
   ],
   declaration: true,

docs/src/components/content-container.md

@@ -16,18 +16,27 @@ With each nested `ContentContainer` the element structure becomes one level deep
 
 The appropriate HTML element for the page structure is determined based on the `level`. (e.g. `main`, `article`, `section`)
 
-## Properties
+## Type
 
 ```ts
-type ContentContainerProps = {
+
+declare interface ContentContainerProps {
   tag?: string;
   rootTags?: string[];
   contentTags?: string[];
   level?: number;
   debug?: boolean;
-};
+}
+
+declare interface ContentContainerContext extends ContentContainerProps {
+  parentLevel: number;
+  currentLevel: number;
+  currentTag: string;
+}
 ```
 
+## Properties
+
 ### tag
 
 - Type: `String`

docs/src/components/content-headline.md

@@ -18,13 +18,19 @@ The level of the heading is taken from the `ContentContainer`.
 
 The deeper the nesting, the smaller the heading.
 
-## Properties
+## Type
 
 ```ts
-type ContentHeadlineProps = {
+declare interface ContentHeadlineProps {
   tag: string;
   debug: boolean;
-};
+}
+
+declare interface ContentHeadlineContext extends ContentHeadlineProps {
+  parentLevel: number;
+  currentLevel: number;
+  currentTag: string;
+}
 ```
 
 ### tag

docs/src/composables/use-content-container.md

@@ -32,33 +32,35 @@ const { currentTag } = useContentContainer();
 
 ```
 
-## Options
+## Type
 
 ```ts
-type ContentContainerOptions = {
-  tag?: string | undefined;
+function useContentContainer(options?: ContentContainerOptions): ContentContainerReturn;
+
+declare interface ContentContainerOptions {
+  tag?: string;
   contentTags?: Array<string>;
   rootTags?: Array<string>;
   level?: number;
-};
+}
+
+declare interface ContentContainerReturn {
+  parentLevel: ComputedRef<number>;
+  currentLevel: ComputedRef<number>;
+  currentTag: ComputedRef<string>;
+}
 ```
 
+## Options
+
 | Property      | Type     | Description                               | Default Value                                                   |
 | ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- |
 | `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`                                                     |
 | `contentTags` | `Array`  | Available tags for the content structure. | `inject('semanticStructure_contentTags', ['article', 'section'])` |
 | `rootTags`    | `Array`  | Available tags for the root structure.    | `inject('semanticStructure_rootTags', ['main'])`                  |
 | `level`       | `Number` | Can be used to overwrite the level.       | `undefined`                                                     |
 
-## Return
-
-```ts
-type ContentContainerReturn = {
-  parentLevel: ComputedRef<number>;
-  currentLevel: ComputedRef<number>;
-  currentTag: ComputedRef<string>;
-};
-```
+## Result
 
 | Property       | Type                   | Description           |
 | -------------- | ---------------------- | --------------------- |

docs/src/composables/use-content-headline.md

@@ -33,28 +33,30 @@ const { currentTag } = useContentHeadline();
 
 ```
 
-## Options
+## Type
 
 ```ts
-type ContentHeadlineOptions = {
-  tag?: string | undefined;
-};
-```
+function useContentHeadline(options?: ContentHeadlineOptions): ContentHeadlineReturn;
 
-| Property | Type                  | Description         | Default Value |
-| -------- | --------------------- | ------------------- | ------------- |
-| `tag`    | `String`\|`undefined` | Tag for the element | `undefined`   |
-
-## Return
+declare interface ContentHeadlineOptions {
+  tag?: string;
+}
 
-```ts
-type ContentHeadlineReturn = {
+declare interface ContentHeadlineReturn {
   parentLevel: ComputedRef<number>;
   currentLevel: ComputedRef<number>;
   currentTag: ComputedRef<string>;
-};
+}
 ```
 
+## Options
+
+| Property | Type                  | Description         | Default Value |
+| -------- | --------------------- | ------------------- | ------------- |
+| `tag`    | `String`\|`undefined` | Tag for the element | `undefined`   |
+
+## Result
+
 | Property       | Type                   | Description           |
 | -------------- | ---------------------- | --------------------- |
 | `parentLevel`  | `ComputedRef<Number>;` | Get parent level.     |

package.json

@@ -21,11 +21,13 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],

src/ContentContainer.ts

@@ -1,19 +1,19 @@
 import { defineComponent, h, inject, provide, type ComponentOptions } from 'vue';
 import useContentContainer from './useContentContainer';
 
-export type ContentContainerProps = {
+export interface ContentContainerProps {
   tag?: string;
   rootTags?: string[];
   contentTags?: string[];
   level?: number;
   debug?: boolean;
-};
+}
 
-export type ContentContainerContext = ContentContainerProps & {
+export interface ContentContainerContext extends ContentContainerProps {
   parentLevel: number;
   currentLevel: number;
   currentTag: string;
-};
+}
 
 const ContentContainer = defineComponent({
   name: 'ContentContainer',

src/ContentHeadline.ts

@@ -1,16 +1,16 @@
 import { defineComponent, h, inject, type ComponentOptions } from 'vue';
 import useContentHeadline from './useContentHeadline';
 
-export type ContentHeadlineProps = {
+export interface ContentHeadlineProps {
   tag: string;
   debug: boolean;
-};
+}
 
-export type ContentHeadlineContext = ContentHeadlineProps & {
+export interface ContentHeadlineContext extends ContentHeadlineProps {
   parentLevel: number;
   currentLevel: number;
   currentTag: string;
-};
+}
 
 const ContentHeadline = defineComponent({
   name: 'ContentHeadline',

src/index.ts

@@ -1,5 +1,11 @@
 export { default as ContentContainer } from './ContentContainer';
 export { default as ContentHeadline } from './ContentHeadline';
 
+export type { ContentHeadlineProps, ContentHeadlineContext } from './ContentHeadline';
+export type { ContentContainerProps, ContentContainerContext } from './ContentContainer';
+
 export { default as useContentContainer } from './useContentContainer';
 export { default as useContentHeadline } from './useContentHeadline';
+
+export type { ContentContainerOptions, ContentContainerReturn } from './useContentContainer';
+export type { ContentHeadlineOptions, ContentHeadlineReturn } from './useContentHeadline';

src/useContentContainer.ts

@@ -1,24 +1,24 @@
 import { provide, inject, computed, type ComputedRef } from 'vue';
 
-export type ContentContainerOptions = {
+export interface ContentContainerOptions {
   tag?: string | undefined;
   rootTags?: string[];
   contentTags?: string[];
   level?: number;
-};
+}
 
-export type ContentContainerResult = {
+export interface ContentContainerReturn {
   parentLevel: ComputedRef<number>;
   currentLevel: ComputedRef<number>;
   currentTag: ComputedRef<string>;
-};
+}
 
 export default function useContentContainer({
   tag,
   contentTags,
   rootTags,
   level
-}: ContentContainerOptions = {}): ContentContainerResult {
+}: ContentContainerOptions = {}): ContentContainerReturn {
   tag = tag || undefined;
   rootTags = rootTags || inject('semanticStructure_rootTags', ['main']);
   contentTags = contentTags || inject('semanticStructure_contentTags', ['article', 'section']);

src/useContentHeadline.ts

@@ -1,14 +1,14 @@
 import { inject, computed, type ComputedRef } from 'vue';
 
-export type ContentHeadlineOptions = {
+export interface ContentHeadlineOptions {
   tag?: string | undefined;
-};
+}
 
-export type ContentHeadlineReturn = {
+export interface ContentHeadlineReturn {
   parentLevel: ComputedRef<number>;
   currentLevel: ComputedRef<number>;
   currentTag: ComputedRef<string>;
-};
+}
 
 export default function useContentHeadline({ tag }: ContentHeadlineOptions = {}): ContentHeadlineReturn {
   const parentLevel = computed(() => inject('semanticStructure_parentLevel', 1) + 1);