@cerebral/vue - npm Package Compare versions

Comparing version 4.0.0-1521140905511 to 4.0.0-1525724201307

lib/connect.js

@@ -12,3 +12,5 @@ 'use strict';
 
-function connect(dependencies, component) {
+function connect(dependencies) {
+  var component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
   component.inject = component.inject ? component.inject.concat(['cerebral_controller']) : ['cerebral_controller'];
@@ -18,4 +20,8 @@
     _cererebral_onUpdate: function _cererebral_onUpdate(stateChanges, force) {
+      var _this = this;
+
       this.view.updateFromState(stateChanges, this.$props, force);
-      Object.assign(this, this.view.getProps(this.$props));
+      this.view.render(this.$props, function (newProps) {
+        Object.assign(_this, newProps);
+      });
       this.$forceUpdate();
@@ -27,3 +33,3 @@ }
   component.beforeMount = function () {
-    var _this = this;
+    var _this2 = this;
 
@@ -45,6 +51,10 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
     this.view.mount();
-    Object.assign(this, this.view.getProps(this.$props));
+    this.view.render(this.$props, function (newProps) {
+      Object.assign(_this2, newProps);
+    });
 
     this.$props && Object.keys(this.$props).forEach(function (prop) {
-      _this.$watch(prop, function (newVal, oldVal) {
+      _this2.$watch(prop, function (newVal, oldVal) {
+        var _this3 = this;
+
         var oldProps = Object.assign({}, this.$props, _defineProperty({}, prop, oldVal));
@@ -54,3 +64,5 @@ var hasUpdate = this.view.onPropsUpdate(oldProps, this.$props);
         if (hasUpdate) {
-          Object.assign(this, this.view.getProps(this.$props));
+          this.view.render(this.$props, function (newProps) {
+            Object.assign(_this3, newProps);
+          });
           this.$forceUpdate();
@@ -57,0 +69,0 @@ }

package.json

 {
   "name": "@cerebral/vue",
-  "version": "4.0.0-1521140905511",
+  "version": "4.0.0-1525724201307",
   "description": "Vue.js view for Cerebral",
@@ -17,3 +17,3 @@ "main": "index.js",
   "dependencies": {
-    "cerebral": "^5.0.0-1521140905511"
+    "cerebral": "^5.0.0-1525724201307"
   },
@@ -24,3 +24,3 @@ "scripts": {
     "prepublish": "npm run build",
-    "test": "mocha -r test/setup --compilers js:babel-register \"src/**/*.test.js\"",
+    "test": "mocha -r test/setup --require babel-register \"src/**/*.test.js\"",
     "test:watch": "npm run test -- --watch"
@@ -27,0 +27,0 @@ },

README.md

@@ -6,9 +6,11 @@ # @cerebral/vue
 ## Install
+
 `npm install @cerebral/vue vue`
 
 ## Container
+
 ```js
 import Vue from 'vue/dist/vue'
-import {Controller} from 'cerebral'
-import {Container, connect} from '@cerebral/vue'
+import { Controller } from 'cerebral'
+import { Container, connect } from '@cerebral/vue'
 
@@ -24,3 +26,3 @@ const controller = Controller({
 
- var app = new Vue({
+var app = new Vue({
   el: '#app',
@@ -33,3 +35,3 @@ components: {
 
-**Note!** The HTML of the root element must use the *container*:
+**Note!** The HTML of the root element must use the _container_:
 
@@ -45,20 +47,26 @@ ```html
 ## connect
-*MyComponent.js*
+
+_MyComponent.js_
+
 ```js
-import {connect} from '@cerebral/vue'
-import {state, signal} from 'cerebral/tags'
+import { connect } from '@cerebral/vue'
+import { state, signal } from 'cerebral/tags'
 
-export default connect({
-  foo: state`foo`,
-  click: signal`clicked`
-}, {
-  template: '<div v-on:click="click()">{{foo}}</div>'
-})
+export default connect(
+  {
+    foo: state`foo`,
+    click: signal`clicked`
+  },
+  {
+    template: '<div v-on:click="click()">{{foo}}</div>'
+  }
+)
 ```
 
-*main.js*
+_main.js_
+
 ```js
 import Vue from 'vue/dist/vue'
-import {Controller} from 'cerebral'
-import {Container, connect} from '@cerebral/vue'
+import { Controller } from 'cerebral'
+import { Container, connect } from '@cerebral/vue'
 import MyComponent from './MyComponent'
@@ -75,3 +83,3 @@
 
- var app = new Vue({
+var app = new Vue({
   el: '#app',
@@ -84,1 +92,37 @@ components: {
 ```
+
+## .vue file
+
+You can also connect inside a **.vue** file. When using [ParcelJS](https://parceljs.org/) this requires additional packages.
+
+`npm install parcel-plugin-vue babel-preset-env --save-dev`
+
+Then add the preset to your **.babelrc** file:
+
+```js
+{
+  "presets": ["env"],
+  "plugins": ["cerebral"]
+}
+```
+
+Your component file can now be written as:
+
+_MyComponent.vue_
+
+```js
+<template>
+  <div v-on:click="click()">{{foo}}</div>
+</template>
+<script>
+import { connect } from '@cerebral/vue'
+import { state, signal } from 'cerebral/proxy'
+
+export default connect(
+  {
+    foo: state.foo,
+    click: signal.clicked
+  }
+)
+</script>
+```

No alert changes

Improved metrics

Total package byte prevSize

11771

increased by11.23%

Lines of code

100

increased by9.89%

Number of lines in readme file

123

increased by55.7%

Worsened metrics

Number of package files

9

decreased by-10%

Dependency changes

• Updatedcerebral@^5.0.0-1525724201307