base-element - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

index.js

@@ -8,5 +8,6 @@ module.exports = BaseElement
 var createElement = require('virtual-dom/create-element')
+var css = require('css')
 
 function BaseElement (el) {
-  if (!(this instanceof BaseElement)) return BaseElement(el)
+  if (!(this instanceof BaseElement)) return new BaseElement(el)
   this.vtree = null
@@ -16,3 +17,3 @@ this.element = null
   this.__events__ = Object.create(null)
-  this.__BaseElementSig__ = true
+  this.__BaseElementSig__ = 'be-' + Date.now()
 }
@@ -32,2 +33,10 @@
 BaseElement.prototype.render = function (vtree) {
+  if (typeof vtree === 'function') {
+    vtree = vtree.call(this)
+  }
+  // Top level vnode must have className for CSS
+  // TODO: Check if were using CSS though
+  if (!vtree.properties.className) {
+    vtree.properties.className = this.__BaseElementSig__
+  }
   if (!this.vtree) {
@@ -62,1 +71,32 @@ this.vtree = vtree
 }
+
+BaseElement.prototype.attachCSS = function (src) {
+  var ast = css.parse(src)
+  prefixSelector(ast.stylesheet.rules, this.vtree)
+  return css.stringify(ast)
+}
+
+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
+  })
+}

package.json

 {
   "name": "base-element",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "An element authoring library for creating standalone and performant elements.",
@@ -11,3 +11,3 @@ "main": "index.js",
     "build": "browserify index.js --standalone BaseElement -o dist/base-element.js",
-    "publish": "npm run build"
+    "prepublish": "npm run build"
   },
@@ -29,2 +29,7 @@ "author": "Kyle Robinson Young <[e-mail]> (http://dontkry.com)",
   },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
   "keywords": [
@@ -38,2 +43,3 @@ "virtual",
   "devDependencies": {
+    "babelify": "^6.0.2",
     "browser-test-helpers": "^1.0.0",
@@ -48,2 +54,3 @@ "browserify": "^10.0.0",
   "dependencies": {
+    "css": "^2.2.0",
     "global": "^4.3.0",
@@ -50,0 +57,0 @@ "virtual-dom": "^2.0.1"

README.md

@@ -17,2 +17,7 @@ # base-element
 
+Or other examples:
+* [with ES6](https://github.com/shama/base-element/blob/master/examples/es6.js)
+* [nested architecture](https://github.com/shama/base-element/blob/master/examples/nesting.js)
+* [server side rendering](https://github.com/shama/base-element/blob/master/examples/server-side.js)
+
 ## example usage
@@ -43,2 +48,21 @@ Create a generic JavaScript "class" that inherits BaseElement:
 
+### Prefer just functions?
+If you don't like "classes" the API supports an alternative interface with just
+functions:
+
+```js
+var createElement = require('base-element')
+
+// Create an element on a parent
+var el = createElement(document.body)
+el.render(function () {
+  // Render a button upon clicked will alert
+  return this.html('button', {
+    onclick: function (e) {
+      window.alert(e.target.innerText + ' button was clicked')
+    }
+  }, 'click me')
+})
+```
+
 ### data down, events up
@@ -81,3 +105,3 @@ DOMs work best (in the opinion of myself and many) when data goes down
 var button = require('your-button')()
-button.on('clicked', function (button) {
+button.on('clicked', function (node) {
   button.render('button label ' + Math.random())
@@ -187,3 +211,3 @@ })
 Button.prototype.render = function (data) {
-  var tree = this.html('button')
+  var vtree = this.html('button')
   return this.afterRender(vtree)
@@ -190,0 +214,0 @@ }

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

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

Fixed 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

Improved metrics

Total package byte prevSize

187481

increased by230.3%

Lines of code

5343

increased by271.82%

Number of lines in readme file

232

increased by11.54%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

8

increased by14.29%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Addedcss@^2.2.0

• + Addedatob@2.1.2(transitive)

• + Addedcss@2.2.4(transitive)

• + Addeddecode-uri-component@0.2.2(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedresolve-url@0.2.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-resolve@0.5.3(transitive)

• + Addedsource-map-url@0.4.1(transitive)

• + Addedurix@0.1.0(transitive)