vike-react 0.6.24 → 0.6.26

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.
Files changed (7) hide show
  1. package/dist/hooks/useConfig/configsClientSide.d.ts +1 -0
  2. package/dist/hooks/useConfig/configsClientSide.js +2 -0
  3. package/dist/hooks/useConfig/useConfig-server.js +6 -4
  4. package/dist/integration/onRenderHtml.js +18 -2
  5. package/dist/utils/escapeJavaScriptExpression.d.ts +6 -0
  6. package/dist/utils/escapeJavaScriptExpression.js +13 -0
  7. package/package.json +1 -1
package/dist/hooks/useConfig/configsClientSide.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const configsClientSide: readonly ["title", "lang"];
package/dist/hooks/useConfig/configsClientSide.js ADDED
@@ -0,0 +1,2 @@
1
+ // Settings the client-side applies upon navigation, see applyHeadSettings(). The others are HTML-only.
2
+ export const configsClientSide = ['title', 'lang'];
package/dist/hooks/useConfig/useConfig-server.js CHANGED
@@ -5,7 +5,9 @@ import { useStreamOptional } from 'react-streaming';
5
5
  import { objectKeys } from '../../utils/objectKeys.js';
6
6
  import { includes } from '../../utils/includes.js';
7
7
  import { assert } from '../../utils/assert.js';
8
+ import { escapeJavaScriptExpression } from '../../utils/escapeJavaScriptExpression.js';
8
9
  import { configsCumulative } from './configsCumulative.js';
