[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]\npatreon: blacksonic\nopen_collective: # Replace with a single Open Collective username\nko_fi: blacksonic\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\nnode_js:\n  - \"14\"\nscript: npm test\nbefore_deploy: npm run build\ndeploy:\n  provider: pages\n  local_dir: dist\n  skip_cleanup: true\n  github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable\n  keep_history: true\n  on:\n    branch: master\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at soos.gabor86@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\n## Issues\n\nIssues are very valuable to this project.\n\n* Ideas are a valuable source of contributions others can make\n* Problems show where this project is lacking\n* With a question you show where contributors can improve the user experience\n\nThank you for creating them.\n\n## Pull Requests\n\nPull requests are, a great way to get your ideas into this repository.\n\nWhen deciding if I merge in a pull request I look at the following things:\n\n### Does it state intent\n\nYou should be clear which problem you're trying to solve with your contribution.\n\nFor example:\n\n> Add link to code of conduct in README.md\n\nDoesn't tell me anything about why you're doing that\n\n> Add link to code of conduct in README.md because users don't always look in the CONTRIBUTING.md\n\nTells me the problem that you have found, and the pull request shows me the action you have taken to solve it.\n\n\n### Is it of good quality\n\n* There are no spelling mistakes\n* It reads well\n* For english language contributions: Has a good score on [Grammarly](grammarly.com) or [Hemingway App](http://www.hemingwayapp.com/)\n\n### Does it move this repository closer to my vision for the repository\n\nThe aim of this repository is:\n\n* To provide a README.md and assorted documents anyone can copy and paste, into their project\n* The content is usable by someone who hasn't written something like this before\n* Foster a culture of respect and gratitude in the open source community.\n\n### Does it follow the contributor covenant\n\nThis 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.\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Gábor Soós\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Vue 3 Playground\n\nVue 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/).\n[The official documentation](https://v3.vuejs.org/) is now available!\n\nThe project aims to include all the new features. If you find something missing please create an issue/PR.\n\nThe application is a shopping cart where you can alter the name, price and quantity of the products and\nrecalculates the total price based on the items and used coupon.\n\nThe playground is available also [in online version](https://codesandbox.io/s/github/vuesomedev/vue-3-playground).\n\nIf you want to switch to the Typescript folder uncomment the link to the Typescript main file in `index.html`\nand comment out the Javascript main file.\n\n![Vue 3 Playground](./images/screenshot.png \"Vue 3 Playground\")\n\n### New APIs covered\n\nThe Typescript equivalents can be found in the `src-typescript` folder (file names are the same).\n\n- [createApp](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/main.js) - [API docs](https://v3.vuejs.org/api/application-api.html)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [emit](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Coupon.vue)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [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)\n- [JSX](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Payment.jsx)\n- [Suspense](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Cart.vue)\n- [Async Component](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/components/Exchange.vue)\n- [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)\n- [Fragments](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/App.vue)\n- [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)\n- [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)\n- [Custom directive](https://github.com/vuesomedev/vue-3-playground/blob/master/src/javascript/at-sign.js)\n\n### Further articles/videos\n\n- [Official documentation](https://v3.vuejs.org/)\n- [Composition API docs](https://composition-api.vuejs.org/)\n- [RFCs describing new features](https://github.com/vuejs/rfcs)\n- [Reactivity: Vue 2 vs Vue 3](https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/)\n- [Global Vue Meetup featuring Evan You](https://www.youtube.com/watch?v=Nk3cC7xNfkk)\n- [State of Vuenion](https://www.vuemastery.com/conferences/vueconf-us-2020/state-of-the-vuenion/)\n- [The process: Making Vue 3](https://increment.com/frontend/making-vue-3/)\n- [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html)\n- [Reactivity in Vue 2, 3, and the Composition API](https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/)\n- [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr)\n- [Vue 3 Composition API TodoMVC implementation with Vuex and testing](https://github.com/vuesomedev/todomvc-vue-composition-api)\n\n### Contributing\n\nIf 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.\n\n"
  },
  {
    "path": "cypress-javascript.json",
    "content": "{\n  \"baseUrl\": \"http://localhost:3000\",\n  \"integrationFolder\": \"e2e/javascript\",\n  \"pluginsFile\": false,\n  \"supportFile\": false,\n  \"video\": false\n}\n"
  },
  {
    "path": "cypress-typescript.json",
    "content": "{\n  \"baseUrl\": \"http://localhost:3000\",\n  \"integrationFolder\": \"e2e/typescript\",\n  \"pluginsFile\": false,\n  \"supportFile\": false,\n  \"video\": false\n}\n"
  },
  {
    "path": "e2e/javascript/index.test.js",
    "content": "describe('Vue 3 Playground', () => {\n  it('should display playground text on page', () => {\n    cy.visit('/');\n    cy.contains('h2', 'Vue 3.2.33 Playground');\n  });\n});\n"
  },
  {
    "path": "e2e/typescript/index.test.ts",
    "content": "describe('Vue 3 Playground', () => {\n  it('should display playground text on page', () => {\n    cy.visit('/');\n    cy.contains('h2', 'Vue 3.2.33 Playground');\n  });\n});\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Vue 3 Playground</title>\n  <link rel=\"icon\" href=\"./logo.png\" type=\"image/png\">\n  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css\">\n\n  <style>\n    .container {\n      max-width: 960px;\n    }\n\n    .border-top { border-top: 1px solid #e5e5e5; }\n    .border-bottom { border-bottom: 1px solid #e5e5e5; }\n    .border-top-gray { border-top-color: #adb5bd; }\n\n    .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }\n\n    .lh-condensed { line-height: 1.25; }\n  </style>\n</head>\n<body class=\"bg-light\">\n  <div class=\"container\">\n    <div id=\"app\"></div>\n\n    <footer class=\"my-5 pt-5 text-muted text-center text-small\" id=\"footer\"></footer>\n  </div>\n\n  <script type=\"module\" src=\"./src/javascript/main.js\"></script>\n  <!-- <script type=\"module\" src=\"./src/typescript/main.ts\"></script> -->\n</body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vue-3-playground\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/blacksonic/vue-3-playground.git\"\n  },\n  \"type\": \"module\",\n  \"scripts\": {\n    \"start\": \"vite --port 3000\",\n    \"serve\": \"vite --port 3000\",\n    \"build\": \"vite build\",\n    \"test\": \"npm run test:unit:javascript && npm run test:unit:typescript && npm run test:e2e:javascript && npm run test:e2e:typescript\",\n    \"test:unit:javascript\": \"vitest --dir src/javascript --run\",\n    \"test:unit:typescript\": \"vitest --dir src/typescript --run\",\n    \"test:e2e:javascript\": \"start-server-and-test start http-get://localhost:3000 e2e:javascript\",\n    \"test:e2e:typescript\": \"start-server-and-test start http-get://localhost:3000 e2e:typescript\",\n    \"e2e:javascript\": \"cypress run --config-file cypress-javascript.json\",\n    \"e2e:typescript\": \"cypress run --config-file cypress-typescript.json\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^3.4.19\",\n    \"vue-router\": \"^4.3.0\",\n    \"vuex\": \"^4.1.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.9\",\n    \"@babel/preset-env\": \"^7.23.9\",\n    \"@vitejs/plugin-vue\": \"^5.0.4\",\n    \"@vitejs/plugin-vue-jsx\": \"^3.1.0\",\n    \"@vue/compiler-sfc\": \"^3.4.19\",\n    \"@vue/test-utils\": \"^2.4.4\",\n    \"cypress\": \"^13.6.6\",\n    \"jsdom\": \"^24.0.0\",\n    \"start-server-and-test\": \"^2.0.3\",\n    \"typescript\": \"^5.3.3\",\n    \"vite\": \"^5.1.4\",\n    \"vitest\": \"^1.3.1\"\n  },\n  \"babel\": {\n    \"presets\": [\n      [\n        \"@babel/preset-env\",\n        {\n          \"targets\": {\n            \"node\": \"current\"\n          }\n        }\n      ]\n    ]\n  },\n  \"engines\": {\n    \"node\": \"20\"\n  }\n}\n"
  },
  {
    "path": "public/.nojekyll",
    "content": ""
  },
  {
    "path": "sandbox.config.json",
    "content": "{\n  \"infiniteLoopProtection\": true,\n  \"hardReloadOnChange\": false,\n  \"view\": \"browser\",\n  \"server\": \"true\",\n  \"container\": {\n    \"port\": 3000,\n    \"node\": \"14\"\n  },\n  \"template\": \"node\",\n  \"node\": \"14\"\n}\n"
  },
  {
    "path": "src/javascript/App.vue",
    "content": "<script>\nimport { defineComponent, onMounted } from 'vue';\nimport { useStore } from 'vuex';\nimport Header from './components/Header.vue';\nimport { provideVersion } from './version';\n\nexport default defineComponent({\n  name: 'App',\n  components: { Header },\n  setup() {\n    const { dispatch } = useStore();\n    provideVersion();\n\n    onMounted(() => {\n      dispatch('onSetYear', new Date().getFullYear());\n    });\n  }\n});\n</script>\n\n<template>\n<Header />\n<router-view />\n</template>\n"
  },
  {
    "path": "src/javascript/at-sign.js",
    "content": "export default {\n  beforeMount(el, binding, vnode, prevVnode) {\n    console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`);\n\n    el.innerHTML = '<span class=\"input-group-text\">@</span>';\n  },\n  mounted() {},\n  beforeUpdate() {},\n  updated() {},\n  beforeUnmount() {},\n  unmounted() {}\n};\n"
  },
  {
    "path": "src/javascript/components/AsyncPayment.js",
    "content": "import { defineAsyncComponent } from 'vue';\nimport Spinner from './Spinner';\n\nexport default defineAsyncComponent({\n  loader: () => import('./Payment.jsx'),\n  loadingComponent: Spinner,\n  delay: 0,\n  onError(error, retry, fail, attempts) {\n    console.log('Retrying to load component', error);\n    retry();\n  }\n});\n"
  },
  {
    "path": "src/javascript/components/Cart.vue",
    "content": "<script>\nimport { toRefs, onMounted, onUpdated, onUnmounted, onErrorCaptured, watchEffect, watch, ref, defineComponent } from 'vue';\nimport Coupon from './Coupon.vue';\nimport Item from './Item.vue';\nimport Exchange from './Exchange.vue';\nimport AsyncPayment from './AsyncPayment';\nimport Spinner from './Spinner';\nimport Username from './Username.vue';\nimport { useCart } from '../hooks';\n\nexport default defineComponent({\n  name: 'Cart',\n  components: { Coupon, Item, Exchange, AsyncPayment, Spinner, Username },\n\n  setup() {\n    console.log('setup');\n\n    const { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon } = useCart();\n\n    watchEffect(() => console.log(`watchEffect: ${product.firstName} ${product.firstPrice}x${product.firstQuantity}`));\n    watch([secondName], () => console.log(`watch: ${secondName.value} ${secondPrice.value}x${secondQuantity.value}`));\n\n    onMounted(() => {\n      console.log('mounted');\n    });\n    onUpdated(() => console.log('updated'));\n    onUnmounted(() => console.log('onunmounted'));\n\n    const error = ref(null);\n    onErrorCaptured(e => {\n      error.value = e;\n      return true;\n    });\n\n    return { ...toRefs(product), secondName, secondPrice, secondQuantity, total, coupon, setCoupon, error };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n\n  <div class=\"col-md-4 order-md-2 mb-4\">\n    <h4 class=\"d-flex justify-content-between align-items-center mb-3\">\n      <span class=\"text-muted\">Cart</span>\n    </h4>\n    <ul class=\"list-group mb-3\">\n      <li class=\"list-group-item d-flex justify-content-between lh-condensed\">\n        <div>\n          <h6 class=\"my-0\">{{ firstName }}</h6>\n        </div>\n        <span class=\"text-muted\">${{ firstPrice * firstQuantity }}</span>\n      </li>\n      <li class=\"list-group-item d-flex justify-content-between lh-condensed\">\n        <div>\n          <h6 class=\"my-0\">{{ secondName }}</h6>\n        </div>\n        <span class=\"text-muted\">${{ secondPrice * secondQuantity }}</span>\n      </li>\n      <li class=\"list-group-item d-flex justify-content-between\">\n        <span>Total (USD)</span>\n        <strong>${{ total }}</strong>\n      </li>\n    </ul>\n\n    <Coupon :percent=\"10\" @redeem=\"setCoupon\" />\n\n    <div v-if=\"error\">\n      {{ error }}\n    </div>\n    <Suspense v-else>\n      <template #default>\n        <Exchange />\n      </template>\n      <template #fallback>\n        <Spinner />\n      </template>\n    </Suspense>\n  </div>\n\n  <div class=\"col-md-8 order-md-1\">\n    <h4 class=\"mb-3\">Items</h4>\n    <form class=\"needs-validation\">\n\n      <Item v-model:name=\"firstName\" v-model:price=\"firstPrice\" v-model:quantity=\"firstQuantity\" />\n\n      <div class=\"row\">\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"second-item-name\">Name</label>\n          <input v-model=\"secondName\" type=\"text\" class=\"form-control\" id=\"second-item-name\">\n        </div>\n        <div class=\"col-md-3 mb-3\">\n          <label for=\"second-item-price\">Price</label>\n          <input v-model=\"secondPrice\" type=\"number\" class=\"form-control\" id=\"second-item-price\">\n        </div>\n        <div class=\"col-md-3 mb-3\">\n          <label for=\"second-item-quantity\">Quantity</label>\n          <input v-model=\"secondQuantity\" type=\"number\" class=\"form-control\" id=\"second-item-quantity\">\n        </div>\n      </div>\n    </form>\n\n    <Username v-slot=\"{ label }\">\n      <label for=\"username\">{{ label }}</label>\n    </Username>\n\n    <h4 class=\"mb-3\">Payment</h4>\n    <AsyncPayment />\n\n    <hr class=\"mb-4\">\n    <router-link to=\"/checkout\" class=\"btn btn-primary btn-lg btn-block\">Continue to checkout</router-link>\n  </div>\n\n</div>\n</template>\n\n<style>\n@keyframes rotate {\n  to { transform: rotate(360deg); }\n}\n\n.spinner-border {\n  display: inline-block;\n  width: 2rem;\n  height: 2rem;\n  vertical-align: text-bottom;\n  border: .25em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  -webkit-animation: spinner-border .75s linear infinite;\n  animation: rotate 1s linear infinite;\n}\n</style>\n"
  },
  {
    "path": "src/javascript/components/Checkout.vue",
    "content": "<script>\nimport { defineComponent } from 'vue';\nimport { useRoute } from 'vue-router';\n\nexport default defineComponent({\n  name: 'Checkout',\n\n  setup() {\n    const { path } = useRoute();\n\n    return { path };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n  <div class=\"col-md-8 order-md-1\">\n    <h4 class=\"mb-3\">Checkout</h4>\n    <p>{{ path }}</p>\n    <router-link to=\"/\" class=\"btn btn-primary btn-lg btn-block\">Back to cart</router-link>\n  </div>\n</div>\n</template>\n"
  },
  {
    "path": "src/javascript/components/Coupon.test.js",
    "content": "import { mount } from '@vue/test-utils';\nimport Coupon from './Coupon.vue';\n\ndescribe('Coupon', () => {\n  it('should trigger coupon percent on button click', () => {\n    const wrapper = mount(Coupon, { props: { percent: 10 } });\n\n    wrapper.find('.btn').trigger('click');\n\n    expect(wrapper.emitted().redeem).toHaveLength(1);\n    expect(wrapper.emitted().redeem[0]).toEqual([10]);\n  });\n});\n"
  },
  {
    "path": "src/javascript/components/Coupon.vue",
    "content": "<script>\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'Coupon',\n  props: ['percent'],\n  emits: ['redeem'],\n\n  setup(props, { emit }) {\n    const percent = ref(props.percent);\n    const useCoupon = () => emit('redeem', percent.value);\n\n    return { percent, useCoupon };\n  }\n});\n</script>\n\n<template>\n<form class=\"card p-2\">\n  <div class=\"input-group\">\n    <input v-model=\"percent\" type=\"text\" class=\"form-control\" placeholder=\"Promo code\">\n    <div class=\"input-group-append\">\n      <button @click=\"useCoupon\" type=\"button\" class=\"btn btn-secondary\">Redeem</button>\n    </div>\n  </div>\n</form>\n</template>\n"
  },
  {
    "path": "src/javascript/components/Exchange.vue",
    "content": "<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  async setup() {\n    const exchangeRates = await Promise.resolve({\n      base: 'EUR',\n      date: '2021-05-08',\n      rates: {\n        GBP: 0.870389,\n        USD: 1.216325,\n      }\n    });\n\n    return { rates: exchangeRates.rates };\n  }\n});\n</script>\n\n<template>\n<ul class=\"list-group\">\n  <li class=\"list-group-item\">Change to USD: {{ rates.USD }}</li>\n  <li class=\"list-group-item\">Change to GBP: {{ rates.GBP }} </li>\n</ul>\n</template>\n\n"
  },
  {
    "path": "src/javascript/components/Header.vue",
    "content": "<script>\nimport { defineComponent } from 'vue';\nimport { useStore } from 'vuex';\nimport { useVersion } from '../version';\n\nexport default defineComponent({\n  name: 'Header',\n\n  setup() {\n    const { state } = useStore();\n\n    return {\n      version: useVersion(),\n      state\n    };\n  }\n});\n</script>\n\n<template>\n<div class=\"py-5 text-center\">\n  <img class=\"d-block mx-auto mb-4\" src=\"/logo.png\" alt=\"\" width=\"72\" height=\"72\">\n  <h2>Vue {{ version }} Playground</h2>\n  <p class=\"lead\">\n    Below is an example form built with the Vue {{ version }} Composition API.\n  </p>\n</div>\n<Teleport to=\"#footer\">\n  <p class=\"mb-1\">&copy; {{ state.year }} <x-username /></p>\n</Teleport>\n</template>\n"
  },
  {
    "path": "src/javascript/components/Item.vue",
    "content": "<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Item',\n  props: ['name', 'price', 'quantity'],\n  emits: ['update:name', 'update:price', 'update:quantity'],\n\n  setup(props, { emit }) {\n    const updateName = value => emit('update:name', value);\n    const updatePrice = value => emit('update:price', value);\n    const updateQuantity = value => emit('update:quantity', value);\n\n    return { updateName, updatePrice, updateQuantity };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n  <div class=\"col-md-6 mb-3\">\n    <label for=\"item-name\">Name</label>\n    <input :value=\"name\" @input=\"updateName($event.target.value)\" type=\"text\" class=\"form-control\" id=\"item-name\">\n  </div>\n  <div class=\"col-md-3 mb-3\">\n    <label for=\"item-price\">Price</label>\n    <input :value=\"price\" @input=\"updatePrice($event.target.value)\" type=\"number\" class=\"form-control\" id=\"item-price\">\n  </div>\n  <div class=\"col-md-3 mb-3\">\n    <label for=\"item-quantity\">Quantity</label>\n    <input :value=\"quantity\" @input=\"updateQuantity($event.target.value)\" type=\"number\" class=\"form-control\" id=\"item-quantity\">\n  </div>\n</div>\n</template>\n\n"
  },
  {
    "path": "src/javascript/components/Payment.jsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Payment',\n\n  setup() {\n    const payments = [\n      { id: 'credit', name: 'Credit card' },\n      { id: 'debit', name: 'Debit card' },\n      { id: 'paypal', name: 'Paypal' },\n    ];\n\n    return { payments };\n  },\n\n  render() {\n    return (\n      <div className=\"d-block my-3\">\n        {this.payments.map(payment => (\n          <div className=\"custom-control custom-radio\">\n            <input id={payment.id} name=\"paymentMethod\" type=\"radio\" className=\"custom-control-input\" />\n            <label className=\"custom-control-label\" htmlFor={payment.id}>{payment.name}</label>\n          </div>\n        ))}\n      </div>\n    );\n  }\n});\n"
  },
  {
    "path": "src/javascript/components/Spinner.js",
    "content": "import { defineComponent, h } from 'vue';\n\nexport default defineComponent({\n  name: 'Spinner',\n\n  render() {\n    return h(\n      'div', { class: 'spinner-border', role: 'status' },\n      [\n        h('span', { class: 'sr-only' }, 'Loading...')\n      ]\n    );\n  }\n});\n"
  },
  {
    "path": "src/javascript/components/Username.test.js",
    "content": "import { mount } from '@vue/test-utils';\nimport Username from './Username.vue';\n\ndescribe('Username', () => {\n  it('should display required text', () => {\n    const wrapper = mount(Username);\n\n    expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.');\n  });\n});\n"
  },
  {
    "path": "src/javascript/components/Username.vue",
    "content": "<template>\n<div class=\"mb-3\">\n  <slot :label=\"label\">\n    <label for=\"username\">Default label</label>\n  </slot>\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\"></div>\n    <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"Username\" />\n    <div class=\"invalid-feedback\" style=\"width: 100%;\">\n      Your username is required.\n    </div>\n  </div>\n</div>\n</template>\n\n<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Username',\n\n  setup() {\n    return { label: 'Username' };\n  }\n});\n</script>\n"
  },
  {
    "path": "src/javascript/custom-element.js",
    "content": "export class XUsername extends HTMLElement {\n  connectedCallback() {\n    this.innerText = 'blacksonic';\n  }\n}\n\ncustomElements.define('x-username', XUsername);\n"
  },
  {
    "path": "src/javascript/hooks.js",
    "content": "import { reactive, ref, computed, readonly } from 'vue';\n\nexport const useCart = () => {\n  const product = reactive({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 });\n  const secondName = ref('Second Product');\n  const secondPrice = ref(20);\n  const secondQuantity = ref(2);\n  const total = computed(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100);\n  const coupon = ref(10);\n  const setCoupon = percent => coupon.value = percent;\n\n  return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon };\n};\n"
  },
  {
    "path": "src/javascript/main.js",
    "content": "import { createApp } from 'vue';\nimport App from './App.vue';\nimport store from './store';\nimport router from './router';\nimport AtSign from './at-sign';\nimport './custom-element';\n\nconst app = createApp(App);\napp.config.isCustomElement = tag => /^x-/.test(tag);\napp.use(store).use(router);\napp.directive('AtSign', AtSign);\napp.mount('#app');\n"
  },
  {
    "path": "src/javascript/router.js",
    "content": "import { createRouter, createWebHashHistory } from 'vue-router';\nimport Cart from './components/Cart.vue';\nimport Checkout from './components/Checkout.vue';\n\nexport default createRouter({\n  history: createWebHashHistory(),\n  routes: [\n    { path: '/', name: 'cart', component: Cart },\n    { path: '/checkout', name: 'checkout', component: Checkout },\n  ],\n});\n"
  },
  {
    "path": "src/javascript/store.js",
    "content": "import { createStore } from 'vuex';\n\nexport default createStore({\n  state: {\n    year: '1970'\n  },\n  actions: {\n    onSetYear: ({ commit }, year) => {\n      commit('setYear', year);\n    }\n  },\n  mutations: {\n    setYear: (state, year) => {\n      state.year = year;\n    }\n  }\n});\n"
  },
  {
    "path": "src/javascript/version.js",
    "content": "import { version, provide, inject } from 'vue';\n\nconst versionSymbol = Symbol('version');\n\nexport const provideVersion = () => provide(versionSymbol, version);\nexport const useVersion = () => inject(versionSymbol);\n"
  },
  {
    "path": "src/typescript/App.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent, onMounted } from 'vue';\nimport { useStore } from 'vuex';\nimport Header from './components/Header.vue';\nimport { provideVersion } from './version';\nimport { State } from './store';\n\nexport default defineComponent({\n  name: 'App',\n  components: { Header },\n  setup() {\n    const { dispatch } = useStore<State>();\n    provideVersion();\n\n    onMounted(() => {\n      dispatch('onSetYear', new Date().getFullYear());\n    });\n  }\n});\n</script>\n\n<template>\n  <Header />\n  <router-view />\n</template>\n"
  },
  {
    "path": "src/typescript/at-sign.ts",
    "content": "import { DirectiveBinding, VNode } from 'vue';\n\nexport default {\n  beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode | null) {\n    console.log(`directive: value - ${binding.value}, argument - ${binding.arg}, modifiers - ${JSON.stringify(binding.modifiers)}`);\n\n    el.innerHTML = '<span class=\"input-group-text\">@</span>';\n  },\n  mounted() {},\n  beforeUpdate() {},\n  updated() {},\n  beforeUnmount() {},\n  unmounted() {}\n};\n"
  },
  {
    "path": "src/typescript/components/AsyncPayment.ts",
    "content": "import { defineAsyncComponent } from 'vue';\nimport Spinner from './Spinner';\n\nexport default defineAsyncComponent({\n  loader: () => import('./Payment.tsx'),\n  loadingComponent: Spinner,\n  delay: 0,\n  onError(error: Error, retry: () => void, fail: () => void, attempts: number) {\n    console.log('Retrying to load component', error);\n    retry();\n  }\n});\n"
  },
  {
    "path": "src/typescript/components/Cart.vue",
    "content": "<script lang=\"ts\">\nimport { toRefs, onMounted, onUpdated, onUnmounted, onErrorCaptured, watchEffect, watch, ref, defineComponent } from 'vue';\nimport Coupon from './Coupon.vue';\nimport Item from './Item.vue';\nimport Exchange from './Exchange.vue';\nimport AsyncPayment from './AsyncPayment';\nimport Spinner from './Spinner';\nimport Username from './Username.vue';\nimport { useCart } from '../hooks';\n\nexport default defineComponent({\n  name: 'Cart',\n  components: { Coupon, Item, Exchange, AsyncPayment, Spinner, Username },\n\n  setup() {\n    console.log('setup');\n\n    const { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon } = useCart();\n\n    watchEffect(() => console.log(`watchEffect: ${product.firstName} ${product.firstPrice}x${product.firstQuantity}`));\n    watch([secondName], () => console.log(`watch: ${secondName.value} ${secondPrice.value}x${secondQuantity.value}`));\n\n    onMounted(() => {\n      console.log('mounted');\n    });\n    onUpdated(() => console.log('updated'));\n    onUnmounted(() => console.log('onunmounted'));\n\n    const error = ref<Error | null>(null);\n    onErrorCaptured((e: Error) => {\n      error.value = e;\n      return true;\n    });\n\n    return { ...toRefs(product), secondName, secondPrice, secondQuantity, total, coupon, setCoupon, error };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n\n  <div class=\"col-md-4 order-md-2 mb-4\">\n    <h4 class=\"d-flex justify-content-between align-items-center mb-3\">\n      <span class=\"text-muted\">Cart</span>\n    </h4>\n    <ul class=\"list-group mb-3\">\n      <li class=\"list-group-item d-flex justify-content-between lh-condensed\">\n        <div>\n          <h6 class=\"my-0\">{{ firstName }}</h6>\n        </div>\n        <span class=\"text-muted\">${{ firstPrice * firstQuantity }}</span>\n      </li>\n      <li class=\"list-group-item d-flex justify-content-between lh-condensed\">\n        <div>\n          <h6 class=\"my-0\">{{ secondName }}</h6>\n        </div>\n        <span class=\"text-muted\">${{ secondPrice * secondQuantity }}</span>\n      </li>\n      <li class=\"list-group-item d-flex justify-content-between\">\n        <span>Total (USD)</span>\n        <strong>${{ total }}</strong>\n      </li>\n    </ul>\n\n    <Coupon :percent=\"10\" @redeem=\"setCoupon\" />\n\n    <div v-if=\"error\">\n      {{ error }}\n    </div>\n    <Suspense v-else>\n      <template #default>\n        <Exchange />\n      </template>\n      <template #fallback>\n        <Spinner />\n      </template>\n    </Suspense>\n  </div>\n\n  <div class=\"col-md-8 order-md-1\">\n    <h4 class=\"mb-3\">Items</h4>\n    <form class=\"needs-validation\">\n\n      <Item v-model:name=\"firstName\" v-model:price=\"firstPrice\" v-model:quantity=\"firstQuantity\" />\n\n      <div class=\"row\">\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"second-item-name\">Name</label>\n          <input v-model=\"secondName\" type=\"text\" class=\"form-control\" id=\"second-item-name\">\n        </div>\n        <div class=\"col-md-3 mb-3\">\n          <label for=\"second-item-price\">Price</label>\n          <input v-model=\"secondPrice\" type=\"number\" class=\"form-control\" id=\"second-item-price\">\n        </div>\n        <div class=\"col-md-3 mb-3\">\n          <label for=\"second-item-quantity\">Quantity</label>\n          <input v-model=\"secondQuantity\" type=\"number\" class=\"form-control\" id=\"second-item-quantity\">\n        </div>\n      </div>\n    </form>\n\n    <Username v-slot=\"{ label }\">\n      <label for=\"username\">{{ label }}</label>\n    </Username>\n\n    <h4 class=\"mb-3\">Payment</h4>\n    <AsyncPayment />\n\n    <hr class=\"mb-4\">\n    <router-link to=\"/checkout\" class=\"btn btn-primary btn-lg btn-block\">Continue to checkout</router-link>\n  </div>\n\n</div>\n</template>\n\n<style>\n@keyframes rotate {\n  to { transform: rotate(360deg); }\n}\n\n.spinner-border {\n  display: inline-block;\n  width: 2rem;\n  height: 2rem;\n  vertical-align: text-bottom;\n  border: .25em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  -webkit-animation: spinner-border .75s linear infinite;\n  animation: rotate 1s linear infinite;\n}\n</style>\n"
  },
  {
    "path": "src/typescript/components/Checkout.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { useRoute } from 'vue-router';\n\nexport default defineComponent({\n  name: 'Checkout',\n\n  setup() {\n    const { path } = useRoute();\n\n    return { path };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n  <div class=\"col-md-8 order-md-1\">\n    <h4 class=\"mb-3\">Checkout</h4>\n    <p>{{ path }}</p>\n    <router-link to=\"/\" class=\"btn btn-primary btn-lg btn-block\">Back to cart</router-link>\n  </div>\n</div>\n</template>\n"
  },
  {
    "path": "src/typescript/components/Coupon.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Coupon from './Coupon.vue';\n\ndescribe('Coupon', () => {\n  it('should trigger coupon percent on button click', () => {\n    const wrapper = mount(Coupon, { props: { percent: 10 } });\n\n    wrapper.find<HTMLButtonElement>('.btn').trigger('click');\n\n    expect(wrapper.emitted().redeem).toHaveLength(1);\n    expect(wrapper.emitted().redeem[0]).toEqual([10]);\n  });\n});\n"
  },
  {
    "path": "src/typescript/components/Coupon.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent, ref, SetupContext } from 'vue';\ntype EmitOption = 'redeem';\ntype Props = { percent: number };\n\nexport default defineComponent({\n  name: 'Coupon',\n  props: ['percent'],\n  emits: ['redeem'],\n\n  setup(props: Props, { emit }: SetupContext<EmitOption[]>) {\n    const percent = ref(props.percent);\n    const useCoupon = () => emit('redeem', percent.value);\n\n    return { percent, useCoupon };\n  }\n});\n</script>\n\n<template>\n<form class=\"card p-2\">\n  <div class=\"input-group\">\n    <input v-model=\"percent\" type=\"text\" class=\"form-control\" placeholder=\"Promo code\">\n    <div class=\"input-group-append\">\n      <button @click=\"useCoupon\" type=\"button\" class=\"btn btn-secondary\">Redeem</button>\n    </div>\n  </div>\n</form>\n</template>\n"
  },
  {
    "path": "src/typescript/components/Exchange.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent } from 'vue';\ninterface ApiResponse {\n  date: string,\n  base: string,\n  rates: {\n    USD: number,\n    GBP: number\n  }\n}\n\nexport default defineComponent({\n  async setup() {\n    const exchangeRates: ApiResponse = await Promise.resolve({\n      base: 'EUR',\n      date: '2021-05-08',\n      rates: {\n        GBP: 0.870389,\n        USD: 1.216325,\n      }\n    });\n\n    return { rates: exchangeRates.rates };\n  }\n});\n</script>\n\n<template>\n<ul class=\"list-group\">\n  <li class=\"list-group-item\">Change to USD: {{ rates.USD }}</li>\n  <li class=\"list-group-item\">Change to GBP: {{ rates.GBP }} </li>\n</ul>\n</template>\n\n"
  },
  {
    "path": "src/typescript/components/Header.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { useVersion } from '../version';\nimport { useStore } from 'vuex';\nimport { State } from '../store';\n\nexport default defineComponent({\n  name: 'Header',\n\n  setup() {\n    const { state } = useStore<State>();\n\n    return {\n      version: useVersion(),\n      state\n    };\n  }\n});\n</script>\n\n<template>\n<div class=\"py-5 text-center\">\n  <img class=\"d-block mx-auto mb-4\" src=\"../../../logo.png\" alt=\"\" width=\"72\" height=\"72\">\n  <h2>Vue {{ version }} Playground</h2>\n  <p class=\"lead\">\n    Below is an example form built with the Vue {{ version }} Composition API.\n  </p>\n</div>\n<Teleport to=\"#footer\">\n  <p class=\"mb-1\">&copy; {{ state.year }} blacksonic</p>\n</Teleport>\n</template>\n"
  },
  {
    "path": "src/typescript/components/Item.vue",
    "content": "<script lang=\"ts\">\nimport { defineComponent, SetupContext } from 'vue';\ntype EmitOption = 'update:name' | 'update:price' | 'update:quantity';\ntype Props = { name: string, prices: number, quantity: number };\n\nexport default defineComponent({\n  name: 'Item',\n  props: ['name', 'price', 'quantity'],\n  emits: ['update:name', 'update:price', 'update:quantity'],\n\n  setup(props: Props, { emit }: SetupContext<EmitOption[]>) {\n    const updateName = value => emit('update:name', value);\n    const updatePrice = value => emit('update:price', value);\n    const updateQuantity = value => emit('update:quantity', value);\n\n    return { updateName, updatePrice, updateQuantity };\n  }\n});\n</script>\n\n<template>\n<div class=\"row\">\n  <div class=\"col-md-6 mb-3\">\n    <label for=\"item-name\">Name</label>\n    <input :value=\"name\" @input=\"updateName($event.target.value)\" type=\"text\" class=\"form-control\" id=\"item-name\">\n  </div>\n  <div class=\"col-md-3 mb-3\">\n    <label for=\"item-price\">Price</label>\n    <input :value=\"price\" @input=\"updatePrice($event.target.value)\" type=\"number\" class=\"form-control\" id=\"item-price\">\n  </div>\n  <div class=\"col-md-3 mb-3\">\n    <label for=\"item-quantity\">Quantity</label>\n    <input :value=\"quantity\" @input=\"updateQuantity($event.target.value)\" type=\"number\" class=\"form-control\" id=\"item-quantity\">\n  </div>\n</div>\n</template>\n\n"
  },
  {
    "path": "src/typescript/components/Payment.tsx",
    "content": "import { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Payment',\n\n  setup() {\n    const payments = [\n      { id: 'credit', name: 'Credit card' },\n      { id: 'debit', name: 'Debit card' },\n      { id: 'paypal', name: 'Paypal' },\n    ];\n\n    return { payments };\n  },\n\n  render() {\n    return (\n      <div className=\"d-block my-3\">\n        {this.payments.map(payment => (\n          <div className=\"custom-control custom-radio\">\n            <input id={payment.id} name=\"paymentMethod\" type=\"radio\" className=\"custom-control-input\" />\n            <label className=\"custom-control-label\" htmlFor={payment.id}>{payment.name}</label>\n          </div>\n        ))}\n      </div>\n    );\n  }\n});\n\n\n\n"
  },
  {
    "path": "src/typescript/components/Spinner.ts",
    "content": "import { defineComponent, h } from 'vue';\n\nexport default defineComponent({\n  name: 'Spinner',\n\n  render() {\n    return h(\n      'div', { class: 'spinner-border', role: 'status' },\n      [\n        h('span', { class: 'sr-only' }, 'Loading...')\n      ]\n    );\n  }\n});\n"
  },
  {
    "path": "src/typescript/components/Username.test.ts",
    "content": "import { mount } from '@vue/test-utils';\nimport Username from './Username.vue';\n\ndescribe('Username', () => {\n  it('should display required text', () => {\n    const wrapper = mount(Username);\n\n    expect(wrapper.find('.invalid-feedback').text()).toEqual('Your username is required.');\n  });\n});\n"
  },
  {
    "path": "src/typescript/components/Username.vue",
    "content": "<template>\n<div class=\"mb-3\">\n  <slot :label=\"label\">\n    <label for=\"username\">Default label</label>\n  </slot>\n  <div class=\"input-group\">\n    <div class=\"input-group-prepend\"></div>\n    <input type=\"text\" class=\"form-control\" id=\"username\" placeholder=\"Username\" />\n    <div class=\"invalid-feedback\" style=\"width: 100%;\">\n      Your username is required.\n    </div>\n  </div>\n</div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'Username',\n\n  setup() {\n    return { label: 'Username' };\n  }\n});\n</script>\n"
  },
  {
    "path": "src/typescript/hooks.ts",
    "content": "import { reactive, ref, computed } from 'vue';\n\nexport interface Product {\n  firstName: string;\n  firstPrice: number;\n  firstQuantity: number;\n}\n\nexport const useCart = () => {\n  const product = reactive<Product>({ firstName: 'First Product', firstPrice: 10, firstQuantity: 1 });\n  const secondName = ref('Second Product');\n  const secondPrice = ref(20);\n  const secondQuantity = ref(2);\n  const total = computed<number>(() => (product.firstPrice * product.firstQuantity + secondPrice.value * secondQuantity.value) * (100 - coupon.value) / 100);\n  const coupon = ref(10);\n  const setCoupon = (percent): void => coupon.value = percent;\n\n  return { product, secondName, secondPrice, secondQuantity, total, coupon, setCoupon };\n};\n"
  },
  {
    "path": "src/typescript/main.ts",
    "content": "import { createApp } from 'vue';\nimport App from './App.vue';\nimport store from './store';\nimport router from './router';\nimport AtSign from './at-sign';\n\ncreateApp(App).use(store).use(router).directive('AtSign', AtSign).mount('#app');\n"
  },
  {
    "path": "src/typescript/router.ts",
    "content": "import { createRouter, createWebHashHistory } from 'vue-router';\nimport Cart from './components/Cart.vue';\nimport Checkout from './components/Checkout.vue';\n\nexport default createRouter({\n  history: createWebHashHistory(),\n  routes: [\n    { path: '/', name: 'cart', component: Cart },\n    { path: '/checkout', name: 'checkout', component: Checkout },\n  ],\n});\n"
  },
  {
    "path": "src/typescript/sfc.d.ts",
    "content": "declare module '*.vue' {\n  import { DefineComponent } from 'vue';\n  const component: DefineComponent<{}, {}, any>;\n  export default component;\n}\n"
  },
  {
    "path": "src/typescript/store.ts",
    "content": "import { createStore, ActionContext } from 'vuex';\n\nexport interface State {\n  year: string;\n}\n\nexport default createStore<State>({\n  state: {\n    year: '1970'\n  },\n  actions: {\n    onSetYear: (context: ActionContext<State, State>, year: string) => {\n      context.commit('setYear', year);\n    }\n  },\n  mutations: {\n    setYear(state: State, year: string) {\n      state.year = year;\n    }\n  }\n});\n"
  },
  {
    "path": "src/typescript/version.ts",
    "content": "import { version, provide, inject } from 'vue';\n\nconst versionSymbol: unique symbol = Symbol('version');\n\nexport const provideVersion = (): void => provide(versionSymbol, version);\nexport const useVersion = (): string | undefined => inject(versionSymbol);\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compileOnSave\": true,\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": false,\n    \"allowJs\": true,\n    \"alwaysStrict\": true,\n    \"declaration\": false,\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"importHelpers\": false,\n    \"lib\": [\"es2017\", \"dom\"],\n    \"module\": \"commonjs\",\n    \"moduleResolution\": \"node\",\n    \"noEmitHelpers\": false,\n    \"noEmitOnError\": false,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitThis\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": false,\n    \"pretty\": true,\n    \"removeComments\": true,\n    \"rootDir\": \"./\",\n    \"sourceMap\": true,\n    \"strictNullChecks\": true,\n    \"target\": \"ES2020\"\n  },\n  \"exclude\": [\"./node_modules\"]\n}\n"
  },
  {
    "path": "vite.config.js",
    "content": "import vue from '@vitejs/plugin-vue';\nimport vueJsx from '@vitejs/plugin-vue-jsx';\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: tag => /^x-/.test(tag)\n        }\n      }\n    }),\n    vueJsx()\n  ],\n  base: './',\n};\n"
  },
  {
    "path": "vitest.config.js",
    "content": "import { defineConfig } from 'vite';\nimport Vue from '@vitejs/plugin-vue';\nimport Jsx from '@vitejs/plugin-vue-jsx';\n\nexport default defineConfig({\n  plugins: [Vue(), Jsx()],\n  test: {\n    globals: true,\n    environment: 'jsdom',\n    transformMode: {\n      web: [/.[tj]sx$/],\n    },\n  },\n});\n"
  }
]