From cdc7177135f9c82906a158886e7bcf04c9df5123 Mon Sep 17 00:00:00 2001 From: Bernhard Reiter Date: Wed, 15 Nov 2017 11:55:42 +0100 Subject: [PATCH] Remove react-addons-create-fragment dependency Use `cloneElement` to specify a key manually instead. --- CHANGELOG.md | 3 +++ package.json | 3 +-- src/index.es6 | 41 ++++++++++++++--------------------------- 3 files changed, 18 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0245459..df83ad9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 1.1.2-alpha.1 +* Remove `react-addons-create-fragment` dependency, use `cloneElement` to specify a key manually instead. + ## 1.1.1 * Drop deprecated React.createClass, React.DOM from test * Bump to allow for React ^16.0.0 diff --git a/package.json b/package.json index 00253f3..ffd9f4c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interpolate-components", - "version": "1.1.1", + "version": "1.1.2-alpha.1", "description": "Convert strings into structured React components.", "repository": { "type": "git", @@ -34,7 +34,6 @@ }, "dependencies": { "react": "^0.14.3 || ^15.1.0 || ^16.0.0", - "react-addons-create-fragment": "^0.14.3 || ^15.1.0", "react-dom": "^0.14.3 || ^15.1.0 || ^16.0.0" }, "author": "Bob Ralian (http://github.com/rralian)", diff --git a/src/index.es6 b/src/index.es6 index f0d86f1..e5e0fd1 100644 --- a/src/index.es6 +++ b/src/index.es6 @@ -2,7 +2,6 @@ * External Dependencies */ import React from 'react'; -import createFragment from 'react-addons-create-fragment'; /** * Internal Dependencies @@ -36,8 +35,7 @@ function getCloseIndex( openIndex, tokens ) { function buildChildren( tokens, components ) { var children = [], - childrenObject = {}, - openComponent, clonedOpenComponent, openIndex, closeIndex, token, i, grandChildTokens, grandChildren, siblingTokens, siblings; + clonedOpenComponent, openIndex, closeIndex, token, i, grandChildTokens, grandChildren, siblingTokens, siblings; for ( i = 0; i < tokens.length; i++ ) { token = tokens[ i ]; @@ -58,40 +56,29 @@ function buildChildren( tokens, components ) { throw new Error( 'Missing opening component token: `' + token.value + '`' ); } if ( token.type === 'componentOpen' ) { - openComponent = components[ token.value ]; openIndex = i; - break; + + closeIndex = getCloseIndex( openIndex, tokens ); + grandChildTokens = tokens.slice( ( openIndex + 1 ), closeIndex ); + grandChildren = buildChildren( grandChildTokens, components ); + + clonedOpenComponent = React.cloneElement( components[ token.value ], { key: openIndex }, grandChildren ); + children.push( clonedOpenComponent ); + i = closeIndex; + continue; } // componentSelfClosing token - children.push( components[ token.value ] ); - continue; - } - - if ( openComponent ) { - closeIndex = getCloseIndex( openIndex, tokens ); - grandChildTokens = tokens.slice( ( openIndex + 1 ), closeIndex ); - grandChildren = buildChildren( grandChildTokens, components ); - clonedOpenComponent = React.cloneElement( openComponent, {}, grandChildren ); - children.push( clonedOpenComponent ); - - if ( closeIndex < tokens.length - 1 ) { - siblingTokens = tokens.slice( closeIndex + 1 ); - siblings = buildChildren( siblingTokens, components ); - children = children.concat( siblings ); + if ( components[ token.value ] ) { + children.push( React.cloneElement( components[ token.value ], { key: i } ) ); } + continue; } if ( children.length === 1 ) { return children[ 0 ]; } - children.forEach( ( child, index ) => { - if ( child ) { - childrenObject[ `interpolation-child-${index}` ] = child; - } - } ); - - return createFragment( childrenObject ); + return children; } function interpolate( options ) {