Merge pull request #1635 from privy-open-source/refactor/remove-vue-demi

refactor: remove 'vue-demi'

Author: adenvt

.gitattributes

@@ -0,0 +1 @@
+src/public/js/** linguist-vendored

package.json

@@ -133,7 +133,6 @@
     "vue": "3.5.13",
     "vue-collapsed": "^1.2.5",
     "vue-content-loader": "^2.0.1",
-    "vue-demi": "0.14.10",
     "vue-router": "4.5.1",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",

packages/eslint-config-persona/README.md

@@ -43,7 +43,7 @@ Optional, add this to `package.json` script's:
   "scripts": {
     // ...
     "lint": "eslint . --ext .js,.vue,.ts --format pretty",
-    "fix": "yarn lint:js --fix",
+    "fix": "yarn lint --fix",
     // ...
   }
   // ...

packages/eslint-config-persona/index.js

@@ -101,6 +101,7 @@ module.exports = {
     'align-assignments/align-assignments'       : [2, { requiresOnly: false }],
     'vue/multi-word-component-names'            : 'off',
     'vue/no-reserved-component-names'           : 'off',
+    'vue/return-in-computed-property'           : 'off',
     'vue/html-closing-bracket-newline'          : [
       'error',
       {

packages/persona/package.json

@@ -102,7 +102,6 @@
     "tiptap-extension-font-size": "^1.2.0",
     "ufo": "^1.5.4",
     "vue-collapsed": "1.3.4",
-    "vue-demi": "0.14.10",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "4.4.2"

src/assets/icon/collections.md

@@ -17,7 +17,7 @@ import pFormGroup from '../../components/form-group/FormGroup.vue'
 import pLabel from '../../components/label/Label.vue'
 import PiDownload16 from '@privyid/persona-icon/vue/download/16.vue'
 import { createSpinner } from '../../components/avatar/utils/create-image'
-import { computed, ref } from 'vue-demi'
+import { computed, ref } from 'vue'
 import {
   groupBy,
   sortBy,

src/assets/ilustration/collections.md

@@ -19,7 +19,7 @@ import pFormGroup from '../../components/form-group/FormGroup.vue'
 import pLabel from '../../components/label/Label.vue'
 import PiDownload16 from '@privyid/persona-icon/vue/download/16.vue'
 import { createSpinner } from '../../components/avatar/utils/create-image'
-import { computed, ref } from 'vue-demi'
+import { computed, ref } from 'vue'
 import {
   groupBy,
   sortBy,

src/components/accordion/Accordion.spec.ts

@@ -1,5 +1,5 @@
 import { render, fireEvent } from '@testing-library/vue'
-import { ref } from 'vue-demi'
+import { ref } from 'vue'
 import pAccordion from './Accordion.vue'
 import pAccordionItem from './AccordionItem.vue'
 import { defineAccordion } from '.'

src/components/accordion/Accordion.vue

@@ -24,8 +24,8 @@
 <script lang="ts" setup>
 import { useVModel } from '../input'
 import { type AccordionItem } from '.'
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
 import Item from './AccordionItem.vue'
 import AccordionItems from './AccordionItems.vue'
 

src/components/accordion/AccordionItem.spec.ts

@@ -2,7 +2,7 @@ import { render, fireEvent } from '@testing-library/vue'
 import { vi } from 'vitest'
 import pAccordionItem from './AccordionItem.vue'
 import iconPrivy from '@privyid/persona-icon/vue/privy-alt/24.vue'
-import { markRaw } from 'vue-demi'
+import { markRaw } from 'vue'
 
 it('should render properly without any props', () => {
   const screen = render({
@@ -125,8 +125,8 @@ it('Should be able to add custom title class from `titleClass` props', () => {
   const screen = render({
     components: { pAccordionItem },
     template  : `
-      <p-accordion-item 
-        title="custom title class" 
+      <p-accordion-item
+        title="custom title class"
         titleClass="custom-title-class">
         content
       </p-accordion-item>
@@ -143,7 +143,7 @@ it('Should be able to add custom content class from `contentClass` props', () =>
   const screen = render({
     components: { pAccordionItem },
     template  : `
-      <p-accordion-item 
+      <p-accordion-item
         title="custom content class"
         contentClass="custom-content-class">
         content
@@ -182,7 +182,7 @@ it('Should be able to custom icon via `icon` props', () => {
   const screen = render({
     components: { pAccordionItem },
     template  : `
-      <p-accordion-item 
+      <p-accordion-item
         title="custom icon class"
         icon="http://lorem-picsum.com">
         content
@@ -208,7 +208,7 @@ it('should be able to custom icon with Component and add custom icon class via `
       iconPrivy,
     },
     template: `
-      <p-accordion-item 
+      <p-accordion-item
         title="custom icon"
         :icon="icon"
         iconClass="custom-icon-class">

src/components/accordion/AccordionItem.vue

@@ -61,12 +61,12 @@ import type {
   VNode,
   PropType,
   Component,
-} from 'vue-demi'
+} from 'vue'
 import {
   computed,
   watch,
   h,
-} from 'vue-demi'
+} from 'vue'
 import Subheading from '../subheading/Subheading.vue'
 import pCollapse from '../collapse/Collapse.vue'
 import ChevronUp from '@privyid/persona-icon/vue/chevron-up/16.vue'

src/components/accordion/AccordionItems.vue

@@ -3,8 +3,8 @@
  * TODO: Migrate this component to script setup after defineRender has been release
  * https://github.com/vuejs/rfcs/discussions/585
  */
