Repository: vuesomedev/vue-3-playground Branch: master Commit: 819e2b720a2a Files: 58 Total size: 44.7 KB Directory structure: gitextract_mp3wsnit/ ├── .github/ │ └── FUNDING.yml ├── .gitignore ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── cypress-javascript.json ├── cypress-typescript.json ├── e2e/ │ ├── javascript/ │ │ └── index.test.js │ └── typescript/ │ └── index.test.ts ├── index.html ├── package.json ├── public/ │ └── .nojekyll ├── sandbox.config.json ├── src/ │ ├── javascript/ │ │ ├── App.vue │ │ ├── at-sign.js │ │ ├── components/ │ │ │ ├── AsyncPayment.js │ │ │ ├── Cart.vue │ │ │ ├── Checkout.vue │ │ │ ├── Coupon.test.js │ │ │ ├── Coupon.vue │ │ │ ├── Exchange.vue │ │ │ ├── Header.vue │ │ │ ├── Item.vue │ │ │ ├── Payment.jsx │ │ │ ├── Spinner.js │ │ │ ├── Username.test.js │ │ │ └── Username.vue │ │ ├── custom-element.js │ │ ├── hooks.js │ │ ├── main.js │ │ ├── router.js │ │ ├── store.js │ │ └── version.js │ └── typescript/ │ ├── App.vue │ ├── at-sign.ts │ ├── components/ │ │ ├── AsyncPayment.ts │ │ ├── Cart.vue │ │ ├── Checkout.vue │ │ ├── Coupon.test.ts │ │ ├── Coupon.vue │ │ ├── Exchange.vue │ │ ├── Header.vue │ │ ├── Item.vue │ │ ├── Payment.tsx │ │ ├── Spinner.ts │ │ ├── Username.test.ts │ │ └── Username.vue │ ├── hooks.ts │ ├── main.ts │ ├── router.ts │ ├── sfc.d.ts │ ├── store.ts │ └── version.ts ├── tsconfig.json ├── vite.config.js └── vitest.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] patreon: blacksonic open_collective: # Replace with a single Open Collective username ko_fi: blacksonic tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry liberapay: # Replace with a single Liberapay username issuehunt: # Replace with a single IssueHunt username otechie: # Replace with a single Otechie username custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] ================================================ FILE: .gitignore ================================================ .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - "14" script: npm test before_deploy: npm run build deploy: provider: pages local_dir: dist skip_cleanup: true github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable keep_history: true on: branch: master ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: * Using welcoming and inclusive language * Being respectful of differing viewpoints and experiences * Gracefully accepting constructive criticism * Focusing on what is best for the community * Showing empathy towards other community members Examples of unacceptable behavior by participants include: * The use of sexualized language or imagery and unwelcome sexual attention or advances * Trolling, insulting/derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or electronic address, without explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at soos.gabor86@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing ## Issues Issues are very valuable to this project. * Ideas are a valuable source of contributions others can make * Problems show where this project is lacking * With a question you show where contributors can improve the user experience Thank you for creating them. ## Pull Requests Pull requests are, a great way to get your ideas into this repository. When deciding if I merge in a pull request I look at the following things: ### Does it state intent You should be clear which problem you're trying to solve with your contribution. For example: > Add link to code of conduct in README.md Doesn't tell me anything about why you're doing that > Add link to code of conduct in README.md because users don't always look in the CONTRIBUTING.md Tells me the problem that you have found, and the pull request shows me the action you have taken to solve it. ### Is it of good quality * There are no spelling mistakes * It reads well * For english language contributions: Has a good score on [Grammarly](grammarly.com) or [Hemingway App](http://www.hemingwayapp.com/) ### Does it move this repository closer to my vision for the repository The aim of this repository is: * To provide a README.md and assorted documents anyone can copy and paste, into their project * The content is usable by someone who hasn't written something like this before * Foster a culture of respect and gratitude in the open source community. ### Does it follow the contributor covenant This repository has a [code of conduct](CODE_OF_CONDUCT.md), This repository has a code of conduct, I will remove things that do not respect it. ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 Gábor Soós Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Vue 3 Playground Vue 3 Playground stands as a learning project for those who want to get familiar with [the new features of Vue 3](https://composition-api.vuejs.org/). [The official documentation](https://v3.vuejs.org/) is now available! The project aims to include all the new features. If you find something missing please create an issue/PR. The application is a shopping cart where you can alter the name, price and quantity of the products and recalculates the total price based on the items and used coupon. The playground is available also [in online version](https://codesandbox.io/s/github/vuesomedev/vue-3-playground). If you want to switch to the Typescript folder uncomment the link to the Typescript main file in `index.html` and comment out the Javascript main file. ![Vue 3 Playground](./images/screenshot.png "Vue 3 Playground") ### New APIs covered The Typescript equivalents can be found in the `src-typescript` folder (file names are the same). - [createApp](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html) - [mount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#mount) - [use](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html#use) - [ref](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/refs-api.html#ref) - [reactive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/basic-reactivity.html#reactive) - [computed](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/hooks.js) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#computed) - [toRefs](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [Composition API docs](https://composition-api.vuejs.org/#code-organization) - [watchEffect](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect) - [watch](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/computed-watch-api.html#watch) - [onMount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) - [onUnmount](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) - [onUpdate](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) - [onErrorCaptured](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [API docs](https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks) - [useStore](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0) - [useRoute](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Checkout.vue) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next) - [emit](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Coupon.vue) - [provide](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject) - [inject](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/version.js) - [API docs](https://v3.vuejs.org/api/composition-api.html#provide-inject) - [createStore](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/store.js) - [Vuex 4 docs](https://github.com/vuejs/vuex/tree/4.0) - [createRouter](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/router.js) - [Vue 3 router docs](https://github.com/vuejs/vue-router-next) - [defineComponent](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx) - [API docs](https://v3.vuejs.org/api/global-api.html#definecomponent) - [defineAsyncComponent](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/AsyncPayment.js) - [API docs](https://v3.vuejs.org/api/global-api.html#defineasynccomponent) - [h](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Spinner.js) - [API docs](https://v3.vuejs.org/guide/render-function.html) - [JSX](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx) - [Suspense](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [Async Component](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Exchange.vue) - [Teleport](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Header.vue) - [API docs](https://v3.vuejs.org/guide/teleport.html#using-with-vue-components) - [Fragments](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue) - [Multiple v-models](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [RFC docs](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md) - [Scoped slot](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue) - [RFC docs](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md) - [Custom directive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/at-sign.js) ### Further articles/videos - [Official documentation](https://v3.vuejs.org/) - [Composition API docs](https://composition-api.vuejs.org/) - [RFCs describing new features](https://github.com/vuejs/rfcs) - [Reactivity: Vue 2 vs Vue 3](https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/) - [Global Vue Meetup featuring Evan You](https://www.youtube.com/watch?v=Nk3cC7xNfkk) - [State of Vuenion](https://www.vuemastery.com/conferences/vueconf-us-2020/state-of-the-vuenion/) - [The process: Making Vue 3](https://increment.com/frontend/making-vue-3/) - [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html) - [Reactivity in Vue 2, 3, and the Composition API](https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/) - [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr) - [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/vuesomedev/todomvc-vue-composition-api) ### Contributing If you have any idea how to include more and more new features of Vue 3 in this application feel free to share your ideas in an issue/PR. ================================================ FILE: cypress-javascript.json ================================================ { "baseUrl": "http://localhost:3000", "integrationFolder": "e2e/javascript", "pluginsFile": false, "supportFile": false, "video": false } ================================================ FILE: cypress-typescript.json ================================================ { "baseUrl": "http://localhost:3000", "integrationFolder": "e2e/typescript", "pluginsFile": false, "supportFile": false, "video": false } ================================================ FILE: e2e/javascript/index.test.js ================================================ describe('Vue 3 Playground', () => { it('should display playground text on page', () => { cy.visit('/'); cy.contains('h2', 'Vue 3.2.33 Playground'); }); }); ================================================ FILE: e2e/typescript/index.test.ts ================================================ describe('Vue 3 Playground', () => { it('should display playground text on page', () => { cy.visit('/'); cy.contains('h2', 'Vue 3.2.33 Playground'); }); }); ================================================ FILE: index.html ================================================ Vue 3 Playground
================================================ FILE: package.json ================================================ { "name": "vue-3-playground", "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/blacksonic/vue-3-playground.git" }, "type": "module", "scripts": { "start": "vite --port 3000", "serve": "vite --port 3000", "build": "vite build", "test": "npm run test:unit:javascript && npm run test:unit:typescript && npm run test:e2e:javascript && npm run test:e2e:typescript", "test:unit:javascript": "vitest --dir src/javascript --run", "test:unit:typescript": "vitest --dir src/typescript --run", "test:e2e:javascript": "start-server-and-test start http-get://localhost:3000 e2e:javascript", "test:e2e:typescript": "start-server-and-test start http-get://localhost:3000 e2e:typescript", "e2e:javascript": "cypress run --config-file cypress-javascript.json", "e2e:typescript": "cypress run --config-file cypress-typescript.json" }, "dependencies": { "vue": "^3.4.19", "vue-router": "^4.3.0", "vuex": "^4.1.0" }, "devDependencies": { "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vue/compiler-sfc": "^3.4.19", "@vue/test-utils": "^2.4.4", "cypress": "^13.6.6", "jsdom": "^24.0.0", "start-server-and-test": "^2.0.3", "typescript": "^5.3.3", "vite": "^5.1.4", "vitest": "^1.3.1" }, "babel": { "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] }, "engines": { "node": "20" } } ================================================ FILE: public/.nojekyll ================================================ ================================================ FILE: sandbox.config.json ================================================ { "infiniteLoopProtection": true, "hardReloadOnChange": false, "view": "browser", "server": "true", "container": { "port": 3000, "node": "14" }, "template": "node", "node": "14" } ================================================ FILE: src/javascript/App.vue ================================================ ================================================ FILE: src/javascript/at-sign.js ================================================ export default { beforeMount(el, binding, vnode, prevVnode) { console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`); el.innerHTML = '@'; }, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, unmounted() {} }; ================================================ FILE: src/javascript/components/AsyncPayment.js ================================================ import { defineAsyncComponent } from 'vue'; import Spinner from './Spinner'; export default defineAsyncComponent({ loader: () => import('./Payment.jsx'), loadingComponent: Spinner, delay: 0, onError(error, retry, fail, attempts) { console.log('Retrying to load component', error); retry(); } }); ================================================ FILE: src/javascript/components/Cart.vue ================================================ ================================================ FILE: src/javascript/components/Checkout.vue ================================================ ================================================ FILE: src/javascript/components/Coupon.test.js ================================================ import { mount } from '@vue/test-utils'; import Coupon from './Coupon.vue'; describe('Coupon', () => { it('should trigger coupon percent on button click', () => { const wrapper = mount(Coupon, { props: { percent: 10 } }); wrapper.find('.btn').trigger('click'); expect(wrapper.emitted().redeem).toHaveLength(1); expect(wrapper.emitted().redeem[0]).toEqual([10]); }); }); ================================================ FILE: src/javascript/components/Coupon.vue ================================================ ================================================ FILE: src/javascript/components/Exchange.vue ================================================ ================================================ FILE: src/javascript/components/Header.vue ================================================ ================================================ FILE: src/javascript/components/Item.vue ================================================ ================================================ FILE: src/javascript/components/Payment.jsx ================================================ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Payment', setup() { const payments = [ { id: 'credit', name: 'Credit card' }, { id: 'debit', name: 'Debit card' }, { id: 'paypal', name: 'Paypal' }, ]; return { payments }; }, render() { return (
{this.payments.map(payment => (
))}
); } }); ================================================ FILE: src/javascript/components/Spinner.js ================================================ import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'Spinner', render() { return h( 'div', { class: 'spinner-border', role: 'status' }, [ h('span', { class: 'sr-only' }, 'Loading...') ] ); } }); ================================================ FILE: src/javascript/components/Username.test.js ================================================ import { mount } from '@vue/test-utils'; import Username from './Username.vue'; describe('Username', () => { it('should display required text', () => { const wrapper = mount(Username); expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.'); }); }); ================================================ FILE: src/javascript/components/Username.vue ================================================ ================================================ FILE: src/javascript/custom-element.js ================================================ export class XUsername extends HTMLElement { connectedCallback() { this.innerText = 'blacksonic'; } } customElements.define('x-username', XUsername); ================================================ FILE: src/javascript/hooks.js ================================================ import { reactive, ref, computed, readonly } from 'vue'; export const useCart = () => { const product = reactive({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 }); const secondName = ref('Second Product'); const secondPrice = ref(20); const secondQuantity = ref(2); const total = computed(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100); const coupon = ref(10); const setCoupon = percent => coupon.value = percent; return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon }; }; ================================================ FILE: src/javascript/main.js ================================================ import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; import router from './router'; import AtSign from './at-sign'; import './custom-element'; const app = createApp(App); app.config.isCustomElement = tag => /^x-/.test(tag); app.use(store).use(router); app.directive('AtSign', AtSign); app.mount('#app'); ================================================ FILE: src/javascript/router.js ================================================ import { createRouter, createWebHashHistory } from 'vue-router'; import Cart from './components/Cart.vue'; import Checkout from './components/Checkout.vue'; export default createRouter({ history: createWebHashHistory(), routes: [ { path: '/', name: 'cart', component: Cart }, { path: '/checkout', name: 'checkout', component: Checkout }, ], }); ================================================ FILE: src/javascript/store.js ================================================ import { createStore } from 'vuex'; export default createStore({ state: { year: '1970' }, actions: { onSetYear: ({ commit }, year) => { commit('setYear', year); } }, mutations: { setYear: (state, year) => { state.year = year; } } }); ================================================ FILE: src/javascript/version.js ================================================ import { version, provide, inject } from 'vue'; const versionSymbol = Symbol('version'); export const provideVersion = () => provide(versionSymbol, version); export const useVersion = () => inject(versionSymbol); ================================================ FILE: src/typescript/App.vue ================================================ ================================================ FILE: src/typescript/at-sign.ts ================================================ import { DirectiveBinding, VNode } from 'vue'; export default { beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode | null) { console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`); el.innerHTML = '@'; }, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, unmounted() {} }; ================================================ FILE: src/typescript/components/AsyncPayment.ts ================================================ import { defineAsyncComponent } from 'vue'; import Spinner from './Spinner'; export default defineAsyncComponent({ loader: () => import('./Payment.tsx'), loadingComponent: Spinner, delay: 0, onError(error: Error, retry: () => void, fail: () => void, attempts: number) { console.log('Retrying to load component', error); retry(); } }); ================================================ FILE: src/typescript/components/Cart.vue ================================================ ================================================ FILE: src/typescript/components/Checkout.vue ================================================ ================================================ FILE: src/typescript/components/Coupon.test.ts ================================================ import { mount } from '@vue/test-utils'; import Coupon from './Coupon.vue'; describe('Coupon', () => { it('should trigger coupon percent on button click', () => { const wrapper = mount(Coupon, { props: { percent: 10 } }); wrapper.find('.btn').trigger('click'); expect(wrapper.emitted().redeem).toHaveLength(1); expect(wrapper.emitted().redeem[0]).toEqual([10]); }); }); ================================================ FILE: src/typescript/components/Coupon.vue ================================================ ================================================ FILE: src/typescript/components/Exchange.vue ================================================ ================================================ FILE: src/typescript/components/Header.vue ================================================ ================================================ FILE: src/typescript/components/Item.vue ================================================ ================================================ FILE: src/typescript/components/Payment.tsx ================================================ import { defineComponent } from 'vue'; export default defineComponent({ name: 'Payment', setup() { const payments = [ { id: 'credit', name: 'Credit card' }, { id: 'debit', name: 'Debit card' }, { id: 'paypal', name: 'Paypal' }, ]; return { payments }; }, render() { return (
{this.payments.map(payment => (
))}
); } }); ================================================ FILE: src/typescript/components/Spinner.ts ================================================ import { defineComponent, h } from 'vue'; export default defineComponent({ name: 'Spinner', render() { return h( 'div', { class: 'spinner-border', role: 'status' }, [ h('span', { class: 'sr-only' }, 'Loading...') ] ); } }); ================================================ FILE: src/typescript/components/Username.test.ts ================================================ import { mount } from '@vue/test-utils'; import Username from './Username.vue'; describe('Username', () => { it('should display required text', () => { const wrapper = mount(Username); expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.'); }); }); ================================================ FILE: src/typescript/components/Username.vue ================================================ ================================================ FILE: src/typescript/hooks.ts ================================================ import { reactive, ref, computed } from 'vue'; export interface Product { firstName: string; firstPrice: number; firstQuantity: number; } export const useCart = () => { const product = reactive({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 }); const secondName = ref('Second Product'); const secondPrice = ref(20); const secondQuantity = ref(2); const total = computed(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100); const coupon = ref(10); const setCoupon = (percent): void => coupon.value = percent; return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon }; }; ================================================ FILE: src/typescript/main.ts ================================================ import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; import router from './router'; import AtSign from './at-sign'; createApp(App).use(store).use(router).directive('AtSign', AtSign).mount('#app'); ================================================ FILE: src/typescript/router.ts ================================================ import { createRouter, createWebHashHistory } from 'vue-router'; import Cart from './components/Cart.vue'; import Checkout from './components/Checkout.vue'; export default createRouter({ history: createWebHashHistory(), routes: [ { path: '/', name: 'cart', component: Cart }, { path: '/checkout', name: 'checkout', component: Checkout }, ], }); ================================================ FILE: src/typescript/sfc.d.ts ================================================ declare module '*.vue' { import { DefineComponent } from 'vue'; const component: DefineComponent<{}, {}, any>; export default component; } ================================================ FILE: src/typescript/store.ts ================================================ import { createStore, ActionContext } from 'vuex'; export interface State { year: string; } export default createStore({ state: { year: '1970' }, actions: { onSetYear: (context: ActionContext, year: string) => { context.commit('setYear', year); } }, mutations: { setYear(state: State, year: string) { state.year = year; } } }); ================================================ FILE: src/typescript/version.ts ================================================ import { version, provide, inject } from 'vue'; const versionSymbol: unique symbol = Symbol('version'); export const provideVersion = (): void => provide(versionSymbol, version); export const useVersion = (): string | undefined => inject(versionSymbol); ================================================ FILE: tsconfig.json ================================================ { "compileOnSave": true, "compilerOptions": { "allowSyntheticDefaultImports": false, "allowJs": true, "alwaysStrict": true, "declaration": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": false, "lib": ["es2017", "dom"], "module": "commonjs", "moduleResolution": "node", "noEmitHelpers": false, "noEmitOnError": false, "noFallthroughCasesInSwitch": true, "noImplicitThis": true, "noUnusedLocals": true, "noUnusedParameters": false, "pretty": true, "removeComments": true, "rootDir": "./", "sourceMap": true, "strictNullChecks": true, "target": "ES2020" }, "exclude": ["./node_modules"] } ================================================ FILE: vite.config.js ================================================ import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; export default { plugins: [ vue({ template: { compilerOptions: { isCustomElement: tag => /^x-/.test(tag) } } }), vueJsx() ], base: './', }; ================================================ FILE: vitest.config.js ================================================ import { defineConfig } from 'vite'; import Vue from '@vitejs/plugin-vue'; import Jsx from '@vitejs/plugin-vue-jsx'; export default defineConfig({ plugins: [Vue(), Jsx()], test: { globals: true, environment: 'jsdom', transformMode: { web: [/.[tj]sx$/], }, }, });