react-query - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -225,2 +225,19 @@ var React = require("react");
     },
+    replace: function replace($match, replaceWithVNode) {
+        return function(vnode) {
+            if($match.contains(vnode)) {
+                if(_.isFunction(replaceWithVNode)) {
+                    return replaceWithVNode.apply(vnode, vnode);
+                }
+                else {
+                    return replaceWithVNode;
+                }
+            }
+            else {
+                return new vnode.constructor(_.extend({}, $.getPropsWithoutChildren(vnode), {
+                    children: _.map($.getChildren(vnode), $.replace($match, replaceWithVNode)),
+                }));
+            }
+        };
+    },
     findWithSelectors: function findWithSelectors(selectors) {
@@ -352,2 +369,15 @@ assert(_.isArray(selectors));
     },
+    any: function any(predicate) {
+        return _.any(this.vnodes, function(vnode, key) {
+            return predicate.call(vnode, vnode, key);
+        });
+    },
+    contains: function contains(vnode) {
+        return _.contains(this.expose(), vnode);
+    },
+    containsLike: function containsLike(vnode) {
+        return this.any(function() {
+            $(this).like(vnode);
+        });
+    },
     filter: function filter(predicate) {
@@ -366,3 +396,3 @@ var res = [];
     descendants: function descendants() {
-        return $(_.flatten(this.map($.getDescendants, true));
+        return $(_.flatten(this.map($.getDescendants), true));
     },
@@ -457,2 +487,18 @@ tree: function tree() {
     },
+    replace: function replace() {
+        if(arguments.length === 2) {
+            var selectorString = arguments[0];
+            var replaceWithVNode = arguments[1];
+            var $match = this.find(selectorString);
+            return $(this.map($.replace($match, replaceWithVNode)));
+        }
+        else {
+            var selectorStringToVNodes = arguments[0];
+            var $curr = this;
+            _.each(selectorStringToVNodes, function(replaceWithVNode, selectorString) {
+                $curr = $curr.replace(selectorString, replaceWithVNode);
+            });
+            return $curr;
+        }
+    },
     wrap: function wrap(vnode) {
@@ -459,0 +505,0 @@ return $(

package.json

 {
   "name": "react-query",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React virtual DOM querying made easy.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -37,2 +37,3 @@ react-query
     },
+    // Imperative, jQuery-style:
     render: function() {
@@ -44,2 +45,13 @@ var $children = $(this.props.children);
     },
+    // Functionally, React-style:
+    render: function() {
+        return $(this.props.children).replace({
+            ".dropdown-toggle": function() {
+                return $(this).prop("onClick", this.toggleMenu);
+            },
+            ".dropdown-menu": function() {
+                return $(this).toggleClass("dropdown-toggled", this.state.toggled);
+            },
+        }).wrap(<div className="dropdown" />);
+    }
 });
@@ -168,2 +180,12 @@
 
+##### `$r.replace(selector: String, vnode: descriptor)` or `$r.replace(Object<selector: String, vnode: descriptor>)`
+##### or `$r.replace(selector:String, Function(vnode: descriptor): descriptor)` or `$r.replace(Object<selector: String, Function(vnode: descriptor): descriptor)`.
+Returns a new `$` instance with each descriptor matched by the selector(s) replaced with a new vnode.
+Acceptes forms:
+- Single selector string: Only one selector string, all the occurences matching this selector will be replaced.
+- Multiple selector string: Pass an Object mapping each selector string to what it should be replaced with.
+- Plain value for the vnode to insert: Will be cloned and replace each matching vnode.
+- Function returning a new vnode: Will be applied to the elements to be replaced, and the return value will be inserted insert. The callback
+is passed the vnode to be replaced as first argument, as also as `this` context. Useful for "patching" trees.
+
 ##### `$r.wrap(vnode: descriptor): $`
@@ -170,0 +192,0 @@ Returns a new `$` instance in which each descriptor is wrapped as the last child of `vnode` (and sole child if `vnode` had no children of course).

tests/tests.js

@@ -47,2 +47,14 @@ /** @jsx React.DOM */
  var $toggleClass = $nested.toggleClass("outer").toggleClass("baz").addClass("foo").removeClass("baz");
- console.warn("toggleClass", $toggleClass.toString());
+ console.warn("toggleClass", $toggleClass.toString());
+/*
+ * <div className="foo">
+ *     <p className="inner" />
+ * </div>
+ */
+ var $replace = $nested.replace(".inner", React.DOM.div({className: "new-inner"}));
+ console.warn("replace", $replace.toString());
+
+ var $replaceFn = $nested.replace(".inner", function() {
+    return $(this).wrap(React.DOM.div({className: "wrapped"}));
+ });
+ console.warn("replaceFn", $replaceFn.toString());

tests/tests.jsx

@@ -52,2 +52,9 @@ /** @jsx React.DOM */
  * </div>
- */
+ */
+ var $replace = $nested.replace(".inner", <div className="new-inner" />);
+ console.warn("replace", $replace.toString());
+
+ var $replaceFn = $nested.replace(".inner", function() {
+    return $(this).wrap(<div className="wrapped" />);
+ });
+ console.warn("replaceFn", $replaceFn.toString());

No alert changes

Improved metrics

Total package byte prevSize

33129

increased by13.05%

Lines of code

632

increased by11.07%

Number of lines in readme file

197

increased by12.57%

No dependency changes