Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-habitat

Package Overview
Dependencies
Maintainers
4
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-habitat - npm Package Compare versions

Comparing version 1.0.0-beta to 1.0.0

5

package.json
{
"name": "react-habitat",
"version": "1.0.0-beta",
"version": "1.0.0",
"description": "A React DOM Bootstrapper designed to harmonise a hybrid application",

@@ -85,4 +85,5 @@ "main": "./lib/index.js",

"build:umd:min": "cross-env NODE_ENV=production webpack src/index.js dist/react-habitat.min.js",
"lint": "eslint src"
"lint": "eslint src",
"prepublishOnly": "npm run test && npm run build"
}
}

124

README.md

@@ -21,3 +21,3 @@ ![Deloitte Digital](https://raw.githubusercontent.com/DeloitteDigital/DDBreakpoints/master/docs/deloittedigital-logo-white.png)

[React components](https://facebook.github.io/react/docs/component-api.html) on the page(s).
For example, sometimes there are only sections of your page that you want to be a React Component, then this framework
For example, sometimes there are only sections of your page that you want to be a React Component, this framework
is perfect for that.

@@ -38,8 +38,8 @@

- Magento
- *...etc*
- *... etc*
### When *not* to use it
Typically if you're building a single page application (SPA) with only a `<div id="app">` in the body tag... then this
framework isn't really going to bring many benefits to you. However, you are definitely invited to use it if you want to.
Typically if you're building a single page application (SPA) with only a `<div id="app">` in the body tag ... then this
framework isn't really going to bring many benefits to you. However, you are definitely invited to use it, if you want to.

@@ -73,10 +73,10 @@ ## Features

- [Passing data back again](#passing-values-back-again)
- [Setting the habitats css class](#setting-the-habitats-css-class)
- [Setting the Habitat's css class](#setting-the-habitats-css-class)
- [Replace original node](#replace-original-node)
- [Use encoded JSON in HTML attributes](#use-encoded-json-in-html-attributes)
- [Controlling Scope and Lifetime](#controlling-scope-and-lifetime)
- [Changing the habitat query selector](#changing-the-habitat-query-selector)
- [Changing the Habitat query selector](#changing-the-habitat-query-selector)
- [Dynamic updates](#dynamic-updates)
- [Bootstrapper lifecycle events](#bootstrapper-lifecycle-events)
- [Unmount react habitats](#unmount-react-habitats)
- [Unmount react Habitats](#unmount-react-habitats)
- [Disposing the container](#disposing-the-container)

@@ -121,3 +121,3 @@ - [Examples](https://github.com/DeloitteDigitalAPAC/react-habitat/tree/master/examples)

- Set the container for later use in the DOM.
- At application execution...
- At application execution ...
- Use the DOM scope to resolve instances of the components.

@@ -133,3 +133,3 @@

The class must extend `ReactHabitat.Bootstrapper` and is intended to be an *[entry](https://webpack.github.io/docs/configuration.html#entry)* point of your bundled app. So if you're using something like webpack or browserify then this is file to point it too.
The class must extend `ReactHabitat.Bootstrapper` and is intended to be an *[entry](https://webpack.github.io/docs/configuration.html#entry)* point of your bundled app. So if you're using something like webpack or browserify then this is the file to point it too.

@@ -139,3 +139,3 @@ In the *constructor()* of the class you need to register your React components with it and then set

In React Habitat, you'd register a component 'as' a unique key something like this
In React Habitat, you'd register a component 'as' a unique key with something like this:

@@ -158,12 +158,12 @@ ```javascript

// Create a new container builder
// Create a new container builder:
const builder = new ReactHabitat.ContainerBuilder();
// Register a component
// Register a component:
builder.register(SomeReactComponent).as('SomeReactComponent');
// or Register a component to load on demand asynchronously
// Or register a component to load on demand asynchronously:
builder.registerAsync(() => System.import('./AnotherReactComponent')).as('AnotherReactComponent');
// Finally, set the container
// Finally, set the container:
this.setContainer(builder.build());

@@ -173,3 +173,3 @@ }

// Always export a 'new' instance so it immediately evokes
// Always export a 'new' instance so it immediately evokes:
export default new MyApp();

@@ -254,3 +254,3 @@ ```

data-prop-title="My Title"
data-prop-color="#BADA55"
data-prop-colour="#BADA55"
>

@@ -262,3 +262,3 @@ </div>

The getting start guide gives you an idea how to use React Habitat, but there's a lot more you can do.
The getting start guide gives you an idea of how to use React Habitat, but there's a lot more you can do.

@@ -289,9 +289,9 @@ Learn more about:

```javascript
// Create a new builder
// Create a new builder:
const builder = new ReactHabit.ContainerBuilder();
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
// Register SomeComponent and expose it to the DOM as 'MySomeComponent':
builder.register(SomeComponent).as('MySomeComponent');
// Build the container to finalise registrations
// Build the container to finalise registrations:
const container = builder.build();

@@ -306,7 +306,7 @@ ```

|---|---|---|
|**tag**|string *(optional)*|The tag to use for the rendered habitat that houses the component eg 'span'
|**className**|string *(optional)*|The habitats CSS class name
|**tag**|string *(optional)*|The tag to use for the rendered Habitat that houses the component eg 'span'
|**className**|string *(optional)*|The Habitat's CSS class name
|**replaceDisabled**|boolean *(optional)*|If true, the original node will be left in the dom. False by default
Example using `withOptions()`
Example using `withOptions()`:

@@ -327,6 +327,6 @@ ```javascript

Example setting defaults for all registrations
Example setting defaults for all registrations:
```javascript
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
// Register SomeComponent and expose it to the DOM as 'MySomeComponent':
const builder = new ContainerBuilder({

@@ -343,6 +343,6 @@ tag: 'div',

Typically you would define the default props in the React component itself. However, there may be instances where you
Typically, you would define the default props in the React component itself. However, there may be instances where you
would like different defaults for multiple registrations.
You can pass default props with each registrations using the `withDefaultProps()` method on the `ContainerBuilder`.
You can pass default props with each registration using the `withDefaultProps()` method on the `ContainerBuilder`.

@@ -369,3 +369,3 @@ ```javascript

For example
For example:

@@ -375,3 +375,3 @@ ```javascript

.registerAsync(() => new Promise((resolve, reject) => {
// .. do async work to get 'component', then
// Do async work to get 'component', then:
resolve(component);

@@ -384,3 +384,3 @@ }))

**Code splitting** is one great feature that means our visitor's don't need to download the entire app before they can use it.
**Code splitting** is one great feature that means our visitors don't need to download the entire app before they can use it.
Think of code splitting as incrementally download your application only as its needed.

@@ -398,3 +398,3 @@

`registerAsync` expects a function that returns a `Promise`, that resolves with a React Component. Since `System.import` IS a promise that allows us to use it in directly.
`registerAsync` expects a function that returns a `Promise`, that resolves with a React Component. Since `System.import` IS a Promise, that allows us to use it directly.

@@ -423,3 +423,3 @@ Here is an example using `require.ensure()` to define a [split-point in webpack 1](https://webpack.github.io/docs/code-splitting.html)

example
Example:

@@ -510,3 +510,3 @@ ```javascript

For example
For example:

@@ -521,3 +521,3 @@ `data-prop-title` would expose `title` on the props object inside the component.

For example
For example:

@@ -532,3 +532,3 @@ ```html

For example
For example:

@@ -539,5 +539,5 @@ `data-prop-title` would expose `title` as a property inside the component.

Passing in an array of objects will require you to use HTML encoded characters for quotes etc i.e &quot;foo&quot; will replace "foo"
Passing in an array of objects will require you to use HTML encoded characters for quotes etc i.e &quot;foo&quot; will replace "foo".
Simple Example
Simple example:

@@ -551,3 +551,3 @@ ```html

Would expose props as
Would expose props as:

@@ -570,3 +570,3 @@ ```javascript

JSON Example
JSON example:

@@ -580,3 +580,3 @@ ```html

Would expose as
Would expose as:

@@ -610,3 +610,3 @@ ```javascript

For Example
For example:

@@ -621,3 +621,3 @@ ```html

This is handy if you need to share properties between habitats or you need to set JSON onto the page.
This is handy if you need to share properties between Habitats or you need to set JSON onto the page.

@@ -650,12 +650,12 @@ **[⬆ back to top](#table-of-contents)**

### Setting the habitat's CSS class
### Setting the Habitat's CSS class
You can set a custom CSS class on the habitat element by setting the `data-habitat-class` attribute on the target element.
You can set a custom CSS class on the Habitat element by setting the `data-habitat-class` attribute on the target element.
Alternatively you can use the [withOptions](#passing-options-to-register) method on the registration.
Example
Example:
`<div data-component="MyComponent" data-habitat-class="my-css-class"></div>`
Will result in the following being rendered
Will result in the following being rendered:

@@ -703,3 +703,3 @@ `<div data-habitat="C1" class="my-css-class">...</div>`

example
Example:

@@ -715,3 +715,3 @@ `<div data-props='{"restaurant": "Bob\'s bar and grill"}'></div>`

- [Changing the habitat query selector](#changing-the-habitat-query-selector)
- [Changing the Habitat query selector](#changing-the-habitat-query-selector)
- [Dynamic updates](#dynamic-updates)

@@ -723,3 +723,3 @@ - [Update lifecycle](#update-lifecycle)

### Changing the habitat query selector
### Changing the Habitat query selector

@@ -733,3 +733,3 @@ *Default: 'data-component'*

Example
Example:

@@ -754,3 +754,3 @@ ```javascript

Example
Example:

@@ -768,3 +768,3 @@ ```javascript

Example
Example:

@@ -774,3 +774,3 @@ ```javascript

someMethod() {
// Will scan just the children of the element with id 'content'
// Will scan just the children of the element with id 'content':
this.update(document.getElementById('content'))

@@ -781,3 +781,3 @@ }

You can call this method from somewhere else in your app by importing it
You can call this method from somewhere else in your app by importing it:

@@ -827,3 +827,3 @@ ```javascript

Example
Example:

@@ -833,3 +833,3 @@ ```javascript

shouldUpdate(node) {
// Dont allow updates on div's
// Dont allow updates on div's:
if (node.tagName === 'div') {

@@ -841,7 +841,7 @@ return false;

willUpdate(node) {
console.log('Im about to update', node);
console.log('I am about to update.', node);
}
didUpdate(node) {
console.log('I just updated', node);
console.log('I just updated.', node);
}

@@ -857,3 +857,3 @@ }

Example
Example:

@@ -865,3 +865,3 @@ ```javascript

//...
// ...

@@ -879,3 +879,3 @@ this.unmountHabitats();

Example
Example:

@@ -887,3 +887,3 @@ ```javascript

//...
// ...

@@ -890,0 +890,0 @@ this.dispose();

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc