@atlaskit/media-file-preview 0.11.0 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-file-preview
 
+## 0.11.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.11.1
+
+### Patch Changes
+
+- [#133477](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133477)
+  [`7e502ba2970b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e502ba2970b9) -
+  Remove media script added during SSR to prevent hydrateRoot mismatch
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/cjs/globalScope/printScript.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.printScript = exports.printFunctionCall = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var printParam = function printParam(param) {
   if (typeof param === 'string') {
     return "'".concat(param, "'");
@@ -27,6 +28,10 @@ var printFunctionCall = exports.printFunctionCall = function printFunctionCall(f
   }
   return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
 };
+
+// Removing the script tag after execution to prevent hydration
+// mismatch issues after SSR. We don't want to render different
+// HTML on the client and server https://react.dev/reference/react-dom/client/hydrateRoot
 var printScript = exports.printScript = function printScript(statements) {
-  return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
+  return (0, _platformFeatureFlags.fg)('platform_remove_media_script_after_execution') ? "(function(){\n \t\t\t ".concat(statements.join(';'), "\n  \t\t\tdocument.currentScript.remove();\n\t\t})();\n\t\t") : "(function(){\n   \t\t\t".concat(statements.join(';'), "\n \t\t})();");
 };

package/dist/es2019/globalScope/printScript.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 const printParam = param => {
   if (typeof param === 'string') {
     return `'${param}'`;
@@ -10,7 +11,14 @@ const printParam = param => {
 };
 const printParams = args => args.map(arg => printParam(arg)).join(',');
 export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
-export const printScript = statements => `(function(){
-  ${statements.join(';')}
-})();
-`;
+
+// Removing the script tag after execution to prevent hydration
+// mismatch issues after SSR. We don't want to render different
+// HTML on the client and server https://react.dev/reference/react-dom/client/hydrateRoot
+export const printScript = statements => fg('platform_remove_media_script_after_execution') ? `(function(){
+ 			 ${statements.join(';')}
+  			document.currentScript.remove();
+		})();
+		` : `(function(){
+   			${statements.join(';')}
+ 		})();`;

package/dist/esm/globalScope/printScript.js

@@ -1,4 +1,5 @@
 import _typeof from "@babel/runtime/helpers/typeof";
+import { fg } from '@atlaskit/platform-feature-flags';
 var printParam = function printParam(param) {
   if (typeof param === 'string') {
     return "'".concat(param, "'");
@@ -20,6 +21,10 @@ export var printFunctionCall = function printFunctionCall(fn) {
   }
   return "(".concat(fn.toString(), ")(").concat(printParams(args), ");");
 };
+
+// Removing the script tag after execution to prevent hydration
+// mismatch issues after SSR. We don't want to render different
+// HTML on the client and server https://react.dev/reference/react-dom/client/hydrateRoot
 export var printScript = function printScript(statements) {
-  return "(function(){\n  ".concat(statements.join(';'), "\n})();\n");
+  return fg('platform_remove_media_script_after_execution') ? "(function(){\n \t\t\t ".concat(statements.join(';'), "\n  \t\t\tdocument.currentScript.remove();\n\t\t})();\n\t\t") : "(function(){\n   \t\t\t".concat(statements.join(';'), "\n \t\t})();");
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-file-preview",
-	"version": "0.11.0",
+	"version": "0.11.2",
 	"description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,10 +34,10 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/media-client": "^32.0.0",
+		"@atlaskit/media-client": "^33.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
 		"@atlaskit/media-common": "^12.0.0",
-		"@atlaskit/media-ui": "^28.0.0",
+		"@atlaskit/media-ui": "^28.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@babel/runtime": "^7.0.0",
 		"eventemitter2": "^4.1.0",
@@ -48,13 +48,13 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
 		"@atlaskit/media-state": "^1.5.0",
 		"@atlaskit/media-test-data": "^3.0.0",
-		"@atlaskit/section-message": "^8.0.0",
-		"@atlaskit/ssr": "*",
-		"@atlaskit/visual-regression": "*",
+		"@atlaskit/section-message": "^8.2.0",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"react-dom": "^18.2.0",
@@ -96,5 +96,9 @@
 			]
 		}
 	},
-	"platform-feature-flags": {}
+	"platform-feature-flags": {
+		"platform_remove_media_script_after_execution": {
+			"type": "boolean"
+		}
+	}
 }