Skip to content

Commit

Permalink
Merge pull request #7 from canjs/update-docs
Browse files Browse the repository at this point in the history
Fixes/cleanups to build and docs
  • Loading branch information
bmomberger-bitovi authored Jan 24, 2020
2 parents 834624c + 1f6b1a3 commit 9859d87
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 14 deletions.
26 changes: 13 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ class Greeting extends React.Component {
}
```

Call `reactToWebComponent` and [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) as follows:
Call `reactToCanWebComponent` and [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) as follows:

```js
import reactToWebComponent from "react-to-can-webcomponent";
import reactToCanWebComponent from "react-to-can-webcomponent";

const WebGreeting = reactToWebComponent(Greeting, React, ReactDOM);
const WebGreeting = reactToCanWebComponent(Greeting, React, ReactDOM);

customElements.define("web-greeting", WebGreeting);
```
Expand Down Expand Up @@ -55,7 +55,7 @@ document.body.firstChild.innerHTML //-> "<h1>Hello, CoolBeans</h1>"

### Working with Attributes

By default, custom elements created by `reactToWebComponent` only
By default, custom elements created by `reactToCanWebComponent` only
pass properties to the underlying React component. To make attributes
work, you must specify your component's properties with
[PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) as follows:
Expand All @@ -72,7 +72,7 @@ Greeting.propTypes = {
};
```

Now `reactToWebComponent` will know to look for `name` attributes
Now `reactToCanWebComponent` will know to look for `name` attributes
as follows:

```js
Expand All @@ -94,11 +94,11 @@ npm i react-to-can-webcomponent

#### CodePen

[Greeting example in a CodePen](https://codepen.io/justinbmeyer/pen/gOYrQax?editors=1010)
[Greeting example in a CodePen](https://codepen.io/bmomberger-bitovi/pen/BaybzQX?editors=1010)

## API

`reactToWebComponent(ReactComponent, React, ReactDOM)` takes the following:
`reactToCanWebComponent(ReactComponent, React, ReactDOM)` takes the following:

- `ReactComponent` - A react component that you want to
convert to a Web Component.
Expand All @@ -111,13 +111,13 @@ returned. This class can be directly passed to `customElements.define` as follow

```js
customElements.define("web-greeting",
reactToWebComponent(Greeting, React, ReactDOM) );
reactToCanWebComponent(Greeting, React, ReactDOM) );
```

Or the class can be defined and used later:

```js
const WebGreeting = reactToWebComponent(Greeting, React, ReactDOM);
const WebGreeting = reactToCanWebComponent(Greeting, React, ReactDOM);

customElements.define("web-greeting", WebGreeting);

Expand All @@ -128,7 +128,7 @@ document.body.appendChild(myGreeting);
Or the class can be extended:

```js
class WebGreeting extends reactToWebComponent(Greeting, React, ReactDOM)
class WebGreeting extends reactToCanWebComponent(Greeting, React, ReactDOM)
{
disconnectedCallback(){
super.disconnectedCallback();
Expand All @@ -140,14 +140,14 @@ customElements.define("web-greeting", WebGreeting);

### How it works

`reactToWebComponent` creates a constructor function whose prototype is a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This acts as a trap for any property set on instances of the custom element. When a property is set, the proxy:
`reactToCanWebComponent` creates a constructor function whose prototype is a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This acts as a trap for any property set on instances of the custom element. When a property is set, the proxy:

- re-renders the React component inside the custom element.
- creates an enumerable getter / setter on the instance
to save the set value and avoid hitting the proxy in the future.
- sets up an observer to listen for observable properties that are read by the component.
(Note: this is the only difference between this library and
[Bitovi's react-to-webcomponent library](https://github.com/bitovi/react-web-component) )
(Note: this is the only difference between this library and
[Bitovi's react-to-webcomponent library](https://github.com/bitovi/react-to-webcomponent) )

Also:

Expand Down
2 changes: 1 addition & 1 deletion build.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ stealTools.export({
removeDevelopmentCode: false,
useNormalizedDependencies: true,
exports: {
"react-to-webcomponent": "reactToWebComponent"
"react-to-can-webcomponent": "reactToCanWebComponent"
},
normalize: function(depName, depLoad, curName, curLoad, loader){
return baseNormalize.call(this, depName, depLoad, curName, curLoad, loader, true);
Expand Down

0 comments on commit 9859d87

Please sign in to comment.