chore: Migrated Vite to Rollup, Removed Vite related dependencies

examples/vue/src/main.ts

@@ -1,5 +1,11 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import AmplifyUIVue from '@aws-amplify/ui-vue';
+import '@aws-amplify/ui-vue/styles.css';
 
-createApp(App).use(router).mount('#app');
+// Create app and register plugins
+const app = createApp(App);
+app.use(router);
+app.use(AmplifyUIVue);
+app.mount('#app');

packages/vue/package.json

@@ -3,11 +3,11 @@
   "version": "4.3.2",
   "type": "module",
   "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/style.css"
@@ -28,8 +28,10 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "vite build",
-    "dev": "vite build --watch",
+    "build": "yarn build:CSS && yarn build:rollup",
+    "build:CSS": "yarn node -r esbuild-register scripts/copyCSS.ts",
+    "build:rollup": "rollup --config",
+    "dev": "yarn build:rollup --watch",
     "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 +50,25 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-dynamic-import-vars": "^1.4.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rushstack/eslint-patch": "^1.5.1",
     "@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",
     "eslint-plugin-vue": "^9.17.0",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
     "unplugin-vue-components": "^0.25.0",
-    "vite-jest": "^0.1.4"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@aws-amplify/core": "*",

packages/vue/rollup.config.mjs

@@ -0,0 +1,99 @@
+import { defineConfig } from 'rollup';
+import typescript from 'rollup-plugin-typescript2';
+import externals from 'rollup-plugin-node-externals';
+import vue from 'rollup-plugin-vue';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import fs from 'fs-extra';
+
+// common config settings
+const input = ['src/index.ts'];
+const sourceMap = false;
+const esmOutputDir = 'dist/esm';
+
+// Common output options
+const cjsOutput = {
+  dir: 'dist',
+  entryFileNames: '[name].cjs',
+  format: 'cjs',
+  esModule: true,
+  generatedCode: { reservedNamesAsProps: false },
+  interop: 'auto',
+  exports: 'named'
+};
+
+// Common plugins
+const commonPlugins = [
+  externals({ include: [/node_modules/, /^@aws-amplify/] }),
+  nodeResolve({ extensions: ['.js', '.ts', '.vue', '.css'] }),
+  commonjs({ include: /node_modules/ }),
+  postcss({ extract: false, inject: false }),
+  vue({
+    preprocessStyles: true,
+    template: {
+      isProduction: true,
+      compilerOptions: {
+        whitespace: 'condense',
+        isCustomElement: tag => /^amplify-/.test(tag)
+      }
+    }
+  })
+];
+
+// Ensure styles are copied
+const ensureStyles = () => ({
+  name: 'ensure-styles',
+  writeBundle() {
+    fs.ensureDirSync('dist/components/primitives');
+    fs.copyFileSync(
+      'src/components/primitives/styles.css',
+      'dist/components/primitives/styles.css'
+    );
+  }
+});
+
+const config = defineConfig([
+  // CJS config
+  {
+    input,
+    output: cjsOutput,
+    plugins: [
+      ...commonPlugins,
+      typescript({
+        check: false,
+        useTsconfigDeclarationDir: true,
+        tsconfigOverride: {
+          compilerOptions: { sourceMap, declaration: true, declarationDir: 'dist', rootDir: 'src' },
+          include: ['src/**/*'],
+          exclude: ['node_modules', '**/__tests__/**', '**/*.test.*', 'scripts/**', '*.ts']
+        }
+      }),
+      ensureStyles()
+    ],
+  },
+  // ESM config
+  {
+    input,
+    output: {
+      dir: esmOutputDir,
+      format: 'es',
+      entryFileNames: '[name].mjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src'
+    },
+    plugins: [
+      ...commonPlugins,
+      typescript({
+        check: false,
+        tsconfigOverride: {
+          compilerOptions: { sourceMap, declaration: false, rootDir: 'src', outDir: esmOutputDir },
+          include: ['src/**/*'],
+          exclude: ['node_modules', '**/__tests__/**', '**/*.test.*', 'scripts/**', '*.ts']
+        }
+      })
+    ],
+  },
+]);
+
+export default config;

packages/vue/scripts/copyCSS.ts

@@ -0,0 +1,9 @@
+import fs from 'fs-extra';
+
+// Ensure the directory exists
+fs.ensureDirSync('dist');
+
+// Copy CSS files from the UI package
+fs.copySync('../ui/dist/styles.css', 'dist/style.css', { overwrite: true });
+
+console.log('CSS files copied successfully');

packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap

@@ -1302,6 +1302,7 @@ exports[`authenticator renders verifyUser subcomponent 1`] = `
 
                     <input
                       aria-invalid="false"
+                      checked=""
                       class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                       data-amplify-input=""
                       data-amplify-verify-input=""

packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap

@@ -63,6 +63,7 @@ exports[`VerifyUser renders as expected 1`] = `
 
               <input
                 aria-invalid="false"
+                checked=""
                 class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                 data-amplify-input=""
                 data-amplify-verify-input=""

packages/vue/src/components/index.ts

@@ -20,4 +20,21 @@ export { default as AmplifyCheckBox } from './primitives/amplify-check-box.vue';
 export { default as AmplifyButton } from './primitives/amplify-button.vue';
 export { default as BaseFormField } from './primitives/base-form-field.vue';
 export { default as BaseFormFields } from './primitives/base-form-fields.vue';
+
+// Export all primitive base components
+export { default as BaseInput } from './primitives/base-input.vue';
+export { default as BaseLabel } from './primitives/base-label.vue';
+export { default as BaseSelect } from './primitives/base-select.vue';
+export { default as BaseWrapper } from './primitives/base-wrapper.vue';
+export { default as BaseAlert } from './primitives/base-alert.vue';
+export { default as BaseBox } from './primitives/base-box.vue';
+export { default as BaseFieldSet } from './primitives/base-field-set.vue';
+export { default as BaseFooter } from './primitives/base-footer.vue';
+export { default as BaseForm } from './primitives/base-form.vue';
+export { default as BaseHeading } from './primitives/base-heading.vue';
+export { default as BaseSpacer } from './primitives/base-spacer.vue';
+export { default as BaseText } from './primitives/base-text.vue';
+export { default as BaseTwoTabs } from './primitives/base-two-tabs.vue';
+export { default as BaseTwoTabItem } from './primitives/base-two-tab-item.vue';
+
 export * from '../types';

packages/vue/src/index.ts

@@ -31,6 +31,7 @@ import './styles.css';
 
 export default {
   install: (app: App) => {
+    // Register main components
     app.component('SignIn', SignIn);
     app.component('SignUp', SignUp);
     app.component('FederatedSignIn', FederatedSignIn);

packages/vue/tsconfig.dist.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
+}

packages/vue/tsconfig.json

@@ -1,12 +1,25 @@
 {
   "extends": "@aws-amplify/typescript-config/tsconfig.vue.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "types": ["node", "jest", "@testing-library/jest-dom", "vite/client"]
+  },
   "include": [
     "__mocks__",
     "__tests__",
     "*.ts",
+    "*.mjs",
+    "scripts",
     "src/**/*.ts",
-    "src/**/*.tsx",
     "src/**/*.vue"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "**/__tests__/**",
+    "**/*.test.*",
+    "scripts/**",
+    "*.ts"
+  ]
 }