react-dom
Advanced tools
react-dom - npm Package Compare versions
Comparing version 0.1.0 to 0.14.0-beta1
| { | ||
| "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" | ||
| } | ||
| } |
@@ -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` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-100%
0
- Number of medium maintenance alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-85.89%
1503
- Dependency count
- increased byInfinity%
1
- Number of package files
- decreased by-60%
4
- Lines of code
- decreased by-98.35%
2
- Number of lines in readme file
- decreased by-11.29%
55
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Addedreact@^0.14.0-beta1
+ Addedacorn@5.7.4(transitive)
+ Addedamdefine@1.0.1(transitive)
+ Addedasap@2.0.6(transitive)
+ Addedast-types@0.9.6(transitive)
+ Addedbalanced-match@1.0.2(transitive)
+ Addedbase62@1.2.8(transitive)
+ Addedbrace-expansion@1.1.11(transitive)
+ Addedcommander@2.20.3(transitive)
+ Addedcommoner@0.10.8(transitive)
+ Addedconcat-map@0.0.1(transitive)
+ Addedcore-js@1.2.7(transitive)
+ Addeddefined@1.0.1(transitive)
+ Addeddetective@4.7.1(transitive)
+ Addedenvify@3.4.1(transitive)
+ Addedesprima@3.1.3(transitive)
+ Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)
+ Addedfbjs@0.6.1(transitive)
+ Addedglob@5.0.15(transitive)
+ Addedgraceful-fs@4.2.11(transitive)
+ Addediconv-lite@0.4.24(transitive)
+ Addedinflight@1.0.6(transitive)
+ Addedinherits@2.0.4(transitive)
+ Addedjs-tokens@4.0.0(transitive)
+ Addedjstransform@11.0.3(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedminimatch@3.1.2(transitive)
+ Addedminimist@1.2.8(transitive)
+ Addedmkdirp@0.5.6(transitive)
+ Addedobject-assign@2.1.1(transitive)
+ Addedonce@1.4.0(transitive)
+ Addedpath-is-absolute@1.0.1(transitive)
+ Addedprivate@0.1.8(transitive)
+ Addedpromise@7.3.1(transitive)
+ Addedq@1.5.1(transitive)
+ Addedreact@0.14.10(transitive)
+ Addedrecast@0.11.23(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedsource-map@0.4.40.5.7(transitive)
+ Addedthrough@2.3.8(transitive)
+ Addedua-parser-js@0.7.39(transitive)
+ Addedwhatwg-fetch@0.9.0(transitive)
+ Addedwrappy@1.0.2(transitive)