Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
base-element
Advanced tools
An element authoring library for creating standalone and performant elements.
An element authoring library for creating standalone and performant elements.
View this example List element in use with:
Create a generic JavaScript "class" that inherits BaseElement:
var BaseElement = require('base-element')
function Bear () {
BaseElement.call(this)
}
Bear.prototype = Object.create(BaseElement.prototype)
// Or inherits(Bear, BaseElement)
// Or class Bear extends BaseElement
Then build your elements:
Bear.prototype.render = function (typeOfBear) {
// Create a virtual DOM tree
var vtree = this.html('div.bear', ['Im a ' + typeOfBear + '!'])
// Call the super() render method with your vtree
return this.super(vtree)
}
DOMs work best (in the opinion of myself and many) when data goes down and event (or actions) go up.
A simple example is a button element that changes when clicked. How it changes is up to the element but what it changes to is up to the user.
This is our Button element:
var BaseElement = require('base-element')
function Button () {
BaseElement.call(this)
}
Button.prototype = Object.create(BaseElement.prototype)
// Or inherits(Button, BaseElement)
// Or class Button extends BaseElement
Button.prototype.render = function (label) {
var self = this
// The "label" data is coming down
return this.super(this.html('button', {
onclick: function (event) {
// We send the "clicked" event up
self.send('clicked', event.target)
}
}, label))
}
and this is the user's implementation, creates a button and on every click it changes to a random number:
var button = require('your-button')()
button.on('clicked', function (button) {
button.render('button label ' + Math.random())
})
npm install base-element
var BaseElement = require('base-element')
<script src="base-element.js"></script>
<script>var element = new BaseElement()</script>
var element = new BaseElement([attachTo])
attachTo
is a DOM element you want to append to. Defaults to document.body
.
If you pass in false
then the element will not automatically append itself to
a parent node. This is useful if you plan on handling the rendering of the
virtual tree on your own.
element.render(vtree)
Renders your virtual DOM tree to the DOM element and returns the updated vtree
.
element.send(name[, params])
Sends an event up with a given name
and params
.
element.on(name, function)
Register an event listener for a given name:
element.on('clicked', function (params) {})
element.super([params])
This method can be called within any inherited method. It will call the parent's class of the same name.
Button.prototype.render = function (data) {
var tree = this.html('button')
// Calls the render method on BaseElement
return this.super(vtree)
}
element.html(tag[, options], value)
A convenience wrapper for creating virtual-hyperscript nodes, i.e.:
var h = require('virtual-dom/h')
var vtree = h('div', 'Testing')
// is the same as
var vtree = this.html('div', 'Testing')
element.element
The root DOM node the virtual tree resides on.
element.vtree
The current virtual DOM tree of the base element.
(c) 2015 Kyle Robinson Young. MIT License
FAQs
An element authoring library for creating standalone and performant elements.
The npm package base-element receives a total of 52 weekly downloads. As such, base-element popularity was classified as not popular.
We found that base-element demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.