{ children }
; - -// will render as: -//This is a fine example.
-``` diff --git a/client/lib/interpolate-components/index.js b/client/lib/interpolate-components/index.js deleted file mode 100644 index f0d86f19f83b83..00000000000000 --- a/client/lib/interpolate-components/index.js +++ /dev/null @@ -1,127 +0,0 @@ -/** - * External Dependencies - */ -import React from 'react'; -import createFragment from 'react-addons-create-fragment'; - -/** - * Internal Dependencies - */ -import tokenize from './tokenize'; - -let currentMixedString; - -function getCloseIndex( openIndex, tokens ) { - var openToken = tokens[ openIndex ], - nestLevel = 0, - token, i; - for ( i = openIndex + 1; i < tokens.length; i++ ) { - token = tokens[ i ]; - if ( token.value === openToken.value ) { - if ( token.type === 'componentOpen' ) { - nestLevel++; - continue; - } - if ( token.type === 'componentClose' ) { - if ( nestLevel === 0 ) { - return i; - } - nestLevel--; - } - } - } - // if we get this far, there was no matching close token - throw new Error( 'Missing closing component token `' + openToken.value + '`' ); -} - -function buildChildren( tokens, components ) { - var children = [], - childrenObject = {}, - openComponent, clonedOpenComponent, openIndex, closeIndex, token, i, grandChildTokens, grandChildren, siblingTokens, siblings; - - for ( i = 0; i < tokens.length; i++ ) { - token = tokens[ i ]; - if ( token.type === 'string' ) { - children.push( token.value ); - continue; - } - // component node should at least be set - if ( ! components.hasOwnProperty( token.value ) || typeof components[ token.value ] === 'undefined' ) { - throw new Error( 'Invalid interpolation, missing component node: `' + token.value + '`' ); - } - // should be either ReactElement or null (both type "object"), all other types deprecated - if ( typeof components[ token.value ] !== 'object' ) { - throw new Error( 'Invalid interpolation, component node must be a ReactElement or null: `' + token.value + '`', '\n> ' + currentMixedString ); - } - // we should never see a componentClose token in this loop - if ( token.type === 'componentClose' ) { - throw new Error( 'Missing opening component token: `' + token.value + '`' ); - } - if ( token.type === 'componentOpen' ) { - openComponent = components[ token.value ]; - openIndex = i; - break; - } - // 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 ( children.length === 1 ) { - return children[ 0 ]; - } - - children.forEach( ( child, index ) => { - if ( child ) { - childrenObject[ `interpolation-child-${index}` ] = child; - } - } ); - - return createFragment( childrenObject ); -} - -function interpolate( options ) { - const { mixedString, components, throwErrors } = options; - - currentMixedString = mixedString; - - if ( ! components ) { - return mixedString; - } - - if ( typeof components !== 'object' ) { - if ( throwErrors ) { - throw new Error( `Interpolation Error: unable to process \`${ mixedString }\` because components is not an object` ); - } - - return mixedString; - } - - let tokens = tokenize( mixedString ); - - try { - return buildChildren( tokens, components ); - } catch ( error ) { - if ( throwErrors ) { - throw new Error( `Interpolation Error: unable to process \`${ mixedString }\` because of error \`${ error.message }\`` ); - } - - return mixedString; - } -}; - -export default interpolate; diff --git a/client/lib/interpolate-components/test/test.jsx b/client/lib/interpolate-components/test/test.jsx deleted file mode 100644 index 9cf76744718372..00000000000000 --- a/client/lib/interpolate-components/test/test.jsx +++ /dev/null @@ -1,259 +0,0 @@ -/** - * External dependencies - */ -import assert from 'assert'; -import ReactDomServer from 'react-dom/server'; -import React from 'react'; - -/** - * Internal dependencies - */ -import interpolateComponents from 'lib/interpolate-components'; - -describe( 'interpolate-components', () => { - const input = React.DOM.input(); - const div = React.DOM.div(); - const link = ; - const em = ; - const CustomComponentClass = React.createClass( { - displayName: 'CustomComponentClass', - render() { - return { this.props.intro }{ this.props.children }; - } - } ); - - describe( 'with default container', () => { - it( 'should return a react object with a span container', () => { - const expectedResultString = 'testtest'; - const interpolatedResult = interpolateComponents( { - mixedString: 'test{{input/}}test', - components: { - input: input - } - } ); - const instance = { interpolatedResult }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should allow whitespace in the component placeholder', () => { - const expectedResultString = 'testtest'; - const interpolatedResult = interpolateComponents( { - mixedString: 'test{{ input /}}test', - components: { - input: input - } - } ); - const instance = { interpolatedResult }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should not add extra span nodes if component is at end of string', () => { - const expectedResultString = 'test'; - const interpolatedResult = interpolateComponents( { - mixedString: 'test{{ input /}}', - components: { - input: input - } - } ); - const instance = { interpolatedResult }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should not throw when component node is null', () => { - assert.doesNotThrow( () => { - interpolateComponents( { - mixedString: 'test{{input/}}test', - components: { - input: null - }, - throwErrors: true - } ); - } ); - } ); - it( 'should not throw when component node is not an object', () => { - assert.doesNotThrow( () => { - interpolateComponents( { - mixedString: 'test{{input/}}test{{input2/}}', - components: { - input: 'string', - input2: 123 - }, - } ); - } ); - } ); - it( 'should return original string when component node is not an object', () => { - const expectedResultString = 'test{{input/}}test{{input2/}}'; - const interpolatedResult = interpolateComponents( { - mixedString: 'test{{input/}}test{{input2/}}', - components: { - input: 'string', - input2: 123 - } - } ); - const instance = { interpolatedResult }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - - describe( 'when allowing thrown errors', () => { - it( 'should throw when component node is not set', () => { - assert.throws( () => { - interpolateComponents( { - mixedString: 'test{{input/}}', - components: { - mismatch: true - }, - throwErrors: true - } ); - } ); - } ); - it( 'should throw when component node is undefined', () => { - assert.throws( () => { - interpolateComponents( { - mixedString: 'test{{input/}}', - components: { - input: undefined - }, - throwErrors: true - } ); - } ); - } ); - it( 'should throw error on invalid cross-nesting', () => { - assert.throws( () => { - interpolateComponents( { - mixedString: '{{link}}a{{em}}b{{/link}}c{{/em}}', - components: { - link: link, - em: em - }, - throwErrors: true - } ); - } ); - } ); - it( 'should throw when component is unclosed', () => { - assert.throws( () => { - interpolateComponents( { - mixedString: '{{link}}test', - components: { - link: link - }, - throwErrors: true - } ); - } ); - } ); - } ); - - describe( 'when not allowing thrown errors', () => { - it( 'should return original string when component node is not set', () => { - const mixedString = 'test{{input/}}'; - const results = interpolateComponents( { - mixedString: mixedString, - components: { - mismatch: true - } - } ); - assert.equal( mixedString, results ); - } ); - it( 'should return original string when component node is undefined', () => { - const mixedString = 'test{{input/}}'; - const results = interpolateComponents( { - mixedString: mixedString, - components: { - input: undefined - } - } ); - assert.equal( mixedString, results ); - } ); - it( 'should return original string on invalid cross-nesting', () => { - const mixedString = '{{link}}a{{em}}b{{/link}}c{{/em}}'; - const results = interpolateComponents( { - mixedString: mixedString, - components: { - link: link, - em: em - } - } ); - assert.equal( mixedString, results ); - } ); - it( 'should return original string when component is unclosed', () => { - const mixedString = '{{link}}test'; - const results = interpolateComponents( { - mixedString: mixedString, - components: { - link: link - } - } ); - assert.equal( mixedString, results ); - } ); - } ); - } ); - - describe( 'with components that wrap content', () => { - it( 'should wrap the component around the inner contents', () => { - const expectedResultString = 'test link content test'; - const interpolatedComponent = interpolateComponents( { - mixedString: 'test {{link}}link content{{/link}} test', - components: { - link: link - } - } ); - const instance = { interpolatedComponent }; - - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should handle multiple wrapping components', () => { - const expectedResultString = 'test link content link content2 test'; - const interpolatedComponent = interpolateComponents( { - mixedString: 'test {{link}}link content{{/link}} {{em}}link content2{{/em}} test', - components: { - link: link, - em: em - } - } ); - const instance = { interpolatedComponent }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should handle nested wrapping components', () => { - const expectedResultString = 'test link content emphasis test'; - const interpolatedComponent = interpolateComponents( { - mixedString: 'test {{link}}link content {{em}}emphasis{{/em}}{{/link}} test', - components: { - link: link, - em: em - } - } ); - const instance = { interpolatedComponent }; - assert.equal( expectedResultString, ReactDomServer.renderToStaticMarkup( instance ) ); - } ); - it( 'should work with custom components', () => { - const expectedResultString = 'here is: baba Hey!willie'; - const interpolatedComponent = interpolateComponents( { - mixedString: 'here is: {{x}}baba {{y}}willie{{/y}}{{/x}}', - components: { - x: