@cerebral/vue - npm Package Compare versions

Comparing version 4.2.2 to 4.3.0-1742462834313

lib/connect.js

 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
@@ -8,9 +9,40 @@ value: true
 var _cerebral = require("cerebral");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// Get Vue from global
+var Vue = global.Vue;
+var isVue3 = Vue && Vue.version && Vue.version.startsWith('3');
 function connect(dependencies) {
   var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  component.inject = component.inject ? component.inject.concat(['cerebral_controller']) : ['cerebral_controller'];
+  // Configure inject for Vue version compatibility
+  if (isVue3) {
+    if (Array.isArray(component.inject)) {
+      if (!component.inject.includes('cerebral_controller')) {
+        component.inject = [].concat(_toConsumableArray(component.inject), ['cerebral_controller']);
+      }
+    } else {
+      component.inject = component.inject ? _objectSpread(_objectSpread({}, component.inject), {}, {
+        cerebral_controller: {
+          "default": null
+        }
+      }) : {
+        cerebral_controller: {
+          "default": null
+        }
+      };
+    }
+  } else {
+    component.inject = component.inject ? component.inject.concat(['cerebral_controller']) : ['cerebral_controller'];
+  }
+
+  // Add cerebral update handler
   component.methods = Object.assign(component.methods || {}, {
@@ -21,3 +53,15 @@ _cererebral_onUpdate: function _cererebral_onUpdate(stateChanges, force) {
       this.view.render(this.$props, function (newProps) {
-        Object.assign(_this, newProps);
+        if (isVue3) {
+          // In Vue 3, filter out props to avoid mutating read-only props
+          var filteredProps = Object.keys(newProps).reduce(function (props, key) {
+            if (!_this.$props || !(key in _this.$props)) {
+              props[key] = newProps[key];
+            }
+            return props;
+          }, {});
+          Object.assign(_this, filteredProps);
+        } else {
+          // Vue 2 allows prop mutation in components
+          Object.assign(_this, newProps);
+        }
       });
@@ -27,3 +71,9 @@ this.$forceUpdate();
   });
+
+  // Store existing lifecycle hooks
   var existingBeforeMount = component.beforeMount;
+  var existingBeforeDestroy = isVue3 ? component.beforeUnmount : component.beforeDestroy;
+  var existingDestroyed = isVue3 ? component.unmounted : component.destroyed;
+
+  // Initialize cerebral on mount
   component.beforeMount = function () {
@@ -35,6 +85,9 @@ var _this2 = this;
     existingBeforeMount && existingBeforeMount.call.apply(existingBeforeMount, [this].concat(args));
+    if (!this.cerebral_controller) {
+      throw new Error('Cerebral - Can not find controller, did you remember to use the Container component?');
+    }
     this.view = new _cerebral.View({
       dependencies: dependencies,
       mergeProps: null,
-      props: this.$props,
+      props: this.$props || {},
       controller: this.cerebral_controller,
@@ -45,29 +98,94 @@ displayName: component.name || 'NoName',
     this.view.mount();
-    this.view.render(this.$props, function (newProps) {
-      Object.assign(_this2, newProps);
+    this.view.render(this.$props || {}, function (newProps) {
+      if (isVue3) {
+        // Filter out props in Vue 3
+        var filteredProps = Object.keys(newProps).reduce(function (props, key) {
+          if (!_this2.$props || !(key in _this2.$props)) {
+            props[key] = newProps[key];
+          }
+          return props;
+        }, {});
+        Object.assign(_this2, filteredProps);
+      } else {
+        // Vue 2 allows prop mutation
+        Object.assign(_this2, newProps);
+      }
     });
-    this.$props && Object.keys(this.$props).forEach(function (prop) {
-      _this2.$watch(prop, function (newVal, oldVal) {
-        var _this3 = this;
-        var oldProps = Object.assign({}, this.$props, _defineProperty({}, prop, oldVal));
-        var hasUpdate = this.view.onPropsUpdate(oldProps, this.$props);
-        if (hasUpdate) {
-          this.view.render(this.$props, function (newProps) {
-            Object.assign(_this3, newProps);
-          });
-          this.$forceUpdate();
-        }
+
+    // Setup prop watchers
+    if (this.$props) {
+      Object.keys(this.$props).forEach(function (prop) {
+        _this2.$watch(prop, function (newVal, oldVal) {
+          var _this3 = this;
+          var oldProps = Object.assign({}, this.$props, _defineProperty({}, prop, oldVal));
+          var hasUpdate = this.view.onPropsUpdate(oldProps, this.$props);
+          if (hasUpdate) {
+            this.view.render(this.$props, function (newProps) {
+              if (isVue3) {
+                // Filter props in Vue 3
+                var filteredProps = Object.keys(newProps).reduce(function (props, key) {
+                  if (!_this3.$props || !(key in _this3.$props)) {
+                    props[key] = newProps[key];
+                  }
+                  return props;
+                }, {});
+                Object.assign(_this3, filteredProps);
+              } else {
+                Object.assign(_this3, newProps);
+              }
+            });
+            this.$forceUpdate();
+          }
+        });
       });
-    });
+    }
   };
-  var existingBeforeDestroy = component.beforeDestroy;
-  component.beforeDestroy = function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+
+  // Handle component unmounting based on Vue version
+  if (isVue3) {
+    component.beforeUnmount = function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      existingBeforeDestroy && existingBeforeDestroy.call.apply(existingBeforeDestroy, [this].concat(args));
+      if (this.view) {
+        this.view.unMount();
+        this.view = null;
+      }
+    };
+    if (existingDestroyed) {
+      component.unmounted = function () {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        existingDestroyed.call.apply(existingDestroyed, [this].concat(args));
+      };
     }
-    existingBeforeDestroy && existingBeforeDestroy.call.apply(existingBeforeDestroy, [this].concat(args));
-    this.view.unMount();
-  };
-  return component;
+  } else {
+    component.beforeDestroy = function () {
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+      existingBeforeDestroy && existingBeforeDestroy.call.apply(existingBeforeDestroy, [this].concat(args));
+      if (this.view) {
+        this.view.unMount();
+        this.view = null;
+      }
+    };
+    if (existingDestroyed) {
+      component.destroyed = function () {
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        existingDestroyed.call.apply(existingDestroyed, [this].concat(args));
+      };
+    }
+  }
+
+  // Return appropriate component type for Vue version
+  if (isVue3 && Vue.defineComponent) {
+    return Vue.defineComponent(component);
+  }
+  return isVue3 ? component : Vue.extend(component);
 }
 //# sourceMappingURL=connect.js.map

package.json

 {
   "name": "@cerebral/vue",
-  "version": "4.2.2",
+  "version": "4.3.0-1742462834313",
   "description": "Vue.js view for Cerebral",
@@ -24,6 +24,6 @@ "main": "index.js",
   "dependencies": {
-    "cerebral": "5.2.2"
+    "cerebral": "5.2.3-1742462834313"
   },
-  "devDependencies": {
-    "vue": " 2.7.16"
+  "peerDependencies": {
+    "vue": ">=2.6.0 <4.0.0"
   },
@@ -30,0 +30,0 @@ "nyc": {

README.md

@@ -12,30 +12,22 @@ # @cerebral/vue
 ```js
-import Vue from 'vue/dist/vue'
+import { createApp } from 'vue'
 import App from 'cerebral'
 import { Container, connect } from '@cerebral/vue'
 import main from './main'
+import AppComponent from './AppComponent'
 
 const app = App(main)
 
-new Vue({
-  render: h =>
-    h({
-      components: {
-        Container: Container(app),
-        AppComponent: AppComponent
-      },
-      template: "<Container><AppComponent></AppComponent></Container>"
-    })
-}).$mount("#app");
+createApp({
+  components: {
+    Container: Container(app),
+    AppComponent
+  },
+  template: '<Container><AppComponent /></Container>'
+}).mount('#app')
 ```
 
-For `import Vue from 'vue'` you have to add a runtime. E.g for project created with `vue-cli`
-```
-// vue.config.js file:
-module.exports = { runtimeCompiler: true }
-```
-
 ## connect
 
-_MyComponent.js_
+### _MyComponent.js_
 
@@ -52,3 +44,3 @@ ```js
   {
-    template: '<div v-on:click="click()">{{foo}}</div>'
+    template: '<div @click="click">{{foo}}</div>'
   }
@@ -58,6 +50,6 @@ )
 
-_main.js_
+### _main.js_
 
 ```js
-import Vue from 'vue/dist/vue'
+import { createApp } from 'vue'
 import App from 'cerebral'
@@ -70,9 +62,40 @@ import { Container, connect } from '@cerebral/vue'
 
-var vue = new Vue({
-  el: '#app',
+createApp({
   components: {
-    container: Container(app),
+    Container: Container(app),
     'my-component': MyComponent
-  }
-})
+  },
+  template: '<Container><my-component /></Container>'
+}).mount('#app')
 ```
+
+## Vue 2 Support
+
+For Vue 2, you need to use the complete Vue build that includes the template compiler:
+
+```js
+import Vue from 'vue/dist/vue'
+import App from 'cerebral'
+import { Container, connect } from '@cerebral/vue'
+import main from './main'
+import AppComponent from './AppComponent'
+
+const app = App(main)
+
+new Vue({
+  render: (h) =>
+    h({
+      components: {
+        Container: Container(app),
+        AppComponent: AppComponent
+      },
+      template: '<Container><AppComponent /></Container>'
+    })
+}).$mount('#app')
+```
+
+For projects created with `vue-cli`, add this to your `vue.config.js`:
+
+```js
+module.exports = { runtimeCompiler: true }
+```

New alerts

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

Improved metrics

Total package byte prevSize

29300

105.6%

Dev dependency count

0

-100%

Lines of code

219

108.57%

Number of lines in readme file

98

30.67%

Worsened metrics

Dependency count

2

100%

Number of low quality alerts

2

100%

Dependency changes

• + Added

  @babel/helper-string-parser@7.25.9
  (transitive)

• + Added

  @babel/helper-validator-identifier@7.25.9
  (transitive)

• + Added

  @babel/parser@7.27.0
  (transitive)

• + Added

  @babel/types@7.27.0
  (transitive)

• + Added

  @jridgewell/sourcemap-codec@1.5.0
  (transitive)

• + Added

  @vue/compiler-core@3.5.13
  (transitive)

• + Added

  @vue/compiler-dom@3.5.13
  (transitive)

• + Added

  @vue/compiler-sfc@3.5.13
  (transitive)

• + Added

  @vue/compiler-ssr@3.5.13
  (transitive)

• + Added

  @vue/reactivity@3.5.13
  (transitive)

• + Added

  @vue/runtime-core@3.5.13
  (transitive)

• + Added

  @vue/runtime-dom@3.5.13
  (transitive)

• + Added

  @vue/server-renderer@3.5.13
  (transitive)

• + Added

  @vue/shared@3.5.13
  (transitive)

• + Added

  cerebral@5.2.3-1742462834313
  (transitive)

• + Added

  csstype@3.1.3
  (transitive)

• + Added

  entities@4.5.0
  (transitive)

• + Added

  estree-walker@2.0.2
  (transitive)

• + Added

  function-tree@3.3.2-1742462834313
  (transitive)

• + Added

  magic-string@0.30.17
  (transitive)

• + Added

  nanoid@3.3.11
  (transitive)

• + Added

  picocolors@1.1.1
  (transitive)

• + Added

  postcss@8.5.3
  (transitive)

• + Added

  source-map-js@1.2.1
  (transitive)

• + Added

  vue@3.5.13
  (transitive)

• - Removed

  cerebral@5.2.2
  (transitive)

• - Removed

  function-tree@3.3.2
  (transitive)

• Updated

  cerebral@5.2.3-1742462834313