@artesa/fullcalendar-vue - npm Package Compare versions

Comparing version 5.13.2 to 5.13.3

dist/FullCalendar.d.ts

@@ -1,8 +0,14 @@
-declare const FullCalendar: import("vue/types/v3-define-component").DefineComponent<Readonly<{
-    [x: string]: any;
-}>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<Readonly<{
-    [x: string]: any;
-}>>>, {
-    [x: string]: any;
+declare const _default: import("vue/types/v3-define-component").DefineComponent<{
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, import("vue").Data, import("vue").Data, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>>, {
+    options: Record<string, any>;
 }>;
-export default FullCalendar;
+export default _default;

dist/FullCalendar.js

@@ -1,2 +0,1 @@
-import { defineComponent } from 'vue';
 import { Calendar } from '@fullcalendar/core';
@@ -6,88 +5,73 @@ import { OPTION_IS_COMPLEX } from './options';
 import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type';
-const FullCalendar = defineComponent({
+import { defineComponent, getCurrentInstance, onBeforeUnmount, onBeforeUpdate, onMounted, ref, watch } from 'vue';
+export default defineComponent({
+    name: 'FullCalendar',
     props: {
-        options: Object
+        options: {
+            type: Object,
+            default: () => ({})
+        }
     },
-    data: initData,
-    render(createElement) {
-        return createElement('div', {
-            // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
-            attrs: { 'data-fc-render-id': this.renderId }
+    render(h) {
+        return h('div', {
+            attrs: {
+                'data-fc-render-id': this.renderId
+            }
         });
     },
-    mounted() {
-        // store internal data (slotOptions, calendar)
-        // https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
-        this.slotOptions = mapHash(this.$slots, wrapVDomGenerator); // needed for buildOptions
-        let calendarOptions = this.buildOptions(this.options, this.$.appContext);
-        let calendar = new Calendar(this.$el, calendarOptions);
-        this.calendar = calendar;
-        calendar.render();
-    },
-    methods: {
-        getApi,
-        buildOptions,
-    },
-    beforeUpdate() {
-        this.getApi().resumeRendering(); // the watcher handlers paused it
-    },
-    // @ts-ignore
-    beforeUnmount() {
-        this.getApi().destroy();
-    },
-    watch: buildWatchers()
-});
-export default FullCalendar;
-function initData() {
-    return {
-        renderId: 0
-    };
-}
-function buildOptions(suppliedOptions, appContext) {
-    suppliedOptions = suppliedOptions || {};
-    return {
-        ...this.slotOptions,
-        ...suppliedOptions,
-        plugins: (suppliedOptions.plugins || []).concat([
-            createVueContentTypePlugin(appContext)
-        ])
-    };
-}
-function getApi() {
-    return this.calendar;
-}
-function buildWatchers() {
-    let watchers = {
-        // watches changes of ALL options and their nested objects,
-        // but this is only a means to be notified of top-level non-complex options changes.
-        options: {
-            deep: true,
-            handler(options) {
-                let calendar = this.getApi();
-                calendar.pauseRendering();
-                let calendarOptions = this.buildOptions(options, this.$.appContext);
-                calendar.resetOptions(calendarOptions)(this).renderId++; // will queue a rerender
-            }
+    setup(props) {
+        const renderId = ref(0);
+        const instance = getCurrentInstance();
+        const root = instance && instance.proxy;
+        if (!root) {
+            return {};
         }
-    };
-    for (let complexOptionName in OPTION_IS_COMPLEX) {
-        // handlers called when nested objects change
-        watchers[`options.${complexOptionName}`] = {
-            deep: true,
-            handler(val) {
+        function buildOptions(suppliedOptions) {
+            let internal = root && root.$options;
+            suppliedOptions = suppliedOptions || {};
+            return {
+                ...internal.scopedSlotOptions,
+                ...suppliedOptions,
+                plugins: (suppliedOptions.plugins || []).concat([
+                    createVueContentTypePlugin(root)
+                ])
+            };
+        }
+        function getApi() {
+            return (root && root.$options).calendar;
+        }
+        onMounted(() => {
+            let internal = root.$options;
+            internal.scopedSlotOptions = mapHash(root.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
+            const calendar = new Calendar(root.$el, buildOptions(props.options));
+            internal.calendar = calendar;
+            calendar.render();
+        });
+        onBeforeUpdate(() => getApi().resumeRendering());
+        onBeforeUnmount(() => getApi().destroy());
+        watch(() => props.options, val => {
+            let calendar = getApi();
+            calendar.pauseRendering();
+            calendar.resetOptions(buildOptions(val));
+            renderId.value++; // will queue a rerender
+        }, { deep: true });
+        for (const complexOptionName in OPTION_IS_COMPLEX) {
+            watch(() => props.options[complexOptionName], val => {
                 // unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set
                 if (val !== undefined) {
-                    let calendar = this.getApi();
+                    let calendar = getApi();
                     calendar.pauseRendering();
                     calendar.resetOptions({
-                        // the only reason we shallow-copy is to trick FC into knowing there's a nested change.
-                        // TODO: future versions of FC will more gracefully handle event option-changes that are same-reference.
                         [complexOptionName]: shallowCopy(val)
-                    }, true)(this).renderId++; // will queue a rerender
+                    }, true);
+                    renderId.value++;
                 }
-            }
+            });
+        }
+        return {
+            getApi,
+            renderId
         };
     }
-    return watchers;
-}
+});
 //# sourceMappingURL=FullCalendar.js.map

dist/main.cjs.js

@@ -5,4 +5,4 @@ 'use strict';
 
+var core = require('@fullcalendar/core');
 var Vue = require('vue');
-var core = require('@fullcalendar/core');
 
@@ -109,89 +109,74 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-const FullCalendar = Vue.defineComponent({
+var FullCalendarComponent = Vue.defineComponent({
+    name: 'FullCalendar',
     props: {
-        options: Object
+        options: {
+            type: Object,
+            default: () => ({})
+        }
     },
-    data: initData,
-    render(createElement) {
-        return createElement('div', {
-            // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
-            attrs: { 'data-fc-render-id': this.renderId }
+    render(h) {
+        return h('div', {
+            attrs: {
+                'data-fc-render-id': this.renderId
+            }
         });
     },
-    mounted() {
-        // store internal data (slotOptions, calendar)
-        // https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
-        this.slotOptions = mapHash(this.$slots, wrapVDomGenerator); // needed for buildOptions
-        let calendarOptions = this.buildOptions(this.options, this.$.appContext);
-        let calendar = new core.Calendar(this.$el, calendarOptions);
-        this.calendar = calendar;
-        calendar.render();
-    },
-    methods: {
-        getApi,
-        buildOptions,
-    },
-    beforeUpdate() {
-        this.getApi().resumeRendering(); // the watcher handlers paused it
-    },
-    // @ts-ignore
-    beforeUnmount() {
-        this.getApi().destroy();
-    },
-    watch: buildWatchers()
-});
-function initData() {
-    return {
-        renderId: 0
-    };
-}
-function buildOptions(suppliedOptions, appContext) {
-    suppliedOptions = suppliedOptions || {};
-    return {
-        ...this.slotOptions,
-        ...suppliedOptions,
-        plugins: (suppliedOptions.plugins || []).concat([
-            createVueContentTypePlugin(appContext)
-        ])
-    };
-}
-function getApi() {
-    return this.calendar;
-}
-function buildWatchers() {
-    let watchers = {
-        // watches changes of ALL options and their nested objects,
-        // but this is only a means to be notified of top-level non-complex options changes.
-        options: {
-            deep: true,
-            handler(options) {
-                let calendar = this.getApi();
-                calendar.pauseRendering();
-                let calendarOptions = this.buildOptions(options, this.$.appContext);
-                calendar.resetOptions(calendarOptions)(this).renderId++; // will queue a rerender
-            }
+    setup(props) {
+        const renderId = Vue.ref(0);
+        const instance = Vue.getCurrentInstance();
+        const root = instance && instance.proxy;
+        if (!root) {
+            return {};
         }
-    };
-    for (let complexOptionName in OPTION_IS_COMPLEX) {
-        // handlers called when nested objects change
-        watchers[`options.${complexOptionName}`] = {
-            deep: true,
-            handler(val) {
+        function buildOptions(suppliedOptions) {
+            let internal = root && root.$options;
+            suppliedOptions = suppliedOptions || {};
+            return {
+                ...internal.scopedSlotOptions,
+                ...suppliedOptions,
+                plugins: (suppliedOptions.plugins || []).concat([
+                    createVueContentTypePlugin(root)
+                ])
+            };
+        }
+        function getApi() {
+            return (root && root.$options).calendar;
+        }
+        Vue.onMounted(() => {
+            let internal = root.$options;
+            internal.scopedSlotOptions = mapHash(root.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
+            const calendar = new core.Calendar(root.$el, buildOptions(props.options));
+            internal.calendar = calendar;
+            calendar.render();
+        });
+        Vue.onBeforeUpdate(() => getApi().resumeRendering());
+        Vue.onBeforeUnmount(() => getApi().destroy());
+        Vue.watch(() => props.options, val => {
+            let calendar = getApi();
+            calendar.pauseRendering();
+            calendar.resetOptions(buildOptions(val));
+            renderId.value++; // will queue a rerender
+        }, { deep: true });
+        for (const complexOptionName in OPTION_IS_COMPLEX) {
+            Vue.watch(() => props.options[complexOptionName], val => {
                 // unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set
                 if (val !== undefined) {
-                    let calendar = this.getApi();
+                    let calendar = getApi();
                     calendar.pauseRendering();
                     calendar.resetOptions({
-                        // the only reason we shallow-copy is to trick FC into knowing there's a nested change.
-                        // TODO: future versions of FC will more gracefully handle event option-changes that are same-reference.
                         [complexOptionName]: shallowCopy(val)
-                    }, true)(this).renderId++; // will queue a rerender
+                    }, true);
+                    renderId.value++;
                 }
-            }
+            });
+        }
+        return {
+            getApi,
+            renderId
         };
     }
-    return watchers;
-}
+});
 
-exports["default"] = FullCalendar;
+exports["default"] = FullCalendarComponent;
 Object.keys(core).forEach(function (k) {
@@ -198,0 +183,0 @@ if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {

dist/main.global.js

@@ -1,2 +0,2 @@
-var FullCalendarVue = (function (exports, Vue, core) {
+var FullCalendarVue = (function (exports, core, Vue) {
     'use strict';
@@ -104,89 +104,74 @@
 
-    const FullCalendar = Vue.defineComponent({
+    var FullCalendarComponent = Vue.defineComponent({
+        name: 'FullCalendar',
         props: {
-            options: Object
+            options: {
+                type: Object,
+                default: () => ({})
+            }
         },
-        data: initData,
-        render(createElement) {
-            return createElement('div', {
-                // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
-                attrs: { 'data-fc-render-id': this.renderId }
+        render(h) {
+            return h('div', {
+                attrs: {
+                    'data-fc-render-id': this.renderId
+                }
             });
         },
-        mounted() {
-            // store internal data (slotOptions, calendar)
-            // https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
-            this.slotOptions = mapHash(this.$slots, wrapVDomGenerator); // needed for buildOptions
-            let calendarOptions = this.buildOptions(this.options, this.$.appContext);
-            let calendar = new core.Calendar(this.$el, calendarOptions);
-            this.calendar = calendar;
-            calendar.render();
-        },
-        methods: {
-            getApi,
-            buildOptions,
-        },
-        beforeUpdate() {
-            this.getApi().resumeRendering(); // the watcher handlers paused it
-        },
-        // @ts-ignore
-        beforeUnmount() {
-            this.getApi().destroy();
-        },
-        watch: buildWatchers()
-    });
-    function initData() {
-        return {
-            renderId: 0
-        };
-    }
-    function buildOptions(suppliedOptions, appContext) {
-        suppliedOptions = suppliedOptions || {};
-        return {
-            ...this.slotOptions,
-            ...suppliedOptions,
-            plugins: (suppliedOptions.plugins || []).concat([
-                createVueContentTypePlugin(appContext)
-            ])
-        };
-    }
-    function getApi() {
-        return this.calendar;
-    }
-    function buildWatchers() {
-        let watchers = {
-            // watches changes of ALL options and their nested objects,
-            // but this is only a means to be notified of top-level non-complex options changes.
-            options: {
-                deep: true,
-                handler(options) {
-                    let calendar = this.getApi();
-                    calendar.pauseRendering();
-                    let calendarOptions = this.buildOptions(options, this.$.appContext);
-                    calendar.resetOptions(calendarOptions)(this).renderId++; // will queue a rerender
-                }
+        setup(props) {
+            const renderId = Vue.ref(0);
+            const instance = Vue.getCurrentInstance();
+            const root = instance && instance.proxy;
+            if (!root) {
+                return {};
             }
-        };
-        for (let complexOptionName in OPTION_IS_COMPLEX) {
-            // handlers called when nested objects change
-            watchers[`options.${complexOptionName}`] = {
-                deep: true,
-                handler(val) {
+            function buildOptions(suppliedOptions) {
+                let internal = root && root.$options;
+                suppliedOptions = suppliedOptions || {};
+                return {
+                    ...internal.scopedSlotOptions,
+                    ...suppliedOptions,
+                    plugins: (suppliedOptions.plugins || []).concat([
+                        createVueContentTypePlugin(root)
+                    ])
+                };
+            }
+            function getApi() {
+                return (root && root.$options).calendar;
+            }
+            Vue.onMounted(() => {
+                let internal = root.$options;
+                internal.scopedSlotOptions = mapHash(root.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
+                const calendar = new core.Calendar(root.$el, buildOptions(props.options));
+                internal.calendar = calendar;
+                calendar.render();
+            });
+            Vue.onBeforeUpdate(() => getApi().resumeRendering());
+            Vue.onBeforeUnmount(() => getApi().destroy());
+            Vue.watch(() => props.options, val => {
+                let calendar = getApi();
+                calendar.pauseRendering();
+                calendar.resetOptions(buildOptions(val));
+                renderId.value++; // will queue a rerender
+            }, { deep: true });
+            for (const complexOptionName in OPTION_IS_COMPLEX) {
+                Vue.watch(() => props.options[complexOptionName], val => {
                     // unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set
                     if (val !== undefined) {
-                        let calendar = this.getApi();
+                        let calendar = getApi();
                         calendar.pauseRendering();
                         calendar.resetOptions({
-                            // the only reason we shallow-copy is to trick FC into knowing there's a nested change.
-                            // TODO: future versions of FC will more gracefully handle event option-changes that are same-reference.
                             [complexOptionName]: shallowCopy(val)
-                        }, true)(this).renderId++; // will queue a rerender
+                        }, true);
+                        renderId.value++;
                     }
-                }
+                });
+            }
+            return {
+                getApi,
+                renderId
             };
         }
-        return watchers;
-    }
+    });
 
-    exports["default"] = FullCalendar;
+    exports["default"] = FullCalendarComponent;
     Object.keys(core).forEach(function (k) {
@@ -203,2 +188,2 @@ if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 
-})({}, Vue, FullCalendar);
+})({}, FullCalendar, Vue);

dist/main.global.min.js

@@ -1,1 +0,1 @@
-var FullCalendarVue=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t);const i={headerToolbar:!0,footerToolbar:!0,events:!0,eventSources:!0,resources:!0};function s(e){return"object"==typeof e&&(Array.isArray(e)?e=Array.prototype.slice.call(e):e&&(e={...e})),e}function u(e){return function(t){return{vue:e(t)}}}function d(e){return n.createPlugin({contentTypeHandlers:{vue:()=>function(e){let t,n;return{render:function(r,i){if(t!==r&&(t&&n&&n.$destroy(),t=r),n)n.content=i;else{n=function(e,t){return new o.default({parent:t,data:{content:e},render(e){let{content:t}=this;return 1===t.length?t[0]:e("span",{},t)}})}(i,e);let t=document.createElement("span");r.appendChild(t),n.$mount(t)}},destroy:function(){n&&n.$destroy()}}}(e)}})}const a=t.defineComponent({props:{options:Object},data:function(){return{renderId:0}},render(e){return e("div",{attrs:{"data-fc-render-id":this.renderId}})},mounted(){this.slotOptions=function(e,t){const n={};for(const r in e)e.hasOwnProperty(r)&&(n[r]=t(e[r],r));return n}(this.$slots,u);let e=this.buildOptions(this.options,this.$.appContext),t=new n.Calendar(this.$el,e);this.calendar=t,t.render()},methods:{getApi:function(){return this.calendar},buildOptions:function(e,t){return e=e||{},{...this.slotOptions,...e,plugins:(e.plugins||[]).concat([d(t)])}}},beforeUpdate(){this.getApi().resumeRendering()},beforeUnmount(){this.getApi().destroy()},watch:function(){let e={options:{deep:!0,handler(e){let t=this.getApi();t.pauseRendering();let n=this.buildOptions(e,this.$.appContext);t.resetOptions(n)(this).renderId++}}};for(let t in i)e["options."+t]={deep:!0,handler(e){if(void 0!==e){let n=this.getApi();n.pauseRendering(),n.resetOptions({[t]:s(e)},!0)(this).renderId++}}};return e}()});return e.default=a,Object.keys(n).forEach((function(t){"default"===t||e.hasOwnProperty(t)||Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})})),Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue,FullCalendar);
+var FullCalendarVue=function(e,n,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t);const u={headerToolbar:!0,footerToolbar:!0,events:!0,eventSources:!0,resources:!0};function a(e){return"object"==typeof e&&(Array.isArray(e)?e=Array.prototype.slice.call(e):e&&(e={...e})),e}function s(e){return function(n){return{vue:e(n)}}}function c(e){return n.createPlugin({contentTypeHandlers:{vue:()=>function(e){let n,t;return{render:function(r,u){if(n!==r&&(n&&t&&t.$destroy(),n=r),t)t.content=u;else{t=function(e,n){return new o.default({parent:n,data:{content:e},render(e){let{content:n}=this;return 1===n.length?n[0]:e("span",{},n)}})}(u,e);let n=document.createElement("span");r.appendChild(n),t.$mount(n)}},destroy:function(){t&&t.$destroy()}}}(e)}})}var i=t.defineComponent({name:"FullCalendar",props:{options:{type:Object,default:()=>({})}},render(e){return e("div",{attrs:{"data-fc-render-id":this.renderId}})},setup(e){const r=t.ref(0),o=t.getCurrentInstance(),i=o&&o.proxy;if(!i)return{};function d(e){return e=e||{},{...(i&&i.$options).scopedSlotOptions,...e,plugins:(e.plugins||[]).concat([c(i)])}}function l(){return(i&&i.$options).calendar}t.onMounted(()=>{let t=i.$options;t.scopedSlotOptions=function(e,n){const t={};for(const r in e)e.hasOwnProperty(r)&&(t[r]=n(e[r],r));return t}(i.$scopedSlots,s);const r=new n.Calendar(i.$el,d(e.options));t.calendar=r,r.render()}),t.onBeforeUpdate(()=>l().resumeRendering()),t.onBeforeUnmount(()=>l().destroy()),t.watch(()=>e.options,e=>{let n=l();n.pauseRendering(),n.resetOptions(d(e)),r.value++},{deep:!0});for(const n in u)t.watch(()=>e.options[n],e=>{if(void 0!==e){let t=l();t.pauseRendering(),t.resetOptions({[n]:a(e)},!0),r.value++}});return{getApi:l,renderId:r}}});return e.default=i,Object.keys(n).forEach((function(t){"default"===t||e.hasOwnProperty(t)||Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})})),Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,Vue);

package.json

 {
   "name": "@artesa/fullcalendar-vue",
-  "version": "5.13.2",
+  "version": "5.13.3",
   "title": "FullCalendar Vue 2 Component",
@@ -5,0 +5,0 @@ "description": "An official FullCalendar component for Vue 2",

src/FullCalendar.ts

@@ -1,128 +0,87 @@
-import { PropType, defineComponent } from 'vue'
-import { Calendar, CalendarOptions } from '@fullcalendar/core'
+import { Calendar } from '@fullcalendar/core';
 import { OPTION_IS_COMPLEX } from './options'
 import { shallowCopy, mapHash } from './utils'
 import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type'
+import { defineComponent, getCurrentInstance, onBeforeUnmount, onBeforeUpdate, onMounted, ref, useSlots, watch } from 'vue';
 
-const FullCalendar = defineComponent({
-
+export default defineComponent({
+  name: 'FullCalendar',
   props: {
-    options: Object as PropType<CalendarOptions>
+    options: {
+      type: Object,
+      default: () => ({})
+    }
   },
-
-  data: initData, // separate func b/c of type inferencing
-
-  render(createElement) {
-    return createElement('div', {
-      // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
-      attrs: { 'data-fc-render-id': (this as any).renderId }
+  render(h) {
+    return h('div', {
+      attrs: {
+        'data-fc-render-id': this.renderId
+      }
     })
   },
+  setup(props) {
+    const renderId = ref(0);
 
-  mounted() {
-    // store internal data (slotOptions, calendar)
-    // https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
-    (this as any).slotOptions = mapHash((this as any).$slots, wrapVDomGenerator) // needed for buildOptions
-    let calendarOptions = (this as any).buildOptions((this as any).options, (this as any).$.appContext)
-    let calendar = new Calendar((this as any).$el as HTMLElement, calendarOptions)
-    ;(this as any).calendar = calendar
-    calendar.render()
-  },
+    const instance = getCurrentInstance();
 
-  methods: { // separate funcs b/c of type inferencing
-    getApi,
-    buildOptions,
-  },
+    const root = instance && instance.proxy;
 
-  beforeUpdate() {
-    (this as any).getApi().resumeRendering() // the watcher handlers paused it
-  },
+    if (!root) { return {}; }
 
-  // @ts-ignore
-  beforeUnmount() {
-    (this as any).getApi().destroy()
-  },
+    function buildOptions(suppliedOptions: any) {
+      let internal = root && root.$options as any
+      suppliedOptions = suppliedOptions || {}
+      return {
+        ...internal.scopedSlotOptions,
+        ...suppliedOptions, // spread will pull out the values from the options getter functions
+        plugins: (suppliedOptions.plugins || []).concat([
+          createVueContentTypePlugin(root as any)
+        ])
+      }
+    }
 
-  watch: buildWatchers()
-})
+    function getApi(): Calendar {
+      return (root && root.$options as any).calendar;
+    }
 
-export default FullCalendar
+    onMounted(() => {
+      let internal = root.$options as any
+      internal.scopedSlotOptions = mapHash(root.$scopedSlots, wrapVDomGenerator) // needed for buildOptions
 
+      const calendar = new Calendar((root as any).$el, buildOptions(props.options))
+      internal.calendar = calendar
+      calendar.render();
+    })
 
-function initData() {
-  return {
-    renderId: 0
-  }
-}
+    onBeforeUpdate(() => getApi().resumeRendering());
+    onBeforeUnmount(() => getApi().destroy());
 
+    watch(() => props.options, val => {
+      let calendar = getApi()
+      calendar.pauseRendering()
+      calendar.resetOptions(buildOptions(val))
+      renderId.value++ // will queue a rerender
+    }, { deep: true })
 
-function buildOptions(
-  this: any,
-  suppliedOptions: CalendarOptions | undefined,
-  appContext: any,
-): CalendarOptions {
-  suppliedOptions = suppliedOptions || {}
-  return {
-    ...(this as any).slotOptions,
-    ...suppliedOptions, // spread will pull out the values from the options getter functions
-    plugins: (suppliedOptions.plugins || []).concat([
-      createVueContentTypePlugin(appContext)
-    ])
-  }
-}
-
-
-function getApi(this: any) {
-  return (this as any).calendar
-}
-
-
-type FullCalendarInstance = InstanceType<typeof FullCalendar>
-
-
-function buildWatchers() {
-
-  let watchers: { [member: string]: any } = {
-
-    // watches changes of ALL options and their nested objects,
-    // but this is only a means to be notified of top-level non-complex options changes.
-    options: {
-      deep: true,
-      handler(this: FullCalendarInstance, options: CalendarOptions) {
-        let calendar = (this as any).getApi()
-        calendar.pauseRendering()
-
-        let calendarOptions = (this as any).buildOptions(options, (this as any).$.appContext)
-        calendar.resetOptions(calendarOptions)
-
-        (this as any).renderId++ // will queue a rerender
-      }
-    }
-  }
-
-  for (let complexOptionName in OPTION_IS_COMPLEX) {
-
-    // handlers called when nested objects change
-    watchers[`options.${complexOptionName}`] = {
-      deep: true,
-      handler(this: FullCalendarInstance, val: any) {
-
+    for (const complexOptionName in OPTION_IS_COMPLEX) {
+      watch(() => props.options[complexOptionName], val => {
         // unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set
         if (val !== undefined) {
 
-          let calendar = (this as any).getApi()
+          let calendar = getApi()
           calendar.pauseRendering()
           calendar.resetOptions({
-            // the only reason we shallow-copy is to trick FC into knowing there's a nested change.
-            // TODO: future versions of FC will more gracefully handle event option-changes that are same-reference.
             [complexOptionName]: shallowCopy(val)
           }, true)
 
-          (this as any).renderId++ // will queue a rerender
+          renderId.value++
         }
-      }
+      })
     }
+
+    return {
+      getApi,
+      renderId
+    }
   }
-
-  return watchers
-}
+});

No alert changes

Worsened metrics

Total package byte prevSize

34972

-7.62%

Lines of code

726

-8.33%

No dependency changes