@teambit/ui-foundation.ui.rendering.html 0.0.0-38e5412ae35cabe897bc87f558e8995d70a34d52

package/dev-tools.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export function CrossIframeDevTools() {
+  return (
+    <script>
+      {'/* Allow to use react dev-tools inside the examples */\n'}
+      {'try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}'}
+    </script>
+  );
+}

package/dist/dev-tools.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CrossIframeDevTools(): React.JSX.Element;

package/dist/dev-tools.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrossIframeDevTools = CrossIframeDevTools;
+const react_1 = __importDefault(require("react"));
+function CrossIframeDevTools() {
+    return (react_1.default.createElement("script", null,
+        '/* Allow to use react dev-tools inside the examples */\n',
+        'try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}'));
+}
+//# sourceMappingURL=dev-tools.js.map

package/dist/dev-tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tools.js","sourceRoot":"","sources":["../dev-tools.tsx"],"names":[],"mappings":";;;;;AAEA,kDAOC;AATD,kDAA0B;AAE1B,SAAgB,mBAAmB;IACjC,OAAO,CACL;QACG,0DAA0D;QAC1D,wGAAwG,CAClG,CACV,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FullHeightStyle(): React.JSX.Element;

package/dist/full-height-style.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullHeightStyle = FullHeightStyle;
+const react_1 = __importDefault(require("react"));
+function FullHeightStyle() {
+    // return <style> {'html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; }'} </style>;
+    return react_1.default.createElement("style", null, 'body { margin: 0; }');
+}
+//# sourceMappingURL=full-height-style.js.map

package/dist/full-height-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-height-style.js","sourceRoot":"","sources":["../full-height-style.tsx"],"names":[],"mappings":";;;;;AAEA,0CAGC;AALD,kDAA0B;AAE1B,SAAgB,eAAe;IAC7B,gHAAgH;IAChH,OAAO,6CAAQ,qBAAqB,CAAS,CAAC;AAChD,CAAC"}

package/dist/html.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { fillMountPoint } from './mount-point';
+export declare const LOAD_EVENT = "_DOM_LOADED_";
+export declare const ERROR_EVENT = "_ERROR_OCCURRED_";
+export type Assets = Partial<{
+    /** page title */
+    title: string;
+    /** js files to load */
+    js: string[];
+    /** css files to load */
+    css: string[];
+    /** raw css styles */
+    style: string[];
+    /** raw data to be stored in the dom. Use Html.popAssets to retrieve it from the dom */
+    json: Record<string, string>;
+}>;
+export interface HtmlProps extends React.HtmlHTMLAttributes<HTMLHtmlElement> {
+    withDevTools?: boolean;
+    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, notifyParentOnLoad, ...rest }: HtmlProps): React.JSX.Element;
+export declare namespace Html {
+    var fillContent: typeof fillMountPoint;
+    var popAssets: typeof import("./stored-assets").popAssets;
+}
+export declare function ssrCleanup(): void;

package/dist/html.js