10
+ import { configsClientSide } from './configsClientSide.js';
9
11
  /**
10
12
  * Set configurations inside components and Vike hooks.
11
13
  *
@@ -31,13 +33,12 @@ function useConfig() {
31
33
  }
32
34
  };
33
35
  }
34
- const configsClientSide = ['title'];
35
36
  function setPageContextConfigViaHook(config, pageContext) {
36
37
  pageContext._configViaHook ?? (pageContext._configViaHook = {});
37
38
  objectKeys(config).forEach((configName) => {
38
39
  var _a;
39
40
  // Skip HTML only configs which the client-side doesn't need, saving KBs sent to the client as well as avoiding serialization errors.
40
- if (pageContext.isClientSideNavigation && !configsClientSide.includes(configName))
41
+ if (pageContext.isClientSideNavigation && !includes(configsClientSide, configName))
41
42
  return;
42
43
  if (!includes(configsCumulative, configName)) {
43
44
  // Overridable config
@@ -59,9 +60,10 @@ function setPageContextConfigViaHook(config, pageContext) {
59
60
  function apply(config, stream, pageContext) {
60
61
  const { title } = config;
61
62
  if (title) {
62
- // No need to escape the injected HTML — see https://github.com/vikejs/vike/blob/36201ddad5f5b527b244b24d548014ec86c204e4/packages/vike/src/server/runtime/renderPageServer/csp.ts#L45
63
+ // No need to escape the injected nonce attribute — see https://github.com/vikejs/vike/blob/36201ddad5f5b527b244b24d548014ec86c204e4/packages/vike/src/server/runtime/renderPageServer/csp.ts#L45
63
64
  const nonceAttr = pageContext.cspNonce ? ` nonce="${pageContext.cspNonce}"` : '';
64
- const htmlSnippet = `<script${nonceAttr}>document.title = ${JSON.stringify(title)}</script>`;
65
+ const titleJs = escapeJavaScriptExpression(JSON.stringify(title));
66
+ const htmlSnippet = `<script${nonceAttr}>document.title = ${titleJs}</script>`;
65
67
  stream.injectToStream(htmlSnippet);
66
68
  }
67
69
  }
package/dist/integration/onRenderHtml.js CHANGED
@@ -7,6 +7,9 @@ import { dangerouslySkipEscape, escapeInject } from 'vike/server';
7
7
  import { VikeReactProviderPageContext } from '../hooks/usePageContext.js';
8
8
  import { getHeadSetting } from './getHeadSetting.js';
9
9
  import { getPageElement } from './getPageElement.js';
10
+ import { configsClientSide } from '../hooks/useConfig/configsClientSide.js';
11
+ import { objectKeys } from '../utils/objectKeys.js';
12
+ import { includes } from '../utils/includes.js';
10
13
  import { isReactElement } from '../utils/isReactElement.js';
11
14
  import { getTagAttributesString } from '../utils/getTagAttributesString.js';
12
15
  import { assert } from '../utils/assert.js';
@@ -21,8 +24,9 @@ async function onRenderHtml(pageContext) {
21
24
  const headHtml = getHeadHtml(pageContext);
22
25
  const { headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd } = await getHtmlInjections(pageContext);
23
26
  const { htmlAttributesString, bodyAttributesString } = getTagAttributes(pageContext);
24
- // Not needed on the client-side, thus we remove it to save KBs sent to the client
25
- delete pageContext._configViaHook;
27
+ // Keep only what the client-side applies upon navigation, and remove the rest (HTML-only and/or
28
+ // non-serializable values such as <Head> components). https://github.com/vikejs/vike-vue/issues/233
29
+ removeServerOnlyConfigViaHook(pageContext);
26
30
  // pageContext.{pageHtmlString,pageHtmlStream} is set by renderPageToHtml() and can be overridden by user at onAfterRenderHtml()
27
31
  let pageHtmlStringOrStream =
28
32
  // Set to empty string if SSR is disabled
@@ -70,6 +74,18 @@ async function renderPageToHtml(pageContext) {
70
74
  // https://github.com/vikejs/vike/discussions/1804#discussioncomment-10394481
71
75
  await callCumulativeHooks(pageContext.config.onAfterRenderHtml, pageContext);
72
76
  }
77
+ function removeServerOnlyConfigViaHook(pageContext) {
78
+ const configViaHook = pageContext._configViaHook;
79
+ if (!configViaHook)
80
+ return;
81
+ objectKeys(configViaHook).forEach((configName) => {
82
+ if (!includes(configsClientSide, configName))
83
+ delete configViaHook[configName];
84
+ });
85
+ // Remove it altogether if there isn't anything left, saving KBs sent to the client
86
+ if (objectKeys(configViaHook).length === 0)
87
+ delete pageContext._configViaHook;
88
+ }
73
89
  function getHeadHtml(pageContext) {
74
90
  pageContext._headAlreadySet = true;
75
91
  const favicon = getHeadSetting('favicon', pageContext);
package/dist/utils/escapeJavaScriptExpression.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Escapes a JavaScript expression (e.g. the output of `JSON.stringify()`) so that it can be safely embedded inside an inline `<script>`.
3
+ *
4
+ * https://github.com/vikejs/vike/issues/3463
5
+ */
6
+ export declare function escapeJavaScriptExpression(js: string): string;
package/dist/utils/escapeJavaScriptExpression.js ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Escapes a JavaScript expression (e.g. the output of `JSON.stringify()`) so that it can be safely embedded inside an inline `<script>`.
3
+ *
4
+ * https://github.com/vikejs/vike/issues/3463
5
+ */
6
+ export function escapeJavaScriptExpression(js) {
7
+ return (js
8
+ // `<` is escaped so that the HTML parser never encounters `</script>` nor `<!--` inside the `<script>` — the JavaScript parser decodes `\u003c` back to `<`. (The input must be a JavaScript expression whose `<` only ever occurs inside string literals, such as `JSON.stringify()` output.)
9
+ .replace(/</g, '\\u003c')
10
+ // U+2028/U+2029 are escaped because a raw U+2028/U+2029 inside a JavaScript string literal is a syntax error in pre-ES2019 browsers.
11
+ .replace(/\u2028/g, '\\u2028')
12
+ .replace(/\u2029/g, '\\u2029'));
13
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vike-react",
3
- "version": "0.6.24",
3
+ "version": "0.6.26",
4
4
  "repository": "https://github.com/vikejs/vike-react",
5
5
  "type": "module",
6
6
  "exports": {