base-element - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

index.js

 module.exports = BaseElement
 
 var document = require('global/document')
+var serialize = require('min-document/serialize')
 var h = require('virtual-dom/h')
@@ -8,3 +9,2 @@ var diff = require('virtual-dom/diff')
 var createElement = require('virtual-dom/create-element')
-var css = require('css')
 
@@ -18,2 +18,3 @@ function BaseElement (el) {
   this.__BaseElementSig__ = 'be-' + Date.now()
+  this.__onload__ = new Onload(this.send.bind(this))
 }
@@ -38,3 +39,3 @@
   // TODO: Check if were using CSS though
-  if (!vtree.properties.className) {
+  if (vtree && vtree.properties && !vtree.properties.className) {
     vtree.properties.className = this.__BaseElementSig__
@@ -56,2 +57,11 @@ }
 
+BaseElement.prototype.toString = function () {
+  this.render.apply(this, arguments)
+  try {
+    return serialize(this.element)
+  } catch (err) {
+    return this.element.outerHTML
+  }
+}
+
 BaseElement.prototype.send = function (name) {
@@ -73,31 +83,16 @@ var found = this.__events__[name]
 
-BaseElement.prototype.attachCSS = function (src) {
-  var ast = css.parse(src)
-  prefixSelector(ast.stylesheet.rules, this.vtree)
-  return css.stringify(ast)
+function Onload (cb) {
+  this.cb = cb
 }
-
-function prefixSelector (rules, vtree) {
-  var rootClass = vtree.properties.className
-  if (!rootClass) throw new Error('The top level VirtualNode must have a class name')
-  rootClass = rootClass.split(' ')[0]
-
-  var rootTag = vtree.tagName.toLowerCase()
-  var rootId = vtree.properties.id
-
-  rules = rules.map(function (rule) {
-    rule.selectors = rule.selectors.map(function (selector) {
-      var parts = selector.split(' ')
-      if (parts[0].toLowerCase() === rootTag) {
-        selector = parts[0] + '.' + rootClass
-        if (parts.length > 1) selector += ' ' + parts.slice(1).join(' ')
-        return selector
-      } else if (parts[0] === rootId) {
-        return selector
-      }
-      return '.' + rootClass + ' ' + selector
-    })
-    // TODO: Detect nested rules and recurse
-    return rule
-  })
+Onload.prototype.hook = function (node) {
+  var self = this
+  setTimeout(function () {
+    self.cb('load', node)
+  }, 10)
 }
+Onload.prototype.unhook = function (node) {
+  var self = this
+  setTimeout(function () {
+    self.cb('unload', node)
+  }, 10)
+}

package.json

 {
   "name": "base-element",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "An element authoring library for creating standalone and performant elements.",
   "main": "index.js",
   "scripts": {
-    "test": "standard && zuul --local 9966 -- test/index.js",
-    "ci": "standard && zuul -- test/index.js",
+    "test": "standard --format && node test/server.js && zuul --local 9966 -- test/index.js",
+    "ci": "standard && node test/server.js && zuul -- test/index.js",
     "start": "budo examples/standalone.js",
@@ -36,2 +36,3 @@ "build": "browserify index.js --standalone BaseElement -o dist/base-element.js",
   "devDependencies": {
+    "attach-css": "^1.0.0",
     "babelify": "^6.0.2",
@@ -47,6 +48,6 @@ "browser-test-helpers": "^1.0.0",
   "dependencies": {
-    "css": "^2.2.0",
     "global": "^4.3.0",
+    "min-document": "^2.14.1",
     "virtual-dom": "^2.0.1"
   }
 }

README.md

@@ -224,2 +224,6 @@ # base-element
 
+### `element.toString([data...])`
+For rendering your element as a string of HTML. `data` is any initial data
+passed to your `render` function.
+
 ### `element.element`
@@ -231,3 +235,24 @@ The root DOM node the virtual tree resides on.
 
+### default events
+`load` and `unload` events will be sent by default if your top level element
+registers `this` as it's properties:
+
+```js
+var BaseElement = require('base-element')
+function Button(el) {
+  BaseElement.call(this, el)
+  this.on('load', function (node) {
+    console.log(node + ' has loaded!')
+  })
+  this.on('unload', function (node) {
+    console.log(node + ' has unloaded!')
+  })
+}
+Button.prototype.render = function (data) {
+  // The top level element is provided with `this`, events will be fired
+  return this.afterRender(this.html('button', this, 'click me'))
+}
+```
+
 # license
 (c) 2015 Kyle Robinson Young. MIT License

New alerts

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

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

257

increased by10.78%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

62407

decreased by-66.69%

Dev dependency count

9

increased by12.5%

Lines of code

1576

decreased by-70.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmin-document@^2.14.1

• - Removedcss@^2.2.0

• - Removedatob@2.1.2(transitive)

• - Removedcss@2.2.4(transitive)

• - Removeddecode-uri-component@0.2.2(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedresolve-url@0.2.1(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-resolve@0.5.3(transitive)

• - Removedsource-map-url@0.4.1(transitive)

• - Removedurix@0.1.0(transitive)