wrap html elements in fragment

looks like in htm you have to do this inside a nested html() template see developit/htm#175
iandunn · Jan 31, 2021 · 0412cc3 · 0412cc3
1 parent e6eaa8d
commit 0412cc3
Showing 1 changed file with 30 additions and 28 deletions.
diff --git a/source/components/passphrase-generator.js b/source/components/passphrase-generator.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 const { Card, CardHeader, CardBody, Notice, RangeControl } = wp.components;
-const { Component } = wp.element;
+const { Component, Fragment } = wp.element;
 const html = wp.html;
 const { shuffle } = lodash;
 
@@ -56,33 +56,35 @@ export class PassphraseGenerator extends Component {
 					` }
 
 					${ dependenciesAvailable && html`
-						<p>
-							This will show a mix of imported ES and CommonJS modules (with dependencies), for additional testing.
-						</p>
-
-						<${ RangeControl }
-							label="Number of Words"
-							marks=${ true }
-							max=10
-							min=3
-							value=${ numberOfWords }
-							onChange=${ value => this.generate( value ) }
-						/>
-
-						<p>
-							<strong>Passphrase:</strong> ${ passphrase }
-						</p>
-
-						<p>
-							<strong>Strength:</strong> ${ ' ' }
-							<span className="passphrase-strength ${ strength.toLowerCase() }">
-								${ strength }
-							</span>
-						</p>
-
-						<p>
-							<strong>argon2 hash:</strong> <code>${ hash }</code>
-						</p>
+						<${ Fragment }>
+							<p>
+								This will show a mix of imported ES and CommonJS modules (with dependencies), for additional testing.
+							</p>
+
+							<${ RangeControl }
+								label="Number of Words"
+								marks=${ true }
+								max=10
+								min=3
+								value=${ numberOfWords }
+								onChange=${ value => this.generate( value ) }
+							/>
+
+							<p>
+								<strong>Passphrase:</strong> ${ passphrase }
+							</p>
+
+							<p>
+								<strong>Strength:</strong> ${ ' ' }
+								<span className="passphrase-strength ${ strength.toLowerCase() }">
+									${ strength }
+								</span>
+							</p>
+
+							<p>
+								<strong>argon2 hash:</strong> <code>${ hash }</code>
+							</p>
+						<//>
 					` }
 				<//>
 			<//>