@@ -0,0 +1,63 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ERROR_EVENT = exports.LOAD_EVENT = void 0;
+exports.Html = Html;
+exports.ssrCleanup = ssrCleanup;
+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_';
+exports.ERROR_EVENT = '_ERROR_OCCURRED_';
+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), 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'),
+            react_1.default.createElement("meta", { charSet: "utf-8" }),
+            react_1.default.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
+            ssr && react_1.default.createElement(ssr_styles_1.SsrStyles, null),
+            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" })),
+            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 :
+            _d.map((x, idx) => react_1.default.createElement("script", { key: idx, src: x })))));
+}
+Html.fillContent = mount_point_1.fillMountPoint;
+Html.popAssets = stored_assets_1.popAssets;
+function ssrCleanup() {
+    (0, ssr_styles_1.removeSsrStyles)();
+}
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../html.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA+CA,oBAgCC;AAKD,gCAEC;AAtFD,kDAA0B;AAC1B,2CAAkD;AAClD,+CAA2D;AAC3D,mDAA0D;AAC1D,6CAA0D;AAC1D,2DAAsD;AAEzC,QAAA,UAAU,GAAG,cAAc,CAAC;AAC5B,QAAA,WAAW,GAAG,kBAAkB,CAAC;AAuB9C,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,yCAAO,GAAG,EAAE,GAAG,IAAG,CAAC,CAAS,CAAC,EAC3D,MAAA,MAAM,CAAC,GAAG;eAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,wCAAM,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,GAAG,CAAC;YACzF,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,0CAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAI,CAAC,CACpD,CACF,CACR,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,4BAAc,CAAC;AAClC,IAAI,CAAC,SAAS,GAAG,yBAAS,CAAC;AAE3B,SAAgB,UAAU;IACxB,IAAA,4BAAe,GAAE,CAAC;AACpB,CAAC"}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popAssets = exports.mountPointId = exports.MountPoint = exports.ERROR_EVENT = 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; } });
+Object.defineProperty(exports, "ERROR_EVENT", { enumerable: true, get: function () { return html_1.ERROR_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; } });
+var stored_assets_1 = require("./stored-assets");
+Object.defineProperty(exports, "popAssets", { enumerable: true, get: function () { return stored_assets_1.popAssets; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/mount-point.d.ts

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

package/dist/mount-point.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountPointId = void 0;
+exports.MountPoint = MountPoint;
+exports.fillMountPoint = fillMountPoint;
+const react_1 = __importDefault(require("react"));
+exports.mountPointId = 'root';
+const placeholderRegex = /<div id="root"><\/div>/;
+function MountPoint({ children }) {
+    return react_1.default.createElement("div", { id: exports.mountPointId }, children);
+}
+function fillMountPoint(htmlTemplate, content) {
+    const filled = htmlTemplate.replace(placeholderRegex, content);
+    return filled;
+}
+//# sourceMappingURL=mount-point.js.map

package/dist/mount-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount-point.js","sourceRoot":"","sources":["../mount-point.tsx"],"names":[],"mappings":";;;;;;AAMA,gCAEC;AAED,wCAGC;AAZD,kDAA0B;AAEb,QAAA,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC;AAElD,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAA4B;IAC/D,OAAO,uCAAK,EAAE,EAAE,oBAAY,IAAG,QAAQ,CAAO,CAAC;AACjD,CAAC;AAED,SAAgB,cAAc,CAAC,YAAoB,EAAE,OAAe;IAClE,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/preview-1753881650385.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/ssr-styles.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function SsrStyles(): React.JSX.Element;
+export declare function removeSsrStyles(): void;

package/dist/ssr-styles.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SsrStyles = SsrStyles;
+exports.removeSsrStyles = removeSsrStyles;
+const react_1 = __importDefault(require("react"));
+function SsrStyles() {
+    return (react_1.default.createElement("style", { id: "before-hydrate-styles" },
+        ".--ssr-hidden ",
+        '{',
+        "display: none;",
+        '}'));
+}
+function removeSsrStyles() {
+    var _a;
+    (_a = document.getElementById('before-hydrate-styles')) === null || _a === void 0 ? void 0 : _a.remove();
+}
+//# sourceMappingURL=ssr-styles.js.map

package/dist/ssr-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-styles.js","sourceRoot":"","sources":["../ssr-styles.tsx"],"names":[],"mappings":";;;;;AAEA,8BAQC;AAED,0CAEC;AAdD,kDAA0B;AAE1B,SAAgB,SAAS;IACvB,OAAO,CACL,yCAAO,EAAE,EAAC,uBAAuB;;QAChB,GAAG;;QAEjB,GAAG,CACE,CACT,CAAC;AACJ,CAAC;AAED,SAAgB,eAAe;;IAC7B,MAAA,QAAQ,CAAC,cAAc,CAAC,uBAAuB,CAAC,0CAAE,MAAM,EAAE,CAAC;AAC7D,CAAC"}

package/dist/stored-assets.d.ts

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

package/dist/stored-assets.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoredAssets = StoredAssets;
+exports.popAssets = popAssets;
+const react_1 = __importDefault(require("react"));
+function StoredAssets({ data }) {
+    return (react_1.default.createElement("div", { className: "state", style: { display: 'none' } }, Object.entries(data).map(([key, content]) => (
+    // TODO - we falsely assume content is html safe
+    react_1.default.createElement("script", { key: key, "data-aspect": key, type: "application/json", dangerouslySetInnerHTML: { __html: content } })))));
+}
+/** read and remove stored data from the dom */
+function popAssets() {
+    var _a;
+    const rawAssets = new Map();
+    const inDom = Array.from(document.querySelectorAll('body > .state > *'));
+    inDom.forEach((elem) => {
+        const aspectName = elem.getAttribute('data-aspect');
+        if (!aspectName)
+            return;
+        rawAssets.set(aspectName, elem.innerHTML);
+    });
+    (_a = document.querySelector('body > .state')) === null || _a === void 0 ? void 0 : _a.remove();
+    return rawAssets;
+}
+//# sourceMappingURL=stored-assets.js.map

package/dist/stored-assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stored-assets.js","sourceRoot":"","sources":["../stored-assets.tsx"],"names":[],"mappings":";;;;;AAEA,oCASC;AAGD,8BAeC;AA7BD,kDAA0B;AAE1B,SAAgB,YAAY,CAAC,EAAE,IAAI,EAAoC;IACrE,OAAO,CACL,uCAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAC9C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC;IAC5C,gDAAgD;IAChD,0CAAQ,GAAG,EAAE,GAAG,iBAAe,GAAG,EAAE,IAAI,EAAC,kBAAkB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7G,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,+CAA+C;AAC/C,SAAgB,SAAS;;IACvB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAkB,CAAC;IAE5C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAEzE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QACpD,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,SAAS,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,MAAA,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,0CAAE,MAAM,EAAE,CAAC;IAElD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/full-height-style.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export function FullHeightStyle() {
+  // return <style> {'html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; }'} </style>;
+  return <style>{'body { margin: 0; }'}</style>;
+}

package/html.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { CrossIframeDevTools } from './dev-tools';
+import { MountPoint, fillMountPoint } from './mount-point';
+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 const ERROR_EVENT = '_ERROR_OCCURRED_';
+
+export type Assets = Partial<{
+  /** page title */
+  title: string;
+  /** js files to load */
+  js: string[];
+  /** css files to load */
+  css: string[];
+  /** raw css styles */
+  style: string[];
+  /** raw data to be stored in the dom. Use Html.popAssets to retrieve it from the dom */
+  json: Record<string, string>;
+}>;
+
+export interface HtmlProps extends React.HtmlHTMLAttributes<HTMLHtmlElement> {
+  withDevTools?: boolean;
+  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 = {},
+  withDevTools = false,
+  fullHeight,
+  ssr,
+  children = <MountPoint />,
+  notifyParentOnLoad = true,
+  ...rest
+}: HtmlProps) {
+  return (
+    <html lang="en" {...rest}>
+      <head>
+        <title>{assets.title || 'bit scope'}</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        {ssr && <SsrStyles />}
+        {fullHeight && <FullHeightStyle />}
+        {withDevTools && <CrossIframeDevTools />}
+
+        {assets.style?.map((x, idx) => <style key={idx}>{x}</style>)}
+        {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} />)}
+      </body>
+    </html>
+  );
+}
+
+Html.fillContent = fillMountPoint;
+Html.popAssets = popAssets;
+
+export function ssrCleanup() {
+  removeSsrStyles();
+}

