@fullcalendar/vue - npm Package Compare versions

Comparing version 5.3.1 to 5.4.0

CHANGELOG.md

 
-next
-----
+v5.4.0 (2020-11-11)
+-------------------
 
 - no longer expose component as 'fullcalendar' when used globally
+- eventContent slot doesn't properly destroy the Vue components inside ([#111])
+- global mixins, directives, filters & components work inside slots ([#105])
+- better compatibility with Webpack 5, deeming `resolve.fullySpecified` unnecessary ([core-5822])
+- dist files now include a CJS file. ESM is still used by default in most environments ([core-5929])
+- webpack upgrade note: use style-loader instead of vue-style-loader
 
+[core-5822]: https://github.com/fullcalendar/fullcalendar/issues/5822
+[core-5929]: https://github.com/fullcalendar/fullcalendar/issues/5929
 
+
+...
+... this changelog does not mention all releases.
+... visit the github releases page as well as the main fullcalendar repo.
+...
+
+
 v5.2.0 (2020-07-30)
@@ -9,0 +23,0 @@ -------------------

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: NormalizedScopedSlot): (props: any) => {
     vue: import("vue/types/vnode").ScopedSlotChildren;
 };
-export declare const VueContentTypePlugin: import("@fullcalendar/common").PluginDef;
+export declare function createVueContentTypePlugin(parent: Vue): PluginDef;

dist/custom-content-type.js

@@ -11,11 +11,13 @@ import Vue from 'vue';
 }
