# nimble-elements

> Lightweight Web Application Framework - 2015.11.02

Latest version **0.1.53** (published 2015-11-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install nimble-elements
pnpm add nimble-elements
yarn add nimble-elements
bun add nimble-elements
```

Provides the command `nimble`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.53 |
| Published | 2015-11-02 |
| First published | 2015-10-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Q9 Design |
| Maintainers | q9adam |
| Keywords | browser, framework, web app, webapp, custom elements, shadow dom, lightweight, light weight, compile, compiler, babel, browserify, es6 |

## Links

- npm: https://www.npmjs.com/package/nimble-elements
- Repository: https://github.com/q9design/nimble-elements
- Homepage: https://github.com/q9design/nimble-elements#readme
- Issues: https://github.com/q9design/nimble-elements/issues
- npm.io page: https://npm.io/package/nimble-elements

## Dependencies (11)

- [del](https://npm.io/package/del.md) ^2.0.2
- [glob](https://npm.io/package/glob.md) ^5.0.15
- [chalk](https://npm.io/package/chalk.md) ^1.1.1
- [marked](https://npm.io/package/marked.md) ^0.3.5
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [babelify](https://npm.io/package/babelify.md) ^6.3.0
- [bluebird](https://npm.io/package/bluebird.md) ^2.10.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^0.24.0
- [minimist](https://npm.io/package/minimist.md) ^1.2.0
- [copyfiles](https://npm.io/package/copyfiles.md) ^0.2.1
- [browserify](https://npm.io/package/browserify.md) ^11.2.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.53 (latest) — 2015-11-02
- 0.1.51 — 2015-10-29
- 0.1.5 — 2015-10-27
- 0.1.42 — 2015-10-26
- 0.1.41 — 2015-10-26
- 0.1.4 — 2015-10-26
- 0.1.3 — 2015-10-20
- 0.1.2 — 2015-10-20

## README

### An easy to use web application compiler
 
	* easy <custom-tags></custom-tags>

	* standard npm packages

	* newer javascript features (ES6)

	* a single index.html distributable


![](https://raw.githubusercontent.com/q9design/nimble/master/node/elements/media/demo.gif)


# install

	sudo npm i -g nimble-elements


# setup

	> mkdir myproject
	> cd myproject

	> nimble --bootstrap


# compile/run

	> nimble 

	view your application by browsing to _build/index.html


**tip:** 

	npm i -g live-server
	live-server --wait=350 _build

---

# About Nimble Elements

Nimble Elements is fortified with

	- babelify
	- browserify
	- directory based custom elements


Bringing to your browser based application

	- new javascript features
	- npm packages
	- <custom-tags></custom-tags>


Bundled into a single index.html file


From a collection of element files and objects (files and folders)

	+ [myproject]


		+ [display-box]         ( <display-box></display-box> )
			| body.html
			| created.js
			| left.html
			| right.html


		+ [hello-widget]        ( <hello-widget></hello-widget> )
			| body.html
			| created.js


		+ [x-main]              ( <x-main></x-main> )
			| body.html
			| created.js


		- index.html
	

Each sub-directory automatically generates a shadom dom based custom html element which can be used anywhere in your project

     for example the hello-widget directory generates a <hello-widget></hello-widget> element

**element sub-directory contents**

		- created.js -- called each time an instance of it's element is created. 
		- *.html file content is provided to created.js as a this[*] / this.* property.  (e.g. body.html > this['body'])


**created.js sample code**

```javascript
// created.js code is called each time an instance of it's element is created. 

// "this" is the instance of the created element.
// var dom = the element's shadow dom object.  (defaults to body.html)

var $ = require('jquery')       // include npm packages
var _ = require('underscore')

// *.html file content maps to this.* / this['*']
var l = this.left    // left.html contents
var b = this.body    // body.html contents
var r = this.right   // right.html contents

dom.innerHTML = l+b+r  // provide content

// when an instance is attached or detatched from the dom
this.attached = function(){ console.log('hi!') }
this.detached = function(){ console.log('bye!') }

this.onclick = e=>{ console.log('poke.') }

var x = this.getAttribute('x')

$('h1',dom).textContent(x)
```


**body.html sample code**

```html
<style>
	:host {display: block}
</style>

Hello World!
```

**index.html** - Your app begins with a single index.html file in your project root.
```html
<!doctype html>
<html>
	<head>
		<title>My Project</title>
	</head>
	<body>
		<x-main></x-main>
	</body>
</html>
```



## npm packages

Many standard npm packages can be added to your application

	npm i --save package-name

	
And included using require

	var p = require('package-name')


## application requirements
Applications use relatively new html features

   * [Custom Elements](http://w3c.github.io/webcomponents/spec/custom/) - [can i use]( http://caniuse.com/#feat=custom-elements)
   * [Shadow Dom](http://www.w3.org/TR/shadow-dom/) - [can i use](http://caniuse.com/#feat=shadowdom)

That run natively in supporting browsers  (as of Oct 2015)

   * Chrome
   * Opera
   * (Firefox - with a flag setting)


## try it out! - sample code (run from an empty directory)

    nimble --bootstrap myproject


## learn more

	nimble --help


## final words, notes & suggestions

Nimble elements goes well with [electron](http://electron.atom.io/)

Currently under early development... questions, comments, requests welcome.

Thanks for using nimble-elements!

---
_Source: https://npm.io/package/nimble-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._