renderkid - npm Package Compare versions

Comparing version 0.2.0-beta.10 to 0.2.0-beta.11

package.json

 {
   "name": "renderkid",
-  "version": "0.2.0-beta.10",
+  "version": "0.2.0-beta.11",
   "description": "(work in progress)",
-  "main": "scripts/js/lib/RenderKid.js",
+  "main": "lib/RenderKid.js",
   "dependencies": {
@@ -14,8 +14,23 @@ "CSSselect": "~0.3.11",
   "devDependencies": {
-    "coffee-script": "~1.6.3",
-    "little-popo": "~0.1.4"
+    "chai": "^1.10.0",
+    "chai-changes": "^1.3.4",
+    "chai-fuzzy": "^1.4.0",
+    "coffee-script": "^1.8.0",
+    "jitter": "^1.3.0",
+    "mocha": "^2.0.1",
+    "mocha-pretty-spec-reporter": "0.1.0-beta.1",
+    "sinon": "^1.12.2",
+    "sinon-chai": "^2.6.0"
   },
   "scripts": {
-    "test": "node ./node_modules/coffee-script/bin/cake test",
-    "prepublish": "node ./node_modules/coffee-script/bin/cake build"
+    "test": "mocha \"test/**/*.coffee\"",
+    "test:watch": "mocha \"test/**/*.coffee\" --watch",
+
+    "compile": "coffee --bare --compile --output ./lib ./src",
+    "compile:watch": "jitter src lib -b",
+
+    "watch": "npm run compile:watch & npm run test:watch",
+    "winwatch": "start/b npm run compile:watch & npm run test:watch",
+
+    "prepublish": "npm run compile"
   },
@@ -22,0 +37,0 @@ "repository": {

README.md

@@ -1,5 +0,189 @@
-RenderKid
-=====
+# RenderKid
 [![Build Status](https://secure.travis-ci.org/AriaMinaei/RenderKid.png)](http://travis-ci.org/AriaMinaei/RenderKid)
 
-Stylish console.log for node
+RenderKid allows you to use HTML and CSS to style your CLI output, making it easy to create a beautiful, readable, and consistent look for your nodejs tool.
+
+## Installation
+
+Install with npm:
+```
+$ npm install renderkid
+```
+
+## Usage
+
+```coffeescript
+RenderKid = require('renderkid')
+
+r = new RenderKid()
+
+r.style({
+  "ul": {
+    display: "block"
+    margin: "2 0 2"
+  }
+
+  "li": {
+    display: "block"
+    marginBottom: "1"
+  }
+
+  "key": {
+    color: "grey"
+    marginRight: "1"
+  }
+
+  "value": {
+    color: "bright-white"
+  }
+})
+
+output = r.render("
+<ul>
+  <li>
+    <key>Name:</key>
+    <value>RenderKid</value>
+  </li>
+  <li>
+    <key>Version:</key>
+    <value>0.2</value>
+  </li>
+  <li>
+    <key>Last Update:</key>
+    <value>Jan 2015</value>
+  </li>
+</ul>
+")
+
+console.log(output)
+```
+
+![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/usage.png)
+
+## Stylesheet properties
+
+### Display mode
+
+Elements can have a `display` of either `inline`, `block`, or `none`:
+```coffeescript
+r.style({
+  "div": {
+    display: "block"
+  }
+
+  "span": {
+    display: "inline" # default
+  }
+
+  "hidden": {
+    display: "none"
+  }
+})
+
+output = r.render("
+<div>This will fill one or more rows.</div>
+<span>These</span> <span>will</span> <span>be</span> in the same <span>line.</span>
+<hidden>This won't be displayed.</hidden>
+")
+
+console.log(output)
+```
+
+![screenshot of usage](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/display.png)
+
+
+### Margin
+
+Margins work just like they do in browsers:
+```coffeescript
+r.style({
+  "li": {
+    display: "block"
+
+    marginTop: "1"
+    marginRight: "2"
+    marginBottom: "3"
+    marginLeft: "4"
+
+    # or the shorthand version:
+    "margin": "1 2 3 4"
+  },
+
+  "highlight": {
+    display: "inline"
+    marginLeft: "2"
+    marginRight: "2"
+  }
+})
+
+r.render("
+<ul>
+  <li>Item <highlgiht>1</highlight></li>
+  <li>Item <highlgiht>2</highlight></li>
+  <li>Item <highlgiht>3</highlight></li>
+</ul>
+")
+```
+
+### Padding
+
+See margins above. Paddings work the same way, only inward.
+
+### Width and Height
+
+Block elements can have explicit width and height:
+```coffeescript
+r.style({
+  "box": {
+    display: "block"
+    "width": "4"
+    "height": "2"
+  }
+})
+
+r.render("<box>This is a box and some of its text will be truncated.</box>")
+```
+
+### Colors
+
+You can set a custom color and background color for each element:
+
+```coffeescript
+r.style({
+  "error": {
+    color: "black"
+    background: "red"
+  }
+})
+```
+
+List of colors currently supported are `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`, `grey`, `bright-red`, `bright-green`, `bright-yellow`, `bright-blue`, `bright-magenta`, `bright-cyan`, `bright-white`.
+
+### Bullte points
+
+Block elements can have bullet points on their margins. Let's start with an example:
+```coffeescript
+r.style({
+  "li": {
+    # To add bullet points to an element, first you
+    # should make some room for the bullet point by
+    # giving your element some margin to the left:
+    marginLeft: "4",
+
+    # Now we can add a bullet point to our margin:
+    bullet: '"-"'
+  }
+})
+
+# The four hyphens are there for visual reference
+r.render("
+----
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+----
+")
+```
+And here is the result:
+
+![screenshot of bullet points, 1](https://github.com/AriaMinaei/RenderKid/raw/master/docs/images/bullets-1.png)

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

Improved metrics

Number of lines in readme file

190

3700%

Worsened metrics

Total package byte prevSize

109287

-22.48%

Dev dependency count

9

350%

Number of package files

66

-45%

Lines of code

1988

-25.21%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes