@needle-tools/three 0.162.12 → 0.169.2

package/examples/jsm/exporters/GLTFExporter.js

@@ -24,6 +24,7 @@ import {
 	CompressedTexture,
 	Vector3,
 	Quaternion,
+	REVISION
 } from 'three';
 import { decompress } from './../utils/TextureUtils.js';
 
@@ -111,6 +112,12 @@ class GLTFExporter {
 
 		} );
 
+		this.register( function ( writer ) {
+
+			return new GLTFMaterialsDispersionExtension( writer );
+
+		} );
+
 		this.register( function ( writer ) {
 
 			return new GLTFMaterialsIridescenceExtension( writer );
@@ -496,7 +503,7 @@ class GLTFWriter {
 		this.json = {
 			asset: {
 				version: '2.0',
-				generator: 'THREE.GLTFExporter'
+				generator: 'THREE.GLTFExporter r' + REVISION
 			}
 		};
 
@@ -864,7 +871,9 @@ class GLTFWriter {
 		canvas.width = width;
 		canvas.height = height;
 
-		const context = canvas.getContext( '2d' );
+		const context = canvas.getContext( '2d', {
+			willReadFrequently: true,
+		} );
 		context.fillStyle = '#00ffff';
 		context.fillRect( 0, 0, width, height );
 
@@ -982,7 +991,17 @@ class GLTFWriter {
 
 		}
 
-		const byteLength = getPaddedBufferSize( count * attribute.itemSize * componentSize );
+		let byteStride = attribute.itemSize * componentSize;
+
+		if ( target === WEBGL_CONSTANTS.ARRAY_BUFFER ) {
+
+			// Each element of a vertex attribute MUST be aligned to 4-byte boundaries
+			// inside a bufferView
+			byteStride = Math.ceil( byteStride / 4 ) * 4;
+
+		}
+
+		const byteLength = getPaddedBufferSize( count * byteStride );
 		const dataView = new DataView( new ArrayBuffer( byteLength ) );
 		let offset = 0;
 
@@ -1047,6 +1066,12 @@ class GLTFWriter {
 
 			}
 
+			if ( ( offset % byteStride ) !== 0 ) {
+
+				offset += byteStride - ( offset % byteStride );
+
+			}
+
 		}
 
 		const bufferViewDef = {
@@ -1062,7 +1087,7 @@ class GLTFWriter {
 		if ( target === WEBGL_CONSTANTS.ARRAY_BUFFER ) {
 
 			// Only define byteStride for vertex attributes.
-			bufferViewDef.byteStride = attribute.itemSize * componentSize;
+			bufferViewDef.byteStride = byteStride;
 
 		}
 
@@ -1250,7 +1275,9 @@ class GLTFWriter {
 			canvas.width = Math.min( image.width, options.maxTextureSize );
 			canvas.height = Math.min( image.height, options.maxTextureSize );
 
-			const ctx = canvas.getContext( '2d' );
+			const ctx = canvas.getContext( '2d', {
+				willReadFrequently: true,
+			} );
 
 			if ( flipY === true ) {
 
@@ -1291,7 +1318,7 @@ class GLTFWriter {
 				if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
 					( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
 					( typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap ) ||
-					( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ) { 
+					( typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas ) ) {
 
 					ctx.drawImage( image, 0, 0, canvas.width, canvas.height );
 
@@ -2114,7 +2141,7 @@ class GLTFWriter {
 			if ( ! trackNode || ! trackProperty ) {
 
 				console.warn( 'THREE.GLTFExporter: Could not export animation track "%s".', track.name );
-				return null;
+				continue;
 
 			}
 
@@ -2659,6 +2686,9 @@ class GLTFMaterialsClearcoatExtension {
 				index: writer.processTexture( material.clearcoatNormalMap ),
 				texCoord: material.clearcoatNormalMap.channel
 			};
+
+			if ( material.clearcoatNormalScale.x !== 1 ) clearcoatNormalMapDef.scale = material.clearcoatNormalScale.x;
+
 			writer.applyTextureTransform( clearcoatNormalMapDef, material.clearcoatNormalMap );
 			extensionDef.clearcoatNormalTexture = clearcoatNormalMapDef;
 
@@ -2674,6 +2704,40 @@ class GLTFMaterialsClearcoatExtension {
 
 }
 
+/**
+ * Materials dispersion Extension
+ *
+ * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_dispersion
+ */
+class GLTFMaterialsDispersionExtension {
+
+	constructor( writer ) {
+
+		this.writer = writer;
+		this.name = 'KHR_materials_dispersion';
+
+	}
+
+	writeMaterial( material, materialDef ) {
+
+		if ( ! material.isMeshPhysicalMaterial || material.dispersion === 0 ) return;
+
+		const writer = this.writer;
+		const extensionsUsed = writer.extensionsUsed;
+
+		const extensionDef = {};
+
+		extensionDef.dispersion = material.dispersion;
+
+		materialDef.extensions = materialDef.extensions || {};
+		materialDef.extensions[ this.name ] = extensionDef;
+
+		extensionsUsed[ this.name ] = true;
+
+	}
+
+}
+
 /**
  * Iridescence Materials Extension
  *
@@ -2815,7 +2879,12 @@ class GLTFMaterialsVolumeExtension {
 
 		}
 
-		extensionDef.attenuationDistance = material.attenuationDistance;
+		if ( material.attenuationDistance !== Infinity ) {
+
+			extensionDef.attenuationDistance = material.attenuationDistance;
+
+		}
+
 		extensionDef.attenuationColor = material.attenuationColor.toArray();
 
 		materialDef.extensions = materialDef.extensions || {};

package/examples/jsm/exporters/KTX2Exporter.js

@@ -111,7 +111,7 @@ const ERROR_COLOR_SPACE = 'THREE.KTX2Exporter: Supported color spaces are SRGBCo
 
 export class KTX2Exporter {
 
-	parse( arg1, arg2 ) {
+	async parse( arg1, arg2 ) {
 
 		let texture;
 
@@ -119,9 +119,9 @@ export class KTX2Exporter {
 
 			texture = arg1;
 
-		} else if ( arg1.isWebGLRenderer && arg2.isWebGLRenderTarget ) {
+		} else if ( ( arg1.isWebGLRenderer || arg1.isWebGPURenderer ) && arg2.isRenderTarget ) {
 
-			texture = toDataTexture( arg1, arg2 );
+			texture = await toDataTexture( arg1, arg2 );
 
 		} else {
 
@@ -235,32 +235,40 @@ export class KTX2Exporter {
 
 }
 
-function toDataTexture( renderer, rtt ) {
+async function toDataTexture( renderer, rtt ) {
 
 	const channelCount = getChannelCount( rtt.texture );
 
 	let view;
 
-	if ( rtt.texture.type === FloatType ) {
+	if ( renderer.isWebGLRenderer ) {
 
-		view = new Float32Array( rtt.width * rtt.height * channelCount );
+		if ( rtt.texture.type === FloatType ) {
 
-	} else if ( rtt.texture.type === HalfFloatType ) {
+			view = new Float32Array( rtt.width * rtt.height * channelCount );
 
-		view = new Uint16Array( rtt.width * rtt.height * channelCount );
+		} else if ( rtt.texture.type === HalfFloatType ) {
 
-	} else if ( rtt.texture.type === UnsignedByteType ) {
+			view = new Uint16Array( rtt.width * rtt.height * channelCount );
 
-		view = new Uint8Array( rtt.width * rtt.height * channelCount );
+		} else if ( rtt.texture.type === UnsignedByteType ) {
+
+			view = new Uint8Array( rtt.width * rtt.height * channelCount );
+
+		} else {
+
+			throw new Error( ERROR_TYPE );
+
+		}
+
+		await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, rtt.width, rtt.height, view );
 
 	} else {
 
-		throw new Error( ERROR_TYPE );
+		view = await renderer.readRenderTargetPixelsAsync( rtt, 0, 0, rtt.width, rtt.height );
 
 	}
 
-	renderer.readRenderTargetPixels( rtt, 0, 0, rtt.width, rtt.height, view );
-
 	return new DataTexture( view, rtt.width, rtt.height, rtt.texture.format, rtt.texture.type );
 
 }

package/examples/jsm/exporters/OBJExporter.js

@@ -1,6 +1,8 @@
 import {
 	Color,
+	ColorManagement,
 	Matrix3,
+	SRGBColorSpace,
 	Vector2,
 	Vector3
 } from 'three';
@@ -226,7 +228,9 @@ class OBJExporter {
 
 					if ( colors !== undefined ) {
 
-						color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+						color.fromBufferAttribute( colors, i );
+
+						ColorManagement.fromWorkingColorSpace( color, SRGBColorSpace );
 
 						output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
 

package/examples/jsm/exporters/PLYExporter.js

@@ -1,7 +1,9 @@
 import {
 	Matrix3,
 	Vector3,
-	Color
+	Color,
+	ColorManagement,
+	SRGBColorSpace
 } from 'three';
 
 /**
@@ -302,9 +304,9 @@ class PLYExporter {
 
 						if ( colors != null ) {
 
-							tempColor
-								.fromBufferAttribute( colors, i )
-								.convertLinearToSRGB();
+							tempColor.fromBufferAttribute( colors, i );
+
+							ColorManagement.fromWorkingColorSpace( tempColor, SRGBColorSpace );
 
 							output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
 							vOffset += 1;
@@ -461,9 +463,9 @@ class PLYExporter {
 
 						if ( colors != null ) {
 
-							tempColor
-								.fromBufferAttribute( colors, i )
-								.convertLinearToSRGB();
+							tempColor.fromBufferAttribute( colors, i );
+
+							ColorManagement.fromWorkingColorSpace( tempColor, SRGBColorSpace );
 
 							line += ' ' +
 								Math.floor( tempColor.r * 255 ) + ' ' +

package/examples/jsm/exporters/USDZExporter.js

@@ -1,6 +1,7 @@
 import {
 	NoColorSpace,
 	DoubleSide,
+	Color,
 } from 'three';
 
 import {
@@ -12,13 +13,20 @@ import { decompress } from './../utils/TextureUtils.js';
 
 class USDZExporter {
 
-	async parse( scene, options = {} ) {
+	parse( scene, onDone, onError, options ) {
+
+		this.parseAsync( scene, options ).then( onDone ).catch( onError );
+
+	}
+
+	async parseAsync( scene, options = {} ) {
 
 		options = Object.assign( {
 			ar: {
 				anchoring: { type: 'plane' },
 				planeAnchoring: { alignment: 'horizontal' }
 			},
+			includeAnchoringProperties: true,
 			quickLookCompatible: false,
 			maxTextureSize: 1024,
 		}, options );
@@ -192,6 +200,10 @@ function buildHeader() {
 
 function buildSceneStart( options ) {
 
+	const alignment = options.includeAnchoringProperties === true ? `
+		token preliminary:anchoring:type = "${options.ar.anchoring.type}"
+		token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
+	` : '';
 	return `def Xform "Root"
 {
 	def Scope "Scenes" (
@@ -205,10 +217,7 @@ function buildSceneStart( options ) {
 			}
 			sceneName = "Scene"
 		)
-		{
-		token preliminary:anchoring:type = "${options.ar.anchoring.type}"
-		token preliminary:planeAnchoring:alignment = "${options.ar.planeAnchoring.alignment}"
-
+		{${alignment}
 `;
 
 }
@@ -409,6 +418,21 @@ function buildPrimvars( attributes ) {
 
 	}
 
+	// vertex colors
+
+	const colorAttribute = attributes.color;
+
+	if ( colorAttribute !== undefined ) {
+
+		const count = colorAttribute.count;
+
+		string += `
+	color3f[] primvars:displayColor = [${buildVector3Array( colorAttribute, count )}] (
+		interpolation = "vertex"
+		)`;
+
+	}
+
 	return string;
 
 }
@@ -561,7 +585,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		inputs.push( `${ pad }color3f inputs:emissiveColor.connect = </Materials/Material_${ material.id }/Texture_${ material.emissiveMap.id }_emissive.outputs:rgb>` );
 
-		samplers.push( buildTexture( material.emissiveMap, 'emissive' ) );
+		samplers.push( buildTexture( material.emissiveMap, 'emissive', new Color( material.emissive.r * material.emissiveIntensity, material.emissive.g * material.emissiveIntensity, material.emissive.b * material.emissiveIntensity ) ) );
 
 	} else if ( material.emissive.getHex() > 0 ) {
 
@@ -581,7 +605,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		inputs.push( `${ pad }float inputs:occlusion.connect = </Materials/Material_${ material.id }/Texture_${ material.aoMap.id }_occlusion.outputs:r>` );
 
-		samplers.push( buildTexture( material.aoMap, 'occlusion' ) );
+		samplers.push( buildTexture( material.aoMap, 'occlusion', new Color( material.aoMapIntensity, material.aoMapIntensity, material.aoMapIntensity ) ) );
 
 	}
 
@@ -589,7 +613,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		inputs.push( `${ pad }float inputs:roughness.connect = </Materials/Material_${ material.id }/Texture_${ material.roughnessMap.id }_roughness.outputs:g>` );
 
-		samplers.push( buildTexture( material.roughnessMap, 'roughness' ) );
+		samplers.push( buildTexture( material.roughnessMap, 'roughness', new Color( material.roughness, material.roughness, material.roughness ) ) );
 
 	} else {
 
@@ -601,7 +625,7 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 		inputs.push( `${ pad }float inputs:metallic.connect = </Materials/Material_${ material.id }/Texture_${ material.metalnessMap.id }_metallic.outputs:b>` );
 
-		samplers.push( buildTexture( material.metalnessMap, 'metallic' ) );
+		samplers.push( buildTexture( material.metalnessMap, 'metallic', new Color( material.metalness, material.metalness, material.metalness ) ) );
 
 	} else {
 
@@ -624,8 +648,28 @@ function buildMaterial( material, textures, quickLookCompatible = false ) {
 
 	if ( material.isMeshPhysicalMaterial ) {
 
-		inputs.push( `${ pad }float inputs:clearcoat = ${ material.clearcoat }` );
-		inputs.push( `${ pad }float inputs:clearcoatRoughness = ${ material.clearcoatRoughness }` );
+		if ( material.clearcoatMap !== null ) {
+
+			inputs.push( `${pad}float inputs:clearcoat.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatMap.id}_clearcoat.outputs:r>` );
+			samplers.push( buildTexture( material.clearcoatMap, 'clearcoat', new Color( material.clearcoat, material.clearcoat, material.clearcoat ) ) );
+
+		} else {
+
+			inputs.push( `${pad}float inputs:clearcoat = ${material.clearcoat}` );
+
+		}
+
+		if ( material.clearcoatRoughnessMap !== null ) {
+
+			inputs.push( `${pad}float inputs:clearcoatRoughness.connect = </Materials/Material_${material.id}/Texture_${material.clearcoatRoughnessMap.id}_clearcoatRoughness.outputs:g>` );
+			samplers.push( buildTexture( material.clearcoatRoughnessMap, 'clearcoatRoughness', new Color( material.clearcoatRoughness, material.clearcoatRoughness, material.clearcoatRoughness ) ) );
+
+		} else {
+
+			inputs.push( `${pad}float inputs:clearcoatRoughness = ${material.clearcoatRoughness}` );
+
+		}
+
 		inputs.push( `${ pad }float inputs:ior = ${ material.ior }` );
 
 	}

package/examples/jsm/geometries/DecalGeometry.js

@@ -1,6 +1,7 @@
 import {
 	BufferGeometry,
 	Float32BufferAttribute,
+	Matrix3,
 	Matrix4,
 	Vector3
 } from 'three';
@@ -36,6 +37,8 @@ class DecalGeometry extends BufferGeometry {
 
 		const plane = new Vector3();
 
+		const normalMatrix = new Matrix3().getNormalMatrix( mesh.matrixWorld );
+
 		// this matrix represents the transformation of the decal projector
 
 		const projectorMatrix = new Matrix4();
@@ -146,7 +149,7 @@ class DecalGeometry extends BufferGeometry {
 			vertex.applyMatrix4( mesh.matrixWorld );
 			vertex.applyMatrix4( projectorMatrixInverse );
 
-			normal.transformDirection( mesh.matrixWorld );
+			normal.applyNormalMatrix( normalMatrix );
 
 			decalVertices.push( new DecalVertex( vertex.clone(), normal.clone() ) );
 

package/examples/jsm/geometries/InstancedPointsGeometry.js

@@ -20,7 +20,7 @@ class InstancedPointsGeometry extends InstancedBufferGeometry {
 		this.type = 'InstancedPointsGeometry';
 
 		const positions = [ - 1, 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
-		const uvs = [ - 1, 1, 1, 1, - 1, - 1, 1, - 1 ];
+		const uvs = [ 0, 1, 1, 1, 0, 0, 1, 0 ];
 		const index = [ 0, 2, 1, 2, 3, 1 ];
 
 		this.setIndex( index );

package/examples/jsm/geometries/TeapotGeometry.js

@@ -10,7 +10,7 @@ import {
  * Tessellates the famous Utah teapot database by Martin Newell into triangles.
  *
  * Parameters: size = 50, segments = 10, bottom = true, lid = true, body = true,
- *   fitLid = false, blinn = true
+ *   fitLid = true, blinn = true
  *
  * size is a relative scale: I've scaled the teapot to fit vertically between -1 and 1.
  * Think of it as a "radius".

package/examples/jsm/geometries/TextGeometry.js

@@ -5,7 +5,7 @@
  *  font: <THREE.Font>, // font
  *
  *  size: <float>, // size of the text
- *  height: <float>, // thickness to extrude text
+ *  depth: <float>, // thickness to extrude text
  *  curveSegments: <int>, // number of points on the curves
  *
  *  bevelEnabled: <bool>, // turn on bevel
@@ -35,7 +35,15 @@ class TextGeometry extends ExtrudeGeometry {
 
 			// translate parameters to ExtrudeGeometry API
 
-			parameters.depth = parameters.height !== undefined ? parameters.height : 50;
+			if ( parameters.depth === undefined && parameters.height !== undefined ) {
+
+				console.warn( 'THREE.TextGeometry: .height is now depreciated. Please use .depth instead' ); // @deprecated, r163
+
+			}
+
+			parameters.depth = parameters.depth !== undefined ?
+				parameters.depth : parameters.height !== undefined ?
+					parameters.height : 50;
 
 			// defaults
 

package/examples/jsm/helpers/LightProbeHelper.js

@@ -6,7 +6,7 @@ import {
 
 class LightProbeHelper extends Mesh {
 
-	constructor( lightProbe, size ) {
+	constructor( lightProbe, size = 1 ) {
 
 		const material = new ShaderMaterial( {
 
@@ -20,79 +20,78 @@ class LightProbeHelper extends Mesh {
 
 			},
 
-			vertexShader: [
+			vertexShader: /* glsl */`
 
-				'varying vec3 vNormal;',
+				varying vec3 vNormal;
 
-				'void main() {',
+				void main() {
 
-				'	vNormal = normalize( normalMatrix * normal );',
+					vNormal = normalize( normalMatrix * normal );
 
-				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-				'}',
+				}
 
-			].join( '\n' ),
+			`,
 
-			fragmentShader: [
+			fragmentShader: /* glsl */`
 
-				'#define RECIPROCAL_PI 0.318309886',
+				#define RECIPROCAL_PI 0.318309886
 
-				'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
+				vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {
 
-				'	// matrix is assumed to be orthogonal',
+					// matrix is assumed to be orthogonal
 
-				'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
+					return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );
 
-				'}',
+				}
 
-				'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
-				'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
+				// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf,
+				vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {
 
-				'	// normal is assumed to have unit length',
+					// normal is assumed to have unit length,
 
-				'	float x = normal.x, y = normal.y, z = normal.z;',
+					float x = normal.x, y = normal.y, z = normal.z;
 
-				'	// band 0',
-				'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
+					// band 0,
+					vec3 result = shCoefficients[ 0 ] * 0.886227;
 
-				'	// band 1',
-				'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
-				'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
-				'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
+					// band 1,
+					result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;
+					result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;
+					result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;
 
-				'	// band 2',
-				'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
-				'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
-				'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
-				'	result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
-				'	result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
+					// band 2,
+					result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;
+					result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;
+					result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );
+					result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;
+					result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );
+					return result;
 
-				'	return result;',
+				}
 
-				'}',
+				uniform vec3 sh[ 9 ]; // sh coefficients
 
-				'uniform vec3 sh[ 9 ]; // sh coefficients',
+				uniform float intensity; // light probe intensity
 
-				'uniform float intensity; // light probe intensity',
+				varying vec3 vNormal;
 
-				'varying vec3 vNormal;',
+				void main() {
 
-				'void main() {',
+					vec3 normal = normalize( vNormal );
 
-				'	vec3 normal = normalize( vNormal );',
+					vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
 
-				'	vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
+					vec3 irradiance = shGetIrradianceAt( worldNormal, sh );
 
-				'	vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
+					vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;
 
-				'	vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
+					gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );
 
-				'	gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
+				}
 
-				'}'
-
-			].join( '\n' )
+			`,
 
 		} );