Merge pull request #1234 from basics/next

Typescript Support & Fallback Init 🎉

Author: ThornWalli

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Project Changelog
 
+# [3.2.0-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.11...v3.2.0-next.1) (2025-03-04)
+
+
+### Bug Fixes
+
+* **dependencies:** add sort-css-media-queries package and update imports ([a7aa6e2](https://github.com/basics/nuxt-booster/commit/a7aa6e20314b94c2fd3e58fab31995ebf684e4c1))
+* **experimental:** added init fallback ([73239d9](https://github.com/basics/nuxt-booster/commit/73239d9ca23e8164a741d23575f03e6c80534f82))
+
+
+### Features
+
+* **typescript:** added typescript support ([f7c906a](https://github.com/basics/nuxt-booster/commit/f7c906a3016fb6283020cea6dd238a86b2167967))
+* **typescript:** imrpove typescript support ([9f839d3](https://github.com/basics/nuxt-booster/commit/9f839d390e4fb49f67c84ee8ce37caa9478fac76))
+* **typescript:** update components ([49cd8d7](https://github.com/basics/nuxt-booster/commit/49cd8d7a3ee32073474b7fe78f61dba0d826095e))
+
 ## [3.1.11](https://github.com/basics/nuxt-booster/compare/v3.1.10...v3.1.11) (2025-02-20)
 
 

CONTRIBUTING.md

@@ -1,4 +1,5 @@
 # Contributing to Nuxt-Booster
+
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 
 - Reporting a bug
@@ -8,25 +9,30 @@ We love your input! We want to make contributing to this project as easy and tra
 - Becoming a maintainer
 
 ## We Develop with Github
+
 We use github to host code, to track issues and feature requests, as well as accept pull requests.
 
 ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests
+
 Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests:
 
-1. Fork the repo and create your branch from `master`.
+1. Fork the repo and create your branch from `main`.
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes.
 5. Make sure your code lints.
 6. Issue that pull request!
 
 ## Any contributions you make will be under the MIT Software License
+
 In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.
 
 ## Report bugs using Github's [issues](https://github.com/basics/nuxt-booster/issues)
+
 We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/basics/nuxt-booster/issues/new/choose); it's that easy!
 
 ## Write bug reports with detail, background, and sample code
+
 **Great Bug Reports** tend to have:
 
 - A quick summary and/or background
@@ -40,7 +46,9 @@ We use GitHub issues to track public bugs. Report a bug by [opening a new issue]
 People *love* thorough bug reports. I'm not even kidding.
 
 ## License
+
 By contributing, you agree that your contributions will be licensed under its MIT License.
 
 ## References
+
 This document was adapted from the open-source contribution guidelines from [Brian A. Danielak](https://gist.github.com/briandk/3d2e8b3ec8daf5a27a62)

README.md

@@ -31,6 +31,7 @@
 [![npm version][npm-version-latest-src]][npm-version-latest-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 
+[![TypeScript][typescript-badge-src]](http://www.typescriptlang.org/)
 [![Renovate - Status][renovate-status-src]][renovate-status-href]
 [![License][license-src]][license-href]
 
@@ -111,6 +112,8 @@ Do you need further support, a consultation or a code review for an appropriate
 [renovate-status-src]: <https://img.shields.io/badge/renovate-enabled-brightgreen>
 [renovate-status-href]: <https://renovate.whitesourcesoftware.com/>
 
+[typescript-badge-src]: https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg
+
 [github-workflow-main-src]: <https://github.com/basics/nuxt-booster/workflows/Main/badge.svg?branch=main>
 [github-workflow-main-href]: <https://github.com/basics/nuxt-booster/actions?query=workflow%3AMain>
 [github-workflow-next-src]: <https://github.com/basics/nuxt-booster/workflows/Next/badge.svg?branch=next>

build.config.js

@@ -1,7 +1,9 @@
-export default {
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
   failOnWarn: false,
   externals: [
-    // package
+    'vue-bundle-renderer',
     '@nuxt/image',
     'browserslist-useragent-regexp',
     'cheerio',
@@ -12,7 +14,8 @@ export default {
     'image-meta',
     'pathe',
     'mime-types',
-    'mime-db'
+    'mime-db',
+    '#build/types/booster'
   ],
   hooks: {
     'build:done': async () => {
@@ -21,4 +24,4 @@ export default {
       await copy('src/assets', 'dist/assets');
     }
   }
-};
+});

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

@@ -1,10 +1,13 @@
 import { fileURLToPath } from 'url';
-import { defineConfig } from 'vitepress';
+// import type { DefaultTheme, UserConfig } from 'vitepress';
+import { defineConfigWithTheme } from 'vitepress';
 import markdownItInlineComments from 'markdown-it-inline-comments';
-import navigation from './navigation.js';
+import navigation from './navigation';
+
+// 'UserConfig<Config>
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig(() => ({
+export default defineConfigWithTheme({
   markdown: {
     config: md => {
       md.use(markdownItInlineComments);
@@ -58,7 +61,7 @@ export default defineConfig(() => ({
   sitemap: {
     hostname: 'https://basics.github.io/nuxt-booster/'
   }
-}));
+});
 
 function getBaseUrl() {
   return process.env.npm_config_base_url || process.env.BASE_URL || '/';

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

@@ -65,6 +65,7 @@ export default {
             { text: 'Setup', link: '/guide/setup' },
             { text: 'Options', link: '/guide/options' },
             { text: 'Usage', link: '/guide/usage' },
+            { text: 'Definitions', link: '/guide/definitions' },
             { text: 'Caveats', link: '/guide/caveats' }
           ]
         },
@@ -86,6 +87,10 @@ export default {
               text: 'useBoosterComponentObserver',
               link: '/composables/useBoosterComponentObserver'
             },
+            {
+              text: 'useBoosterProvide',
+              link: '/composables/useBoosterProvide'
+            },
             { text: '⚠️ useBoosterHead', link: '/composables/useBoosterHead' }
           ]
         },

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

@@ -11,9 +11,5 @@ export default {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
     });
-  },
-  // eslint-disable-next-line no-unused-vars
-  enhanceApp({ app, router, siteData }) {
-    // ...
   }
 };

docs/components/VPNavBarMenu.vue

@@ -1,8 +1,8 @@
-<script setup>
-import { useData } from 'vitepress/dist/client/theme-default/composables/data';
+<script setup lang="ts">
+import { useData } from 'vitepress';
 import VPNavBarMenuLink from 'vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue';
 import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue';
-import { useVersion } from '../composables/version.js';
+import useVersion from '../composables/version';
 
 const { theme } = useData();
 

docs/components/VPNavBarTitle.vue

@@ -1,10 +1,10 @@
-<script setup>
-import { useData } from 'vitepress/dist/client/theme-default/composables/data';
-import { useLangs } from 'vitepress/dist/client/theme-default/composables/langs';
-import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar';
-import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils';
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import { useLangs } from 'vitepress/dist/client/theme-default/composables/langs.js';
+import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils.js';
 import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue';
 import Logo from './Logo.vue';
+import { useSidebar } from 'vitepress/theme';
 
 const { site, theme } = useData();
 const { hasSidebar } = useSidebar();

docs/components/VPNavScreenMenu.vue

@@ -1,8 +1,8 @@
-<script lang="ts" setup>
-import { useData } from 'vitepress/dist/client/theme-default/composables/data';
+<script setup lang="ts">
+import { useData } from 'vitepress';
 import VPNavScreenMenuLink from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuLink.vue';
 import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue';
-import { useVersion } from '../composables/version.js';
+import useVersion from '../composables/version';
 
 const { theme } = useData();
 const { nav: versionNav } = useVersion();

docs/composables/version.js

@@ -0,0 +1,56 @@
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+
+export default function useVersion() {
+  const { theme, page } = useData();
+
+  const defaultVersion = computed(
+    () =>
+      theme.value.version.find(
+        ({ isDefault }: { isDefault: boolean }) => isDefault
+      )?.version
+  );
+
+  const currentVersion = computed(() =>
+    Number(
+      (/v(\d+)\/.*/.test(page.value.relativePath) &&
+        page.value.relativePath.replace(/v(\d+)\/.*/, '$1')) ||
+        defaultVersion.value
+    )
+  );
+
+  const nav = computed(() => {
+    return (
+      theme.value.version?.length && [
+        {
+          text: `v${currentVersion.value}`,
+          items: theme.value.version
+            .filter(
+              ({ version }: { version: number }) =>
+                version !== currentVersion.value
+            )
+            .map(
+              ({
+                version,
+                isDefault
+              }: {
+                version: number;
+                isDefault: boolean;
+              }) => {
+                return {
+                  text: `v${version}`,
+                  link: isDefault ? '/' : `/v${version}/`
+                };
+              }
+            )
+        }
+      ]
+    );
+  });
+
+  return {
+    defaultVersion,
+    currentVersion,
+    nav
+  };
+}

docs/composables/version.ts

@@ -45,19 +45,19 @@ The `BoosterIframe` is used like a normal [HTML Iframe](https://www.w3schools.co
 
 ````vue
 <template>
-  <booster-iframe v-bind="iframe" @load="onLoadIframe" />
+  <booster-iframe
+    :src="src"
+    :component-observer="componentObserver"
+    @load="onLoadIframe"
+  />
 </template>
 
-<script setup>
-const src = defineProps({
-  src: String,
-  componentObserver: {
-    type: Object,
-    default() {
-      return { trackVisibility: true, delay: 350 };
-    }
-  }
-});
+<script setup lang="ts">
+import BoosterIframe from '#booster/components/BoosterIframe.vue';
+import { ref } from 'vue';
+
+const src = ref('<url>');
+const componentObserver = ref({ trackVisibility: true, delay: 350 });
 
 const onLoadIframe = () => console.log('iframe loaded!');
 </script>

docs/src/components/booster-iframe.md

@@ -35,36 +35,28 @@ Important: For using `BoosterImage` do not disable `@nuxt/image` via `disableNux
 ````vue
 <template>
   <div>
-    <booster-image v-bind="{ source, title, alt }" @load="onLoadImage"  />
+    <booster-image
+      :source="source"
+      :title="title"
+      :alt="alt"
+      @load="onLoadImage"
+    />
   </div>
 </template>
 
-<script setup>
-import BoosterImage from '#booster/components/BoosterImage';
-
-defineProps({
-  source: {
-    type: Object,
-    default() {
-      return {
-        format: 'jpg',
-        src: '/img/image.jpg',
-        sizes: {
-          default: '100vw',
-          xxs: '100vw',
-          xs: '100vw',
-          sm: '100vw',
-          md: '100vw',
-          lg: '100vw',
-          xl: '100vw',
-          xxl: '100vw'
-        }
-      };
-    }
-  },
-  title: String,
-  alt: String
+<script setup lang="ts">
+import BoosterImage from '#booster/components/BoosterImage.vue';
+import { ref } from 'vue';
+
+const source = ref({
+  format: 'jpg',
+  src: '/img/image.jpg',
+  sizes: {
+    default: '1024px'
+  }
 });
+const title = ref('Image title');
+const alt = ref('Image alt');
 
 const onLoadImage = () => console.log('Image loaded!');
 </script>