@teambit/ui-foundation.ui.rendering.html 0.0.85 → 0.0.89

package/dist/dev-tools.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function CrossIframeDevTools(): JSX.Element;
+import React from 'react';
+export declare function CrossIframeDevTools(): React.JSX.Element;

package/dist/full-height-style.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function FullHeightStyle(): JSX.Element;
+import React from 'react';
+export declare function FullHeightStyle(): React.JSX.Element;

package/dist/html.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fillMountPoint } from './mount-point';
-export declare type Assets = Partial<{
+export declare const LOAD_EVENT = "_DOM_LOADED_";
+export type Assets = Partial<{
     /** page title */
     title: string;
     /** js files to load */
@@ -17,9 +18,10 @@ export interface HtmlProps extends React.HtmlHTMLAttributes<HTMLHtmlElement> {
     fullHeight?: boolean;
     assets?: Assets;
     ssr?: boolean;
+    notifyParentOnLoad?: boolean;
 }
 /** html template for the main UI, when ssr is active */
-export declare function Html({ assets, withDevTools, fullHeight, ssr, children, ...rest }: HtmlProps): JSX.Element;
+export declare function Html({ assets, withDevTools, fullHeight, ssr, children, notifyParentOnLoad, ...rest }: HtmlProps): React.JSX.Element;
 export declare namespace Html {
     var fillContent: typeof fillMountPoint;
     var popAssets: typeof import("./stored-assets").popAssets;

package/dist/html.js

@@ -14,17 +14,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ssrCleanup = exports.Html = void 0;
+exports.ssrCleanup = exports.Html = exports.LOAD_EVENT = void 0;
 const react_1 = __importDefault(require("react"));
 const dev_tools_1 = require("./dev-tools");
 const mount_point_1 = require("./mount-point");
 const stored_assets_1 = require("./stored-assets");
 const ssr_styles_1 = require("./ssr-styles");
 const full_height_style_1 = require("./full-height-style");
+exports.LOAD_EVENT = '_DOM_LOADED_';
+const NotifyParentScript = () => (react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+        __html: `
+      // only send loaded event when mounted in an iframe
+      if (window.parent && window !== window.parent) {
+          document.addEventListener('DOMContentLoaded', function() {
+            window.parent.postMessage({ event: '${exports.LOAD_EVENT}' }, '*');
+          });
+        };
+      `,
+    } }));
 /** html template for the main UI, when ssr is active */
 function Html(_a) {
     var _b, _c, _d;
-    var { assets = {}, withDevTools = false, fullHeight, ssr, children = react_1.default.createElement(mount_point_1.MountPoint, null) } = _a, rest = __rest(_a, ["assets", "withDevTools", "fullHeight", "ssr", "children"]);
+    var { assets = {}, withDevTools = false, fullHeight, ssr, children = react_1.default.createElement(mount_point_1.MountPoint, null), notifyParentOnLoad = true } = _a, rest = __rest(_a, ["assets", "withDevTools", "fullHeight", "ssr", "children", "notifyParentOnLoad"]);
     return (react_1.default.createElement("html", Object.assign({ lang: "en" }, rest),
         react_1.default.createElement("head", null,
             react_1.default.createElement("title", null, assets.title || 'bit scope'),
@@ -34,7 +45,8 @@ function Html(_a) {
             fullHeight && react_1.default.createElement(full_height_style_1.FullHeightStyle, null),
             withDevTools && react_1.default.createElement(dev_tools_1.CrossIframeDevTools, null), (_b = assets.style) === null || _b === void 0 ? void 0 :
             _b.map((x, idx) => (react_1.default.createElement("style", { key: idx }, x))), (_c = assets.css) === null || _c === void 0 ? void 0 :
-            _c.map((x, idx) => (react_1.default.createElement("link", { key: idx, href: x, rel: "stylesheet", type: "text/css" })))),
+            _c.map((x, idx) => (react_1.default.createElement("link", { key: idx, href: x, rel: "stylesheet", type: "text/css" }))),
+            notifyParentOnLoad && react_1.default.createElement(NotifyParentScript, null)),
         react_1.default.createElement("body", null,
             children,
             assets.json && react_1.default.createElement(stored_assets_1.StoredAssets, { data: assets.json }), (_d = assets.js) === null || _d === void 0 ? void 0 :

package/dist/html.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.js","sourceRoot":"","sources":["../html.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,2CAAkD;AAClD,+CAA2D;AAC3D,mDAA0D;AAC1D,6CAA0D;AAC1D,2DAAsD;AAsBtD,wDAAwD;AACxD,SAAgB,IAAI,CAAC,EAOT;;QAPS,EACnB,MAAM,GAAG,EAAE,EACX,YAAY,GAAG,KAAK,EACpB,UAAU,EACV,GAAG,EACH,QAAQ,GAAG,8BAAC,wBAAU,OAAG,OAEf,EADP,IAAI,cANY,2DAOpB,CADQ;IAEP,OAAO,CACL,sDAAM,IAAI,EAAC,IAAI,IAAK,IAAI;QACtB;YACE,6CAAQ,MAAM,CAAC,KAAK,IAAI,WAAW,CAAS;YAC5C,wCAAM,OAAO,EAAC,OAAO,GAAG;YACxB,wCAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,uCAAuC,GAAG;YAEvE,GAAG,IAAI,8BAAC,sBAAS,OAAG;YACpB,UAAU,IAAI,8BAAC,mCAAe,OAAG;YACjC,YAAY,IAAI,8BAAC,+BAAmB,OAAG,EAEvC,MAAA,MAAM,CAAC,KAAK;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7B,yCAAO,GAAG,EAAE,GAAG,IAAG,CAAC,CAAS,CAC7B,CAAC,EACD,MAAA,MAAM,CAAC,GAAG;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,wCAAM,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,GAAG,CAC7D,CAAC,CACG;QACP;YACG,QAAQ;YAER,MAAM,CAAC,IAAI,IAAI,8BAAC,4BAAY,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAGlD,MAAA,MAAM,CAAC,EAAE;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1B,0CAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAI,CAC7B,CAAC,CACG,CACF,CACR,CAAC;AACJ,CAAC;AAtCD,oBAsCC;AAED,IAAI,CAAC,WAAW,GAAG,4BAAc,CAAC;AAClC,IAAI,CAAC,SAAS,GAAG,yBAAS,CAAC;AAE3B,SAAgB,UAAU;IACxB,IAAA,4BAAe,GAAE,CAAC;AACpB,CAAC;AAFD,gCAEC"}
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../html.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,2CAAkD;AAClD,+CAA2D;AAC3D,mDAA0D;AAC1D,6CAA0D;AAC1D,2DAAsD;AAEzC,QAAA,UAAU,GAAG,cAAc,CAAC;AAuBzC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CAC/B,0CACE,uBAAuB,EAAE;QACvB,MAAM,EAAE;;;;kDAIoC,kBAAU;;;OAGrD;KACF,GACO,CACX,CAAC;AAEF,wDAAwD;AACxD,SAAgB,IAAI,CAAC,EAQT;;QARS,EACnB,MAAM,GAAG,EAAE,EACX,YAAY,GAAG,KAAK,EACpB,UAAU,EACV,GAAG,EACH,QAAQ,GAAG,8BAAC,wBAAU,OAAG,EACzB,kBAAkB,GAAG,IAAI,OAEf,EADP,IAAI,cAPY,iFAQpB,CADQ;IAEP,OAAO,CACL,sDAAM,IAAI,EAAC,IAAI,IAAK,IAAI;QACtB;YACE,6CAAQ,MAAM,CAAC,KAAK,IAAI,WAAW,CAAS;YAC5C,wCAAM,OAAO,EAAC,OAAO,GAAG;YACxB,wCAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,uCAAuC,GAAG;YAEvE,GAAG,IAAI,8BAAC,sBAAS,OAAG;YACpB,UAAU,IAAI,8BAAC,mCAAe,OAAG;YACjC,YAAY,IAAI,8BAAC,+BAAmB,OAAG,EAEvC,MAAA,MAAM,CAAC,KAAK;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7B,yCAAO,GAAG,EAAE,GAAG,IAAG,CAAC,CAAS,CAC7B,CAAC,EACD,MAAA,MAAM,CAAC,GAAG;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,wCAAM,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,GAAG,CAC7D,CAAC;YACD,kBAAkB,IAAI,8BAAC,kBAAkB,OAAG,CACxC;QACP;YACG,QAAQ;YACR,MAAM,CAAC,IAAI,IAAI,8BAAC,4BAAY,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAElD,MAAA,MAAM,CAAC,EAAE;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1B,0CAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAI,CAC7B,CAAC,CACG,CACF,CACR,CAAC;AACJ,CAAC;AAtCD,oBAsCC;AAED,IAAI,CAAC,WAAW,GAAG,4BAAc,CAAC;AAClC,IAAI,CAAC,SAAS,GAAG,yBAAS,CAAC;AAE3B,SAAgB,UAAU;IACxB,IAAA,4BAAe,GAAE,CAAC;AACpB,CAAC;AAFD,gCAEC"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Html, ssrCleanup } from './html';
+export { Html, ssrCleanup, LOAD_EVENT } from './html';
 export { MountPoint, mountPointId } from './mount-point';
 export { popAssets } from './stored-assets';
 export type { HtmlProps, Assets } from './html';

package/dist/index.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popAssets = exports.mountPointId = exports.MountPoint = exports.ssrCleanup = exports.Html = void 0;
+exports.popAssets = exports.mountPointId = exports.MountPoint = exports.LOAD_EVENT = exports.ssrCleanup = exports.Html = void 0;
 var html_1 = require("./html");
 Object.defineProperty(exports, "Html", { enumerable: true, get: function () { return html_1.Html; } });
 Object.defineProperty(exports, "ssrCleanup", { enumerable: true, get: function () { return html_1.ssrCleanup; } });
+Object.defineProperty(exports, "LOAD_EVENT", { enumerable: true, get: function () { return html_1.LOAD_EVENT; } });
 var mount_point_1 = require("./mount-point");
 Object.defineProperty(exports, "MountPoint", { enumerable: true, get: function () { return mount_point_1.MountPoint; } });
 Object.defineProperty(exports, "mountPointId", { enumerable: true, get: function () { return mount_point_1.mountPointId; } });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,+BAA0C;AAAjC,4FAAA,IAAI,OAAA;AAAE,kGAAA,UAAU,OAAA;AACzB,6CAAyD;AAAhD,yGAAA,UAAU,OAAA;AAAE,2GAAA,YAAY,OAAA;AACjC,iDAA4C;AAAnC,0GAAA,SAAS,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,+BAAsD;AAA7C,4FAAA,IAAI,OAAA;AAAE,kGAAA,UAAU,OAAA;AAAE,kGAAA,UAAU,OAAA;AACrC,6CAAyD;AAAhD,yGAAA,UAAU,OAAA;AAAE,2GAAA,YAAY,OAAA;AACjC,iDAA4C;AAAnC,0GAAA,SAAS,OAAA"}

package/dist/mount-point.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export declare const mountPointId = "root";
 export declare function MountPoint({ children }: {
     children?: ReactNode;
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function fillMountPoint(htmlTemplate: string, content: string): string;

package/dist/ssr-styles.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function SsrStyles(): JSX.Element;
+import React from 'react';
+export declare function SsrStyles(): React.JSX.Element;
 export declare function removeSsrStyles(): void;

package/dist/stored-assets.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export declare function StoredAssets({ data }: {
     data: Record<string, string>;
-}): JSX.Element;
+}): React.JSX.Element;
 /** read and remove stored data from the dom */
 export declare function popAssets(): Map<string, string>;

package/dist/tsconfig.json

@@ -22,8 +22,12 @@
         "resolveJsonModule": true
     },
     "exclude": [
+        "artifacts",
+        "public",
         "dist",
-        "package.json"
+        "node_modules",
+        "package.json",
+        "**/*.cjs"
     ],
     "include": [
         "**/*",

package/html.tsx

@@ -5,6 +5,8 @@ import { popAssets, StoredAssets } from './stored-assets';
 import { SsrStyles, removeSsrStyles } from './ssr-styles';
 import { FullHeightStyle } from './full-height-style';
 
+export const LOAD_EVENT = '_DOM_LOADED_';
+
 export type Assets = Partial<{
   /** page title */
   title: string;
@@ -23,8 +25,24 @@ export interface HtmlProps extends React.HtmlHTMLAttributes<HTMLHtmlElement> {
   fullHeight?: boolean;
   assets?: Assets;
   ssr?: boolean;
+  notifyParentOnLoad?: boolean;
 }
 
+const NotifyParentScript = () => (
+  <script
+    dangerouslySetInnerHTML={{
+      __html: `
+      // only send loaded event when mounted in an iframe
+      if (window.parent && window !== window.parent) {
+          document.addEventListener('DOMContentLoaded', function() {
+            window.parent.postMessage({ event: '${LOAD_EVENT}' }, '*');
+          });
+        };
+      `,
+    }}
+  ></script>
+);
+
 /** html template for the main UI, when ssr is active */
 export function Html({
   assets = {},
@@ -32,6 +50,7 @@ export function Html({
   fullHeight,
   ssr,
   children = <MountPoint />,
+  notifyParentOnLoad = true,
   ...rest
 }: HtmlProps) {
   return (
@@ -51,12 +70,11 @@ export function Html({
         {assets.css?.map((x, idx) => (
           <link key={idx} href={x} rel="stylesheet" type="text/css" />
         ))}
+        {notifyParentOnLoad && <NotifyParentScript />}
       </head>
       <body>
         {children}
-
         {assets.json && <StoredAssets data={assets.json} />}
-
         {/* load scripts after showing the the whole html  */}
         {assets.js?.map((x, idx) => (
           <script key={idx} src={x} />

package/index.ts

@@ -1,4 +1,4 @@
-export { Html, ssrCleanup } from './html';
+export { Html, ssrCleanup, LOAD_EVENT } from './html';
 export { MountPoint, mountPointId } from './mount-point';
 export { popAssets } from './stored-assets';
 export type { HtmlProps, Assets } from './html';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui-foundation.ui.rendering.html",
-  "version": "0.0.85",
+  "version": "0.0.89",
   "homepage": "https://bit.cloud/teambit/ui-foundation/ui/rendering/html",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui/rendering/html",
-    "version": "0.0.85"
+    "version": "0.0.89"
   },
   "dependencies": {
     "core-js": "^3.0.0"
@@ -25,6 +25,8 @@
     "react-dom": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
   "private": false,
   "engines": {
     "node": ">=12.22.0"
@@ -43,4 +45,4 @@
     "angular",
     "angular-components"
   ]
-}
+}

package/tsconfig.json

@@ -22,8 +22,12 @@
     "resolveJsonModule": true
   },
   "exclude": [
+    "artifacts",
+    "public",
     "dist",
-    "package.json"
+    "node_modules",
+    "package.json",
+    "**/*.cjs"
   ],
   "include": [
     "**/*",