Skip to content
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.

Sign up for GitHub

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

Jump to bottom

chore: Cleaned up Vue code #2184

Merged
merged 5 commits into from Jul 6, 2022
Merged

chore: Cleaned up Vue code #2184

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2888700
Moved to latest version of Jest
Jun 23, 2022
0f2bb4c
Added changeset
Jun 23, 2022
c6bcb82
Merged main in
Jun 23, 2022
b52685c
Un pinned resolutions
Jun 23, 2022
e7941ae
Added comment
Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/giant-candles-jam.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
'@aws-amplify/ui-vue': patch
---

Cleaned Vue code. Updated jest to latest. Added in JSX. Updated how editor displays interface in .vue files.
2 changes: 0 additions & 2 deletions package.json
View file
Open in desktop
Expand Up @@ -53,15 +53,13 @@
"eventsource": "~2.0.2",
"fs-extra": "^10.0.0",
"glob-parent": "^6.0.2",
"jest": "^26.6.3",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We used to need to pin jest, because of an issue with different jest versions breaking different tests being run on our frameworks. However, our tests no longer need this.

And I won't be able to use the latest version of the vue3-jest library unless we update to jest 27.

"json-schema": "^0.4.0",
"node-forge": "1.3.0",
"nth-check": "^2.0.1",
"prismjs": "^1.25.0",
"prism-react-renderer": "1.2.1",
"shell-quote": "1.7.3",
"trim": "^0.0.3",
"ts-jest": "^26.5.6",
"vscode-vue-languageservice": "0.27.26",
"ws": "^7.4.6"
},
Expand Down
19 changes: 8 additions & 11 deletions packages/vue/__tests__/Authenticator.spec.ts
View file
Open in desktop
@@ -1,17 +1,14 @@
import { mount } from '@vue/test-utils';
import { Authenticator } from '../dist';
import crypto from 'crypto';

// This is needed for jest to get crypto module needed by nanoid
Object.defineProperty(global.self, 'crypto', {
value: {
getRandomValues: (arr: Array<unknown>) => crypto.randomBytes(arr.length),
},
});
import Authenticator from '../src/components/authenticator.vue';
import { components } from '../global-spec';
import { render } from '@testing-library/vue';

describe('Authenticator', () => {
it('Authenticator Exists', () => {
const wrapper = mount(Authenticator);
const wrapper = render(Authenticator, {
global: {
components,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

To get vue to see all the components we have to add them in here. Since we are using unplugin-vue-components. And it only works with Vite.

},
});

expect(wrapper).toBeTruthy();
});
Expand Down
21 changes: 21 additions & 0 deletions packages/vue/global-spec.ts
View file
Open in desktop
@@ -0,0 +1,21 @@
import BaseWrapper from './src/components/primitives/base-wrapper.vue';
import BaseFooter from './src/components/primitives/base-footer.vue';
import BaseForm from './src/components/primitives/base-form.vue';
import BaseAlert from './src/components/primitives/base-alert.vue';
import BaseTwoTabItem from './src/components/primitives/base-two-tab-item.vue';
import BaseTwoTabs from './src/components/primitives/base-two-tabs.vue';
import BaseFieldSet from './src/components/primitives/base-field-set.vue';
import BaseHeading from './src/components/primitives/base-heading.vue';
import AmplifyButton from './src/components/primitives/amplify-button.vue';

export const components = {
BaseWrapper,
BaseFooter,
BaseForm,
AmplifyButton,
BaseTwoTabItem,
BaseTwoTabs,
BaseAlert,
BaseFieldSet,
BaseHeading,
};
7 changes: 4 additions & 3 deletions packages/vue/jest.config.cjs
View file
Open in desktop
@@ -1,10 +1,11 @@
module.exports = {
testEnvironment: 'jsdom',
verbose: true,
moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
moduleFileExtensions: ['js', 'ts', 'json', 'vue', 'tsx'],
modulePathIgnorePatterns: ['<rootDir>/dist/'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.(ts)$': 'ts-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
'^.+\\.vue$': 'vue-jest',
'^.+\\.vue$': '@vue/vue3-jest',
},
};
21 changes: 14 additions & 7 deletions packages/vue/package.json
View file
Open in desktop
Expand Up @@ -42,29 +42,36 @@
"qrcode": "1.5.0"
},
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/preset-env": "^7.15.8",
"@rollup/plugin-dynamic-import-vars": "^1.4.0",
"@rollup/plugin-typescript": "^8.2.5",
"@rushstack/eslint-patch": "^1.1.3",
"@testing-library/vue": "^6.6.0",
"@types/jest": "^27.0.1",
"@types/node": "^17.0.34",
"@vitejs/plugin-vue": "^1.6.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/cli-plugin-unit-jest": "5.0.0-beta.2",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"@vue/test-utils": "^2.0.0-rc.12",
"babel-jest": "^26.3.1",
"@vue/test-utils": "^2.0.0",
"@vue/vue3-jest": "^27",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27",
"eslint": "^8.15.0",
"eslint-plugin-vue": "^9.0.1",
"jest": "^26.6.3",
"jest": "^27",
"jest-environment-jsdom": "^27",
"prettier": "^2.6.2",
"rimraf": "^3.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"ts-jest": "^26.4.2",
"ts-jest": "^27",
"typescript": "^4.6.4",
"unplugin-vue-components": "^0.15.0",
"vite": "^2.5.1",
"vue-jest": "^5.0.0-alpha.10",
"vite": "^2.9.12",
"vite-jest": "^0.1.4",
"vue-tsc": "^0.3.0"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/tsconfig.json
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"declaration": true,
"declaration": false,
Copy link
Contributor

Choose a reason for hiding this comment

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

Will this prevent type generation?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Our typescript d.ts generation still occurs with our vite typeScript2 plugin settings.

// vite.config.js
    tsconfigOverride: {
        compilerOptions: {
          sourceMap: true,
          declaration: true,
          declarationMap: true,
        },

That way we still have typescript definition files being created.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nice! Can we leave a comment here for future readers who may not have context in to vite type generation?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure! I'll add a note

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added

"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
Expand Down
2 changes: 2 additions & 0 deletions packages/vue/vite.config.ts
View file
Open in desktop
Expand Up @@ -6,12 +6,14 @@ import path from 'path';
import vue from '@vitejs/plugin-vue';
import typescript2 from 'rollup-plugin-typescript2';
import Components from 'unplugin-vue-components/vite';
import vueJsx from '@vitejs/plugin-vue-jsx';

const resolvePath = (str: string) => path.resolve(__dirname, str);

export default defineConfig({
plugins: [
vue(),
vueJsx(),
Components({
dirs: ['src/components/primitives'],
exclude: [/node_modules/],
Expand Down