Merge pull request #109 from owowagency/chore/treeshaking

owowagency · Dec 1, 2023 · 852130d · 852130d
2 parents e187c48 + 052bb66
commit 852130d
Show file tree

Hide file tree

Showing 125 changed files with 4,659 additions and 8,324 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -35,10 +35,4 @@ module.exports = {
         'vue/html-indent': ['error', 4],
         'vue/multi-word-component-names': 'off'
     },
-    overrides: [
-        {
-            files: ['**/*.test.ts'],
-            env: {jest: true},
-        },
-    ],
 };
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -15,7 +15,7 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         cache: yarn
-        node-version: 18.17.0
+        node-version: 18
         registry-url: https://registry.npmjs.org
 
     - run: yarn
@@ -31,7 +31,7 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         cache: yarn
-        node-version: 18.17.0
+        node-version: 18
         registry-url: https://npm.pkg.github.com/
 
     - env:
@@ -40,7 +40,7 @@ jobs:
         NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: yarn publish dist
 
-    - run: yarn build-storybook
+    - run: yarn storybook:build
 
     - uses: peaceiris/actions-gh-pages@v3
       with:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,9 +11,9 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16.13.0
+        node-version: 18
         cache: yarn
-        
+
     - name: Install dependencies
       run: yarn
 

diff --git a/.storybook/main.js → .storybook/main.ts b/.storybook/main.js → .storybook/main.ts
@@ -1,7 +1,10 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const path = require('path');
+import type { StorybookConfig } from "@storybook/vue3-vite";
 