package/index.ts

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

package/mount-point.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+export const mountPointId = 'root';
+const placeholderRegex = /<div id="root"><\/div>/;
+
+export function MountPoint({ children }: { children?: ReactNode }) {
+  return <div id={mountPointId}>{children}</div>;
+}
+
+export function fillMountPoint(htmlTemplate: string, content: string) {
+  const filled = htmlTemplate.replace(placeholderRegex, content);
+  return filled;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@teambit/ui-foundation.ui.rendering.html",
+  "version": "0.0.0-38e5412ae35cabe897bc87f558e8995d70a34d52",
+  "homepage": "https://bit.cloud/teambit/ui-foundation/ui/rendering/html",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.ui-foundation",
+    "name": "ui/rendering/html",
+    "version": "38e5412ae35cabe897bc87f558e8995d70a34d52"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/ssr-styles.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export function SsrStyles() {
+  return (
+    <style id="before-hydrate-styles">
+      .--ssr-hidden {'{'}
+      display: none;
+      {'}'}
+    </style>
+  );
+}
+
+export function removeSsrStyles() {
+  document.getElementById('before-hydrate-styles')?.remove();
+}

package/stored-assets.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export function StoredAssets({ data }: { data: Record<string, string> }) {
+  return (
+    <div className="state" style={{ display: 'none' }}>
+      {Object.entries(data).map(([key, content]) => (
+        // TODO - we falsely assume content is html safe
+        <script key={key} data-aspect={key} type="application/json" dangerouslySetInnerHTML={{ __html: content }} />
+      ))}
+    </div>
+  );
+}
+
+/** read and remove stored data from the dom */
+export function popAssets() {
+  const rawAssets = new Map<string, string>();
+
+  const inDom = Array.from(document.querySelectorAll('body > .state > *'));
+
+  inDom.forEach((elem) => {
+    const aspectName = elem.getAttribute('data-aspect');
+    if (!aspectName) return;
+
+    rawAssets.set(aspectName, elem.innerHTML);
+  });
+
+  document.querySelector('body > .state')?.remove();
+
+  return rawAssets;
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}