appsmithorg · jsartisan · Nov 29, 2024 · Dec 2, 2024 · Dec 2, 2024 · Dec 2, 2024
@@ -1,15 +1,30 @@
 import kebabCase from "lodash/kebabCase";
 import isObject from "lodash/isObject";
 import type { Theme } from "../theme";
+import { objectKeys } from "@appsmith/utils";
+import type { TypographyVariantMetric } from "../token";
 
 export const cssRule = (tokens: Theme) => {
   let styles = "";
 
-  Object.values(tokens).forEach((token) => {
+  objectKeys(tokens).forEach((tokenKey) => {
+    const token = tokens[tokenKey];
+
     if (token == null) return;
 
     if (isObject(token)) {
-      Object.keys(token).forEach((key) => {
+      if (tokenKey === "typography") {
+        styles += objectKeys(token as NonNullable<Theme["typography"]>).reduce(
+          (prev: string, key) => {
+            return `${prev} --font-size-${key}: ${(token[key] as TypographyVariantMetric).fontSize};`;
+          },
+          "",
+        );
+
+        return;
+      }
+
+      objectKeys(token).forEach((key) => {
         //@ts-expect-error: type mismatch
         styles += `--${kebabCase(token[key].type)}-${kebabCase(key)}: ${
           //@ts-expect-error: type mismatch

diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/appsmithConsole.js b/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/appsmithConsole.js
@@ -0,0 +1,35 @@
+(function (nativeConsole) {
+  const postMessage = (method, args) => {
+    window.parent.postMessage(
+      {
+        type: "CUSTOM_WIDGET_CONSOLE_EVENT",
+        data: {
+          type: method,
+          args: args.map((d) => ({
+            message: d,
+          })),
+        },
+      },
+      "*",
+    );
+  };
+
+  const createProxy = (method) =>
+    new Proxy(nativeConsole[method], {
+      apply(target, _this, args) {
+        try {
+          postMessage(method, args);
+        } finally {
+          return Reflect.apply(target, _this, args);
+        }
+      },
+    });
+
+  ["log", "warn", "info"].forEach((method) => {
+    nativeConsole[method] = createProxy(method);
+  });
+
+  window.addEventListener("error", (event) => {
+    postMessage("error", [event.message]);
+  });
+})(window.console);
diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/constants.ts b/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/constants.ts
@@ -0,0 +1,18 @@
+export const CUSTOM_WIDGET_LOAD_EVENTS = {
+  STARTED: "started",
+  DOM_CONTENTED_LOADED: "DOMContentLoaded",
+  COMPLETED: "completed",
+};
+
+export const getAppsmithScriptSchema = (model: Record<string, unknown>) => ({
+  appsmith: {
+    mode: "",
+    model: model,
+    onUiChange: Function,
+    onModelChange: Function,
+    onThemeChange: Function,
+    updateModel: Function,
+    triggerEvent: Function,
+    onReady: Function,
+  },
+});
diff --git a/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/createHtmlTemplate.ts b/app/client/src/modules/ui-builder/ui/wds/WDSCustomWidget/component/createHtmlTemplate.ts
@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import css from "!!raw-loader!./reset.css";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import script from "!!raw-loader!./customWidgetscript.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import appsmithConsole from "!!raw-loader!./appsmithConsole.js";
+
+interface CreateHtmlTemplateProps {
+  cssTokens: string;
+  onConsole: boolean;
+  srcDoc: { html: string; js: string; css: string };
+}
+
+export const createHtmlTemplate = (props: CreateHtmlTemplateProps) => {
+  const { cssTokens, onConsole, srcDoc } = props;
+
+  return ` <html>
+    <head>
+      <style>${css}</style>
+      <style data-appsmith-theme>${cssTokens}</style>
+    </head>
+    <body>
+      ${onConsole ? `<script type="text/javascript">${appsmithConsole}</script>` : ""}
+      <script type="module">
+        ${script}
+        main();
+      </script>
+      ${srcDoc.html}
+      <script type="module">${srcDoc.js}</script>
+      <style>${srcDoc.css}</style>
+    </body>
+  </html>`;
+};