-import type { PropType } from 'vue-demi'
-import { defineComponent, h } from 'vue-demi'
+import type { PropType } from 'vue'
+import { defineComponent, h } from 'vue'
 import { findAllChildren } from '../utils/vnode'
 
 export default defineComponent({

src/components/accordion/index.md

@@ -10,7 +10,7 @@ description: Display content with collapse behavior
   import CaretUp from '@privyid/persona-icon/vue/caret-up/16.vue'
   import CaretDown from '@privyid/persona-icon/vue/caret-down/16.vue'
   import iconPrivy from '@privyid/persona-icon/vue/privy-alt/24.vue'
-  import { ref, markRaw } from 'vue-demi'
+  import { ref, markRaw } from 'vue'
   import { withBase } from 'vitepress'
 
   const items = defineAccordion([
@@ -441,7 +441,7 @@ Add props `no-caret` to hide caret icon. Add on `p-accordion` to hide globally,
 
 <script setup lang="ts">
 import iconPrivy from '@privyid/persona-icon/vue/privy-alt/24.vue'
-import { markRaw } from 'vue-demi'
+import { markRaw } from 'vue'
 
 const icon = markRaw(iconPrivy)
 </script>

src/components/aspect-ratio/index.ts

@@ -1,4 +1,4 @@
-import type { Directive } from 'vue-demi'
+import type { Directive } from 'vue'
 import { calculateRatio } from './utils/calculate-ratio'
 import { getObserver } from './utils/resize-observer'
 

src/components/avatar/Avatar.vue

@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import {
   computed,
   onMounted,
   ref,
   watch,
-} from 'vue-demi'
+} from 'vue'
 import {
   createAlias,
   createSpinner,

src/components/avatar/AvatarGroup.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import type { SizeVariant } from '.'
 import pAvatarTruncate from './AvatarTruncate.vue'
 

src/components/avatar/AvatarTruncate.vue

@@ -3,11 +3,11 @@
  * TODO: Migrate this component to script setup after defineRender has been release
  * https://github.com/vuejs/rfcs/discussions/585
  */
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import {
   h,
   defineComponent,
-} from 'vue-demi'
+} from 'vue'
 import { findAllChildren } from '../utils/vnode'
 import type { SizeVariant } from '.'
 import pAvatar from './Avatar.vue'

src/components/badge/Badge.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import { computed } from 'vue-demi'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
 import type { StyleVariant } from '.'
 import type { ColorVariant } from '../button'
 

src/components/banner/Banner.vue

@@ -37,8 +37,8 @@ import type {
   PropType,
   StyleValue,
   VNode,
-} from 'vue-demi'
-import { ref, computed } from 'vue-demi'
+} from 'vue'
+import { ref, computed } from 'vue'
 import type { StyleVariant } from '.'
 
 const BannerIcons = {

src/components/breadcrumbs/Breadcrumb.vue

@@ -33,8 +33,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { VNode } from 'vue-demi'
-import { provide } from 'vue-demi'
+import type { VNode } from 'vue'
+import { provide } from 'vue'
 import type { BreadcrumbItems } from '.'
 import BreadcrumbItem from './BreadcrumbItem.vue'
 import BreadcrumbItemDropdown from './BreadcrumbItemDropdown.vue'

src/components/breadcrumbs/BreadcrumbItem.vue

@@ -19,13 +19,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import {
   computed,
   inject,
   h,
   resolveComponent,
-} from 'vue-demi'
+} from 'vue'
 import IconChevron from '@privyid/persona-icon/vue/chevron-right/20.vue'
 import type { RouteLocationRaw } from 'vue-router'
 

src/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -23,7 +23,7 @@ import {
   computed,
   inject,
   h,
-} from 'vue-demi'
+} from 'vue'
 import Dropdown from '../dropdown/Dropdown.vue'
 import IconChevron from '@privyid/persona-icon/vue/chevron-right/20.vue'
 

src/components/button-group/ButtonGroup.vue

@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import {
   computed,
   provide,
   toRef,
-} from 'vue-demi'
+} from 'vue'
 import { BUTTONGROUP_SETTING } from '.'
 import type { SizeVariant } from '../button'
 

