@lwrjs/lwc-ssr 0.8.0-alpha.7 → 0.8.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/build/cjs/moduleProvider/index.cjs +11 -15
- package/build/cjs/viewTransformer/index.cjs +1 -1
- package/build/cjs/viewTransformer/sandbox.cjs +2 -1
- package/build/es/moduleProvider/index.js +11 -15
- package/build/es/viewTransformer/index.d.ts +1 -1
- package/build/es/viewTransformer/index.js +2 -2
- package/build/es/viewTransformer/sandbox.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Learn how to use SSR in your LWR apps.
|
|
|
18
18
|
|
|
19
19
|
### Turn on SSR
|
|
20
20
|
|
|
21
|
-
SSR is activated on a per-route basis by changing `bootstrap.
|
|
21
|
+
SSR is activated on a per-route basis by changing `bootstrap.ssr` to `true`:
|
|
22
22
|
|
|
23
23
|
```json
|
|
24
24
|
// my-app/lwr.config.json
|
|
@@ -32,7 +32,7 @@ SSR is activated on a per-route basis by changing `bootstrap.experimentalSSR` to
|
|
|
32
32
|
"contentTemplate": "$contentDir/page.html",
|
|
33
33
|
"bootstrap": {
|
|
34
34
|
// turn on SSR for the page here
|
|
35
|
-
"
|
|
35
|
+
"ssr": true
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
]
|
|
@@ -41,7 +41,7 @@ SSR is activated on a per-route basis by changing `bootstrap.experimentalSSR` to
|
|
|
41
41
|
|
|
42
42
|
### Building SSR pages
|
|
43
43
|
|
|
44
|
-
When a route with `
|
|
44
|
+
When a route with `bootstrap.ssr` is requested, LWR will use [LWC'S `renderComponent()` function](https://rfcs.lwc.dev/rfcs/lwc/0112-server-engine) to SSR each root component on the page. This is done whether the page is generated at runtime, or pre-built using `generateStaticSite()`.
|
|
45
45
|
|
|
46
46
|
> A "root component" is any lwc in an app route's [content template, layout template](https://github.com/salesforce/lwr-recipes/tree/main/packages/templating#templates), or [`rootComponent` configuration](https://github.com/salesforce/lwr-recipes/blob/main/doc/config.md#routes).
|
|
47
47
|
|
|
@@ -35,23 +35,19 @@ import { renderComponent } from '@lwc/engine-server';
|
|
|
35
35
|
import Ctor, * as rootComponent from '${rootSpecifier}';
|
|
36
36
|
|
|
37
37
|
(async () => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
38
|
+
// 1. setup props
|
|
39
|
+
const context = globalThis.getContext();
|
|
40
|
+
let props = context.props;
|
|
41
|
+
if (rootComponent.getProps) {
|
|
42
|
+
const data = await rootComponent.getProps(context);
|
|
43
|
+
props = data.props; // overwrite public props
|
|
44
|
+
}
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
// 2. render component
|
|
47
|
+
const result = renderComponent('${(0, import_shared_utils.moduleSpecifierToKebabCase)(rootSpecifier)}', Ctor, props || {});
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
} catch(e) {
|
|
53
|
-
globalThis.postMessage({ error: e });
|
|
54
|
-
}
|
|
49
|
+
// 3. relay results
|
|
50
|
+
globalThis.postMessage({ result, props });
|
|
55
51
|
})()`;
|
|
56
52
|
}
|
|
57
53
|
var LwcSsrModuleProvider = class {
|
|
@@ -38,7 +38,7 @@ function lwcSsrViewTranformer(options, {moduleBundler}) {
|
|
|
38
38
|
if (process.env.LOCKER === "true") {
|
|
39
39
|
return;
|
|
40
40
|
}
|
|
41
|
-
if (viewContext.view.bootstrap?.
|
|
41
|
+
if (viewContext.view.bootstrap?.ssr) {
|
|
42
42
|
const ssrModules = [];
|
|
43
43
|
for (const {tagName, location, props} of customElements) {
|
|
44
44
|
if (location) {
|
|
@@ -39,7 +39,8 @@ function runCodeOnWorker(codes, workerData) {
|
|
|
39
39
|
return new Promise((resolve) => {
|
|
40
40
|
const worker = new import_worker_threads.Worker(workerCode, {eval: true, workerData});
|
|
41
41
|
worker.on("message", resolve);
|
|
42
|
-
worker.on("error", (
|
|
42
|
+
worker.on("error", (err) => resolve({error: `SSR worker exited with error: ${err.message}
|
|
43
|
+
${err.stack}`}));
|
|
43
44
|
worker.on("exit", (code) => {
|
|
44
45
|
if (code !== 0) {
|
|
45
46
|
resolve({error: `SSR worker stopped with exit code: ${code}`});
|
|
@@ -19,23 +19,19 @@ import { renderComponent } from '@lwc/engine-server';
|
|
|
19
19
|
import Ctor, * as rootComponent from '${rootSpecifier}';
|
|
20
20
|
|
|
21
21
|
(async () => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
22
|
+
// 1. setup props
|
|
23
|
+
const context = globalThis.getContext();
|
|
24
|
+
let props = context.props;
|
|
25
|
+
if (rootComponent.getProps) {
|
|
26
|
+
const data = await rootComponent.getProps(context);
|
|
27
|
+
props = data.props; // overwrite public props
|
|
28
|
+
}
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
// 2. render component
|
|
31
|
+
const result = renderComponent('${moduleSpecifierToKebabCase(rootSpecifier)}', Ctor, props || {});
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
} catch(e) {
|
|
37
|
-
globalThis.postMessage({ error: e });
|
|
38
|
-
}
|
|
33
|
+
// 3. relay results
|
|
34
|
+
globalThis.postMessage({ result, props });
|
|
39
35
|
})()`;
|
|
40
36
|
}
|
|
41
37
|
export default class LwcSsrModuleProvider {
|
|
@@ -4,7 +4,7 @@ interface SsrPluginOptions {
|
|
|
4
4
|
}
|
|
5
5
|
/**
|
|
6
6
|
* This is a view transformer run by the view registry during linking of a page document/route (configured in lwr.config.json[routes]).
|
|
7
|
-
* If the "
|
|
7
|
+
* If the "ssr" bootstrap flag is on for the route, it will server-side render (SSR) each custom element found in the page HTML.
|
|
8
8
|
*
|
|
9
9
|
* SSR Flow:
|
|
10
10
|
* 1. There is a request to generate a view (ie: page document) via the UI middleware or static site generation
|
|
@@ -3,7 +3,7 @@ import { LWC_SSR_PREFIX, SSR_PROPS_ATTR, SSR_PROPS_KEY, getPropsId } from '../id
|
|
|
3
3
|
import { ssrElement } from './ssr-element.js';
|
|
4
4
|
/**
|
|
5
5
|
* This is a view transformer run by the view registry during linking of a page document/route (configured in lwr.config.json[routes]).
|
|
6
|
-
* If the "
|
|
6
|
+
* If the "ssr" bootstrap flag is on for the route, it will server-side render (SSR) each custom element found in the page HTML.
|
|
7
7
|
*
|
|
8
8
|
* SSR Flow:
|
|
9
9
|
* 1. There is a request to generate a view (ie: page document) via the UI middleware or static site generation
|
|
@@ -30,7 +30,7 @@ export default function lwcSsrViewTranformer(options, { moduleBundler }) {
|
|
|
30
30
|
if (process.env.LOCKER === 'true') {
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
if (viewContext.view.bootstrap?.
|
|
33
|
+
if (viewContext.view.bootstrap?.ssr) {
|
|
34
34
|
// Gather all the SSRable custom elements (ie: root components) into 1 list
|
|
35
35
|
const ssrModules = [];
|
|
36
36
|
for (const { tagName, location, props } of customElements) {
|
|
@@ -27,7 +27,7 @@ function runCodeOnWorker(codes, workerData) {
|
|
|
27
27
|
return new Promise((resolve) => {
|
|
28
28
|
const worker = new Worker(workerCode, { eval: true, workerData });
|
|
29
29
|
worker.on('message', resolve);
|
|
30
|
-
worker.on('error', (
|
|
30
|
+
worker.on('error', (err) => resolve({ error: `SSR worker exited with error: ${err.message}\n${err.stack}` }));
|
|
31
31
|
worker.on('exit', (code) => {
|
|
32
32
|
if (code !== 0) {
|
|
33
33
|
resolve({ error: `SSR worker stopped with exit code: ${code}` });
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.8.0-alpha.
|
|
7
|
+
"version": "0.8.0-alpha.8",
|
|
8
8
|
"homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"build/**/*.d.ts"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@lwrjs/diagnostics": "0.8.0-alpha.
|
|
37
|
-
"@lwrjs/shared-utils": "0.8.0-alpha.
|
|
36
|
+
"@lwrjs/diagnostics": "0.8.0-alpha.8",
|
|
37
|
+
"@lwrjs/shared-utils": "0.8.0-alpha.8"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@lwrjs/types": "0.8.0-alpha.
|
|
40
|
+
"@lwrjs/types": "0.8.0-alpha.8"
|
|
41
41
|
},
|
|
42
42
|
"engines": {
|
|
43
43
|
"node": ">=14.15.4 <19"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "345e7545d2d1d1f587567aacf0a072473c746d9e"
|
|
46
46
|
}
|