From 83f2023bba05965bce9d9434faf77d5ee7ef276f Mon Sep 17 00:00:00 2001 From: Jack Franklin Date: Thu, 3 May 2018 22:05:12 +0100 Subject: [PATCH 1/2] Allow `ignoreAttributeChanged` option We have components that will never (or _should_) never have their HTML attributes messed with, so the option to avoid triggering any React update would be useful to ensure we're not causing extra work by mistake. --- src/reactive-elements.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/reactive-elements.js b/src/reactive-elements.js index fe5a299..2983e72 100644 --- a/src/reactive-elements.js +++ b/src/reactive-elements.js @@ -15,6 +15,7 @@ options = options || { renderOnAttached: false, + ignoreAttributeChanged: false, }; var elementPrototype = Object.create(HTMLElement.prototype); @@ -50,6 +51,10 @@ }; elementPrototype.attributeChangedCallback = function (name, oldValue, newValue) { + if (options.ignoreAttributeChanged === true) { + return + } + // we only care about attribute changes once we've rendered initially if (this.reactiveElement) { var props = utils.getProps(this); From e10e81af85652a7c38d28e22143621022760c296 Mon Sep 17 00:00:00 2001 From: Jack Franklin Date: Thu, 10 May 2018 14:05:43 +0100 Subject: [PATCH 2/2] Docs for ignoreAttributeChanged --- CHANGELOG.md | 5 +++++ README.md | 35 ++++++++++++++++++++--------------- 2 files changed, 25 insertions(+), 15 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..c77abb6 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +_ReactiveElements has not had a changelog in the past, but this one started as of version 0.8.0 onwards._ + +__0.8.0__ 02 May 18 + +- First release that we're tracking in the changelog. diff --git a/README.md b/README.md index dfd85f5..0a7c32d 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,6 @@ npm install reactive-elements yarn add reactive-elements ``` -[Live demo](http://pixelscommander.com/polygon/reactive-elements/example/) - -*UPD* Convert Angular and Backbone views as well with [MVC elements project](https://github.com/MVC-Elements) - How to use? ------- **Placing component in a pure HTML** @@ -38,19 +34,17 @@ MyComponent = React.createClass({ document.registerReact('my-react-component', MyComponent); ``` -**Find demo in corresponding folder.** - Nesting ------- -Original children of a custom element is injected to component as ```this.props.children```. +Original children of a custom element is injected to component as `this.props.children`. ```html Hello world ``` -In this case props.children is equal to "Hello world". +In this case `this.props.children` is equal to "Hello world". -Container node of the element is passed as ```this.props.container```. Both props.container and props.children have type of ```documentFragment```. +Container node of the element is passed as `this.props.container`. Both props.container and props.children have type of `documentFragment`. Boolean attribute transforms (added in version 0.7.0) ---------------------------- @@ -75,12 +69,13 @@ If you want to expose React component methods on custom element - assign them to ```js componentDidMount: function() { this.props.container.setTextContent = this.setTextContent.bind(this); - ... +} ``` Handling attributes change -------------------------- -You may add ```attributeChanged``` callback to component in order to handle / modify / filter incoming values. + +You may add `attributeChanged` callback to component in order to handle / modify / filter incoming values. ```js attributeChanged: function(attributeName, oldValue, newValue) { @@ -89,21 +84,30 @@ attributeChanged: function(attributeName, oldValue, newValue) { } ``` +If you don't ever want to listen out to attributes changing (often you might know that none of them will), you can pass the option `ignoreAttributeChanged` to turn off the `attributeChanged` callback. This option was added in 0.9.0. + +```js +document.registerReact('foo-bar', FooBar, { ignoreAttributeChanged: true }) +``` + Communicate via DOM events --------------------------- + You may trigger DOM event from React component by using following snippet: ```js var event = new CustomEvent('change', { bubbles: true - }); + }); React.findDOMNode(this).dispatchEvent(event) ``` + Subscribing to DOM events is similar: + ```js React.findDOMNode(this).addEventListener('change', function(e){...}); ``` -Using attachedCallback +Using `attachedCallback` (Added in 0.8.0) -------------------------- By default this module uses the web component `createdCallback`, so it kicks off the rendering process _before_ the component is fully attached to the DOM. In some cases you might prefer to delay the rendering process until the component is attached. @@ -118,13 +122,14 @@ document.registerReact('example-component', 'ExampleComponent', { Dependencies ------------ + - [React.js](https://github.com/facebook/react) -- ```function.bind``` and ```Object.create``` support or polyfills +- `function.bind` and `Object.create` support or polyfills - Custom elements support or [polyfill](https://github.com/WebReflection/document-register-element) Custom elements polyfill behavior --------------------------------- -Polyfill binds to ```DOMContentLoaded``` in order to process DOM so no custom elements exist until it fired. To prevent this hook into ```DOMContentLoaded``` and operate elements on it or after. +Polyfill binds to `DOMContentLoaded` in order to process DOM so no custom elements exist until it fired. To prevent this hook into `DOMContentLoaded` and operate elements on it or after. License -------