-module.exports = {
+const config: StorybookConfig = {
+    stories: [
+        '../src/**/*.stories.mdx',
+        '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    ],
     addons: [
         {
             name: '@storybook/addon-docs',
@@ -11,20 +14,13 @@ module.exports = {
         },
         '@storybook/addon-links',
         '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
         '@storybook/preset-scss',
     ],
-    stories: [
-        '../src/**/*.stories.mdx',
-        '../src/**/*.stories.@(js|jsx|ts|tsx)',
-    ],
-    webpackFinal: (config) => {
-        config.resolve.plugins = [
-            ...(config.resolve.plugins || []),
-            new TsconfigPathsPlugin({
-                extensions: config.resolve.extensions,
-            }),
-        ];
-
-        return config;
+    framework: {
+        name: "@storybook/vue3-vite",
+        options: {},
     },
 };
+
+export default config;
diff --git a/.storybook/preview.js → .storybook/preview.ts b/.storybook/preview.js → .storybook/preview.ts
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -30,7 +30,7 @@ Follow the commit message structure of [semantic-release](https://github.com/sem
 
 ## Testing
 
-All code of this package is tested using [Jest](https://jestjs.io/).
+All code of this package is tested using [Vitest](https://vitest.dev/).
 
 ```bash
 yarn test

diff --git a/babel.config.js b/babel.config.js
diff --git a/docgen.config.js → docgen.config.cjs b/docgen.config.js → docgen.config.cjs
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 
 module.exports = {

diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -3,65 +3,71 @@
     "version": "1.15.0",
     "license": "MIT",
     "homepage": "https://owowagency.github.io/bootstrap-vue",
-    "entry": "bootstrap-vue",
-    "main": "bootstrap-vue.js",
-    "module": "bootstrap-vue.mjs",
-    "engines": {},
+    "type": "module",
+    "main": "./lib/bootstrap-vue.cjs",
+    "module": "./lib/bootstrap-vue.js",
+    "types": "./lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/index.d.ts",
+            "import": "./lib/bootstrap-vue.js",
+            "require": "./lib/bootstrap-vue.cjs"
+        }
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
     "scripts": {
-        "build": "yarn rollup -c rollup.config.js",
-        "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
-        "deploy-storybook": "gh-pages -d storybook-static",
-        "generate-docs": "vue-docgen",
+        "build": "vite build",
+        "test": "vitest run",
         "lint": "eslint src --ext .ts,.vue",
+        "generate-docs": "vue-docgen -c docgen.config.cjs",
         "postversion": "cp package.json ..",
-        "predeploy": "build-storybook",
-        "storybook": "start-storybook -p 6006",
-        "test": "jest"
+        "predeploy": "storybook build",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider storybook build",
+        "storybook:deploy": "gh-pages -d storybook-static"
     },
     "devDependencies": {
-        "@babel/core": "^7.16.0",
-        "@babel/preset-env": "^7.16.0",
-        "@babel/preset-typescript": "^7.16.0",
-        "@rollup/plugin-json": "^4.1.0",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^8.0.2",
         "@semantic-release/npm": "^8.0.3",
         "@semantic-release/release-notes-generator": "^10.0.3",
-        "@storybook/addon-actions": "6.4.9",
-        "@storybook/addon-docs": "^6.5.0-rc.1",
-        "@storybook/addon-essentials": "6.4.9",
-        "@storybook/addon-links": "6.4.9",
+        "@storybook/addon-docs": "7.6.3",
+        "@storybook/addon-essentials": "7.6.3",
+        "@storybook/addon-interactions": "7.6.3",
+        "@storybook/addon-links": "7.6.3",
+        "@storybook/blocks": "7.6.3",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/vue3": "6.4.9",
+        "@storybook/vue3": "7.6.3",
+        "@storybook/vue3-vite": "7.6.3",
         "@types/bootstrap": "^5.1.8",
-        "@types/jest": "^27.0.2",
+        "@types/jsdom": "^21.1.6",
         "@types/uuid": "^8.3.3",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.3.1",
+        "@vitejs/plugin-vue": "^4.5.1",
         "@vue/eslint-config-typescript": "^9.0.1",
-        "@vue/test-utils": "^2.0.0-rc.16",
-        "@vue/vue3-jest": "^27.0.0-alpha.3",
-        "babel-core": "^7.0.0-bridge.0",
-        "babel-jest": "^27.3.1",
-        "babel-loader": "^8.2.3",
+        "@vue/test-utils": "^2.4.3",
+        "@vue/tsconfig": "^0.4.0",
         "eslint": "^8.2.0",
         "eslint-plugin-unused-imports": "^2.0.0",
         "eslint-plugin-vue": "^8.0.3",
         "gh-pages": "^3.2.3",
-        "jest": "^27.3.1",
-        "rollup": "^2.60.0",
-        "rollup-plugin-copy": "^3.4.0",
-        "rollup-plugin-delete": "^2.0.0",
-        "rollup-plugin-typescript2": "^0.31.1",
-        "rollup-plugin-vue": "^6.0.0",
+        "jsdom": "^23.0.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "sass": "^1.43.4",
         "sass-loader": "10.1.1",
-        "ts-jest": "^27.0.7",
-        "tsconfig-paths-webpack-plugin": "^3.5.2",
+        "storybook": "7.6.3",
         "typescript": "^4.4.4",
-        "vue": "^3.2.20",
-        "vue-docgen-cli": "^4.45.0",
+        "vite": "^5.0.4",
+        "vite-plugin-dts": "^3.6.4",
+        "vite-plugin-static-copy": "^1.0.0",
+        "vitest": "^0.34.6",
+        "vue": "^3.2.26",
+        "vue-docgen-cli": "^4.67.0",
         "vue-eslint-parser": "^8.0.1",
         "vue-loader": "^16.8.3"
     },

diff --git a/rollup.config.js b/rollup.config.js
diff --git a/src/components/Accordion/Accordion.test.ts b/src/components/Accordion/Accordion.test.ts
@@ -1,4 +1,5 @@
 import Accordion from '.';
+import {describe} from 'vitest';
 
 describe('template', () => {
     componentRenderTest(Accordion, {

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.ts.snap b/src/components/Accordion/__snapshots__/Accordion.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`template renders default 1`] = `
+exports[`template > renders default 1`] = `
 "<div id=\\"dont-change-please\\" class=\\"accordion\\">
   <!--
         @slot Displays the content of the accordion

diff --git a/src/components/AccordionItem/AccordionItem.test.ts b/src/components/AccordionItem/AccordionItem.test.ts
@@ -1,3 +1,4 @@
+import {describe, expect, it} from 'vitest';
 import AccordionItem from '.';
 import {shallowMount} from '@vue/test-utils';
 

diff --git a/src/components/AccordionItem/AccordionItem.vue b/src/components/AccordionItem/AccordionItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="accordion-item">
-        <component
+        <Component
             :is="headerTag"
             class="accordion-header"
             :class="headerClass"
@@ -16,7 +16,7 @@
                     {{ header }}
                 </slot>
             </button>
-        </component>
+        </Component>
 
         <div
             :id="`${id}`"

diff --git a/src/components/AccordionItem/__snapshots__/AccordionItem.test.ts.snap b/src/components/AccordionItem/__snapshots__/AccordionItem.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`template renders default 1`] = `
+exports[`template > renders default 1`] = `
 "<div class=\\"accordion-item\\">
   <h2 class=\\"accordion-header\\"><button class=\\"accordion-button collapsed\\" data-bs-toggle=\\"collapse\\" data-bs-target=\\"#dont-change-please\\">
       <!-- @slot Displays the header of the accordion -->
@@ -13,7 +13,7 @@ exports[`template renders default 1`] = `
 </div>"
 `;
 
-exports[`template renders given custom classes 1`] = `
+exports[`template > renders given custom classes 1`] = `
 "<div class=\\"accordion-item custom-class\\">
   <h2 class=\\"accordion-header header-class\\"><button class=\\"accordion-button collapsed button-class\\" data-bs-toggle=\\"collapse\\" data-bs-target=\\"#owow-accordion-item\\">
       <!-- @slot Displays the header of the accordion -->
@@ -26,7 +26,7 @@ exports[`template renders given custom classes 1`] = `
 </div>"
 `;
 
-exports[`template renders header 1`] = `
+exports[`template > renders header 1`] = `
 "<div class=\\"accordion-item\\">
   <h5 class=\\"accordion-header\\"><button class=\\"accordion-button collapsed\\" data-bs-toggle=\\"collapse\\" data-bs-target=\\"#owow-accordion-item\\">
       <!-- @slot Displays the header of the accordion -->find-me

diff --git a/src/components/Alert/Alert.test.ts b/src/components/Alert/Alert.test.ts
@@ -1,10 +1,12 @@
+import {describe, expect, it, vi} from 'vitest';
 import Alert from '.';
 import {shallowMount} from '@vue/test-utils';
 
-jest.mock('bootstrap', () => ({
+vi.mock('bootstrap', () => ({
     Alert: {
-        getOrCreateInstance: jest.fn(),
+        getOrCreateInstance: vi.fn(),
     },
+    __v_isShallow: true,
 }));
 
 

diff --git a/src/components/Alert/__snapshots__/Alert.test.ts.snap b/src/components/Alert/__snapshots__/Alert.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`template renders default 1`] = `
+exports[`template > renders default 1`] = `
 "<div class=\\"alert alert-primary\\">
   <!-- @slot Displays content inside the alert -->
 </div>"

diff --git a/src/components/Badge/Badge.stories.ts b/src/components/Badge/Badge.stories.ts
@@ -18,7 +18,7 @@ const template = (args) => ({
     setup() {
         return {args};
     },
-    template: '<Badge v-bind="args">I am an Badge</Badge>',
+    template: '<Badge v-bind="args">I am a Badge</Badge>',
 });
 
 export const Default = template.bind({});