@khanacademy/wonder-blocks-layout - npm Package Compare versions

Comparing version 0.0.0-PR2231-20240520192816 to 0.0.0-PR2247-20240606214024

CHANGELOG.md

 # @khanacademy/wonder-blocks-layout
 
-## 0.0.0-PR2231-20240520192816
+## 0.0.0-PR2247-20240606214024
 
+### Minor Changes
+
+-   70fbc403: Fix hydration issue in MediaLayout component
+
+## 2.0.33
+
 ### Patch Changes
 
--   Updated dependencies [e384dff4]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816
+-   Updated dependencies [5dfac06e]
+    -   @khanacademy/wonder-blocks-core@6.4.1
 
@@ -10,0 +16,0 @@ ## 2.0.32

dist/es/index.js

 import * as React from 'react';
-import { Server, View } from '@khanacademy/wonder-blocks-core';
+import { WithSSRPlaceholder, View } from '@khanacademy/wonder-blocks-core';
 import { spacing } from '@khanacademy/wonder-blocks-tokens';
@@ -120,4 +120,4 @@ import { StyleSheet } from 'aphrodite';
   }
-  isServerSide() {
-    return Server.isServerSide() || typeof window === "undefined" || !window.matchMedia;
+  isUnsupportedEnvironment() {
+    return typeof window === "undefined" || !window.matchMedia;
   }
@@ -146,3 +146,3 @@ getMockStyleSheet(mediaSize) {
   }
-  render() {
+  renderContent(initialRender) {
     const {
@@ -155,3 +155,3 @@ children,
     const queries = [...Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), ...Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), ...Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query), ...Object.values(mediaSpec).map(spec => spec.query)];
-    if (!this.isServerSide()) {
+    if (!initialRender) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
@@ -161,3 +161,3 @@ mediaQueryLists[query] = window.matchMedia(query);
     }
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
@@ -170,2 +170,7 @@ return children({
   }
+  render() {
+    return React.createElement(WithSSRPlaceholder, {
+      placeholder: () => this.renderContent(true)
+    }, () => this.renderContent(this.isUnsupportedEnvironment()));
+  }
 }
@@ -172,0 +177,0 @@ class MediaLayout extends React.Component {

dist/index.js

@@ -144,4 +144,4 @@ 'use strict';
   }
-  isServerSide() {
-    return wonderBlocksCore.Server.isServerSide() || typeof window === "undefined" || !window.matchMedia;
+  isUnsupportedEnvironment() {
+    return typeof window === "undefined" || !window.matchMedia;
   }
@@ -170,3 +170,3 @@ getMockStyleSheet(mediaSize) {
   }
-  render() {
+  renderContent(initialRender) {
     const {
@@ -179,3 +179,3 @@ children,
     const queries = [...Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), ...Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), ...Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query), ...Object.values(mediaSpec).map(spec => spec.query)];
-    if (!this.isServerSide()) {
+    if (!initialRender) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
@@ -185,3 +185,3 @@ mediaQueryLists[query] = window.matchMedia(query);
     }
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
+    const mediaSize = overrideSize || initialRender && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
@@ -194,2 +194,7 @@ return children({
   }
+  render() {
+    return React__namespace.createElement(wonderBlocksCore.WithSSRPlaceholder, {
+      placeholder: () => this.renderContent(true)
+    }, () => this.renderContent(this.isUnsupportedEnvironment()));
+  }
 }
@@ -196,0 +201,0 @@ class MediaLayout extends React__namespace.Component {

package.json

 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "0.0.0-PR2231-20240520192816",
+  "version": "0.0.0-PR2247-20240606214024",
   "design": "v1",
@@ -17,3 +17,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2231-20240520192816",
+    "@khanacademy/wonder-blocks-core": "^6.4.1",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0"
@@ -20,0 +20,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142528

increased by0.36%

Lines of code

2195

increased by0.83%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@6.4.3(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816(transitive)

• Updated@khanacademy/wonder-blocks-core@^6.4.1