chore: custom widget

app/client/craco.common.config.js

@@ -112,10 +112,11 @@ module.exports = {
       ignoreWarnings: [
         function ignoreSourcemapsloaderWarnings(warning) {
           return (
-            warning.module &&
+            (warning.module &&
             warning.module.resource.includes("node_modules") &&
             warning.details &&
-            warning.details.includes("source-map-loader")
+            warning.details.includes("source-map-loader")) ||
+            warning.module.resource.includes("/node_modules/@babel/standalone/babel.js")
           );
         },
       ],

app/client/generators/widget/templates/index.js.hbs

@@ -1,32 +1,3 @@
 import Widget from "./widget";
-import IconSVG from "./icon.svg";
-
-export const CONFIG = {
-  type: Widget.getWidgetType(),
-  name: "{{name}}", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
-  iconSVG: IconSVG,
-  needsMeta: false, // Defines if this widget adds any meta properties
-  isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
-  features: {
-    dynamicHeight: {
-      sectionIndex: 0, // Index of the property pane "General" section
-      active: false,
-    },
-  },
-  defaults: {
-    widgetName: "{{name}}",
-    rows: 1,
-    columns: 3,
-    version: 1,
-  },
-  properties: {
-    derived: Widget.getDerivedPropertiesMap(),
-    default: Widget.getDefaultPropertiesMap(),
-    meta: Widget.getMetaPropertiesMap(),
-    contentConfig: Widget.getPropertyPaneContentConfig(),
-    styleConfig: Widget.getPropertyPaneStyleConfig(),
-    autocompleteDefinitions: Widget.getAutocompleteDefinitions()
-  },
-};
 
 export default Widget;

app/client/generators/widget/templates/widget/index.js.hbs

@@ -1,11 +1,43 @@
 import React from "react";
 
+import type { DerivedPropertiesMap } from "WidgetProvider/factory";
+
 import BaseWidget, { WidgetProps, WidgetState } from "widgets/BaseWidget";
-import { DerivedPropertiesMap } from "WidgetProvider/factory";
 
 import {{name}}Component from "../component";
 
+import IconSVG from "../icon.svg";
+
 class {{suffixed name}} extends BaseWidget<{{suffixed name}}Props, WidgetState> {
+  static type = "{{widgetTypeFormat name}}";
+
+  static getConfig() {
+    return {
+      name: "{{name}}", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
+      iconSVG: IconSVG,
+      needsMeta: false, // Defines if this widget adds any meta properties
+      isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
+    };
+  }
+
+  static getFeatures() {
+    return {
+      dynamicHeight: {
+        sectionIndex: 0, // Index of the property pane "General" section
+        active: false,
+      },
+    };
+  }
+
+  static getDefaults() {
+    return {
+      widgetName: "{{name}}",
+      rows: 1,
+      columns: 3,
+      version: 1,
+    };
+  }
+
   static getPropertyPaneContentConfig() {
     return [];
   }
@@ -26,15 +58,11 @@ class {{suffixed name}} extends BaseWidget<{{suffixed name}}Props, WidgetState>
     return {};
   }
 
-  getPageView() {
+  getWidgetView() {
     return <{{name}}Component />;
   }
-
-  static getWidgetType(): string {
-    return "{{widgetTypeFormat name}}";
-  }
 }
 
 export interface {{suffixed name}}Props extends WidgetProps {}
 
-export default {{suffixed name}};
+export default {{suffixed name}};

app/client/package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.441.0",
     "@aws-sdk/lib-storage": "^3.441.0",
+    "@babel/standalone": "^7.23.6",
     "@blueprintjs/core": "^3.43.0",
     "@blueprintjs/datetime": "^3.23.6",
     "@blueprintjs/icons": "3.22.0",
@@ -77,6 +78,7 @@
     "@shared/dsl": "workspace:^",
     "@tanstack/virtual-core": "^3.0.0-beta.18",
     "@tinymce/tinymce-react": "^3.13.0",
+    "@types/babel__standalone": "^7.1.7",
     "@types/google.maps": "^3.51.0",
     "@types/react-page-visibility": "^6.4.1",
     "@types/web": "^0.0.99",

app/client/src/WidgetProvider/constants.ts

@@ -80,6 +80,10 @@ export interface WidgetBaseConfiguration {
   searchTags?: string[];
   tags?: WidgetTags[];
   needsHeightForContent?: boolean;
+
+  // Flag to tell platform to disaplay this widget when search key
+  // is not matching any widget.
+  isSearchWildcard?: boolean;
 }
 
 export type WidgetDefaultProps = Partial<WidgetProps> & WidgetConfigProps;

app/client/src/WidgetProvider/factory/index.tsx

@@ -106,6 +106,7 @@ class WidgetFactory {
       iconSVG: config.iconSVG,
       isCanvas: config.isCanvas,
       needsHeightForContent: config.needsHeightForContent,
+      isSearchWildcard: config.isSearchWildcard,
     };
 
     WidgetFactory.widgetConfigMap.set(widget.type, Object.freeze(_config));

app/client/src/ce/AppRouter.tsx

@@ -14,6 +14,8 @@ import {
   BUILDER_PATCH_PATH,
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
+  CUSTOM_WIDGETS_EDITOR_ID_PATH,
+  CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM,
   PROFILE,
   SETUP,
   SIGNUP_SUCCESS_URL,
@@ -74,6 +76,7 @@ import WidgetBuilder from "pages/WidgetBuilder";
 import { getAdminSettingsPath } from "@appsmith/utils/BusinessFeatures/adminSettingsHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import CustomWidgetBuilderLoader from "pages/Editor/CustomWidgetBuilder/loader";
 
 export const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -127,6 +130,16 @@ export function Routes() {
       />
       <SentryRoute component={EditorLoader} path={BUILDER_PATH_DEPRECATED} />
       <SentryRoute component={AppViewerLoader} path={VIEWER_PATH_DEPRECATED} />
+      <SentryRoute
+        component={CustomWidgetBuilderLoader}
+        exact
+        path={CUSTOM_WIDGETS_EDITOR_ID_PATH}
+      />
+      <SentryRoute
+        component={CustomWidgetBuilderLoader}
+        exact
+        path={CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM}
+      />
       {/*
        * Note: When making changes to the order of these paths
        * Be sure to check if it is sync with the order of checks in getUpdatedRoute helper method

app/client/src/ce/constants/messages.ts

@@ -2315,4 +2315,108 @@ export const PARTIAL_IMPORT_EXPORT = {
 };
 
 export const DATASOURCE_SECURELY_TITLE = () => "Secure & fast connection";
+
+export const CUSTOM_WIDGET_FEATURE = {
+  addEvent: {
+    addCTA: () => "Add",
+    cancelCTA: () => "Cancel",
+    addEventCTA: () => "Add Event",
+    nameLabel: () => "Name",
+    errors: {
+      restricted: () => "Event name is restricted",
+      duplicate: () => "Event name already exists",
+    },
+  },
+  editSource: {
+    editSourceCTA: () => "Edit source",
+    goToSourceCTA: () => "Go to source editor",
+  },
+  builder: {
+    header: () => "Custom Widget Builder",
+    close: () => "Close",
+    connectionLost: () =>
+      "Connection lost because the custom widget was deselected. Please reselect this widget to continue editing.",
+    editor: {
+      css: {
+        contextTooltip: () => "You can use following css variables",
+        placeholder: () =>
+          "/* you can access your string properties of your model using `var(--appsmith-model-<property-name>)`*/",
+      },
+      html: {
+        placeholder: () =>
+          "<!-- no need to write html, head, body tags, it is handled by the widget -->",
+      },
+      js: {
+        placeholder: () =>
+          "// no need to write window onLoad, it is handled by the widget",
+      },
+    },
+  },
+  templateKey: {
+    blank: () => "Blank",
+    react: () => "React",
+    vue: () => "Vue",
+  },
+  template: {
+    modal: {
+      header: () => "Are you sure?",
+      body: () =>
+        "This will replace the current changes in the HTML, CSS and JS files.",
+      successCTA: () => "Replace",
+      cancelCTA: () => "Cancel",
+    },
+    buttonCTA: () => "Templates",
+    revert: () => "Revert to Original",
+  },
+  layout: {
+    tab: () => "Tabs",
+    split: () => "Splits",
+  },
+  referrences: {
+    title: () => "Referrences",
+    tooltip: {
+      open: () => "Open references",
+      close: () => "Close references",
+    },
+    liveModel: {
+      helpMessage: [
+        () => "- Use `appsmith.model` to access your model in javascript",
+        () =>
+          "- Use `appsmith.updateModel()` to update your model from javascript",
+      ],
+      label: () => "Live Model",
+    },
+    events: {
+      helpMessage: [
+        () =>
+          "- Use `appsmith.triggerEvent(&lt;EVENT_NAME&gt;)` to trigger an event",
+        () =>
+          "- `appsmith.triggerEvent()` also accepts context data as second arg",
+      ],
+      label: () => "Events",
+      emptyMessage: () =>
+        "You haven’t created any events. Return to the app editor to add events to this custom widget.",
+    },
+    help: {
+      message: () =>
+        "Learn how custom widgets work, and how to access data from the rest of your app within this widget.",
+      buttonCTA: () => "Documentation",
+    },
+  },
+  debugger: {
+    title: () => "Console",
+    emptyMessage: () => "Errors and logs will appear here",
+    helpDropdown: {
+      stackoverflow: () => "Search StackOverflow",
+    },
+  },
+  preview: {
+    eventFired: () => "Event fired:",
+    modelUpdated: () => "Model updated",
+  },
+};
+
+export const WIDGET_PANEL_EMPTY_MESSAGE = () =>
+  "We couldn’t find any widgets called";
+
 export const HTTP_PROTOCOL_INPUT_PLACEHOLDER = () => `Select HTTP Protocol`;

