diff --git a/src/main/resources/lib/enonic/react4xp/React4xp.ts b/src/main/resources/lib/enonic/react4xp/React4xp.ts index 0ced77e00..fe9b3c4c3 100644 --- a/src/main/resources/lib/enonic/react4xp/React4xp.ts +++ b/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 }), diff --git a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderBody.ts b/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderBody.ts index ceac5e0bb..0a69e2aca 100644 --- a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderBody.ts +++ b/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 diff --git a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderSSRIntoContainer.ts b/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderSSRIntoContainer.ts index 754a5e3d1..0fed250ac 100644 --- a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderSSRIntoContainer.ts +++ b/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 diff --git a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderTargetContainer.ts b/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderTargetContainer.ts index 71d43e607..29ff47307 100644 --- a/src/main/resources/lib/enonic/react4xp/React4xp/methods/renderTargetContainer.ts +++ b/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 - ? `