chore: Migrated Vite to Rollup, Removed Vite related dependencies

packages/vue/jest.config.ts

@@ -27,8 +27,10 @@ const config: Config = {
   moduleNameMapper: {
     '\\.css$': '<rootDir>/__mocks__/styleMock.js',
     '^nanoid$': '<rootDir>/../../node_modules/nanoid',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^./src/components/(.*)$': '<rootDir>/src/components/$1',
   },
-  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  modulePathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/.rollup.cache/'],
   setupFilesAfterEnv: ['./jest.setup.ts'],
   transform: {
     '^.+\\.(ts)$': 'ts-jest',
@@ -38,6 +40,8 @@ const config: Config = {
   testEnvironmentOptions: {
     customExportConditions: ['node', 'node-addons'],
   },
+  roots: ['<rootDir>/src', '<rootDir>/__tests__'],
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?|vue)$',
 };
 
 export default config;

packages/vue/package.json

@@ -28,8 +28,8 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
     "clean": "rimraf dist node_modules",
     "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-vue\"'",
     "lint": "yarn typecheck && eslint . --ext .vue,.js,.jsx,.ts,.tsx",
@@ -48,21 +48,31 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-dynamic-import-vars": "^1.4.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@rushstack/eslint-patch": "^1.5.1",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/vue": "^6.6.0",
     "@types/node": "18.8.0",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
     "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.7.0",
+    "esbuild": "^0.25.1",
     "eslint-plugin-vue": "^9.17.0",
+    "rollup": "^4.35.0",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-node-externals": "^7.1.3",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "unplugin-vue-components": "^0.25.0",
-    "vite-jest": "^0.1.4"
+    "rollup-plugin-vue": "^6.0.0",
+    "unplugin-vue-components": "^0.25.0"
   },
   "peerDependencies": {
     "@aws-amplify/core": "*",

packages/vue/rollup.config.mjs

@@ -0,0 +1,121 @@
+import { defineConfig } from 'rollup';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
+import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
+import externals from 'rollup-plugin-node-externals';
+import esbuild from 'rollup-plugin-esbuild';
+import typescript2 from 'rollup-plugin-typescript2';
+
+// ES Module equivalent for __dirname
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const resolvePath = (str) => path.resolve(__dirname, str);
+
+// common config settings
+const input = 'src/index.ts';
+const sourceMap = true;
+const tsconfig = 'tsconfig.dist.json';
+
+// External dependencies that shouldn't be bundled
+const external = [
+  '@aws-amplify/auth',
+  '@aws-amplify/core',
+  '@aws-amplify/core/internals/utils',
+  'aws-amplify',
+  'aws-amplify/auth',
+  'aws-amplify/core',
+  'aws-amplify/utils',
+  'vue',
+  'qrcode',
+  'nanoid',
+  '@vueuse/core',
+  '@xstate/vue',
+  'xstate'
+];
+
+/**
+ * @type {import('rollup').OutputOptions}
+ */
+const cjsOutput = {
+  file: resolvePath('./dist/index.cjs'),
+  format: 'cjs',
+  exports: 'named',
+  sourcemap: sourceMap,
+  globals: { vue: 'Vue' }
+};
+
+/**
+ * @type {import('rollup').OutputOptions}
+ */
+const esmOutput = {
+  file: resolvePath('./dist/index.js'),
+  format: 'es',
+  exports: 'named',
+  sourcemap: sourceMap
+};
+
+// Following React's approach with Vue-specific additions
+const config = defineConfig({
+  input: resolvePath(input),
+  output: [cjsOutput, esmOutput],
+  external,
+  plugins: [
+    // Exclude test files and node_modules
+    externals({
+      exclude: ['tslib'],
+    }),
+    resolve({
+      extensions: ['.js', '.ts', '.vue']
+    }),
+    commonjs(),
+    // Vue-specific plugins
+    vue({
+      preprocessStyles: true,
+      template: {
+        isProduction: true
+      }
+    }),
+    postcss({
+      extract: 'style.css',
+      minimize: true,
+      sourceMap: true
+    }),
+    // Use typescript2 for proper declaration file generation
+    typescript2({
+      check: false,
+      tsconfig: resolvePath(tsconfig),
+      tsconfigOverride: {
+        compilerOptions: {
+          sourceMap: true,
+          declaration: true,
+          declarationMap: true,
+          outDir: resolvePath('./dist'),
+          declarationDir: resolvePath('./dist')
+        },
+        exclude: [
+          "**/__tests__/**",
+          "**/__mocks__/**",
+          "**/*.spec.ts",
+          "global-spec.ts",
+          "node_modules"
+        ]
+      }
+    }),
+    // Use esbuild for faster JavaScript transpilation
+    esbuild({
+      include: /\.[jt]sx?$/,
+      exclude: /node_modules|__tests__|__mocks__/,
+      sourceMap: true,
+      target: 'es2015',
+      tsconfig: resolvePath(tsconfig)
+    }),
+    dynamicImportVars
+  ]
+});
+
+export default config; 

packages/vue/src/components/authenticator.vue

@@ -363,4 +363,4 @@ const hasRouteComponent = computed(() => {
     :signOut="signOut as any"
     :send="send as any"
   ></slot>
-</template>
+</template>

packages/vue/src/components/confirm-reset-password.vue

@@ -100,4 +100,4 @@ function onBlur(e: Event) {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/confirm-sign-in.vue

@@ -95,4 +95,4 @@ const onBackToSignInClicked = (): void => {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/confirm-sign-up.vue

@@ -107,4 +107,4 @@ const onLostCodeClicked = (): void => {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/confirm-verify-user.vue

@@ -90,4 +90,4 @@ const onSkipClicked = (): void => {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/federated-sign-in.vue

@@ -130,4 +130,4 @@ const orText = computed(() => getOrText());
       :data-label="orText"
     />
   </base-wrapper>
-</template>
+</template>

packages/vue/src/components/force-new-password.vue

@@ -113,4 +113,4 @@ function onBlur(e: Event) {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/forgot-password.vue

@@ -94,4 +94,4 @@ const onBackToSignInClicked = (): void => {
       </base-wrapper>
     </base-form>
   </slot>
-</template>
+</template>

packages/vue/src/components/setup-totp.vue

@@ -158,4 +158,4 @@ const onBackToSignInClicked = (): void => {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/src/components/sign-in.vue

@@ -109,4 +109,4 @@ const onForgotPasswordClicked = (): void => {
       </slot>
     </base-footer>
   </slot>
-</template>
+</template>

packages/vue/src/components/sign-up.vue

@@ -87,4 +87,4 @@ const onSignUpSubmit = (e: Event): void => {
       <slot name="footer"> </slot>
     </base-footer>
   </slot>
-</template>
+</template>

packages/vue/src/components/verify-user.vue

@@ -146,4 +146,4 @@ const onSkipClicked = (): void => {
       </base-form>
     </base-wrapper>
   </slot>
-</template>
+</template>

packages/vue/tsconfig.dist.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "sourceMap": true,
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": [
+    "__tests__",
+    "__mocks__",
+    "node_modules",
+    "**/*.spec.ts",
+    "**/__tests__/**",
+    "global-spec.ts"
+  ]
+} 

packages/vue/tsconfig.json

@@ -1,12 +1,20 @@
 {
   "extends": "@aws-amplify/typescript-config/tsconfig.vue.json",
   "include": [
-    "__mocks__",
-    "__tests__",
+    "src/**/*",
+    "types/**/*",
+    "*.d.ts",
     "*.ts",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
+    "__tests__/**/*",
+    "global-spec.ts"
   ],
-  "exclude": ["node_modules"]
-}
+  "compilerOptions": {
+    "types": [
+      "node",
+      "jest",
+      "@testing-library/jest-dom"
+    ],
+    "composite": true,
+    "rootDir": "."
+  }
+}