next-sanity 13.1.6 → 13.1.7
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.
|
@@ -1,9 +1,35 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import dynamic from "next/dynamic";
|
|
4
|
+
import { startTransition, useEffect, useState } from "react";
|
|
5
|
+
const SanityLiveClientComponent = dynamic(() => import("../../SanityLive.js"), { ssr: false });
|
|
6
|
+
/**
|
|
7
|
+
* Renders `<SanityLive>` in the browser only, after hydration. `next/dynamic` with
|
|
8
|
+
* `ssr: false` keeps `@sanity/client` and the live event machinery in a separate chunk
|
|
9
|
+
* that's only downloaded if the component actually renders
|
|
10
|
+
* (https://github.com/sanity-io/next-sanity/issues/3306), and gives the Next.js bundler
|
|
11
|
+
* better optimization opportunities than `React.lazy`.
|
|
12
|
+
*
|
|
13
|
+
* The mount gate exists because `next/dynamic` implements `ssr: false` by throwing a
|
|
14
|
+
* `BailoutToCSRError` during server rendering, which leaves
|
|
15
|
+
* `<template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING">` markers (empty,
|
|
16
|
+
* client-rendered suspense boundaries) in otherwise fully prerendered HTML:
|
|
17
|
+
* https://github.com/sanity-io/next-sanity/issues/2525
|
|
18
|
+
* Gated behind the mount check the component only ever renders in the browser,
|
|
19
|
+
* where `next/dynamic` doesn't throw.
|
|
20
|
+
*/
|
|
21
|
+
function SanityLiveLazyClientComponent(props) {
|
|
22
|
+
const [mounted, setMounted] = useState(false);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
startTransition(() => setMounted(true));
|
|
25
|
+
}, []);
|
|
26
|
+
if (!mounted) return null;
|
|
27
|
+
return /* @__PURE__ */ jsx(SanityLiveClientComponent, { ...props });
|
|
28
|
+
}
|
|
3
29
|
/**
|
|
4
30
|
* @internal CAUTION: this is an internal component and does not follow semver. Using it directly is at your own risk.
|
|
5
31
|
*/
|
|
6
|
-
const SanityLive =
|
|
32
|
+
const SanityLive = SanityLiveLazyClientComponent;
|
|
7
33
|
export { SanityLive };
|
|
8
34
|
|
|
9
35
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/live/client-components/index.ts"],"sourcesContent":["'use client'\n\nimport dynamic from 'next/dynamic'\n\nimport type {SanityLiveProps} from './SanityLive'\n/**\n * @internal CAUTION: this is an internal component and does not follow semver. Using it directly is at your own risk.\n */\nexport const SanityLive: React.ComponentType<SanityLiveProps> =
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/live/client-components/SanityLiveLazy.tsx","../../../src/live/client-components/index.ts"],"sourcesContent":["'use client'\n\nimport dynamic from 'next/dynamic'\nimport {startTransition, useEffect, useState} from 'react'\n\nimport type {SanityLiveProps} from './SanityLive'\n\nconst SanityLiveClientComponent: React.ComponentType<SanityLiveProps> = dynamic(\n () => import('./SanityLive'),\n {ssr: false},\n)\n\n/**\n * Renders `<SanityLive>` in the browser only, after hydration. `next/dynamic` with\n * `ssr: false` keeps `@sanity/client` and the live event machinery in a separate chunk\n * that's only downloaded if the component actually renders\n * (https://github.com/sanity-io/next-sanity/issues/3306), and gives the Next.js bundler\n * better optimization opportunities than `React.lazy`.\n *\n * The mount gate exists because `next/dynamic` implements `ssr: false` by throwing a\n * `BailoutToCSRError` during server rendering, which leaves\n * `<template data-dgst=\"BAILOUT_TO_CLIENT_SIDE_RENDERING\">` markers (empty,\n * client-rendered suspense boundaries) in otherwise fully prerendered HTML:\n * https://github.com/sanity-io/next-sanity/issues/2525\n * Gated behind the mount check the component only ever renders in the browser,\n * where `next/dynamic` doesn't throw.\n */\nexport function SanityLiveLazyClientComponent(props: SanityLiveProps): React.JSX.Element | null {\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n // The transition keeps the previously committed UI (nothing) while the lazy chunk loads,\n // instead of committing the suspense fallback of `next/dynamic`'s own suspense boundary\n startTransition(() => setMounted(true))\n }, [])\n\n // On the server, and on the client during hydration, render nothing instead of throwing\n if (!mounted) return null\n\n return <SanityLiveClientComponent {...props} />\n}\n","'use client'\n\nimport type {SanityLiveProps} from './SanityLive'\nimport {SanityLiveLazyClientComponent} from './SanityLiveLazy'\n\n/**\n * @internal CAUTION: this is an internal component and does not follow semver. Using it directly is at your own risk.\n */\nexport const SanityLive: React.ComponentType<SanityLiveProps> = SanityLiveLazyClientComponent\n"],"mappings":";;;;AAOA,MAAM,4BAAkE,cAChE,OAAO,wBACb,EAAC,KAAK,MAAK,CACb;;;;;;;;;;;;;;;;AAiBA,SAAgB,8BAA8B,OAAkD;CAC9F,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gBAAgB;EAGd,sBAAsB,WAAW,IAAI,CAAC;CACxC,GAAG,CAAC,CAAC;CAGL,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;AAChD;;;;AC/BA,MAAa,aAAmD"}
|