@ag-grid-community/vue3 - npm Package Compare versions

Comparing version 26.0.0 to 26.0.1-beta.0

lib/AgGridVue.d.ts

@@ -22,2 +22,3 @@ import { Vue } from 'vue-class-component';
     destroyed(): void;
+    unmounted(): void;
     private checkForBindingConflicts;
@@ -24,0 +25,0 @@ private getRowData;

lib/AgGridVue.js

@@ -95,3 +95,2 @@ var __extends = (this && this.__extends) || (function () {
     };
-    // noinspection JSUnusedGlobalSymbols
     AgGridVue.prototype.destroyed = function () {
@@ -105,2 +104,5 @@ if (this.gridCreated) {
     };
+    AgGridVue.prototype.unmounted = function () {
+        this.destroyed();
+    };
     AgGridVue.prototype.checkForBindingConflicts = function () {
@@ -107,0 +109,0 @@ var thisAsAny = this;

lib/VueComponentFactory.d.ts

 import { AgGridVue } from './AgGridVue';
 export declare class VueComponentFactory {
     private static getComponentDefinition;
-    private static createComponentParams;
     static createAndMountComponent(component: any, params: any, parent: AgGridVue): {
-        mountedComponent: import("vue").App<Element>;
         componentInstance: any;
+        element: any;
+        destroy: () => void;
     } | undefined;
+    static mount(component: any, props: any, parent: any): {
+        vNode: any;
+        destroy: () => void;
+        el: any;
+    };
     static searchForComponentInstance(parent: AgGridVue, component: any, maxDepth?: number, suppressError?: boolean): any;
-    private static addContext;
 }

lib/VueComponentFactory.js

@@ -12,3 +12,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import { createApp, defineComponent } from 'vue';
+import { createVNode, defineComponent, render } from 'vue';
 var VueComponentFactory = /** @class */ (function () {
@@ -35,14 +35,2 @@ function VueComponentFactory() {
     };
-    VueComponentFactory.createComponentParams = function (params, parent) {
-        var extendedParams = {
-            params: Object.freeze(params),
-            parent: parent,
-        };
-        if (parent.componentDependencies) {
-            parent.componentDependencies.forEach(function (dependency) {
-                return extendedParams[dependency] = parent[dependency];
-            });
-        }
-        return extendedParams;
-    };
     VueComponentFactory.createAndMountComponent = function (component, params, parent) {
@@ -53,21 +41,24 @@ var componentDefinition = VueComponentFactory.getComponentDefinition(component, parent);
         }
-        var componentParams = VueComponentFactory.createComponentParams(params, parent);
-        // the inner defineComponent allows us to re-declare the component, with the outer one allowing us to
-        // provide the grid's params and capture the resulting component instance
-        var componentInstance = null;
-        var extendedComponentDefinition = defineComponent(__assign(__assign({}, componentDefinition), { data: function () { return (__assign(__assign({}, componentParams), componentDefinition.data ? componentDefinition.data() : {})); }, created: function () {
-                componentInstance = this.$root;
-                if (componentDefinition.created) {
-                    componentDefinition.created.bind(this)();
-                }
-            } }));
-        // with vue 3 we need to provide a container to mount into (not necessary in vue 2), so create a wrapper div here
-        var container = document.createElement('div');
-        var mountedComponent = createApp(extendedComponentDefinition);
-        VueComponentFactory.addContext(mountedComponent, parent);
-        parent.plugins.forEach(function (plugin) { return mountedComponent.use(plugin); });
-        mountedComponent.mount(container);
+        var _a = this.mount(componentDefinition, { params: Object.freeze(params) }, parent), vNode = _a.vNode, destroy = _a.destroy, el = _a.el;
         // note that the component creation is synchronous so that componentInstance is set by this point
-        return { mountedComponent: mountedComponent, componentInstance: componentInstance };
+        return {
+            componentInstance: vNode.component.proxy,
+            element: el,
+            destroy: destroy,
+        };
     };
+    VueComponentFactory.mount = function (component, props, parent) {
+        var vNode = createVNode(component, props);
+        vNode.appContext = parent.$.appContext;
+        var el = document.createElement('div');
+        render(vNode, el);
+        var destroy = function () {
+            if (el) {
+                render(null, el);
+            }
+            el = null;
+            vNode = null;
+        };
+        return { vNode: vNode, destroy: destroy, el: el };
+    };
     VueComponentFactory.searchForComponentInstance = function (parent, component, maxDepth, suppressError) {
@@ -100,19 +91,4 @@ if (maxDepth === void 0) { maxDepth = 10; }
     };
-    VueComponentFactory.addContext = function (component, parent) {
-        if (component._context && parent.$ && parent.$.appContext) {
-            var contextProperties = [
-                'config',
-                'mixins',
-                'components ',
-                'directives ',
-                'provides',
-                'optionsCache',
-                'propsCache',
-                'emitsCache',
-            ];
-            contextProperties.forEach(function (property) { return component._context[property] = parent.$.appContext[property]; });
-        }
-    };
     return VueComponentFactory;
 }());
 export { VueComponentFactory };

lib/VueFrameworkComponentWrapper.js

@@ -100,6 +100,6 @@ var __extends = (this && this.__extends) || (function () {
     VueComponent.prototype.getGui = function () {
-        return this.componentInstance.$el;
+        return this.element;
     };
     VueComponent.prototype.destroy = function () {
-        this.mountedComponent.unmount();
+        this.unmount();
     };
@@ -110,7 +110,8 @@ VueComponent.prototype.getFrameworkComponentInstance = function () {
     VueComponent.prototype.init = function (params) {
-        var _a = this.createComponent(params), mountedComponent = _a.mountedComponent, componentInstance = _a.componentInstance;
-        this.mountedComponent = mountedComponent;
+        var _a = this.createComponent(params), componentInstance = _a.componentInstance, element = _a.element, unmount = _a.destroy;
         this.componentInstance = componentInstance;
+        this.element = element;
+        this.unmount = unmount;
     };
     return VueComponent;
 }());

package.json

 {
   "name": "@ag-grid-community/vue3",
   "description": "AG Grid Vue 3 Component",
-  "version": "26.0.0",
+  "version": "26.0.1-beta.0",
   "author": "Sean Landsman <[e-mail]>",
@@ -33,3 +33,3 @@ "license": "MIT",
     "@ag-grid-community/core": "~26.0.0",
-    "@types/node": "12.12.22",
+    "@types/node": "12.20.20",
     "@vue/cli-plugin-typescript": "^3.11.0",
@@ -55,2 +55,2 @@ "@vue/cli-plugin-unit-jest": "^3.11.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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

14832683

increased by0.53%

Number of package files

27

increased by8%

Lines of code

104761

increased by0.59%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes