refactor: get rid of all markRaw

hunterliu1003 · hunterliu1003 · commit 351a293f5865 · 2023-01-11T12:47:51.000+08:00
diff --git a/docs/components/content/DragResizeModalPreview.vue b/docs/components/content/DragResizeModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import DragResizeModal from './DragResizeModal.vue'
 
 const { open } = useModal({
-  component: markRaw(DragResizeModal),
+  component: DragResizeModal,
 })
 </script>
 
diff --git a/docs/components/content/FullscreenPreview.vue b/docs/components/content/FullscreenPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import Fullscreen from './Fullscreen.vue'
 
 const { open } = useModal({
-  component: markRaw(Fullscreen),
+  component: Fullscreen,
 })
 </script>
 
diff --git a/docs/components/content/LoginFormModalPreview.vue b/docs/components/content/LoginFormModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import LoginFormModal from './LoginFormModal.vue'
 
 const { open, close } = useModal<InstanceType<typeof LoginFormModal>['$props']>({
-  component: markRaw(LoginFormModal),
+  component: LoginFormModal,
   attrs: {
     onSubmit(formData) {
       alert(JSON.stringify(formData, null, 2))
diff --git a/docs/components/content/NestedModalPreview.vue b/docs/components/content/NestedModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import ConfirmModal from './ConfirmModal.vue'
 
 const confirm1 = useModal({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'The first confirm modal',
     onConfirm() {
@@ -16,7 +16,7 @@ const confirm1 = useModal({
 })
 
 const confirm2 = useModal({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'The second confirm modal',
     onConfirm() {
diff --git a/docs/components/content/PlainCssConfirmModalPreview.vue b/docs/components/content/PlainCssConfirmModalPreview.vue
@@ -3,7 +3,7 @@ import { ModalsContainer, useModal } from 'vue-final-modal'
 import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 
 const { open, close } = useModal({
-  component: markRaw(PlainCssConfirmModal),
+  component: PlainCssConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/components/content/UseModalPreview.vue b/docs/components/content/UseModalPreview.vue
@@ -5,7 +5,7 @@ import ConfirmModal from './ConfirmModal.vue'
 const { open, close } = useModal<
   InstanceType<typeof ConfirmModal>['$props']
 >({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/content/2.get-started/1.guide/3.migration-guide.md b/docs/content/2.get-started/1.guide/3.migration-guide.md
@@ -81,7 +81,7 @@ So this:
 
 ```ts
 this.$vfm.show({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   bind: {
     name: 'ConfirmModalName'
   },
@@ -103,7 +103,7 @@ Will be re-written as this:
 
 ```ts
 const { open, close } = useModal<InstanceType<typeof ConfirmModal>['$props']>({
-  component: markRaw(ConfirmModal),
+  component: ConfirmModal,
   attrs: {
     title: 'Hello World!',
     onConfirm() {
diff --git a/docs/content/3.api/2.composables/1.use-modal.md b/docs/content/3.api/2.composables/1.use-modal.md
@@ -24,13 +24,12 @@ import { ModalsContainer } from 'vue-final-modal'
 ## Usage
 
 ```ts
-import { markRaw } from 'vue'
 import { VueFinalModal, useModal } from 'vue-final-modal'
 
 const modalInstance = useModal<
   InstanceType<typeof VueFinalModal>['$props']
 >({
-  component: markRaw(VueFinalModal),
+  component: VueFinalModal,
   attrs: {
     // Props
     displayDirective: 'if',
@@ -90,14 +89,13 @@ You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no
 - Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
   ```ts
   // Anywhere outside out script setup
-  import { markRaw } from 'vue'
   import { VueFinalModal, useModal } from 'vue-final-modal'
   import { vfm } from '@/plugins/vue-final-modal'
 
   export function openConfirmModal() {
     const modalInstance = useModal({
       context: vfm,
-      component: markRaw(MyConfirmModal),
+      component: MyConfirmModal,
       attrs: {
         onClosed() {
           modalInstance.destroy()
@@ -126,14 +124,13 @@ You have to manually calling `modalInstance.destroy()`{lang=ts} whenever you no
 - Then you can using `useModal()`{lang=ts} everywhere by given the same `vfm` instance to `options.context`{lang=ts}:
   ```ts
   // Anywhere outside out script setup
-  import { markRaw } from 'vue'
   import { VueFinalModal, useModal } from 'vue-final-modal'
   import { vfm } from '@/plugins/vue-final-modal'
 
   export function openConfirmModal() {
     const modalInstance = useModal({
       context: vfm,
-      component: markRaw(MyConfirmModal),
+      component: MyConfirmModal,
       attrs: {
         onClosed() {
           modalInstance.destroy()
diff --git a/examples/nuxt3/components/MyModalPreview.vue b/examples/nuxt3/components/MyModalPreview.vue
@@ -3,7 +3,7 @@ import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 
 const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
-  component: markRaw(MyModal),
+  component: MyModal,
   attrs: {
     title: 'Hello World!',
   },
diff --git a/examples/vue3/src/components/MyModalPreview.vue b/examples/vue3/src/components/MyModalPreview.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { markRaw } from 'vue'
 import { useModal } from 'vue-final-modal'
 import MyModal from './MyModal.vue'
 import VButton from './VButton.vue'
 
 const { open } = useModal<InstanceType<typeof MyModal>['$props']>({
-  component: markRaw(MyModal),
+  component: MyModal,
   attrs: {
     title: 'Hello World!',
   },
diff --git a/packages/nuxt/playground/components/showConfirmModal.ts b/packages/nuxt/playground/components/showConfirmModal.ts
@@ -5,7 +5,7 @@ import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
 export function showConfirmModal(vfm: Vfm) {
   const { open, close, destroy } = useModal({
     context: vfm,
-    component: markRaw(PlainCssConfirmModal),
+    component: PlainCssConfirmModal,
     attrs: {
       title: 'Hello World!',
       onConfirm() {
diff --git a/viteplay/src/components/ModalBottom/Basic.example.vue b/viteplay/src/components/ModalBottom/Basic.example.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markRaw, ref } from 'vue'
+import { ref } from 'vue'
 import { ModalBottom, ModalsContainer, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
@@ -12,7 +12,7 @@ const bottomSheet = useModal<
   InstanceType<typeof ModalBottom>['$props'],
   InstanceType<typeof DefaultSlot>['$props']
 >({
-  component: markRaw(ModalBottom),
+  component: ModalBottom,
   attrs: {
     background: 'interactive',
     contentStyle: {
@@ -21,7 +21,7 @@ const bottomSheet = useModal<
   },
   slots: {
     default: {
-      component: markRaw(DefaultSlot),
+      component: DefaultSlot,
       attrs: {
         text: '123',
         onCreate() {
diff --git a/viteplay/src/components/ModalFullscreen/Basic.example.vue b/viteplay/src/components/ModalFullscreen/Basic.example.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markRaw, ref } from 'vue'
+import { ref } from 'vue'
 import { ModalFullscreen, ModalsContainer, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
@@ -11,7 +11,7 @@ const fullscreenModal = useModal<
     InstanceType<typeof ModalFullscreen>['$props'],
     InstanceType<typeof DefaultSlot>['$props']
   >({
-    component: markRaw(ModalFullscreen),
+    component: ModalFullscreen,
     attrs: {
       background: 'interactive',
       closeDirection: 'RIGHT',
@@ -22,7 +22,7 @@ const fullscreenModal = useModal<
     },
     slots: {
       default: {
-        component: markRaw(DefaultSlot),
+        component: DefaultSlot,
         attrs: {
           text: '123',
 
diff --git a/viteplay/src/components/VueFinalModal/Basic.example.vue b/viteplay/src/components/VueFinalModal/Basic.example.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markRaw, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ModalsContainer, VueFinalModal, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 import TestModal from './TestModal.vue'
@@ -10,7 +10,7 @@ const modal1 = useModal<
   InstanceType<typeof VueFinalModal>['$props'],
   InstanceType<typeof DefaultSlot>['$props']
 >({
-  component: markRaw(VueFinalModal),
+  component: VueFinalModal,
   attrs: {
     'displayDirective': 'if',
     'background': 'interactive',
@@ -26,7 +26,7 @@ const modal1 = useModal<
   },
   slots: {
     default: {
-      component: markRaw(DefaultSlot),
+      component: DefaultSlot,
       attrs: {
         text: '123',
         onCreate() {
@@ -40,7 +40,7 @@ const modal1 = useModal<
 const modal2 = useModal<
   InstanceType<typeof VueFinalModal>['$props']
 >({
-  component: markRaw(VueFinalModal),
+  component: VueFinalModal,
   attrs: {
     displayDirective: 'if',
     background: 'interactive',
