{"version":3,"sources":["webpack:///./src/components/BookNoteArea.vue?c045","webpack:///./src/views/Book.vue?d71b","webpack:///./src/views/Book.vue","webpack:///./src/components/BookRate.vue","webpack:///./src/components/BookRate.vue?7c75","webpack:///./src/components/BookRate.vue?b62d","webpack:///./src/components/BookNoteArea.vue","webpack:///./node_modules/debounce-fn/index.js","webpack:///./src/components/BookNoteArea.vue?b304","webpack:///./src/components/BookNoteArea.vue?515c","webpack:///./src/views/Book.vue?2986","webpack:///./src/views/Book.vue?82b7","webpack:///./node_modules/debounce-fn/node_modules/mimic-fn/index.js","webpack:///./src/components/BookRate.vue?dcda"],"names":["class","data-testid","for","isSuccess","src","book","coverImageUrl","alt","title","author","publisher","buttonsRef","buttons","bookState","isRead","starRef","star","listItem","formatDate","startDate","finishDate","synopsis","slice","noteRef","note","isError","error","isLoading","aria-label","template","variant","style","rows","animated","numberOfStar","i","type","id","bookId","name","rateBook","checked","rating","message","props","Object","required","setup","useActor","starState","state","sendStar","send","isRating","value","matches","context","data","render","__scopeId","cols","updateNoteChange","noteValue","debounceFn","inputFunction","options","TypeError","wait","maxWait","Number","Infinity","before","after","Error","timeout","maxTimeout","result","debouncedFunction","arguments_","this","later","undefined","clearTimeout","apply","maxLater","shouldCallNow","setTimeout","cancel","notes","noteState","sendNote","debounceMutate","components","ErrorMessage","route","params","useMachine","bookMachine","bookService","service","some","s","isostring","Intl","DateTimeFormat","month","year","format","Date","TooltipStatus","BookRate","BookNoteArea","copyProperty","to","from","property","ignoreNonConfigurable","toDescriptor","getOwnPropertyDescriptor","fromDescriptor","canCopyProperty","defineProperty","configurable","writable","enumerable","changePrototype","fromPrototype","getPrototypeOf","setPrototypeOf","wrappedToString","withName","fromBody","toStringDescriptor","Function","prototype","toStringName","toString","changeToString","trim","newToString","bind","mimicFn","Reflect","ownKeys","module","exports"],"mappings":"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","file":"js/book.75e9d8c6.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./BookNoteArea.vue?vue&type=style&index=0&id=094326f8&scoped=true&lang=css\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Book.vue?vue&type=style&index=0&id=4278082f&lang=scss&scoped=true\"","<template>\n  <main class=\"book\">\n    <div class=\"book-container\" v-if=\"isSuccess\">\n      <section class=\"book-container--head\">\n        <div class=\"book__cover-container\">\n          <img\n            :src=\"book.coverImageUrl\"\n            :alt=\"`${book.title} cover image`\"\n            class=\"book__cover-img\"\n          />\n        </div>\n        <div class=\"book__info-warpper\">\n          <h2 class=\"book__title\">\n            {{ book.title }}\n          </h2>\n          <div class=\"book__maker\">\n            <span class=\"book__author\">{{ book.author }}</span> |\n            <span>{{ book.publisher }}</span>\n          </div>\n          <div class=\"book__button\">\n            <TooltipStatus :buttonsRef=\"buttons\" :bookState=\"bookState\" />\n          </div>\n          <div class=\"book__rate\" v-if=\"isRead\">\n            <BookRate :starRef=\"star\" :listItem=\"listItem\" />\n          </div>\n          <div class=\"book__date\" v-if=\"isRead\">\n            <i class=\"el-icon-date\"></i>\n            <span>{{ formatDate(listItem.startDate) }}</span>\n            <!-- eslint-disable-next-line  -->\n            <span v-if=\"listItem.finishDate\">\n              - &nbsp;{{ formatDate(listItem.finishDate) }}</span\n            >\n          </div>\n          <p class=\"book__synopsis\" data-testid=\"book-synopsis\">\n            {{ book.synopsis.slice(0, 500) }}...\n          </p>\n        </div>\n      </section>\n      <section class=\"book-container--tail\" v-if=\"isRead\">\n        <label for=\"book__note\" class=\"book__label\">Notes:</label>\n        <BookNoteArea :noteRef=\"note\" :listItem=\"listItem\" />\n      </section>\n    </div>\n    <section class=\"book-error\" v-if=\"isError\">\n      <ErrorMessage :error=\"error\" />\n    </section>\n    <el-skeleton class=\"book-container\" v-if=\"isLoading\" aria-label=\"loading\">\n      <template #template>\n        <section class=\"book-container--head\">\n          <div class=\"book__cover-container\">\n            <el-skeleton-item\n              variant=\"image\"\n              class=\"book__cover-img\"\n              style=\"height: 214px\"\n            />\n          </div>\n          <div class=\"book__info-warpper\">\n            <el-skeleton :rows=\"5\" animated />\n          </div>\n        </section>\n      </template>\n    </el-skeleton>\n  </main>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport TooltipStatus from \"@/components/TooltipStatus.vue\";\nimport BookRate from \"@/components/BookRate.vue\";\nimport BookNoteArea from \"@/components/BookNoteArea.vue\";\nimport { ErrorMessage } from \"@/components/lib\";\nimport { useMachine } from \"@xstate/vue\";\nimport { bookMachine } from \"@/machines/bookMachine\";\n\nexport default defineComponent({\n  setup() {\n    const route = useRoute();\n    const bookId = computed(() => route.params.bookId as string);\n\n    const { state: bookState, service: bookService } = useMachine(\n      bookMachine({ bookId: bookId.value })\n    );\n    const isLoading = computed(() =>\n      [\"loadBook.book\", \"loadBook.listItem\"].some((s) =>\n        bookState.value.matches(s as \"loadBook.book\" | \"loadBook.listItem\")\n      )\n    );\n    const isError = computed(() => bookState.value.matches(\"loadBook.failure\"));\n    const isSuccess = computed(() => bookState.value.matches(\"success\"));\n    const error = computed(() => bookState.value.context.message);\n    const listItem = computed(() => bookState.value.context?.listItem);\n    const isRead = computed(() => bookState.value.matches(\"success.read\"));\n    const note = computed(() => bookState.value.context?.note);\n    const star = computed(() => bookState.value.context?.star);\n    const buttons = computed(() => bookState.value.context?.buttons);\n    const book = computed(() => bookState.value.context?.book);\n\n    function formatDate(isostring: number): string {\n      return Intl.DateTimeFormat(undefined, {\n        month: \"short\",\n        year: \"2-digit\",\n      }).format(new Date(isostring));\n    }\n\n    return {\n      bookState,\n      book,\n      bookService,\n      isSuccess,\n      isLoading,\n      listItem,\n      formatDate,\n      isError,\n      error,\n      isRead,\n      note,\n      star,\n      buttons,\n    };\n  },\n  components: {\n    TooltipStatus,\n    BookRate,\n    BookNoteArea,\n    ErrorMessage,\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.book {\n  border: 2px solid white;\n  width: 44rem;\n  padding: 1rem;\n}\n.book-container--head {\n  display: flex;\n  column-gap: 2rem;\n}\n.book-container--tail {\n  margin-top: 3rem;\n}\n.book {\n  position: relative;\n  min-height: 25rem;\n  &__cover-container {\n    width: 12rem;\n  }\n  &__cover-img {\n    width: 100%;\n    aspect-ratio: 71 / 107;\n  }\n  &__info-warpper {\n    display: grid;\n    grid-template-columns: 9fr 1fr;\n    column-gap: 1rem;\n    row-gap: 1rem;\n    width: 100%;\n  }\n  &__title {\n    font-size: 2rem;\n    grid-row: 1 / 2;\n  }\n  &__button {\n    grid-row: 1 / 3;\n    grid-column: 2 / 3;\n    justify-self: right;\n  }\n  &__rate {\n    grid-column: 1 / -1;\n    height: 2rem;\n  }\n  &__date {\n    grid-column: 1 / -1;\n    display: flex;\n    column-gap: 0.5rem;\n    height: 1.2rem;\n  }\n  &__synopsis {\n    grid-column: 1 / -1;\n  }\n\n  /* tail */\n}\n.book-error {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  height: 16rem;\n}\n</style>\n","<template>\n  <div class=\"rate\">\n    <template v-for=\"i in numberOfStar\" :key=\"i\">\n      <input\n        type=\"radio\"\n        :id=\"`${listItem.bookId}-${i}`\"\n        class=\"rate__radio\"\n        name=\"rate\"\n        aria-label=\"star\"\n        @change.prevent=\"rateBook({ id: listItem.id, rating: i })\"\n        :checked=\"listItem.rating === i\"\n      />\n      <label :for=\"`${listItem.bookId}-${i}`\" class=\"rate__label\">\n        <i\n          :class=\"{\n            'el-icon-star-on': true,\n            // eslint-disable-next-line\n            rate__icon: true,\n            'rate__icon--unrate': !isRating,\n            'rate__icon--rated': isRating,\n          }\"\n        ></i>\n      </label>\n      <p v-if=\"isError\">there are a error: {{ error.message }}</p>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType } from \"vue\";\nimport { useActor } from \"@xstate/vue\";\nimport { DataMachineActor } from \"@/machines/dataMachine\";\nimport type { item } from \"@/types\";\n\nexport default defineComponent({\n  props: {\n    starRef: {\n      type: Object as PropType<DataMachineActor>,\n      required: true,\n    },\n    listItem: {\n      type: Object as PropType<item>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const numberOfStar = 5;\n    const { state: starState, send: sendStar } = useActor(props.starRef);\n    const isRating = computed(() =>\n      props.listItem.rating == -1 ? false : true\n    );\n    const { isError, error } = {\n      isError: computed(() => starState.value.matches(\"failure\")),\n      error: computed(() => starState.value.context?.message),\n    };\n    const rateBook = (data: { id: string; rating: number }) =>\n      sendStar({ type: \"CLICK\", data });\n\n    return { numberOfStar, isRating, rateBook, isError, error };\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.rate {\n  position: relative;\n  display: inline-block;\n}\n.rate__radio {\n  position: absolute;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n.rate__radio:checked ~ .rate__label > .rate__icon {\n  color: whitesmoke;\n}\n.rate__radio:checked + .rate__label > .rate__icon {\n  color: orange;\n}\n.rate:hover .rate__label .rate__icon {\n  color: orange;\n}\n.rate__radio:hover ~ .rate__label > .rate__icon {\n  color: whitesmoke;\n}\n.rate__radio:hover + .rate__label > .rate__icon {\n  color: orange;\n}\n\n.rate__icon {\n  font-size: 1.7rem;\n  cursor: pointer;\n}\n.rate__icon--unrate {\n  color: whitesmoke;\n}\n.rate__icon--rated {\n  color: orange;\n}\n</style>\n","\nimport { computed, defineComponent, PropType } from \"vue\";\nimport { useActor } from \"@xstate/vue\";\nimport { DataMachineActor } from \"@/machines/dataMachine\";\nimport type { item } from \"@/types\";\n\nexport default defineComponent({\n  props: {\n    starRef: {\n      type: Object as PropType<DataMachineActor>,\n      required: true,\n    },\n    listItem: {\n      type: Object as PropType<item>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const numberOfStar = 5;\n    const { state: starState, send: sendStar } = useActor(props.starRef);\n    const isRating = computed(() =>\n      props.listItem.rating == -1 ? false : true\n    );\n    const { isError, error } = {\n      isError: computed(() => starState.value.matches(\"failure\")),\n      error: computed(() => starState.value.context?.message),\n    };\n    const rateBook = (data: { id: string; rating: number }) =>\n      sendStar({ type: \"CLICK\", data });\n\n    return { numberOfStar, isRating, rateBook, isError, error };\n  },\n});\n","import { render } from \"./BookRate.vue?vue&type=template&id=b914c332&scoped=true\"\nimport script from \"./BookRate.vue?vue&type=script&lang=ts\"\nexport * from \"./BookRate.vue?vue&type=script&lang=ts\"\n\nimport \"./BookRate.vue?vue&type=style&index=0&id=b914c332&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-b914c332\"\n\nexport default script","<template>\n  <i class=\"el-icon-loading\" aria-label=\"loading\" v-if=\"isLoading\" />\n  <ErrorMessage :error=\"error\" v-if=\"isError\" />\n  <textarea\n    name=\"note\"\n    class=\"book__note\"\n    id=\"book__note\"\n    cols=\"30\"\n    rows=\"10\"\n    @input=\"updateNoteChange\"\n    v-model=\"noteValue\"\n    aria-label=\"note\"\n  ></textarea>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, ref, computed } from \"vue\";\nimport type { item } from \"@/types\";\nimport debounceFn from \"debounce-fn\";\nimport { ErrorMessage } from \"@/components/lib\";\nimport { useActor } from \"@xstate/vue\";\nimport type { DataMachineActor } from \"@/machines/dataMachine\";\n\nexport default defineComponent({\n  props: {\n    noteRef: {\n      type: Object as PropType<DataMachineActor>,\n      required: true,\n    },\n    listItem: {\n      type: Object as PropType<item>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const noteValue = ref(props.listItem.notes);\n    const { state: noteState, send: sendNote } = useActor(props.noteRef);\n\n    type DebounceMutate = (notes: string) => void;\n    const debounceMutate: DebounceMutate = debounceFn(\n      (notes) => sendNote({ type: \"CLICK\", data: { notes } }),\n      { wait: 3000 }\n    );\n    function updateNoteChange() {\n      debounceMutate(noteValue.value);\n    }\n\n    const { isError, error, isLoading } = {\n      isLoading: computed(() => noteState.value.matches(\"loading\")),\n      isError: computed(() => noteState.value.matches(\"failure\")),\n      error: computed(() => noteState.value.context?.message),\n    };\n    return { isError, error, isLoading, noteValue, updateNoteChange };\n  },\n  components: {\n    ErrorMessage,\n  },\n});\n</script>\n\n<style scoped>\n.book__note {\n  margin-top: 1rem;\n  display: block;\n  width: 100%;\n}\n</style>\n","import mimicFn from 'mimic-fn';\n\nconst debounceFn = (inputFunction, options = {}) => {\n\tif (typeof inputFunction !== 'function') {\n\t\tthrow new TypeError(`Expected the first argument to be a function, got \\`${typeof inputFunction}\\``);\n\t}\n\n\tconst {\n\t\twait = 0,\n\t\tmaxWait = Number.Infinity,\n\t\tbefore = false,\n\t\tafter = true\n\t} = options;\n\n\tif (!before && !after) {\n\t\tthrow new Error('Both `before` and `after` are false, function wouldn\\'t be called.');\n\t}\n\n\tlet timeout;\n\tlet maxTimeout;\n\tlet result;\n\n\tconst debouncedFunction = function (...arguments_) {\n\t\tconst context = this;\n\n\t\tconst later = () => {\n\t\t\ttimeout = undefined;\n\n\t\t\tif (maxTimeout) {\n\t\t\t\tclearTimeout(maxTimeout);\n\t\t\t\tmaxTimeout = undefined;\n\t\t\t}\n\n\t\t\tif (after) {\n\t\t\t\tresult = inputFunction.apply(context, arguments_);\n\t\t\t}\n\t\t};\n\n\t\tconst maxLater = () => {\n\t\t\tmaxTimeout = undefined;\n\n\t\t\tif (timeout) {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\ttimeout = undefined;\n\t\t\t}\n\n\t\t\tif (after) {\n\t\t\t\tresult = inputFunction.apply(context, arguments_);\n\t\t\t}\n\t\t};\n\n\t\tconst shouldCallNow = before && !timeout;\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(later, wait);\n\n\t\tif (maxWait > 0 && maxWait !== Number.Infinity && !maxTimeout) {\n\t\t\tmaxTimeout = setTimeout(maxLater, maxWait);\n\t\t}\n\n\t\tif (shouldCallNow) {\n\t\t\tresult = inputFunction.apply(context, arguments_);\n\t\t}\n\n\t\treturn result;\n\t};\n\n\tmimicFn(debouncedFunction, inputFunction);\n\n\tdebouncedFunction.cancel = () => {\n\t\tif (timeout) {\n\t\t\tclearTimeout(timeout);\n\t\t\ttimeout = undefined;\n\t\t}\n\n\t\tif (maxTimeout) {\n\t\t\tclearTimeout(maxTimeout);\n\t\t\tmaxTimeout = undefined;\n\t\t}\n\t};\n\n\treturn debouncedFunction;\n};\n\nexport default debounceFn;\n","\nimport { defineComponent, PropType, ref, computed } from \"vue\";\nimport type { item } from \"@/types\";\nimport debounceFn from \"debounce-fn\";\nimport { ErrorMessage } from \"@/components/lib\";\nimport { useActor } from \"@xstate/vue\";\nimport type { DataMachineActor } from \"@/machines/dataMachine\";\n\nexport default defineComponent({\n  props: {\n    noteRef: {\n      type: Object as PropType<DataMachineActor>,\n      required: true,\n    },\n    listItem: {\n      type: Object as PropType<item>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const noteValue = ref(props.listItem.notes);\n    const { state: noteState, send: sendNote } = useActor(props.noteRef);\n\n    type DebounceMutate = (notes: string) => void;\n    const debounceMutate: DebounceMutate = debounceFn(\n      (notes) => sendNote({ type: \"CLICK\", data: { notes } }),\n      { wait: 3000 }\n    );\n    function updateNoteChange() {\n      debounceMutate(noteValue.value);\n    }\n\n    const { isError, error, isLoading } = {\n      isLoading: computed(() => noteState.value.matches(\"loading\")),\n      isError: computed(() => noteState.value.matches(\"failure\")),\n      error: computed(() => noteState.value.context?.message),\n    };\n    return { isError, error, isLoading, noteValue, updateNoteChange };\n  },\n  components: {\n    ErrorMessage,\n  },\n});\n","import { render } from \"./BookNoteArea.vue?vue&type=template&id=094326f8&scoped=true\"\nimport script from \"./BookNoteArea.vue?vue&type=script&lang=ts\"\nexport * from \"./BookNoteArea.vue?vue&type=script&lang=ts\"\n\nimport \"./BookNoteArea.vue?vue&type=style&index=0&id=094326f8&scoped=true&lang=css\"\nscript.render = render\nscript.__scopeId = \"data-v-094326f8\"\n\nexport default script","\nimport { computed, defineComponent } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport TooltipStatus from \"@/components/TooltipStatus.vue\";\nimport BookRate from \"@/components/BookRate.vue\";\nimport BookNoteArea from \"@/components/BookNoteArea.vue\";\nimport { ErrorMessage } from \"@/components/lib\";\nimport { useMachine } from \"@xstate/vue\";\nimport { bookMachine } from \"@/machines/bookMachine\";\n\nexport default defineComponent({\n  setup() {\n    const route = useRoute();\n    const bookId = computed(() => route.params.bookId as string);\n\n    const { state: bookState, service: bookService } = useMachine(\n      bookMachine({ bookId: bookId.value })\n    );\n    const isLoading = computed(() =>\n      [\"loadBook.book\", \"loadBook.listItem\"].some((s) =>\n        bookState.value.matches(s as \"loadBook.book\" | \"loadBook.listItem\")\n      )\n    );\n    const isError = computed(() => bookState.value.matches(\"loadBook.failure\"));\n    const isSuccess = computed(() => bookState.value.matches(\"success\"));\n    const error = computed(() => bookState.value.context.message);\n    const listItem = computed(() => bookState.value.context?.listItem);\n    const isRead = computed(() => bookState.value.matches(\"success.read\"));\n    const note = computed(() => bookState.value.context?.note);\n    const star = computed(() => bookState.value.context?.star);\n    const buttons = computed(() => bookState.value.context?.buttons);\n    const book = computed(() => bookState.value.context?.book);\n\n    function formatDate(isostring: number): string {\n      return Intl.DateTimeFormat(undefined, {\n        month: \"short\",\n        year: \"2-digit\",\n      }).format(new Date(isostring));\n    }\n\n    return {\n      bookState,\n      book,\n      bookService,\n      isSuccess,\n      isLoading,\n      listItem,\n      formatDate,\n      isError,\n      error,\n      isRead,\n      note,\n      star,\n      buttons,\n    };\n  },\n  components: {\n    TooltipStatus,\n    BookRate,\n    BookNoteArea,\n    ErrorMessage,\n  },\n});\n","import { render } from \"./Book.vue?vue&type=template&id=4278082f&scoped=true\"\nimport script from \"./Book.vue?vue&type=script&lang=ts\"\nexport * from \"./Book.vue?vue&type=script&lang=ts\"\n\nimport \"./Book.vue?vue&type=style&index=0&id=4278082f&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-4278082f\"\n\nexport default script","'use strict';\n\nconst copyProperty = (to, from, property, ignoreNonConfigurable) => {\n\t// `Function#length` should reflect the parameters of `to` not `from` since we keep its body.\n\t// `Function#prototype` is non-writable and non-configurable so can never be modified.\n\tif (property === 'length' || property === 'prototype') {\n\t\treturn;\n\t}\n\n\t// `Function#arguments` and `Function#caller` should not be copied. They were reported to be present in `Reflect.ownKeys` for some devices in React Native (#41), so we explicitly ignore them here.\n\tif (property === 'arguments' || property === 'caller') {\n\t\treturn;\n\t}\n\n\tconst toDescriptor = Object.getOwnPropertyDescriptor(to, property);\n\tconst fromDescriptor = Object.getOwnPropertyDescriptor(from, property);\n\n\tif (!canCopyProperty(toDescriptor, fromDescriptor) && ignoreNonConfigurable) {\n\t\treturn;\n\t}\n\n\tObject.defineProperty(to, property, fromDescriptor);\n};\n\n// `Object.defineProperty()` throws if the property exists, is not configurable and either:\n//  - one its descriptors is changed\n//  - it is non-writable and its value is changed\nconst canCopyProperty = function (toDescriptor, fromDescriptor) {\n\treturn toDescriptor === undefined || toDescriptor.configurable || (\n\t\ttoDescriptor.writable === fromDescriptor.writable &&\n\t\ttoDescriptor.enumerable === fromDescriptor.enumerable &&\n\t\ttoDescriptor.configurable === fromDescriptor.configurable &&\n\t\t(toDescriptor.writable || toDescriptor.value === fromDescriptor.value)\n\t);\n};\n\nconst changePrototype = (to, from) => {\n\tconst fromPrototype = Object.getPrototypeOf(from);\n\tif (fromPrototype === Object.getPrototypeOf(to)) {\n\t\treturn;\n\t}\n\n\tObject.setPrototypeOf(to, fromPrototype);\n};\n\nconst wrappedToString = (withName, fromBody) => `/* Wrapped ${withName}*/\\n${fromBody}`;\n\nconst toStringDescriptor = Object.getOwnPropertyDescriptor(Function.prototype, 'toString');\nconst toStringName = Object.getOwnPropertyDescriptor(Function.prototype.toString, 'name');\n\n// We call `from.toString()` early (not lazily) to ensure `from` can be garbage collected.\n// We use `bind()` instead of a closure for the same reason.\n// Calling `from.toString()` early also allows caching it in case `to.toString()` is called several times.\nconst changeToString = (to, from, name) => {\n\tconst withName = name === '' ? '' : `with ${name.trim()}() `;\n\tconst newToString = wrappedToString.bind(null, withName, from.toString());\n\t// Ensure `to.toString.toString` is non-enumerable and has the same `same`\n\tObject.defineProperty(newToString, 'name', toStringName);\n\tObject.defineProperty(to, 'toString', {...toStringDescriptor, value: newToString});\n};\n\nconst mimicFn = (to, from, {ignoreNonConfigurable = false} = {}) => {\n\tconst {name} = to;\n\n\tfor (const property of Reflect.ownKeys(from)) {\n\t\tcopyProperty(to, from, property, ignoreNonConfigurable);\n\t}\n\n\tchangePrototype(to, from);\n\tchangeToString(to, from, name);\n\n\treturn to;\n};\n\nmodule.exports = mimicFn;\n","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./BookRate.vue?vue&type=style&index=0&id=b914c332&lang=scss&scoped=true\""],"sourceRoot":""}