Skip to content

chore: Migrated Vite to Rollup, Removed Vite related dependencies #6423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
6ab49a6
chore: Migrated Vite to Rollup, Removed Vite related dependencies
yuhengshs Mar 10, 2025
b206bc4
changed global-spec back to ./src
yuhengshs Mar 10, 2025
029097a
Aligned with already existed configs from other packages. Removed exc…
yuhengshs Mar 18, 2025
cff5273
fix Unable to resolve
yuhengshs Mar 18, 2025
af871a8
Added role=textbox in base-input.vue
yuhengshs Mar 19, 2025
a751e5d
Fix password control component and update base-input with dynamic role
yuhengshs Mar 19, 2025
0b5e3e1
update base-input.vue
yuhengshs Mar 19, 2025
16d4ee3
cleaned up and make e2e tests workable
yuhengshs Mar 27, 2025
d5d6842
cleaned up unneccesary add ons
yuhengshs Mar 27, 2025
96d4b2a
update yarn.lock file
yuhengshs Mar 27, 2025
966cab0
resolved conflicts in these 2 files
yuhengshs Mar 27, 2025
19c33b5
updated dependecy files
yuhengshs Mar 27, 2025
daf03b0
resolved merge conflicts
yuhengshs Mar 27, 2025
b026311
updated snapshots
yuhengshs Mar 27, 2025
2952a87
fixed lint issue
yuhengshs Mar 27, 2025
c703b2e
cleaned up rollup configs under vue
yuhengshs Mar 28, 2025
d4e5d95
cleaned up rollup configs under vue
yuhengshs Mar 28, 2025
6b2a8ad
removed excessive exports and corrected dependencies
yuhengshs May 22, 2025
89d3db4
resolved merge conflict
yuhengshs May 22, 2025
2b64ed6
updated dependencies
yuhengshs May 22, 2025
8e831ff
Merge branch 'main' into chore/migrate-vite-to-rollup
yuhengshs May 22, 2025
829e883
update snapshot test
yuhengshs May 22, 2025
933afee
solved dependencies issues
yuhengshs May 23, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
},
"dependencies": {
"@aws-amplify/ui-vue": "^4.3.3",
"vue": "^3.0.5",
"vue": "^3.5.14",
"vue-router": "4"
},
"devDependencies": {
"@types/node": "18.8.0",
"@vue/compiler-sfc": "^3.0.5",
"@vue/compiler-sfc": "^3.5.14",
Comment on lines -15 to +20
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove these changes, as a reviewer it makes me question whether the changes impact the build artifacts

"rimraf": "^3.0.2",
"vite-plugin-pages": "^0.25.0"
}
}
}
8 changes: 7 additions & 1 deletion examples/vue/src/main.ts
Original file line number Diff line number Diff line change
@@ -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');
Comment on lines +4 to +11
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove these changes, as a reviewer it makes me question whether the changes impact the build artifacts

Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ Amplify.configure(aws_exports);
placeholder="Zone Info"
name="zoneinfo"
:hideLabel="false"
:required="false"
:disabled="false"
Comment on lines +24 to +25
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove these changes, as a reviewer it makes me question whether the changes impact the build artifacts

/>
</template>
<template v-slot="{ user, signOut }">
Expand Down
21 changes: 14 additions & 7 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
"version": "4.3.3",
"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"
Expand All @@ -28,8 +28,11 @@
],
"scripts": {
"prebuild": "rimraf dist",
"build": "vite build",
"dev": "vite build --watch",
"build": "yarn build:CSS && yarn build:rollup",
"postbuild": "rimraf global-spec.d.ts jest.config.d.ts jest.setup.d.ts",
"build:CSS": "yarn node -r esbuild-register scripts/copyCSS.js",
"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",
Expand All @@ -48,21 +51,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": "*",
Expand Down
99 changes: 99 additions & 0 deletions packages/vue/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -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/**']
}
}),
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.*']
}
})
],
},
]);

export default config;
9 changes: 9 additions & 0 deletions packages/vue/scripts/copyCSS.js
Original file line number Diff line number Diff line change
@@ -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');
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ exports[`SelectMfaType 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-selectmfatype-input=""
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down
17 changes: 17 additions & 0 deletions packages/vue/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Comment on lines +24 to +38
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these new public exports?


export * from '../types';
33 changes: 33 additions & 0 deletions packages/vue/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,29 @@ import {
VerifyUser,
} from './components/index';

// Import all base primitive components
import BaseInput from './components/primitives/base-input.vue';
import BaseLabel from './components/primitives/base-label.vue';
import BaseSelect from './components/primitives/base-select.vue';
import BaseWrapper from './components/primitives/base-wrapper.vue';
import BaseAlert from './components/primitives/base-alert.vue';
import BaseBox from './components/primitives/base-box.vue';
import BaseFieldSet from './components/primitives/base-field-set.vue';
import BaseFooter from './components/primitives/base-footer.vue';
import BaseForm from './components/primitives/base-form.vue';
import BaseHeading from './components/primitives/base-heading.vue';
import BaseSpacer from './components/primitives/base-spacer.vue';
import BaseText from './components/primitives/base-text.vue';
import BaseTwoTabs from './components/primitives/base-two-tabs.vue';
import BaseTwoTabItem from './components/primitives/base-two-tab-item.vue';

import { useAuthenticator } from './composables/useAuth';

import './styles.css';

export default {
install: (app: App) => {
// Register main components
app.component('SignIn', SignIn);
app.component('SignUp', SignUp);
app.component('FederatedSignIn', FederatedSignIn);
Expand Down Expand Up @@ -59,6 +76,22 @@ export default {
'AuthenticatorForceNewPasswordFormFields',
AuthenticatorForceNewPasswordFormFields
);

// Register all base primitive components
app.component('BaseInput', BaseInput);
app.component('BaseLabel', BaseLabel);
app.component('BaseSelect', BaseSelect);
app.component('BaseWrapper', BaseWrapper);
app.component('BaseAlert', BaseAlert);
app.component('BaseBox', BaseBox);
app.component('BaseFieldSet', BaseFieldSet);
app.component('BaseFooter', BaseFooter);
app.component('BaseForm', BaseForm);
app.component('BaseHeading', BaseHeading);
app.component('BaseSpacer', BaseSpacer);
app.component('BaseText', BaseText);
app.component('BaseTwoTabs', BaseTwoTabs);
app.component('BaseTwoTabItem', BaseTwoTabItem);
Comment on lines +81 to +94
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What changed that requires the registaration of these modules?

},
};

Expand Down
5 changes: 5 additions & 0 deletions packages/vue/tsconfig.dist.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"extends": "./tsconfig.json",
"include": ["src/**/*.ts", "src/**/*.vue"],
"exclude": ["node_modules", "**/__mocks__", "**/__tests__"]
}
24 changes: 14 additions & 10 deletions packages/vue/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
{
"extends": "@aws-amplify/typescript-config/tsconfig.vue.json",
"include": [
"__mocks__",
"__tests__",
"*.ts",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": ["node_modules"]
}
"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/**/*.vue"],
"exclude": ["node_modules", "dist"]
}
Loading
Loading