Merge pull request #98 from basics/feature/typescript

fix(typescript): added typescript support

Author: ThornWalli

build.config.js

@@ -14,8 +14,8 @@ export default defineBuildConfig({
         jsxFactory: 'h'
       }
     },
-    { builder: 'mkdist', input: './src', pattern: ['**/*.js'], format: 'cjs', loaders: ['js'], ext: 'cjs' },
-    { builder: 'mkdist', input: './src', pattern: ['**/*.js'], format: 'esm', loaders: ['js'], ext: 'js' }
+    { 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,
   clean: true,

docs/.vitepress/config.js renamed to docs/.vitepress/config.ts

@@ -1,21 +1,9 @@
-// import { defineConfig } from 'vitepress';
-
-// // https://vitepress.dev/reference/site-config
-// export default defineConfig({
-//   title: 'Vue Semantic Structure',
-//   description: 'Helper for semantic HTML structure.',
-//   themeConfig: {
-//     // https://vitepress.dev/reference/default-theme-config
-//   }
-// });
-
 import { fileURLToPath } from 'url';
-import { defineConfig } from 'vitepress';
+import { DefaultTheme, defineConfig, ThemeOptions, UserConfig } from 'vitepress';
 import markdownItInlineComments from 'markdown-it-inline-comments';
 import navigation from './navigation.js';
 
-// https://vitepress.dev/reference/site-config
-export default defineConfig(() => ({
+export default defineConfig({
   head: [
     ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }],
 
@@ -68,7 +56,12 @@ export default defineConfig(() => ({
   sitemap: {
     hostname: 'https://basics.github.io/vue-semantic-structure/'
   }
-}));
+} as UserConfig<DefaultTheme.Config> & {
+  themeConfig: ThemeOptions & {
+    logoComponent: boolean;
+    socialLinks: { icon: string; link: string }[];
+  };
+});
 
 function getBaseUrl() {
   return process.env.npm_config_base_url || process.env.BASE_URL || '/';

docs/.vitepress/navigation.js renamed to docs/.vitepress/navigation.ts

@@ -18,6 +18,16 @@ The appropriate HTML element for the page structure is determined based on the `
 
 ## Properties
 
+```ts
+type Props = {
+  tag?: string;
+  rootTags?: string[];
+  contentTags?: string[];
+  level?: number;
+  debug?: boolean;
+};
+```
+
 ### tag
 
 - Type: `String`
@@ -27,7 +37,7 @@ Tag for the element.
 
 ### rootTags
 
-- Type: `Array`
+- Type: `Array<String>`
 - Default: `inject('semanticStructure_rootTags', ['main'])`
 
 Available tags for the root structure.
@@ -36,7 +46,7 @@ Available tags for the root structure.
 
 ### contentTags
 
-- Type: `Array`
+- Type: `Array<String>`
 - Default: `inject('semanticStructure_contentTags', ['article', 'section'])`
 
 Available tags for the content structure.

docs/.vitepress/theme/index.js renamed to docs/.vitepress/theme/index.ts

@@ -20,6 +20,13 @@ The deeper the nesting, the smaller the heading.
 
 ## Properties
 
+```ts
+type Props = {
+  tag: string;
+  debug: boolean;
+};
+```
+
 ### tag
 
 - Type: `String`

docs/src/components/content-container.md

@@ -34,6 +34,15 @@ const { currentTag } = useContentContainer();
 
 ## Options
 
+```ts
+type ContentContainerOptions = {
+  tag?: string | undefined;
+  contentTags?: Array<string>;
+  rootTags?: Array<string>;
+  level?: number;
+};
+```
+
 | Property      | Type     | Description                               | Default Value                                                   |
 | ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- |
 | `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`                                                     |
@@ -43,8 +52,16 @@ const { currentTag } = useContentContainer();
 
 ## Return
 
-| Property       | Type     | Description           |
-| -------------- | -------- | --------------------- |
-| `currentTag`   | `String` | Get current html tag. |
-| `parentLevel`  | `Number` | Get parent level.     |
-| `currentLevel` | `Number` | Get current level.    |
+```ts
+type ContentContainerReturn = {
+  parentLevel: ComputedRef<number>;
+  currentLevel: ComputedRef<number>;
+  currentTag: ComputedRef<string>;
+};
+```
+
+| Property       | Type                   | Description           |
+| -------------- | ---------------------- | --------------------- |
+| `parentLevel`  | `ComputedRef<Number>;` | Get parent level.     |
+| `currentLevel` | `ComputedRef<Number>`  | Get current level.    |
+| `currentTag`   | `ComputedRef<String>`  | Get current html tag. |

docs/src/components/content-headline.md

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

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

@@ -3,10 +3,12 @@ import pluginJs from '@eslint/js';
 import pluginVue from 'eslint-plugin-vue';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import eslintIgnores from './eslint.ignores.js';
+import tseslint from 'typescript-eslint';
 
 export default [
   eslintIgnores,
   pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
   ...pluginVue.configs['flat/essential'],
   eslintPluginPrettierRecommended,
   {