-export var VueContentTypePlugin = createPlugin({
-    contentTypeHandlers: {
-        vue: buildVDomHandler // looks for the `vue` key
-    }
-});
-function buildVDomHandler() {
+export function createVueContentTypePlugin(parent) {
+    return createPlugin({
+        contentTypeHandlers: {
+            vue: function () { return buildVDomHandler(parent); },
+        }
+    });
+}
+function buildVDomHandler(parent) {
     var currentEl;
     var v; // the Vue instance
-    return function (el, vDomContent) {
+    function render(el, vDomContent) {
         if (currentEl !== el) {
@@ -28,3 +30,3 @@ if (currentEl && v) { // if changing elements, recreate the vue
         if (!v) {
-            v = initVue(vDomContent);
+            v = initVue(vDomContent, parent);
             // vue's mount method *replaces* the given element. create an artificial inner el
@@ -38,12 +40,16 @@ var innerEl = document.createElement('span');
         }
-    };
+    }
+    function destroy() {
+        if (v) { // needed?
+            v.$destroy();
+        }
+    }
+    return { render: render, destroy: destroy };
 }
-function initVue(initialContent) {
+function initVue(initialContent, parent) {
     return new Vue({
-        props: {
-            content: Array
+        parent: parent,
+        data: {
+            content: initialContent,
         },
-        propsData: {
-            content: initialContent
-        },
         render: function (h) {
@@ -50,0 +56,0 @@ var content = this.content;

dist/FullCalendar.d.ts

@@ -13,3 +13,3 @@ import Vue from 'vue';
     $options: any;
-}, suppliedOptions: CalendarOptions): CalendarOptions;
+}, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions;
 declare function getApi(this: {
@@ -16,0 +16,0 @@ $options: any;

dist/FullCalendar.js

@@ -6,3 +6,3 @@ import { __assign } from "tslib";
 import { shallowCopy, mapHash } from './utils';
-import { wrapVDomGenerator, VueContentTypePlugin } from './custom-content-type';
+import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type';
 var FullCalendar = Vue.extend({
@@ -22,3 +22,3 @@ props: {
         internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
-        var calendar = new Calendar(this.$el, this.buildOptions(this.options));
+        var calendar = new Calendar(this.$el, this.buildOptions(this.options, this));
         internal.calendar = calendar;
@@ -44,7 +44,7 @@ calendar.render();
 }
-function buildOptions(suppliedOptions) {
+function buildOptions(suppliedOptions, parent) {
     var internal = this.$options;
     suppliedOptions = suppliedOptions || {};
     return __assign(__assign(__assign({}, internal.scopedSlotOptions), suppliedOptions), { plugins: (suppliedOptions.plugins || []).concat([
-            VueContentTypePlugin
+            createVueContentTypePlugin(parent)
         ]) });
@@ -65,3 +65,3 @@ }
                 calendar.pauseRendering();
-                calendar.resetOptions(this.buildOptions(options));
+                calendar.resetOptions(this.buildOptions(options, this));
                 this.renderId++; // will queue a rerender
@@ -68,0 +68,0 @@ }

dist/main.global.js

 var FullCalendarVue = (function (exports, Vue, core) {
     'use strict';
 
-    Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
+
     /*! *****************************************************************************
@@ -73,11 +75,13 @@ Copyright (c) Microsoft Corporation.
     }
-    var VueContentTypePlugin = core.createPlugin({
-        contentTypeHandlers: {
-            vue: buildVDomHandler // looks for the `vue` key
-        }
-    });
-    function buildVDomHandler() {
+    function createVueContentTypePlugin(parent) {
+        return core.createPlugin({
+            contentTypeHandlers: {
+                vue: function () { return buildVDomHandler(parent); },
+            }
+        });
+    }
+    function buildVDomHandler(parent) {
         var currentEl;
         var v; // the Vue instance
-        return function (el, vDomContent) {
+        function render(el, vDomContent) {
             if (currentEl !== el) {
@@ -90,3 +94,3 @@ if (currentEl && v) { // if changing elements, recreate the vue
             if (!v) {
-                v = initVue(vDomContent);
+                v = initVue(vDomContent, parent);
                 // vue's mount method *replaces* the given element. create an artificial inner el
@@ -100,12 +104,16 @@ var innerEl = document.createElement('span');
             }
-        };
+        }
+        function destroy() {
+            if (v) { // needed?
+                v.$destroy();
+            }
+        }
+        return { render: render, destroy: destroy };
     }
-    function initVue(initialContent) {
-        return new Vue({
-            props: {
-                content: Array
+    function initVue(initialContent, parent) {
+        return new Vue__default['default']({
+            parent: parent,
+            data: {
+                content: initialContent,
             },
-            propsData: {
-                content: initialContent
-            },
             render: function (h) {
@@ -125,3 +133,3 @@ var content = this.content;
 
-    var FullCalendar = Vue.extend({
+    var FullCalendar = Vue__default['default'].extend({
         props: {
@@ -140,3 +148,3 @@ options: Object
             internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
-            var calendar = new core.Calendar(this.$el, this.buildOptions(this.options));
+            var calendar = new core.Calendar(this.$el, this.buildOptions(this.options, this));
             internal.calendar = calendar;
@@ -162,7 +170,7 @@ calendar.render();
     }
-    function buildOptions(suppliedOptions) {
+    function buildOptions(suppliedOptions, parent) {
         var internal = this.$options;
         suppliedOptions = suppliedOptions || {};
         return __assign(__assign(__assign({}, internal.scopedSlotOptions), suppliedOptions), { plugins: (suppliedOptions.plugins || []).concat([
-                VueContentTypePlugin
+                createVueContentTypePlugin(parent)
             ]) });
@@ -183,3 +191,3 @@ }
                     calendar.pauseRendering();
-                    calendar.resetOptions(this.buildOptions(options));
+                    calendar.resetOptions(this.buildOptions(options, this));
                     this.renderId++; // will queue a rerender
@@ -256,4 +264,6 @@ }
 
+    Object.defineProperty(exports, '__esModule', { value: true });
+
     return exports;
 
 }({}, Vue, FullCalendar));

dist/main.global.min.js

@@ -1,1 +0,1 @@
-var FullCalendarVue=function(e,n,t){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var r=function(){return(r=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)},o={headerToolbar:!0,footerToolbar:!0,events:!0,eventSources:!0,resources:!0};function i(e){return function(n){return{vue:e(n)}}}var a=t.createPlugin({contentTypeHandlers:{vue:function(){var e,t;return function(r,o){if(e!==r&&(e&&t&&t.$destroy(),e=r),t)t.content=o;else{t=new n({props:{content:Array},propsData:{content:o},render:function(e){var n=this.content;return 1===n.length?n[0]:e("span",{},n)}});var i=document.createElement("span");r.appendChild(i),t.$mount(i)}}}}});var s=n.extend({props:{options:Object},data:function(){return{renderId:0}},render:function(e){return e("div",{attrs:{"data-fc-render-id":this.renderId}})},mounted:function(){var e=this.$options;e.scopedSlotOptions=function(e,n){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[r]=n(e[r],r));return t}(this.$scopedSlots,i);var n=new t.Calendar(this.$el,this.buildOptions(this.options));e.calendar=n,n.render()},methods:{getApi:function(){return this.$options.calendar},buildOptions:function(e){var n=this.$options;return e=e||{},r(r(r({},n.scopedSlotOptions),e),{plugins:(e.plugins||[]).concat([a])})}},beforeUpdate:function(){this.getApi().resumeRendering()},beforeDestroy:function(){this.getApi().destroy()},watch:function(){var e={options:{deep:!0,handler:function(e){var n=this.getApi();n.pauseRendering(),n.resetOptions(this.buildOptions(e)),this.renderId++}}},n=function(n){e["options."+n]={deep:!0,handler:function(e){var t;if(void 0!==e){var o=this.getApi();o.pauseRendering(),o.resetOptions(((t={})[n]=function(e){return"object"==typeof e&&(Array.isArray(e)?e=Array.prototype.slice.call(e):e&&(e=r({},e))),e}(e),t),!0),this.renderId++}}}};for(var t in o)n(t);return e}()});var u,c=!1;function d(e){c||(c=!0,e.component("FullCalendar",s))}return(u="undefined"!=typeof globalThis?globalThis.Vue:window.Vue)&&u.use({install:d}),Object.keys(t).forEach((function(n){"default"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),e.default=s,e.install=d,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(n),i=function(){return(i=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e}).apply(this,arguments)},u={headerToolbar:!0,footerToolbar:!0,events:!0,eventSources:!0,resources:!0};function a(e){return function(n){return{vue:e(n)}}}function s(e){return t.createPlugin({contentTypeHandlers:{vue:function(){return function(e){var n,t;return{render:function(r,i){if(n!==r&&(n&&t&&t.$destroy(),n=r),t)t.content=i;else{t=function(e,n){return new o.default({parent:n,data:{content:e},render:function(e){var n=this.content;return 1===n.length?n[0]:e("span",{},n)}})}(i,e);var u=document.createElement("span");r.appendChild(u),t.$mount(u)}},destroy:function(){t&&t.$destroy()}}}(e)}}})}var d=o.default.extend({props:{options:Object},data:function(){return{renderId:0}},render:function(e){return e("div",{attrs:{"data-fc-render-id":this.renderId}})},mounted:function(){var e=this.$options;e.scopedSlotOptions=function(e,n){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[r]=n(e[r],r));return t}(this.$scopedSlots,a);var n=new t.Calendar(this.$el,this.buildOptions(this.options,this));e.calendar=n,n.render()},methods:{getApi:function(){return this.$options.calendar},buildOptions:function(e,n){var t=this.$options;return e=e||{},i(i(i({},t.scopedSlotOptions),e),{plugins:(e.plugins||[]).concat([s(n)])})}},beforeUpdate:function(){this.getApi().resumeRendering()},beforeDestroy:function(){this.getApi().destroy()},watch:function(){var e={options:{deep:!0,handler:function(e){var n=this.getApi();n.pauseRendering(),n.resetOptions(this.buildOptions(e,this)),this.renderId++}}},n=function(n){e["options."+n]={deep:!0,handler:function(e){var t;if(void 0!==e){var r=this.getApi();r.pauseRendering(),r.resetOptions(((t={})[n]=function(e){return"object"==typeof e&&(Array.isArray(e)?e=Array.prototype.slice.call(e):e&&(e=i({},e))),e}(e),t),!0),this.renderId++}}}};for(var t in u)n(t);return e}()});var c,l=!1;function f(e){l||(l=!0,e.component("FullCalendar",d))}return(c="undefined"!=typeof globalThis?globalThis.Vue:window.Vue)&&c.use({install:f}),Object.keys(t).forEach((function(n){"default"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),e.default=d,e.install=f,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue,FullCalendar);

package.json

 {
   "name": "@fullcalendar/vue",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "title": "FullCalendar Vue Component",
@@ -19,16 +19,16 @@ "description": "An official FullCalendar component for Vue",
     "tsc": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist tmp",
     "watch": "tsc -p tsconfig.json --watch",
     "build": "tsc -p tsconfig.json && rollup -c && npm run minify",
     "minify": "npx terser --compress --mangle --comments false --output dist/main.global.min.js -- dist/main.global.js",
-    "test": "karma start karma.config.cjs",
-    "test:ci": "karma start karma.config.cjs --browsers ChromeHeadless --single-run --no-auto-watch",
+    "test": "concurrently 'webpack --watch' 'karma start karma.config.js'",
+    "test:ci": "webpack && karma start karma.config.js --browsers ChromeHeadless --single-run --no-auto-watch",
     "ci": "./scripts/ci.sh"
   },
   "dependencies": {
-    "@fullcalendar/core": "~5.3.1",
-    "tslib": "^2.0.0"
+    "@fullcalendar/core": "~5.4.0",
+    "tslib": "^2.0.3"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^2.6.12"
   },
@@ -39,24 +39,29 @@ "devDependencies": {
     "@babel/preset-env": "^7.8.4",
-    "@fullcalendar/daygrid": "~5.3.1",
+    "@babel/runtime": "^7.12.1",
+    "@fullcalendar/daygrid": "~5.4.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
+    "@types/estree": "^0.0.45",
+    "@types/node": "14.10.0",
     "@vue/test-utils": "^1.0.3",
     "babel-loader": "^8.1.0",
-    "css-loader": "^3.6.0",
-    "karma": "^5.0.4",
+    "concurrently": "^5.3.0",
+    "css-loader": "^4.3.0",
+    "karma": "^5.2.3",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-jasmine": "^3.1.1",
-    "karma-sourcemap-loader": "^0.3.7",
+    "karma-jasmine": "^4.0.1",
+    "karma-sourcemap-loader": "^0.3.8",
     "karma-spec-reporter": "^0.0.32",
-    "karma-webpack": "^4.0.2",
     "rollup": "^2.21.0",
-    "source-map-loader": "^1.0.0",
-    "style-loader": "^1.2.1",
+    "source-map-loader": "^1.1.1",
+    "style-loader": "^2.0.0",
     "terser": "^4.8.0",
-    "typescript": "^3.8.3",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.43.0"
+    "typescript": "^4.0.5",
+    "vue": "^2.6.12",
+    "vue-loader": "^15.9.5",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^5.4.0",
+    "webpack-cli": "^4.1.0"
   },
-  "type": "module",
-  "main": "dist/main.js",
+  "main": "dist/main.cjs.js",
+  "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -68,2 +73,2 @@ "jsdelivr": "dist/main.global.min.js",
   ]
-}
+}

src/custom-content-type.ts

@@ -1,4 +0,4 @@
-import Vue, { VNode, PropType } from 'vue'
+import Vue, { VNode } from 'vue'
 import { NormalizedScopedSlot } from 'vue/types/vnode'
-import { createPlugin } from '@fullcalendar/core'
+import { createPlugin, PluginDef } from '@fullcalendar/core'
 
@@ -15,16 +15,16 @@
 
+export function createVueContentTypePlugin(parent: Vue): PluginDef {
+  return createPlugin({
+    contentTypeHandlers: {
+      vue: () => buildVDomHandler(parent), // looks for the `vue` key
+    }
+  });
+}
 
-export const VueContentTypePlugin = createPlugin({
-  contentTypeHandlers: {
-    vue: buildVDomHandler // looks for the `vue` key
-  }
-})
 
-
-function buildVDomHandler() {
+function buildVDomHandler(parent: Vue) {
   let currentEl: HTMLElement
   let v: ReturnType<typeof initVue> // the Vue instance
 
-  return function(el: HTMLElement, vDomContent: VNode[]) { // the handler
-
+  function render(el: HTMLElement, vDomContent: VNode[]) { // the handler
     if (currentEl !== el) {
@@ -38,3 +38,3 @@ if (currentEl && v) { // if changing elements, recreate the vue
     if (!v) {
-      v = initVue(vDomContent)
+      v = initVue(vDomContent, parent)
 
@@ -45,3 +45,2 @@ // vue's mount method *replaces* the given element. create an artificial inner el
       v.$mount(innerEl)
-
     } else {
@@ -51,13 +50,18 @@ v.content = vDomContent
   }
+
+  function destroy() {
+    if (v) { // needed?
+      v.$destroy()
+    }
+  }
+
+  return { render, destroy }
 }
 
-
-function initVue(initialContent: VNode[]) {
+function initVue(initialContent: VNode[], parent: Vue) {
   return new Vue({
-    props: {
-      content: Array as PropType<VNode[]>
+    parent,
+    data: {
+      content: initialContent,
     },
-    propsData: {
-      content: initialContent
-    },
     render(h) {
@@ -64,0 +68,0 @@ let { content } = this

src/FullCalendar.ts

@@ -6,3 +6,3 @@ import Vue, { PropType } from 'vue'
 import { shallowCopy, mapHash } from './utils'
-import { wrapVDomGenerator, VueContentTypePlugin } from './custom-content-type'
+import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type'
 
@@ -35,3 +35,3 @@
 
-    let calendar = new Calendar(this.$el as HTMLElement, this.buildOptions(this.options))
+    let calendar = new Calendar(this.$el as HTMLElement, this.buildOptions(this.options, this))
     internal.calendar = calendar
@@ -65,3 +65,3 @@ calendar.render()
 
-function buildOptions(this: { $options: any }, suppliedOptions: CalendarOptions): CalendarOptions {
+function buildOptions(this: { $options: any }, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions {
   let internal = this.$options as FullCalendarInternal
@@ -73,3 +73,3 @@ suppliedOptions = suppliedOptions || {}
     plugins: (suppliedOptions.plugins || []).concat([
-      VueContentTypePlugin
+      createVueContentTypePlugin(parent)
     ])
@@ -100,3 +100,3 @@ }
         calendar.pauseRendering()
-        calendar.resetOptions(this.buildOptions(options))
+        calendar.resetOptions(this.buildOptions(options, this))
         this.renderId++ // will queue a rerender
@@ -103,0 +103,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45957

increased by25.44%

Number of package files

27

increased by3.85%

Lines of code

946

increased by34.95%

Worsened metrics

Dev dependency count

27

increased by22.73%

Is type module

No

Dependency changes

• + Added@fullcalendar/common@5.4.0(transitive)

• + Added@fullcalendar/core@5.4.0(transitive)

• - Removed@fullcalendar/common@5.3.1(transitive)

• - Removed@fullcalendar/core@5.3.1(transitive)

• Updated@fullcalendar/core@~5.4.0

• Updatedtslib@^2.0.3