Refactor render method to add config for wrapper element #1888

src/main/resources/lib/enonic/react4xp/React4xp.ts

@@ -41,6 +41,7 @@ interface RenderOptions {
 	id?: Id
 	pageContributions?: PageContributions
 	ssr?: boolean
+	wrapper?: boolean
 	urlType?: UrlType
 	uniqueId?: boolean|string
 }
@@ -143,6 +144,7 @@ export class React4xp<
 				hydrate,
 				pageContributions, // TODO deref?
 				ssr,
+				wrapper,
 				urlType // default is app.config['react4xp.urlType'] || 'server'
 			} = dereffedOptions || {};
 
@@ -156,6 +158,7 @@ export class React4xp<
 				body: react4xp.renderBody({
 					body,
 					request,
+					wrapper,
 					ssr
 				}),
 

src/main/resources/lib/enonic/react4xp/React4xp/methods/renderBody.ts

@@ -7,10 +7,12 @@ import getSsrConfig from '/lib/enonic/react4xp/React4xp/utils/getSsrConfig';
 export function renderBody(this: React4xp, {
 	body,
 	request,
+	wrapper,
 	ssr,
 }: {
 	body?: string
 	ssr?: boolean
+	wrapper?: boolean
 	request?: Request
 } = {}): string {
 	// log.debug('renderBody ssr:%s jsxPath:%s', ssr, this.jsxPath);
@@ -39,9 +41,11 @@ export function renderBody(this: React4xp, {
 		: finalSSR
 			? this.renderSSRIntoContainer({
 				body,
-				request
+				request,
+				wrapper
 			})
 			: this.renderTargetContainer({
-				body
+				body,
+				wrapper
 			});
 } // renderBody

src/main/resources/lib/enonic/react4xp/React4xp/methods/renderSSRIntoContainer.ts

@@ -8,14 +8,18 @@ import {buildErrorContainer} from '/lib/enonic/react4xp/htmlHandling';
 /** Server-side rendering: Renders a static HTML markup and inserts it into an ID-matching target container in an HTML body. This is the same as renderBody({body: body}). If a
  * matching-ID container (or a body) is missing, it will be generated.
  * @param body {string} Existing HTML body, for example rendered from thymeleaf.
+ * @param request Current HTTP request
+ * @param wrapper Flag to turn generation of wrapper on/off if not found in body
  * @returns {string} adjusted or generated HTML body with rendered react component.
  */
 export function renderSSRIntoContainer(this: React4xp, {
 	body,
-	request
+	request,
+	wrapper
 }: {
 	body: string
-	request: Request
+	request: Request,
+	wrapper?: boolean
 }): string {
 	//log.debug('renderSSRIntoContainer jsxPath:%s', this.jsxPath);
 	const { html, error } = this.doRenderSSR();
@@ -24,6 +28,7 @@ export function renderSSRIntoContainer(this: React4xp, {
 		? this.renderTargetContainer({
 			appendErrorContainer: true,
 			body,
+			wrapper,
 			content: buildErrorContainer(
 				"React4xp SSR error",
 				error,
@@ -34,6 +39,7 @@ export function renderSSRIntoContainer(this: React4xp, {
 		})
 		: this.renderTargetContainer({
 			body,
+			wrapper,
 			content: html
 		});
 } // renderSSRIntoContainer

src/main/resources/lib/enonic/react4xp/React4xp/methods/renderTargetContainer.ts

@@ -10,6 +10,7 @@ interface RenderTargetContainerParams {
 	appendErrorContainer?: boolean
 	body?: string // '' is Falsy // Html string that usually contains the target container (a DOM node with correct ID).
 	content?: string // '' is Falsy // Html string to insert inside the target container.
+	wrapper?: boolean
 }
 
 
@@ -30,6 +31,7 @@ interface RenderTargetContainerParams {
  */
 export function renderTargetContainer(this: React4xp, params: RenderTargetContainerParams): string {
 	const {
+		wrapper = true,
 		appendErrorContainer = false,
 		body = '', // '' is Falsy
 		content = '' // '' is Falsy
@@ -40,49 +42,40 @@ export function renderTargetContainer(this: React4xp, params: RenderTargetContai
 	const hasBody = ((body) + "").replace(/(^\s+)|(\s+$)/g, "") !== "";
 	// log.debug('renderTargetContainer hasBody:%s jsxPath:%s', hasBody, this.jsxPath);
 
-	const hasContainerWithId = hasElementWithId({
+	const hasContainerWithId = hasBody && hasElementWithId({
 		id: this.react4xpId,
 		htmlString: body
 	});
 	// log.debug('renderTargetContainer hasBody:%s hasContainerWithId:%s jsxPath:%s', hasBody, hasContainerWithId, this.jsxPath);
 
-	const container = buildContainer({
-		id: this.react4xpId,
-		content
-	});
+	if (hasContainerWithId) {
 
-	const output = (hasBody && hasContainerWithId)
-		? undefined
-		: appendErrorContainer
-			? `<div id="${this.react4xpId}__error__" style="border:1px solid #8B0000; padding:15px; background-color:#FFB6C1">${
-				content}${container})
-			}</div>`
-			: container;
+		if (content) {
+			return insertInsideContainer(body, content, this.react4xpId, appendErrorContainer);
+		} else {
+			return body;
+		}
 
+	} else {
 
-	// If no (or empty) body is supplied: generate a minimal container body with only a target container element.
-	if (!hasBody) {
-		return output;
-	}
+		if (wrapper) {
+			const container = buildContainer({
+				id: this.react4xpId,
+				content
+			});
 
-	// If there is a body but it's missing a target container element:
-	// Make a container and insert it right before the closing tag.
-	if (!hasContainerWithId) {
-		// log.debug(
-		// 	'renderTargetContainer hasBody:%s hasContainerWithId:%s jsxPath:%s id:%s body:%s output:%s',
-		// 	hasBody, hasContainerWithId, this.jsxPath, this.react4xpId, body, output
-		// );
-		// WARNING: This can end up after the body tag, and gives W3C HTML validation error "Stray start tag"
-		return insertAtEndOfRoot(body, output);
-	}
+			// WARNING: This can end up after the body tag, and gives W3C HTML validation error "Stray start tag"
+			return hasBody ? insertAtEndOfRoot(body, container) : container;
+
+		} else {
+
+			if (appendErrorContainer) {
+				return `<div id="${this.react4xpId}__error__" style="border:1px solid #8B0000; padding:15px; background-color:#FFB6C1">${content}</div>`;
+			} else {
+				return content;
+			}
+		}
 
-	if (content) {
-		// log.debug(
-		// 	'renderTargetContainer hasBody:%s hasContainerWithId:%s jsxPath:%s id:%s body:%s content:%s',
-		// 	hasBody, hasContainerWithId, this.jsxPath, this.react4xpId, body, content
-		// );
-		return insertInsideContainer(body, content, this.react4xpId, appendErrorContainer);
 	}
 
-	return body;
 } // renderTargetContainer

src/main/resources/lib/enonic/react4xp/types/React4xp.ts

@@ -40,6 +40,7 @@ export interface Instance<
 	renderBody: (params: {
 		body?: string
 		request?: Request
+		wrapper?: boolean
 		ssr?: boolean
 	}) => string
 	renderPageContributions: (params: {