@artesa/fullcalendar-vue - npm Package Compare versions

Comparing version 5.13.0 to 5.13.1

dist/custom-content-type.d.ts

@@ -0,5 +1,7 @@
+import Vue from 'vue';
+import { NormalizedScopedSlot } from 'vue/types/vnode';
 import { PluginDef } from '@fullcalendar/core';
-export declare function wrapVDomGenerator(vDomGenerator: any): (props: any) => {
-    vue: any;
+export declare function wrapVDomGenerator(vDomGenerator: NormalizedScopedSlot): (props: any) => {
+    vue: import("vue/types/vnode").ScopedSlotChildren;
 };
-export declare function createVueContentTypePlugin(appContext: any): PluginDef;
+export declare function createVueContentTypePlugin(parent: Vue): PluginDef;

dist/custom-content-type.js

@@ -1,3 +0,2 @@
-import { h } from 'vue';
-import { createApp } from 'vue-demi';
+import Vue from 'vue';
 import { createPlugin } from '@fullcalendar/core';
@@ -12,34 +11,33 @@ /*
 }
-export function createVueContentTypePlugin(appContext) {
+export function createVueContentTypePlugin(parent) {
     return createPlugin({
         contentTypeHandlers: {
-            vue: () => buildVDomHandler(appContext), // looks for the `vue` key
+            vue: () => buildVDomHandler(parent), // looks for the `vue` key
         }
     });
 }
-function buildVDomHandler(appContext) {
+function buildVDomHandler(parent) {
     let currentEl;
-    let app;
-    let componentInstance;
+    let v; // the Vue instance
     function render(el, vDomContent) {
         if (currentEl !== el) {
-            if (currentEl && app) { // if changing elements, recreate the vue
-                app.unmount();
+            if (currentEl && v) { // if changing elements, recreate the vue
+                v.$destroy();
             }
             currentEl = el;
         }
-        if (!app) {
-            app = initApp(vDomContent, appContext);
+        if (!v) {
+            v = initVue(vDomContent, parent);
             // vue's mount method *replaces* the given element. create an artificial inner el
             let innerEl = document.createElement('span');
             el.appendChild(innerEl);
-            componentInstance = app.mount(innerEl);
+            v.$mount(innerEl);
         }
         else {
-            componentInstance.content = vDomContent;
+            v.content = vDomContent;
         }
     }
     function destroy() {
-        if (app) { // needed?
-            app.unmount();
+        if (v) { // needed?
+            v.$destroy();
         }
@@ -49,11 +47,9 @@ }
 }
-function initApp(initialContent, appContext) {
-    // TODO: do something with appContext
-    return createApp({
-        data() {
-            return {
-                content: initialContent,
-            };
+function initVue(initialContent, parent) {
+    return new Vue({
+        parent,
+        data: {
+            content: initialContent,
         },
-        render() {
+        render(h) {
             let { content } = this;
@@ -60,0 +56,0 @@ // the slot result can be an array, but the returned value of a vue component's

dist/main.cjs.js

@@ -5,6 +5,9 @@ 'use strict';
 
-var vue = require('vue');
+var Vue = require('vue');
 var core = require('@fullcalendar/core');
-var vueDemi = require('vue-demi');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
+
 const OPTION_IS_COMPLEX = {
@@ -51,34 +54,33 @@ headerToolbar: true,
 }
-function createVueContentTypePlugin(appContext) {
+function createVueContentTypePlugin(parent) {
     return core.createPlugin({
         contentTypeHandlers: {
-            vue: () => buildVDomHandler(), // looks for the `vue` key
+            vue: () => buildVDomHandler(parent), // looks for the `vue` key
         }
     });
 }
-function buildVDomHandler(appContext) {
+function buildVDomHandler(parent) {
     let currentEl;
-    let app;
-    let componentInstance;
+    let v; // the Vue instance
     function render(el, vDomContent) {
         if (currentEl !== el) {
-            if (currentEl && app) { // if changing elements, recreate the vue
-                app.unmount();
+            if (currentEl && v) { // if changing elements, recreate the vue
+                v.$destroy();
             }
             currentEl = el;
         }
-        if (!app) {
-            app = initApp(vDomContent);
+        if (!v) {
+            v = initVue(vDomContent, parent);
             // vue's mount method *replaces* the given element. create an artificial inner el
             let innerEl = document.createElement('span');
             el.appendChild(innerEl);
-            componentInstance = app.mount(innerEl);
+            v.$mount(innerEl);
         }
         else {
-            componentInstance.content = vDomContent;
+            v.content = vDomContent;
         }
     }
     function destroy() {
-        if (app) { // needed?
-            app.unmount();
+        if (v) { // needed?
+            v.$destroy();
         }
@@ -88,11 +90,9 @@ }
 }
-function initApp(initialContent, appContext) {
-    // TODO: do something with appContext
-    return vueDemi.createApp({
-        data() {
-            return {
-                content: initialContent,
-            };
+function initVue(initialContent, parent) {
+    return new Vue__default["default"]({
+        parent,
+        data: {
+            content: initialContent,
         },
-        render() {
+        render(h) {
             let { content } = this;
@@ -105,3 +105,3 @@ // the slot result can be an array, but the returned value of a vue component's
             else {
-                return vue.h('span', {}, content);
+                return h('span', {}, content);
             }
@@ -112,3 +112,3 @@ }
 
-const FullCalendar = vue.defineComponent({
+const FullCalendar = Vue.defineComponent({
     props: {
@@ -119,3 +119,3 @@ options: Object
     render() {
-        return vue.h('div', {
+        return Vue.h('div', {
             // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
@@ -158,3 +158,3 @@ attrs: { 'data-fc-render-id': this.renderId }
         plugins: (suppliedOptions.plugins || []).concat([
-            createVueContentTypePlugin()
+            createVueContentTypePlugin(appContext)
         ])
@@ -161,0 +161,0 @@ };

dist/main.global.js

@@ -41,42 +41,2 @@ var FullCalendarVue = (function (exports, Vue, core) {
 
-    // createApp polyfill
-    function createApp(rootComponent, rootProps) {
-      var vm;
-      var provide = {};
-      var app = {
-        config: Vue__default["default"].config,
-        use: Vue__default["default"].use.bind(Vue__default["default"]),
-        mixin: Vue__default["default"].mixin.bind(Vue__default["default"]),
-        component: Vue__default["default"].component.bind(Vue__default["default"]),
-        provide: function (key, value) {
-          provide[key] = value;
-          return this
-        },
-        directive: function (name, dir) {
-          if (dir) {
-            Vue__default["default"].directive(name, dir);
-            return app
-          } else {
-            return Vue__default["default"].directive(name)
-          }
-        },
-        mount: function (el, hydrating) {
-          if (!vm) {
-            vm = new Vue__default["default"](Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }));
-            vm.$mount(el, hydrating);
-            return vm
-          } else {
-            return vm
-          }
-        },
-        unmount: function () {
-          if (vm) {
-            vm.$destroy();
-            vm = undefined;
-          }
-        },
-      };
-      return app
-    }
-
     /*
@@ -90,34 +50,33 @@ wrap it in an object with a `vue` key, which the custom content-type handler system will look for
     }
-    function createVueContentTypePlugin(appContext) {
+    function createVueContentTypePlugin(parent) {
         return core.createPlugin({
             contentTypeHandlers: {
-                vue: () => buildVDomHandler(), // looks for the `vue` key
+                vue: () => buildVDomHandler(parent), // looks for the `vue` key
             }
         });
     }
-    function buildVDomHandler(appContext) {
+    function buildVDomHandler(parent) {
         let currentEl;
-        let app;
-        let componentInstance;
+        let v; // the Vue instance
         function render(el, vDomContent) {
             if (currentEl !== el) {
-                if (currentEl && app) { // if changing elements, recreate the vue
-                    app.unmount();
+                if (currentEl && v) { // if changing elements, recreate the vue
+                    v.$destroy();
                 }
                 currentEl = el;
             }
-            if (!app) {
-                app = initApp(vDomContent);
+            if (!v) {
+                v = initVue(vDomContent, parent);
                 // vue's mount method *replaces* the given element. create an artificial inner el
                 let innerEl = document.createElement('span');
                 el.appendChild(innerEl);
-                componentInstance = app.mount(innerEl);
+                v.$mount(innerEl);
             }
             else {
-                componentInstance.content = vDomContent;
+                v.content = vDomContent;
             }
         }
         function destroy() {
-            if (app) { // needed?
-                app.unmount();
+            if (v) { // needed?
+                v.$destroy();
             }
@@ -127,11 +86,9 @@ }
     }
-    function initApp(initialContent, appContext) {
-        // TODO: do something with appContext
-        return createApp({
-            data() {
-                return {
-                    content: initialContent,
-                };
+    function initVue(initialContent, parent) {
+        return new Vue__default["default"]({
+            parent,
+            data: {
+                content: initialContent,
             },
-            render() {
+            render(h) {
                 let { content } = this;
@@ -144,3 +101,3 @@ // the slot result can be an array, but the returned value of a vue component's
                 else {
-                    return Vue.h('span', {}, content);
+                    return h('span', {}, content);
                 }
@@ -195,3 +152,3 @@ }
             plugins: (suppliedOptions.plugins || []).concat([
-                createVueContentTypePlugin()
+                createVueContentTypePlugin(appContext)
             ])
@@ -198,0 +155,0 @@ };

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 i=r(t);const o={headerToolbar:!0,footerToolbar:!0,events:!0,eventSources:!0,resources:!0};function u(e){return"object"==typeof e&&(Array.isArray(e)?e=Array.prototype.slice.call(e):e&&(e={...e})),e}function s(e){return function(t){return{vue:e(t)}}}function d(e){return n.createPlugin({contentTypeHandlers:{vue:()=>function(e){let n,r,o;return{render:function(e,u){if(n!==e&&(n&&r&&r.unmount(),n=e),r)o.content=u;else{s=u,r=function(e,t){var n,r={},o={config:i.default.config,use:i.default.use.bind(i.default),mixin:i.default.mixin.bind(i.default),component:i.default.component.bind(i.default),provide:function(e,t){return r[e]=t,this},directive:function(e,t){return t?(i.default.directive(e,t),o):i.default.directive(e)},mount:function(o,u){return n||((n=new i.default(Object.assign({propsData:t},e,{provide:Object.assign(r,e.provide)}))).$mount(o,u),n)},unmount:function(){n&&(n.$destroy(),n=void 0)}};return o}({data:()=>({content:s}),render(){let{content:e}=this;return 1===e.length?e[0]:t.h("span",{},e)}});let n=document.createElement("span");e.appendChild(n),o=r.mount(n)}var s},destroy:function(){r&&r.unmount()}}}()}})}const a=t.defineComponent({props:{options:Object},data:function(){return{renderId:0}},render(){return t.h("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,s);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()])}}},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 o)e["options."+t]={deep:!0,handler(e){if(void 0!==e){let n=this.getApi();n.pauseRendering(),n.resetOptions({[t]:u(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,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(){return t.h("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);

package.json

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

src/custom-content-type.ts

@@ -1,9 +0,5 @@
-import { ComponentPublicInstance, VNode, h } from 'vue'
-import { createApp, App } from 'vue-demi'
+import Vue, { VNode } from 'vue'
+import { NormalizedScopedSlot } from 'vue/types/vnode'
 import { createPlugin, PluginDef } from '@fullcalendar/core'
 
-interface RootComponentData {
-  content: VNode[]
-}
-type RootComponentInstance = ComponentPublicInstance<{}, {}, RootComponentData>
 
@@ -13,3 +9,3 @@ /*
 */
-export function wrapVDomGenerator(vDomGenerator: any) {
+export function wrapVDomGenerator(vDomGenerator: NormalizedScopedSlot) {
   return function(props: any) {
@@ -20,19 +16,19 @@ return { vue: vDomGenerator(props) }
 
-export function createVueContentTypePlugin(appContext: any): PluginDef {
+export function createVueContentTypePlugin(parent: Vue): PluginDef {
   return createPlugin({
     contentTypeHandlers: {
-      vue: () => buildVDomHandler(appContext), // looks for the `vue` key
+      vue: () => buildVDomHandler(parent), // looks for the `vue` key
     }
-  })
+  });
 }
 
-function buildVDomHandler(appContext: any) {
+
+function buildVDomHandler(parent: Vue) {
   let currentEl: HTMLElement
-  let app: App
-  let componentInstance: RootComponentInstance
+  let v: ReturnType<typeof initVue> // the Vue instance
 
   function render(el: HTMLElement, vDomContent: VNode[]) { // the handler
     if (currentEl !== el) {
-      if (currentEl && app) { // if changing elements, recreate the vue
-        app.unmount()
+      if (currentEl && v) { // if changing elements, recreate the vue
+        v.$destroy()
       }
@@ -42,4 +38,4 @@ currentEl = el
 
-    if (!app) {
-      app = initApp(vDomContent, appContext)
+    if (!v) {
+      v = initVue(vDomContent, parent)
 
@@ -49,6 +45,5 @@ // vue's mount method *replaces* the given element. create an artificial inner el
       el.appendChild(innerEl)
-
-      componentInstance = app.mount(innerEl) as any as RootComponentInstance
+      v.$mount(innerEl)
     } else {
-      componentInstance.content = vDomContent
+      v.content = vDomContent
     }
@@ -58,4 +53,4 @@ }
   function destroy() {
-    if (app) { // needed?
-      app.unmount()
+    if (v) { // needed?
+      v.$destroy()
     }
@@ -67,11 +62,9 @@ }
 
-function initApp(initialContent: VNode[], appContext: any): App {
-  // TODO: do something with appContext
-  return createApp({
-    data() {
-      return {
-        content: initialContent,
-      } as RootComponentData
+function initVue(initialContent: VNode[], parent: Vue) {
+  return new Vue({
+    parent,
+    data: {
+      content: initialContent,
     },
-    render() {
+    render(h) {
       let { content } = this
@@ -83,2 +76,3 @@
         return content[0]
+
       } else {
@@ -85,0 +79,0 @@ return h('span', {}, content)

No alert changes

Worsened metrics

Total package byte prevSize

37774

-5.61%

Lines of code

792

-6.27%

No dependency changes