@fullcalendar/vue - npm Package Compare versions

Comparing version 6.0.0-beta.1 to 6.0.0-beta.2

dist/FullCalendar.d.ts

 import Vue from 'vue';
 import { Calendar, CalendarOptions } from '@fullcalendar/core';
-declare const FullCalendar: import("vue/types/vue").ExtendedVue<Vue, {
+import { CustomRendering } from '@fullcalendar/core/internal';
+declare const FullCalendar: import("vue/types/vue.js").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, {
     renderId: number;
+    customRenderingMap: Map<string, CustomRendering<any>>;
 }, {
-    getApi: typeof getApi;
-    buildOptions: typeof buildOptions;
+    getApi(): Calendar;
+    buildOptions(suppliedOptions: CalendarOptions | undefined): CalendarOptions;
 }, unknown, {
     options: CalendarOptions;
-}>;
-declare function buildOptions(this: {
-    $options: any;
-}, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions;
-declare function getApi(this: {
-    $options: any;
-}): Calendar;
+}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin>;
 export default FullCalendar;

dist/FullCalendar.js

@@ -1,33 +0,65 @@
-import { __assign } from "tslib";
 import Vue from 'vue';
 import { Calendar } from '@fullcalendar/core';
-import { OPTION_IS_COMPLEX } from './options';
-import { shallowCopy, mapHash } from './utils';
-import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type';
-var FullCalendar = Vue.extend({
+import { CustomRenderingStore } from '@fullcalendar/core/internal';
+import { OPTION_IS_COMPLEX } from './options.js';
+import { shallowCopy } from './utils.js';
+import OffscreenFragment from './OffscreenFragment.js';
+import TransportContainer from './TransportContainer.js';
+const FullCalendar = Vue.extend({
     props: {
         options: Object
     },
-    data: initData,
-    render: function (createElement) {
-        return createElement('div', {
+    data() {
+        return {
+            renderId: 0,
+            customRenderingMap: new Map()
+        };
+    },
+    methods: {
+        getApi() {
+            return getSecret(this).calendar;
+        },
+        buildOptions(suppliedOptions) {
+            return Object.assign(Object.assign({}, suppliedOptions), { customRenderingMetaMap: this.$scopedSlots, handleCustomRendering: getSecret(this).handleCustomRendering });
+        },
+    },
+    render(h) {
+        const transportContainerNodes = [];
+        for (const customRendering of this.customRenderingMap.values()) {
+            transportContainerNodes.push(h(TransportContainer, {
+                key: customRendering.id,
+                props: {
+                    inPlaceOf: customRendering.containerEl,
+                    elTag: customRendering.elTag,
+                    elClasses: customRendering.elClasses,
+                    elStyle: customRendering.elStyle,
+                    elAttrs: customRendering.elAttrs,
+                }
+            }, customRendering.generatorMeta(// a slot-render-function
+            customRendering.renderProps)));
+        }
+        return h('div', {
             // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
             attrs: { 'data-fc-render-id': this.renderId }
-        });
+        }, [
+            // for containing TransportContainer keys
+            h(OffscreenFragment, transportContainerNodes)
+        ]);
     },
-    mounted: function () {
-        var internal = this.$options;
-        internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator); // needed for buildOptions
-        var calendar = new Calendar(this.$el, this.buildOptions(this.options, this));
-        internal.calendar = calendar;
+    mounted() {
+        const customRenderingStore = new CustomRenderingStore();
+        getSecret(this).handleCustomRendering = customRenderingStore.handle.bind(customRenderingStore);
+        const calendarOptions = this.buildOptions(this.options);
+        const calendar = new Calendar(this.$el, calendarOptions);
+        getSecret(this).calendar = calendar;
         calendar.render();
+        customRenderingStore.subscribe((customRenderingMap) => {
+            this.renderId++; // because below line won't trigger if reference is same
+            this.customRenderingMap = customRenderingMap;
+        });
     },
-    methods: {
-        getApi: getApi,
-        buildOptions: buildOptions,
-    },
-    beforeUpdate: function () {
+    beforeUpdate() {
         this.getApi().resumeRendering(); // the watcher handlers paused it
     },
-    beforeDestroy: function () {
+    beforeDestroy() {
         this.getApi().destroy();
@@ -37,20 +69,10 @@ },
 });
-function initData() {
-    return {
-        renderId: 0
-    };
+export default FullCalendar;
+// storing internal state:
+// https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
+function getSecret(inst) {
+    return inst;
 }
-function buildOptions(suppliedOptions, parent) {
-    var internal = this.$options;
-    suppliedOptions = suppliedOptions || {};
-    return __assign(__assign(__assign({}, internal.scopedSlotOptions), suppliedOptions), { plugins: (suppliedOptions.plugins || []).concat([
-            createVueContentTypePlugin(parent)
-        ]) });
-}
-function getApi() {
-    var internal = this.$options;
-    return internal.calendar;
-}
 function buildWatchers() {
-    var watchers = {
+    let watchers = {
         // watches changes of ALL options and their nested objects,
@@ -60,6 +82,7 @@ // but this is only a means to be notified of top-level non-complex options changes.
             deep: true,
-            handler: function (options) {
-                var calendar = this.getApi();
+            handler(options) {
+                let calendar = this.getApi();
                 calendar.pauseRendering();
-                calendar.resetOptions(this.buildOptions(options, this));
+                let calendarOptions = this.buildOptions(options);
+                calendar.resetOptions(calendarOptions);
                 this.renderId++; // will queue a rerender
@@ -69,17 +92,16 @@ }
     };
-    var _loop_1 = function (complexOptionName) {
+    for (let complexOptionName in OPTION_IS_COMPLEX) {
         // handlers called when nested objects change
-        watchers["options." + complexOptionName] = {
+        watchers[`options.${complexOptionName}`] = {
             deep: true,
-            handler: function (val) {
-                var _a;
+            handler(val) {
                 // unfortunately the handler is called with undefined if new props were set, but the complex one wasn't ever set
                 if (val !== undefined) {
-                    var calendar = this.getApi();
+                    let calendar = this.getApi();
                     calendar.pauseRendering();
-                    calendar.resetOptions((_a = {},
+                    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.
-                        _a[complexOptionName] = shallowCopy(val),
-                        _a), true);
+                        [complexOptionName]: shallowCopy(val)
+                    }, true);
                     this.renderId++; // will queue a rerender
@@ -89,9 +111,5 @@ }
         };
-    };
-    for (var complexOptionName in OPTION_IS_COMPLEX) {
-        _loop_1(complexOptionName);
     }
     return watchers;
 }
-export default FullCalendar;
 //# sourceMappingURL=FullCalendar.js.map

dist/options.js

@@ -1,2 +0,2 @@
-export var OPTION_IS_COMPLEX = {
+export const OPTION_IS_COMPLEX = {
     headerToolbar: true,
@@ -3,0 +3,0 @@ footerToolbar: true,

dist/utils.d.ts

 export declare function shallowCopy(val: any): any;
-export declare function mapHash(input: any, func: any): any;

dist/utils.js

 // TODO: add types!
-import { __assign } from "tslib";
 /*
@@ -12,3 +11,3 @@ works with objects and arrays
         else if (val) { // non-null
-            val = __assign({}, val);
+            val = Object.assign({}, val);
         }
@@ -18,11 +17,2 @@ }
 }
-export function mapHash(input, func) {
-    var output = {};
-    for (var key in input) {
-        if (input.hasOwnProperty(key)) {
-            output[key] = func(input[key], key);
-        }
-    }
-    return output;
-}
 //# sourceMappingURL=utils.js.map

LICENSE.txt

 MIT License
 
-Copyright (c) 2020 Adam Shaw
+Copyright (c) 2022 Adam Shaw
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining

package.json

 {
   "name": "@fullcalendar/vue",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.2",
   "title": "FullCalendar Vue 2 Component",
@@ -17,17 +17,4 @@ "description": "An official FullCalendar component for Vue 2",
   },
-  "scripts": {
-    "tsc": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist tmp",
-    "watch": "tsc -p tsconfig.json --watch",
-    "build": "tsc -p tsconfig.json && rollup -c && npm run minify",
-    "minify": "terser --compress --mangle --comments false --output dist/main.global.min.js -- dist/main.global.js",
-    "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": "6.0.0-beta.1",
-    "tslib": "^2.1.0"
-  },
   "peerDependencies": {
+    "@fullcalendar/core": "6.0.0-beta.2",
     "vue": "^2.6.12"
@@ -40,6 +27,4 @@ },
     "@babel/runtime": "^7.12.1",
-    "@fullcalendar/daygrid": "6.0.0-beta.1",
-    "@rollup/plugin-node-resolve": "^8.4.0",
-    "@types/estree": "^0.0.45",
-    "@types/node": "14.10.0",
+    "@fullcalendar/core": "6.0.0-beta.2",
+    "@fullcalendar/daygrid": "6.0.0-beta.2",
     "@vue/test-utils": "^1.0.3",
@@ -57,3 +42,3 @@ "babel-loader": "^8.1.0",
     "style-loader": "^2.0.0",
-    "terser": "^4.8.0",
+    "terser": "^5.4.0",
     "typescript": "^4.0.5",
@@ -66,10 +51,37 @@ "vue": "^2.6.12",
   },
-  "main": "dist/main.cjs.js",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "jsdelivr": "dist/main.global.min.js",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/index.global.min.js",
+  "jsdelivr": "dist/index.global.min.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.global.js"
+    }
+  },
   "files": [
     "dist",
     "src"
-  ]
+  ],
+  "scripts": {
+    "build": "pnpm run tsc && pnpm run rollup && pnpm run webpack && pnpm run minify && pnpm run meta",
+    "dev": "pnpm run tsc && concurrently 'npm:tsc:dev' 'npm:rollup:dev' 'npm:webpack:dev'",
+    "clean": "rm -rf dist tests/dist",
+    "tsc": "tsc -p .",
+    "tsc:dev": "tsc -p . --watch --preserveWatchOutput --pretty",
+    "rollup": "rollup -c",
+    "rollup:dev": "rollup -c --watch",
+    "webpack": "webpack",
+    "webpack:dev": "webpack --watch",
+    "test": "karma start karma.config.cjs --browsers ChromeHeadless --single-run --no-auto-watch",
+    "test:dev": "karma start karma.config.cjs",
+    "minify": "terser --compress --mangle --comments false --output dist/index.global.min.js -- dist/index.global.js",
+    "meta": "mkdir -p dist && cp README.md LICENSE.txt dist",
+    "ci": "pnpm run clean && pnpm run build && pnpm run test"
+  }
 }

README.md

@@ -13,5 +13,5 @@
 ```
-npm install @fullcalendar/vue
+npm install @fullcalendar/core @fullcalendar/vue
 ```
 
 For view Vue 3, visit the [vue3 branch](https://github.com/fullcalendar/fullcalendar-vue/tree/vue3).

src/FullCalendar.ts

@@ -1,17 +0,10 @@
-import Vue, { PropType } from 'vue'
-import { NormalizedScopedSlot } from 'vue/types/vnode'
+import Vue, { PropType, VNode } from 'vue'
 import { Calendar, CalendarOptions } from '@fullcalendar/core'
-import { OPTION_IS_COMPLEX } from './options'
-import { shallowCopy, mapHash } from './utils'
-import { wrapVDomGenerator, createVueContentTypePlugin } from './custom-content-type'
+import { CustomRendering, CustomRenderingStore } from '@fullcalendar/core/internal'
+import { OPTION_IS_COMPLEX } from './options.js'
+import { shallowCopy } from './utils.js'
+import OffscreenFragment from './OffscreenFragment.js'
+import TransportContainer from './TransportContainer.js'
 
-
-interface FullCalendarInternal {
-  calendar: Calendar
-  scopedSlotOptions: { [name: string]: NormalizedScopedSlot }
-}
-
-
 const FullCalendar = Vue.extend({
-
   props: {
@@ -21,25 +14,67 @@ options: Object as PropType<CalendarOptions>
 
-  data: initData, // separate func b/c of type inferencing
+  data() {
+    return {
+      renderId: 0,
+      customRenderingMap: new Map<string, CustomRendering<any>>()
+    }
+  },
 
-  render(createElement) {
-    return createElement('div', {
+  methods: {
+    getApi(): Calendar {
+      return getSecret(this).calendar
+    },
+
+    buildOptions(suppliedOptions: CalendarOptions | undefined): CalendarOptions {
+      return {
+        ...suppliedOptions,
+        customRenderingMetaMap: this.$scopedSlots,
+        handleCustomRendering: getSecret(this).handleCustomRendering,
+      }
+    },
+  },
+
+  render(h) {
+    const transportContainerNodes: VNode[] = []
+
+    for (const customRendering of this.customRenderingMap.values()) {
+      transportContainerNodes.push(
+        h(TransportContainer, {
+          key: customRendering.id,
+          props: {
+            inPlaceOf: customRendering.containerEl,
+            elTag: customRendering.elTag,
+            elClasses: customRendering.elClasses,
+            elStyle: customRendering.elStyle,
+            elAttrs: customRendering.elAttrs,
+          }
+        }, customRendering.generatorMeta( // a slot-render-function
+          customRendering.renderProps
+        ))
+      )
+    }
+
+    return h('div', {
       // when renderId is changed, Vue will trigger a real-DOM async rerender, calling beforeUpdate/updated
       attrs: { 'data-fc-render-id': this.renderId }
-    })
+    }, [
+      // for containing TransportContainer keys
+      h(OffscreenFragment, transportContainerNodes)
+    ])
   },
 
   mounted() {
-    let internal = this.$options as FullCalendarInternal
-    internal.scopedSlotOptions = mapHash(this.$scopedSlots, wrapVDomGenerator) // needed for buildOptions
+    const customRenderingStore = new CustomRenderingStore<any>()
+    getSecret(this).handleCustomRendering = customRenderingStore.handle.bind(customRenderingStore)
 
-    let calendar = new Calendar(this.$el as HTMLElement, this.buildOptions(this.options, this))
-    internal.calendar = calendar
+    const calendarOptions = this.buildOptions(this.options)
+    const calendar = new Calendar(this.$el as HTMLElement, calendarOptions)
+    getSecret(this).calendar = calendar
+
     calendar.render()
+    customRenderingStore.subscribe((customRenderingMap) => {
+      this.renderId++ // because below line won't trigger if reference is same
+      this.customRenderingMap = customRenderingMap
+    })
   },
 
-  methods: { // separate funcs b/c of type inferencing
-    getApi,
-    buildOptions,
-  },
-
   beforeUpdate() {
@@ -56,32 +91,19 @@ this.getApi().resumeRendering() // the watcher handlers paused it
 
+export default FullCalendar
 
-function initData() {
-  return {
-    renderId: 0
-  }
-}
+// Internals
 
+type FullCalendarInstance = InstanceType<typeof FullCalendar>
 
-function buildOptions(this: { $options: any }, suppliedOptions: CalendarOptions, parent: Vue): CalendarOptions {
-  let internal = this.$options as FullCalendarInternal
-  suppliedOptions = suppliedOptions || {}
-  return {
-    ...internal.scopedSlotOptions,
-    ...suppliedOptions, // spread will pull out the values from the options getter functions
-    plugins: (suppliedOptions.plugins || []).concat([
-      createVueContentTypePlugin(parent)
-    ])
-  }
+interface FullCalendarSecret {
+  calendar: Calendar
+  handleCustomRendering: (customRendering: CustomRendering<any>) => void
 }
 
-
-function getApi(this: { $options: any }) {
-  let internal = this.$options as FullCalendarInternal
-  return internal.calendar
+// storing internal state:
+// https://github.com/vuejs/vue/issues/1988#issuecomment-163013818
+function getSecret(inst: FullCalendarInstance): FullCalendarSecret {
+  return inst as any as FullCalendarSecret
 }
 
-
-type FullCalendarInstance = InstanceType<typeof FullCalendar>
-
-
 function buildWatchers() {
@@ -98,3 +120,6 @@
         calendar.pauseRendering()
-        calendar.resetOptions(this.buildOptions(options, this))
+
+        let calendarOptions = this.buildOptions(options)
+        calendar.resetOptions(calendarOptions)
+
         this.renderId++ // will queue a rerender
@@ -131,4 +156,1 @@ }
 }
-
-
-export default FullCalendar

src/utils.ts

 
 // TODO: add types!
 
-
 /*
@@ -19,14 +18,1 @@ works with objects and arrays
 }
-
-
-export function mapHash(input: any, func: any) {
-  const output: any = {}
-
-  for (const key in input) {
-    if (input.hasOwnProperty(key)) {
-      output[key] = func(input[key], key)
-    }
-  }
-
-  return output
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48103

3.79%

Dependency count

2

-33.33%

Dev dependency count

25

-7.41%

Number of package files

32

18.52%

Is type module

Yes

NaN

Worsened metrics

Lines of code

922

-2.54%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @fullcalendar/core@6.0.0-beta.2
  (transitive)

• - Removed

  @fullcalendar/core@6.0.0-beta.1

• - Removed

  tslib@^2.1.0

• - Removed

  @fullcalendar/common@6.0.0-beta.1
  (transitive)

• - Removed

  @fullcalendar/core@6.0.0-beta.1
  (transitive)

• - Removed

  tslib@2.8.1
  (transitive)