app/client/src/ce/constants/routes/appRoutes.ts

@@ -27,6 +27,14 @@ export const INTEGRATION_EDITOR_PATH = `/datasources/:selectedTab`;
 
 export const WIDGETS_EDITOR_BASE_PATH = `/widgets`;
 export const WIDGETS_EDITOR_ID_PATH = `${WIDGETS_EDITOR_BASE_PATH}/:widgetIds`;
+
+/*
+ * CUSTOM WIDGET BUILDER PATHS
+ */
+export const CUSTOM_WIDGETS_EDITOR_ID_PATH = `${BUILDER_PATH}${WIDGETS_EDITOR_ID_PATH}/builder`;
+export const CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM = `${BUILDER_CUSTOM_PATH}${WIDGETS_EDITOR_ID_PATH}/builder`;
+/* */
+
 export const API_EDITOR_BASE_PATH = `/api`;
 export const API_EDITOR_ID_PATH = `${API_EDITOR_BASE_PATH}/:apiId`;
 export const API_EDITOR_ID_ADD_PATH = `${API_EDITOR_BASE_PATH}/:apiId/add`;

app/client/src/ce/pages/common/AppHeader.tsx

@@ -13,6 +13,8 @@ import {
   VIEWER_CUSTOM_PATH,
   BUILDER_CUSTOM_PATH,
   BASE_URL,
+  CUSTOM_WIDGETS_EDITOR_ID_PATH,
+  CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM,
 } from "constants/routes";
 import Navigation from "pages/AppViewer/Navigation";
 import type { RouteComponentProps } from "react-router";
