base-element - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

index.js

 module.exports = BaseElement
 
+var document = require('global/document')
 var h = require('virtual-dom/h')
@@ -14,8 +15,3 @@ var diff = require('virtual-dom/diff')
   this.__events__ = Object.create(null)
-  // Decorate _name to methods for super()
-  for (var method in this) {
-    if (typeof this[method] === 'function') {
-      this[method]._name = method
-    }
-  }
+  this.__BaseElementSig__ = true
 }
@@ -27,2 +23,9 @@
 
+BaseElement.prototype.afterRender = function (vtree) {
+  if (this.hasOwnProperty('__BaseElementSig__')) {
+    return BaseElement.prototype.render.call(this, vtree)
+  }
+  return vtree
+}
+
 BaseElement.prototype.render = function (vtree) {
@@ -58,19 +61,1 @@ if (!this.vtree) {
 }
-
-// Ability to call super() on methods
-Object.defineProperty(BaseElement.prototype, 'super', {
-  get: function get () {
-    var name = get.caller._name
-    var found = this[name] === get.caller
-    var proto = this
-    while (proto = Object.getPrototypeOf(proto)) { // eslint-disable-line
-      if (!proto[name]) {
-        break
-      } else if (proto[name] === get.caller) {
-        found = true
-      } else if (found) {
-        return proto[name]
-      }
-    }
-  }
-})

package.json

 {
   "name": "base-element",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "An element authoring library for creating standalone and performant elements.",
   "main": "index.js",
   "scripts": {
-    "test": "standard",
-    "ci": "zuul --local 9966 -- test/index.js",
+    "test": "standard && zuul --local 9966 -- test/index.js",
+    "ci": "standard && zuul -- test/index.js",
     "start": "budo examples/standalone.js",
-    "build": "browserify index.js --standalone BaseElement -o dist/base-element.js"
+    "build": "browserify index.js --standalone BaseElement -o dist/base-element.js",
+    "publish": "npm run build"
   },
@@ -19,3 +20,4 @@ "author": "Kyle Robinson Young <[e-mail]> (http://dontkry.com)",
   "files": [
-    "index.js"
+    "index.js",
+    "dist/"
   ],
@@ -44,4 +46,5 @@ "standard": {
   "dependencies": {
+    "global": "^4.3.0",
     "virtual-dom": "^2.0.1"
   }
 }

README.md

 # base-element
 An element authoring library for creating standalone and performant elements.
 
+[![build status](https://secure.travis-ci.org/shama/base-element.svg)](https://travis-ci.org/shama/base-element)
+[![NPM version](https://badge.fury.io/js/base-element.svg)](https://badge.fury.io/js/base-element)
+[![experimental](http://hughsk.github.io/stability-badges/dist/experimental.svg)](http://github.com/hughsk/stability-badges)
+
+[![Sauce Test Status](https://saucelabs.com/browser-matrix/shama.svg)](https://saucelabs.com/u/shama)
+
 View [this example List element](https://github.com/shama/base-element/blob/master/examples/list.js) in use with:
@@ -31,8 +37,8 @@ * [React](https://github.com/shama/base-element/blob/master/examples/react.js)
   var vtree = this.html('div.bear', ['Im a ' + typeOfBear + '!'])
-  // Call the super() render method with your vtree
-  return this.super(vtree)
+  // Call afterRender with your vtree when returning your vtree
+  return this.afterRender(vtree)
 }
 ```
 
-## data down, events up
+### data down, events up
 DOMs work best (in the opinion of myself and many) when data goes down
@@ -59,3 +65,3 @@ and event (or actions) go up.
   // The "label" data is coming down
-  return this.super(this.html('button', {
+  var vtree = this.html('button', {
     onclick: function (event) {
@@ -65,3 +71,4 @@ // We send the "clicked" event up
     }
-  }, label))
+  }, label)
+  return this.afterRender(vtree)
 }
@@ -80,2 +87,63 @@ ```
 
+### nested architecture
+Elements created using `base-element` are intended on being shared and extended
+by others. Each element should not require an additional library/framework to
+run it or be injected into it in order to be ran. Elements should be standalone.
+
+For example if I create an `input-box` element and published on npm:
+
+```js
+var BaseElement = require('base-element')
+function InputBox (el) {
+  BaseElement.call(this, el)
+}
+InputBox.prototype = Object.create(BaseElement.prototype)
+module.exports = InputBox
+
+InputBox.prototype.render = function (value) {
+  // Builds an <input value="{value}: />
+  return this.afterRender(this.html('input', {
+    onkeyup: function(e) {
+      // When keys are typed in it we send the value up
+      this.send('changed', e.target.value)
+    }.bind(this),
+    value: value || ''
+  }))
+}
+```
+
+Now yourself or another user can either consume your `input-box` or extend it
+to add their own functionality on top of yours, such as `email-input`:
+
+```js
+var InputBox = require('input-box')
+function EmailInput (el) {
+  InputBox.call(this, el)
+
+  // When we receive a "changed" event from InputBox, handle it here
+  this.on('changed', function (text) {
+    /* Perform some email validation on text here,
+       then render() if we need an update */
+  })
+}
+EmailInput.prototype = Object.create(InputBox.prototype)
+module.exports = EmailInput
+
+EmailInput.prototype.render = function (data) {
+  data = data || {}
+  var vtree = this.html('div', [
+    // Put a <label>Enter your email</label> inside this <div>
+    this.html('label', data.label || 'Enter your email'),
+    // Call the InputBox's render
+    InputBox.prototype.render(data.value)
+  ])
+  // Return the virtual DOM tree
+  return this.afterRender(vtree)
+}
+```
+
+Both `input-box` and `email-input` can be ran on their own. When `input-box`
+updates over time, `email-input` can stay on a previous version until an upgrade
+can be made.
+
 ## install
@@ -103,6 +171,3 @@
 
-### `element.render(vtree)`
-Renders your virtual DOM tree to the DOM element and returns the updated `vtree`.
-
-### `element.send(name[, params])`
+### `element.send(name[, params...])`
 Sends an event up with a given `name` and `params`.
@@ -117,5 +182,6 @@
 
-### `element.super([params])`
-This method can be called within any inherited method. It will call the parent's
-class of the same name.
+### `element.afterRender([params...])`
+This method needs to be called when returning a constructed virtual tree. It
+will detect if we are at the top of the render tree and perform the DOM diff
+and patching.
 
@@ -125,4 +191,3 @@ ```js
   var tree = this.html('button')
-  // Calls the render method on BaseElement
-  return this.super(vtree)
+  return this.afterRender(vtree)
 }
@@ -129,0 +194,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

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

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

56761

increased by701.82%

Number of package files

4

increased by33.33%

Lines of code

1437

increased by2077.27%

Number of lines in readme file

208

increased by45.45%

Worsened metrics

Dependency count

2

increased by100%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedglobal@^4.3.0