src/components/button-group/index.md

@@ -4,7 +4,7 @@ description: Collection of buttons consisting of at least 2 buttons in single li
 ---
 
 <script setup>
-  import { ref } from "vue-demi"
+  import { ref } from 'vue'
   import pButtonGroup from './ButtonGroup.vue'
   import pButton from '../button/Button.vue'
   import pDropdown from '../dropdown/Dropdown.vue'

src/components/button-group/index.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey, Ref } from 'vue-demi'
+import type { InjectionKey, Ref } from 'vue'
 import type { SizeVariant } from '../button'
 
 export interface ButtonGroupSetting {

src/components/button/Button.vue

@@ -19,12 +19,12 @@
 import type {
   PropType,
   VNode,
-} from 'vue-demi'
+} from 'vue'
 import {
   computed,
   inject,
   resolveComponent,
-} from 'vue-demi'
+} from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type {
   ColorVariant,

src/components/calendar/Calendar.spec.ts

@@ -1,5 +1,5 @@
 import { render, fireEvent } from '@testing-library/vue'
-import { ref } from 'vue-demi'
+import { ref } from 'vue'
 import Calendar from './Calendar.vue'
 
 it('should render properly without any props', () => {

src/components/calendar/Calendar.vue

@@ -78,12 +78,12 @@ import pButton from '../button/Button.vue'
 import pCard from '../card/Card.vue'
 import IconNext from '@privyid/persona-icon/vue/chevron-right/20.vue'
 import IconBack from '@privyid/persona-icon/vue/chevron-left/20.vue'
-import type { PropType } from 'vue-demi'
+import type { PropType } from 'vue'
 import {
   ref,
   computed,
   watch,
-} from 'vue-demi'
+} from 'vue'
 import type {
   CalendarAdapter,
   CalendarContext,

src/components/calendar/adapter/adapter.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue-demi'
+import type { Ref } from 'vue'
 import { type Duration } from 'date-fns'
 import { chunk } from 'lodash-es'
 

src/components/calendar/adapter/date.spec.ts

@@ -1,5 +1,5 @@
 import Adapter from './date'
-import { ref } from 'vue-demi'
+import { ref } from 'vue'
 import type { CalendarContext, CalendarItem } from './adapter'
 import { initStore, setLang } from '../../global/store'
 import {

src/components/calendar/index.md

@@ -6,7 +6,7 @@ description: Sub-component for Datepicker
 <script setup>
   import pCalendar from "./Calendar.vue"
   import Banner from "../banner/Banner.vue"
-  import { ref } from "vue-demi"
+  import { ref } from 'vue'
   import { format, startOfYear, endOfYear, endOfMonth } from 'date-fns'
 
   const value = ref()

src/components/camera/Camera.spec.ts

@@ -13,7 +13,7 @@ import type * as VueUse from '@vueuse/core'
 import { defineAdapter } from './adapter/adapter'
 import { delay } from 'nanodelay'
 import { until } from '@vueuse/core'
-import { nextTick, ref } from 'vue-demi'
+import { nextTick, ref } from 'vue'
 import Camera from './Camera.vue'
 
 vi.mock('./utils/take-picture.ts', () => {

src/components/camera/Camera.vue

@@ -121,14 +121,14 @@ import type {
   ComputedRef,
   PropType,
   VNode,
-} from 'vue-demi'
+} from 'vue'
 import {
   computed,
   onBeforeUnmount,
   onMounted,
   ref,
   toRef,
-} from 'vue-demi'
+} from 'vue'
 import pButton from '../button/Button.vue'
 import IconRotate from '@privyid/persona-icon/vue/refresh/16.vue'
 import IconCamera from '@privyid/persona-icon/vue/camera/24.vue'

src/components/camera/__mocks__/run-adapter.ts

@@ -1,11 +1,11 @@
 import defu from 'defu'
 import { vi } from 'vitest'
 import type { Adapter, AdapterMeta } from '../adapter/adapter'
-import type { ComputedRef } from 'vue-demi'
+import type { ComputedRef } from 'vue'
 import {
   computed,
   ref,
-} from 'vue-demi'
+} from 'vue'
 
 export const video = document.createElement('video')