@@ -29,6 +31,12 @@ export const Routes = () => {
       <Route component={undefined} path={USER_AUTH_URL} />
       <Route path={SETUP} />
       <Route path={SIGNUP_SUCCESS_URL} />
+      <Route component={undefined} exact path={CUSTOM_WIDGETS_EDITOR_ID_PATH} />
+      <Route
+        component={undefined}
+        exact
+        path={CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM}
+      />
       <Route component={AppEditorHeader} path={BUILDER_PATH_DEPRECATED} />
       <Route component={Navigation} path={VIEWER_PATH_DEPRECATED} />
       <Route component={AppEditorHeader} path={BUILDER_PATH} />

app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts

@@ -16,6 +16,8 @@ export const EditorModes = {
   JAVASCRIPT: "javascript",
   GRAPHQL: "graphql",
   GRAPHQL_WITH_BINDING: "graphql-js",
+  HTMLMIXED: "htmlmixed",
+  CSS: "css",
   ...editorSQLModes,
 } as const;
 

app/client/src/components/editorComponents/CodeEditor/hintHelpers.ts

@@ -8,7 +8,6 @@ import {
   checkIfCursorInsideBinding,
   isCursorOnEmptyToken,
 } from "components/editorComponents/CodeEditor/codeEditorUtils";
-import { ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
 import { isEmpty, isString } from "lodash";
 import type { getAllDatasourceTableKeys } from "@appsmith/selectors/entitiesSelector";
 import {
@@ -45,10 +44,9 @@ export const bindingHintHelper: HintHelper = (editor: CodeMirror.Editor) => {
         CodemirrorTernService.setEntityInformation(editor, entityInformation);
       }
 
-      const entityType = entityInformation?.entityType;
       let shouldShow = false;
 
-      if (entityType === ENTITY_TYPE.JSACTION) {
+      if (additionalData.isJsEditor) {
         if (additionalData?.enableAIAssistance) {
           shouldShow = !isAISlashCommand(editor);
         } else {