@docusaurus/theme-common 3.0.0-rc.0 → 3.0.0-rc.1

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 (6) hide show
  1. package/lib/hooks/useWindowSize.d.ts +0 -3
  2. package/lib/hooks/useWindowSize.d.ts.map +1 -1
  3. package/lib/hooks/useWindowSize.js +6 -15
  4. package/lib/hooks/useWindowSize.js.map +1 -1
  5. package/package.json +11 -11
  6. package/src/hooks/useWindowSize.ts +10 -16
package/lib/hooks/useWindowSize.d.ts CHANGED
@@ -19,9 +19,6 @@ type WindowSize = keyof typeof windowSizes;
19
19
  * may need to render BOTH the mobile/desktop elements (and hide one of them
20
20
  * with mediaquery). We don't return `undefined` on purpose, to make it more
21
21
  * explicit.
22
- *
23
- * In development mode, this hook will still return `"ssr"` for one second, to
24
- * catch potential layout shifts, similar to strict mode calling effects twice.
25
22
  */
26
23
  export declare function useWindowSize(): WindowSize;
27
24
  export {};
package/lib/hooks/useWindowSize.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAe3C;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA0B1C"}
1
+ {"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAe3C;;;;;;;;;GASG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAuB1C"}
package/lib/hooks/useWindowSize.js CHANGED
@@ -14,13 +14,12 @@ const windowSizes = {
14
14
  const DesktopThresholdWidth = 996;
15
15
  function getWindowSize() {
16
16
  if (!ExecutionEnvironment.canUseDOM) {
17
- return windowSizes.ssr;
17
+ throw new Error('getWindowSize() should only be called after React hydration');
18
18
  }
19
19
  return window.innerWidth > DesktopThresholdWidth
20
20
  ? windowSizes.desktop
21
21
  : windowSizes.mobile;
22
22
  }
23
- const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
24
23
  /**
25
24
  * Gets the current window size as an enum value. We don't want it to return the
26
25
  * actual width value, so that it only re-renders once a breakpoint is crossed.
@@ -30,28 +29,20 @@ const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
30
29
  * may need to render BOTH the mobile/desktop elements (and hide one of them
31
30
  * with mediaquery). We don't return `undefined` on purpose, to make it more
32
31
  * explicit.
33
- *
34
- * In development mode, this hook will still return `"ssr"` for one second, to
35
- * catch potential layout shifts, similar to strict mode calling effects twice.
36
32
  */
37
33
  export function useWindowSize() {
38
- const [windowSize, setWindowSize] = useState(() => {
39
- if (DevSimulateSSR) {
40
- return 'ssr';
41
- }
42
- return getWindowSize();
43
- });
34
+ const [windowSize, setWindowSize] = useState(() =>
35
+ // super important to return a constant value to avoid hydration mismatch
36
+ // see https://github.com/facebook/docusaurus/issues/9379
37
+ 'ssr');
44
38
  useEffect(() => {
45
39
  function updateWindowSize() {
46
40
  setWindowSize(getWindowSize());
47
41
  }
48
- const timeout = DevSimulateSSR
49
- ? window.setTimeout(updateWindowSize, 1000)
50
- : undefined;
42
+ updateWindowSize();
51
43
  window.addEventListener('resize', updateWindowSize);
52
44
  return () => {
53
45
  window.removeEventListener('resize', updateWindowSize);
54
- clearTimeout(timeout);
55
46
  };
56
47
  }, []);
57
48
  return windowSize;
package/lib/hooks/useWindowSize.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAEpE,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;CACF,CAAC;AAIX,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,SAAS,aAAa;IACpB,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE;QACnC,OAAO,WAAW,CAAC,GAAG,CAAC;KACxB;IACD,OAAO,MAAM,CAAC,UAAU,GAAG,qBAAqB;QAC9C,CAAC,CAAC,WAAW,CAAC,OAAO;QACrB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;AACzB,CAAC;AAED,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,IAAI,IAAI,CAAC;AAEtE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAa,GAAG,EAAE;QAC5D,IAAI,cAAc,EAAE;YAClB,OAAO,KAAK,CAAC;SACd;QACD,OAAO,aAAa,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;QACjC,CAAC;QAED,MAAM,OAAO,GAAG,cAAc;YAC5B,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,EAAE,IAAI,CAAC;YAC3C,CAAC,CAAC,SAAS,CAAC;QAEd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YACvD,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,UAAU,CAAC;AACpB,CAAC"}
1
+ {"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAEpE,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;CACF,CAAC;AAIX,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,SAAS,aAAa;IACpB,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE;QACnC,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;KACH;IACD,OAAO,MAAM,CAAC,UAAU,GAAG,qBAAqB;QAC9C,CAAC,CAAC,WAAW,CAAC,OAAO;QACrB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC;AACzB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,GAAG,EAAE;IACH,yEAAyE;IACzE,yDAAyD;IACzD,KAAK,CACR,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;QACjC,CAAC;QAED,gBAAgB,EAAE,CAAC;QAEnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,UAAU,CAAC;AACpB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/theme-common",
3
- "version": "3.0.0-rc.0",
3
+ "version": "3.0.0-rc.1",
4
4
  "description": "Common code for Docusaurus themes.",
5
5
  "main": "./lib/index.js",
6
6
  "types": "./lib/index.d.ts",
@@ -30,13 +30,13 @@
30
30
  },
31
31
  "license": "MIT",
32
32
  "dependencies": {
33
- "@docusaurus/mdx-loader": "3.0.0-rc.0",
34
- "@docusaurus/module-type-aliases": "3.0.0-rc.0",
35
- "@docusaurus/plugin-content-blog": "3.0.0-rc.0",
36
- "@docusaurus/plugin-content-docs": "3.0.0-rc.0",
37
- "@docusaurus/plugin-content-pages": "3.0.0-rc.0",
38
- "@docusaurus/utils": "3.0.0-rc.0",
39
- "@docusaurus/utils-common": "3.0.0-rc.0",
33
+ "@docusaurus/mdx-loader": "3.0.0-rc.1",
34
+ "@docusaurus/module-type-aliases": "3.0.0-rc.1",
35
+ "@docusaurus/plugin-content-blog": "3.0.0-rc.1",
36
+ "@docusaurus/plugin-content-docs": "3.0.0-rc.1",
37
+ "@docusaurus/plugin-content-pages": "3.0.0-rc.1",
38
+ "@docusaurus/utils": "3.0.0-rc.1",
39
+ "@docusaurus/utils-common": "3.0.0-rc.1",
40
40
  "@types/history": "^4.7.11",
41
41
  "@types/react": "*",
42
42
  "@types/react-router-config": "*",
@@ -47,8 +47,8 @@
47
47
  "utility-types": "^3.10.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@docusaurus/core": "3.0.0-rc.0",
51
- "@docusaurus/types": "3.0.0-rc.0",
50
+ "@docusaurus/core": "3.0.0-rc.1",
51
+ "@docusaurus/types": "3.0.0-rc.1",
52
52
  "fs-extra": "^11.1.1",
53
53
  "lodash": "^4.17.21"
54
54
  },
@@ -59,5 +59,5 @@
59
59
  "engines": {
60
60
  "node": ">=18.0"
61
61
  },
62
- "gitHead": "e66dfe04d2972edce66f431908470c61340f8ffc"
62
+ "gitHead": "a51cc6fd7660d47ea08349f723cec9c017af0b4e"
63
63
  }
package/src/hooks/useWindowSize.ts CHANGED
@@ -21,15 +21,15 @@ const DesktopThresholdWidth = 996;
21
21
 
22
22
  function getWindowSize() {
23
23
  if (!ExecutionEnvironment.canUseDOM) {
24
- return windowSizes.ssr;
24
+ throw new Error(
25
+ 'getWindowSize() should only be called after React hydration',
26
+ );
25
27
  }
26
28
  return window.innerWidth > DesktopThresholdWidth
27
29
  ? windowSizes.desktop
28
30
  : windowSizes.mobile;
29
31
  }
30
32
 
31
- const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
32
-
33
33
  /**
34
34
  * Gets the current window size as an enum value. We don't want it to return the
35
35
  * actual width value, so that it only re-renders once a breakpoint is crossed.
@@ -39,32 +39,26 @@ const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
39
39
  * may need to render BOTH the mobile/desktop elements (and hide one of them
40
40
  * with mediaquery). We don't return `undefined` on purpose, to make it more
41
41
  * explicit.
42
- *
43
- * In development mode, this hook will still return `"ssr"` for one second, to
44
- * catch potential layout shifts, similar to strict mode calling effects twice.
45
42
  */
46
43
  export function useWindowSize(): WindowSize {
47
- const [windowSize, setWindowSize] = useState<WindowSize>(() => {
48
- if (DevSimulateSSR) {
49
- return 'ssr';
50
- }
51
- return getWindowSize();
52
- });
44
+ const [windowSize, setWindowSize] = useState<WindowSize>(
45
+ () =>
46
+ // super important to return a constant value to avoid hydration mismatch
47
+ // see https://github.com/facebook/docusaurus/issues/9379
48
+ 'ssr',
49
+ );
53
50
 
54
51
  useEffect(() => {
55
52
  function updateWindowSize() {
56
53
  setWindowSize(getWindowSize());
57
54
  }
58
55
 
59
- const timeout = DevSimulateSSR
60
- ? window.setTimeout(updateWindowSize, 1000)
61
- : undefined;
56
+ updateWindowSize();
62
57
 
63
58
  window.addEventListener('resize', updateWindowSize);
64
59
 
65
60
  return () => {
66
61
  window.removeEventListener('resize', updateWindowSize);
67
- clearTimeout(timeout);
68
62
  };
69
63
  }, []);
70
64