Launch Week Day 3: Introducing Organization Notifications in Socket.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-dom

Package Overview
Dependencies
Maintainers
2
Versions
2744
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dom - npm Package Compare versions

Comparing version
0.1.0
 to
0.14.0-beta1
+1
index.js
module.exports = require('react/lib/ReactDOMClient');
+1
server.js
module.exports = require('react/lib/ReactDOMServer');
+13
-16
package.json
{
"name": "react-dom",
"version": "0.1.0",
"description": "DOM is a `React.DOM` wrapper with — subjectively — more sanity and awesome helpers",
"author": "Etienne Lemay <etienne@heliom.ca>",
"version": "0.14.0-beta1",
"description": "React package for working with the DOM.",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/EtienneLem/react-dom.git"
"url": "git+https://github.com/facebook/react.git"
},
"homepage": "https://github.com/EtienneLem/react-dom",
"bugs": { "url": "https://github.com/EtienneLem/react-dom/issues" },
"license": "MIT",
"keywords": ["react", "dom"],
"main": "react-dom.js",
"devDependencies": {
"jasmine-node": "2.0.0-beta4",
"react": "0.10.0",
"uglify-js": "2.4.13",
"colors": "0.6.2"
"keywords": [
"react"
],
"license": "BSD-3-Clause",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"scripts": {
"test": "./node_modules/.bin/jasmine-node ./spec"
"homepage": "https://github.com/facebook/react/tree/master/npm-react-dom",
"dependencies": {
"react": "^0.14.0-beta1"
}
}
+39
-46
README.md

@@ -1,61 +0,54 @@

# DOM
DOM is a `React.DOM` wrapper with — subjectively — more sanity and awesome helpers.
# `react-dom`
## API
#### Optional `options`
```js
DOM.div('foo')
// => React.DOM.div(null, 'foo')
This package serves as the entry point of the DOM-related rendering paths. It is intended to be paired with the isomorphic React, which will be shipped as `react` to npm.
## Installation
```sh
npm install react react-dom
```
#### Allow `class` attribute
## Usage
### In the browser
```js
DOM.div({ class: 'foozle' }, 'foo')
// => React.DOM.div({ className: 'foozle' }, 'foo')
```
var React = require('react');
var ReactDOM = require('react-dom');
### The `data` attribute
#### Nest objects
```js
DOM.div({ data: { state: 'selected' }}, 'foo')
// => React.DOM.div({ 'data-state': 'selected' }, 'foo')
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOM.render(<MyComponent />, node);
```
#### Handle arrays
### On the server
```js
DOM.div({ data: { state: ['selected', 'opened'] } }, 'foo')
// => React.DOM.div({ 'data-state-selected': true, 'data-state-opened': true }, 'foo')
```
var React = require('react');
var ReactDOMServer = require('react-dom/server');
## CoffeeScript bliss
I’ll be honest, I don’t really like [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). It makes you think you’re writing HTML while it is in fact XML. It is getting converted into JavaScript anyway and I prefer not confusing any of my collegues into thinking this is HTML. Since most (read: all) of the projects that I work on are in CoffeeScript, I find the syntax bearable enough.
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
```coffee
Hello = React.createClass
componentWillMount: -> console.log('componentWillMount')
componentDidMount: -> console.log('componentDidMount')
# …
ReactDOMServer.renderToString(<MyComponent />);
```
render: ->
DOM.div class: 'container', [
DOM.span
data:
foo: bar: 'baz'
much: much: 'fun'
class: 'test'
, "Hello #{@props.name}"
## API
DOM.span ', goodbye.'
]
### `react-dom`
console.log React.renderComponentToString Hello(name: 'World')
# <div class="container">
# <span data-foo-bar="baz" data-much-much="fun" class="test">Hello World</span>
# <span>, goodbye.</span>
# </div>
```
- `findDOMNode`
- `render`
- `unmountComponentAtNode`
Now, I know that not everybody works with CoffeeScript, so [here’s the snippet in JavaScript](https://gist.github.com/EtienneLem/3c52167b2ccb6e180132). You can also [see the examples](/examples/index.html), which are in JavaScript.
### `react-dom/server`
## Tests
Run the `npm test` task.
- `renderToString`
- `renderToStaticMarkup`
.npmignore

Sorry, the diff of this file is not supported yet

-3
.travis.yml
language: node_js
node_js:
- "0.10"
Cakefile

Sorry, the diff of this file is not supported yet

-50
examples/index.html
<html>
<head>
<title>react-dom examples</title>
</head>
<body>
<div id="optional-options"></div>
<div id="class-attribute"></div>
<div id="nested-data"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react-with-addons.min.js"></script>
<script src="../react-dom.js"></script>
<script>
// Optional `options`
OptionalOptions = React.createClass({
render: function() {
return DOM.div('OptionalOptions')
}
})
container = document.getElementById('optional-options')
React.renderComponent(OptionalOptions(), container)
// `class` attribute
ClassAttribute = React.createClass({
render: function() {
return DOM.div({ class: 'class-attribute' }, 'ClassAttribute')
}
})
container = document.getElementById('class-attribute')
React.renderComponent(ClassAttribute(), container)
// Nested `data` attributes
NestedData = React.createClass({
render: function() {
return DOM.div({
data: {
foo: { bar: 'baz' },
much: { much: 'fun' },
state: ['selected', 'opened']
}
}, 'NestedData');
}
})
container = document.getElementById('nested-data')
React.renderComponent(NestedData(), container)
</script>
</body>
</html>
MIT-LICENSE

Sorry, the diff of this file is not supported yet

-92
react-dom.js
/*
* react-dom v0.1.0
* https://github.com/EtienneLem/react-dom
*
* Copyright 2014, Etienne Lemay http://heliom.ca
* Released under the MIT license
*/
(function (root, factory) {
// AMD
if (typeof define === 'function' && define.amd) {
define(['React'], factory)
// Node.js or CommonJS
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('react'))
// Browser globals
} else {
root.DOM = factory(root.React)
}
}(this, function (React) {
var DOM, key, value, ref, bridge
DOM = {}
ref = React.DOM
proxy = function(key, value) {
// Only proxy `React.DOM.<element>` functions
if (typeof value !== 'function') { return }
DOM[key] = function(opts, children) {
var extractObjectsAsKeys
// Make the `opts` argument optional
if (children === void 0) {
children = opts
opts = null
}
// Nest `data` attributes
if (opts && opts.data) {
extractObjectsAsKeys = function(data, root) {
var dataKey, dataValue
if (root == null) { root = '' }
for (dataKey in data) {
dataValue = data[dataKey]
// Instance of Array
if (dataValue instanceof Array) {
var i, arrayValue
for (i = 0; i < dataValue.length; i++) {
arrayValue = dataValue[i]
opts['data' + (root + '-' + dataKey + '-' + arrayValue)] = true
}
continue
// Instance of Object
} else if (dataValue instanceof Object) {
extractObjectsAsKeys(dataValue, (root + dataKey) + '-')
continue
}
opts['data-' + (root + dataKey)] = dataValue
}
}
extractObjectsAsKeys(opts.data)
delete opts.data
}
// Make `class` -> `className`
if (opts && opts.class) {
opts.className = opts.class
delete opts.class
}
// Relay to original `React.DOM.<element>`
return ref[key](opts, children)
}
}
// Scope proxy
for (key in ref) {
value = ref[key]
proxy(key, value)
}
return DOM
}))
-8
react-dom.min.js
/*
* react-dom v0.1.0
* https://github.com/EtienneLem/react-dom
*
* Copyright 2014, Etienne Lemay http://heliom.ca
* Released under the MIT license
*/
(function(root,factory){if(typeof define==="function"&&define.amd){define(["React"],factory)}else if(typeof exports!=="undefined"){module.exports=factory(require("react"))}else{root.DOM=factory(root.React)}})(this,function(React){var DOM,key,value,ref,bridge;DOM={};ref=React.DOM;proxy=function(key,value){if(typeof value!=="function"){return}DOM[key]=function(opts,children){var extractObjectsAsKeys;if(children===void 0){children=opts;opts=null}if(opts&&opts.data){extractObjectsAsKeys=function(data,root){var dataKey,dataValue;if(root==null){root=""}for(dataKey in data){dataValue=data[dataKey];if(dataValue instanceof Array){var i,arrayValue;for(i=0;i<dataValue.length;i++){arrayValue=dataValue[i];opts["data"+(root+"-"+dataKey+"-"+arrayValue)]=true}continue}else if(dataValue instanceof Object){extractObjectsAsKeys(dataValue,root+dataKey+"-");continue}opts["data-"+(root+dataKey)]=dataValue}};extractObjectsAsKeys(opts.data);delete opts.data}if(opts&&opts.class){opts.className=opts.class;delete opts.class}return ref[key](opts,children)}};for(key in ref){value=ref[key];proxy(key,value)}return DOM});
-41
spec/react-dom-spec.js
React = require('react')
DOM = require('../react-dom')
describe('react-dom', function() {
beforeEach(function() { spyOn(React.DOM, 'div') })
it('acts as a proxy', function() {
DOM.div({}, 'foo')
expect(React.DOM.div).toHaveBeenCalled()
})
it('has optional `opts` argument', function() {
DOM.div('foo')
expect(React.DOM.div).toHaveBeenCalledWith(null, 'foo')
})
it('replaces `class` with `className`', function() {
DOM.div({ class: 'foozle' }, 'foo')
expect(React.DOM.div).toHaveBeenCalledWith({ className: 'foozle' }, 'foo')
})
describe('`data` attribute', function() {
it('nests `data` attributes', function() {
DOM.div({ data: { a: 'b', c: 'd', e: { f: 'g', h: 'i' } } }, 'foo')
expect(React.DOM.div).toHaveBeenCalledWith({
'data-a': 'b',
'data-c': 'd',
'data-e-f': 'g',
'data-e-h': 'i'
}, 'foo')
})
it('handles array', function() {
DOM.div({ data: { state: ['selected', 'opened'] } }, 'foo')
expect(React.DOM.div).toHaveBeenCalledWith({
'data-state-selected': true,
'data-state-opened': true
}, 'foo')
})
})
})