chore: add custom widget to anvil

app/client/packages/design-system/theming/src/utils/cssRule.ts

@@ -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

app/client/src/layoutSystems/anvil/editor/styles.module.css

@@ -8,7 +8,7 @@
     This is a temporary solution. According to the product requirements, we need to make AI chat widget interactive.
     This code can be deleted when full-fledged inline editing feature is implemented.
   */
-  & [data-widget-name*="AIChat"] > * {
+  & :is([data-widget-name*="AIChat"], [data-widget-name*="Custom"]) > * {
     pointer-events: all;
   }
 }

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);

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,
+  },
+});