@elementor/editor-components 3.33.0-180 → 3.33.0-182

package/dist/index.js

@@ -36,13 +36,16 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
+var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
-var import_store8 = require("@elementor/store");
-var import_i18n6 = require("@wordpress/i18n");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store14 = require("@elementor/store");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/components-tab/components.tsx
 var React6 = __toESM(require("react"));
-var import_editor_ui2 = require("@elementor/editor-ui");
+var import_editor_ui = require("@elementor/editor-ui");
 
 // src/components/components-tab/component-search.tsx
 var React2 = __toESM(require("react"));
@@ -96,26 +99,34 @@ var ComponentSearch = () => {
 var React5 = __toESM(require("react"));
 var import_icons3 = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
 var import_store3 = require("@elementor/store");
 
-// src/store.ts
+// src/store/store.ts
 var import_store2 = require("@elementor/store");
 
-// src/thunks.ts
+// src/store/thunks.ts
 var import_store = require("@elementor/store");
 
 // src/api.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_http_client = require("@elementor/http-client");
 var BASE_URL = "elementor/v1/components";
+var getParams = (id) => ({
+  action: "get_document_config",
+  unique_id: `document-config-${id}`,
+  data: { id }
+});
 var apiClient = {
   get: () => (0, import_http_client.httpService)().get(`${BASE_URL}`).then((res) => res.data.data),
-  create: (payload) => (0, import_http_client.httpService)().post(`${BASE_URL}`, payload).then((res) => res.data.data)
+  create: (payload) => (0, import_http_client.httpService)().post(`${BASE_URL}`, payload).then((res) => res.data.data),
+  getComponentConfig: (id) => import_editor_v1_adapters.ajax.load(getParams(id)),
+  invalidateComponentConfigCache: (id) => import_editor_v1_adapters.ajax.invalidateCache(getParams(id))
 };
 
-// src/thunks.ts
+// src/store/thunks.ts
 var createComponent = (0, import_store.__createAsyncThunk)(
   "components/create",
   async (payload) => {
@@ -128,11 +139,12 @@ var loadComponents = (0, import_store.__createAsyncThunk)("components/load", asy
   return response;
 });
 
-// src/store.ts
+// src/store/store.ts
 var initialState = {
   data: [],
   loadStatus: "idle",
-  createStatus: "idle"
+  createStatus: "idle",
+  styles: {}
 };
 var SLICE_NAME = "components";
 var slice = (0, import_store2.__createSlice)({
@@ -140,10 +152,17 @@ var slice = (0, import_store2.__createSlice)({
   initialState,
   reducers: {
     add: (state, { payload }) => {
-      state.data.push(payload);
+      state.data = { ...payload };
     },
     load: (state, { payload }) => {
       state.data = payload;
+    },
+    removeStyles(state, { payload }) {
+      const { [payload.id]: _, ...rest } = state.styles;
+      state.styles = rest;
+    },
+    addStyles: (state, { payload }) => {
+      state.styles = { ...state.styles, ...payload };
     }
   },
   extraReducers: (builder) => {
@@ -175,11 +194,14 @@ var slice = (0, import_store2.__createSlice)({
 var selectData = (state) => state[SLICE_NAME].data;
 var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectCreateStatus = (state) => state[SLICE_NAME].createStatus;
+var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectComponents = (0, import_store2.__createSelector)(selectData, (data) => data);
 var selectLoadIsPending = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "pending");
 var selectLoadIsError = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "error");
 var selectCreateIsPending = (0, import_store2.__createSelector)(selectCreateStatus, (status) => status === "pending");
 var selectCreateIsError = (0, import_store2.__createSelector)(selectCreateStatus, (status) => status === "error");
+var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
+var selectFlatStyles = (0, import_store2.__createSelector)(selectStylesDefinitions, (data) => Object.values(data).flat());
 
 // src/hooks/use-components.ts
 var useComponents = () => {
@@ -192,10 +214,8 @@ var useComponents = () => {
 var React3 = __toESM(require("react"));
 var import_editor_canvas = require("@elementor/editor-canvas");
 var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_ui = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
 
 // src/utils/get-container-for-new-element.ts
 var import_editor_elements = require("@elementor/editor-elements");
@@ -259,10 +279,6 @@ var createComponentModel = (component) => {
 // src/components/components-tab/components-item.tsx
 var ComponentItem = ({ component }) => {
   const componentModel = createComponentModel({ id: component.id, name: component.name });
-  const popupState = (0, import_ui2.usePopupState)({
-    variant: "popover",
-    disableAutoFocus: true
-  });
   const handleClick = () => {
     addComponentToPage(componentModel);
   };
@@ -280,32 +296,7 @@ var ComponentItem = ({ component }) => {
       {
         primary: /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
       }
-    )),
-    /* @__PURE__ */ React3.createElement(import_ui2.IconButton, { size: "tiny", "aria-label": "More actions", ...(0, import_ui2.bindTrigger)(popupState) }, /* @__PURE__ */ React3.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" })),
-    /* @__PURE__ */ React3.createElement(
-      import_ui2.Menu,
-      {
-        ...(0, import_ui2.bindMenu)(popupState),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        }
-      },
-      /* @__PURE__ */ React3.createElement(import_editor_ui.MenuListItem, { sx: { minWidth: "160px" } }, /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n2.__)("Rename", "elementor"))),
-      /* @__PURE__ */ React3.createElement(
-        import_editor_ui.MenuListItem,
-        {
-          onClick: () => {
-            popupState.close();
-          }
-        },
-        /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n2.__)("Delete", "elementor"))
-      )
-    )
+    ))
   );
 };
 var addComponentToPage = (model) => {
@@ -387,13 +378,13 @@ var EmptyState = () => {
       overflow: "hidden"
     },
     /* @__PURE__ */ React5.createElement(import_ui4.Icon, { fontSize: "large" }, /* @__PURE__ */ React5.createElement(import_icons3.EyeIcon, { fontSize: "large" })),
-    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n3.__)("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n3.__)(
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n2.__)("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n2.__)(
       "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
       "elementor"
     )),
     /* @__PURE__ */ React5.createElement(import_ui4.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("To create a component, first design it, then choose one of three options:", "elementor")),
     /* @__PURE__ */ React5.createElement(
       import_ui4.Typography,
       {
@@ -402,9 +393,9 @@ var EmptyState = () => {
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("3. Use the component icon in the Edit panel header", "elementor"))
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n2.__)("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n2.__)("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n2.__)("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
@@ -428,7 +419,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n3.__)("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n2.__)("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React5.createElement(
         import_ui4.Typography,
         {
@@ -455,8 +446,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React5.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n3.__)("Try something else.", "elementor")),
-    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React5.createElement(import_ui4.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n3.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n2.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React5.createElement(import_ui4.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n2.__)("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -473,26 +464,26 @@ var useFilteredComponents = () => {
 
 // src/components/components-tab/components.tsx
 var Components = () => {
-  return /* @__PURE__ */ React6.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React6.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React6.createElement(ComponentSearch, null), /* @__PURE__ */ React6.createElement(ComponentsList, null)));
+  return /* @__PURE__ */ React6.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React6.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React6.createElement(ComponentSearch, null), /* @__PURE__ */ React6.createElement(ComponentsList, null)));
 };
 
 // src/components/create-component-form/create-component-form.tsx
 var React7 = __toESM(require("react"));
 var import_react3 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/hooks/use-create-component.ts
 var import_store5 = require("@elementor/store");
 var useCreateComponent = () => {
-  const dispatch2 = (0, import_store5.__useDispatch)();
+  const dispatch4 = (0, import_store5.__useDispatch)();
   const isPending = (0, import_store5.__useSelector)(selectCreateIsPending);
   const isError = (0, import_store5.__useSelector)(selectCreateIsError);
   const createComponentAction = async (payload) => {
-    const result = await dispatch2(createComponent(payload));
+    const result = await dispatch4(createComponent(payload));
     return result.payload;
   };
   return {
@@ -553,16 +544,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema = require("@elementor/schema");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return import_schema.z.object({
     componentName: import_schema.z.string().trim().max(
       MAX_NAME_LENGTH,
-      (0, import_i18n4.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
+      (0, import_i18n3.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n4.__)("Component name already exists", "elementor")
+      message: (0, import_i18n3.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -570,9 +561,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n4.__)("Component name is required.", "elementor")
+      message: (0, import_i18n3.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n4.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n3.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -613,12 +604,12 @@ function CreateComponentForm() {
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component ID
-        message: (0, import_i18n5.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
+        message: (0, import_i18n4.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
         type: "success"
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = (0, import_i18n5.__)("Failed to save component. Please try again.", "elementor");
+      const errorMessage = (0, import_i18n4.__)("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -630,7 +621,7 @@ function CreateComponentForm() {
     setElement(null);
     setAnchorPosition(void 0);
   };
-  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
     import_ui5.Popover,
     {
       open: element !== null,
@@ -693,8 +684,8 @@ var Form = ({
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
     /* @__PURE__ */ React7.createElement(import_icons4.StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n5.__)("Save as a component", "elementor"))
-  ), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(import_ui5.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n5.__)("Name", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n4.__)("Save as a component", "elementor"))
+  ), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(import_ui5.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n4.__)("Name", "elementor"))), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(
     import_ui5.TextField,
     {
       id: "component-name",
@@ -706,7 +697,7 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n5.__)("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n4.__)("Cancel", "elementor")), /* @__PURE__ */ React7.createElement(
     import_ui5.Button,
     {
       onClick: handleSubmit,
@@ -715,7 +706,7 @@ var Form = ({
       color: "primary",
       size: "small"
     },
-    isSubmitting ? (0, import_i18n5.__)("Creating\u2026", "elementor") : (0, import_i18n5.__)("Create", "elementor")
+    isSubmitting ? (0, import_i18n4.__)("Creating\u2026", "elementor") : (0, import_i18n4.__)("Create", "elementor")
   )));
 };
 
@@ -729,12 +720,94 @@ function PopulateStore() {
   return null;
 }
 
+// src/store/components-styles-provider.ts
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_store8 = require("@elementor/store");
+var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
+  key: "components-styles",
+  priority: 100,
+  subscribe: (cb) => (0, import_store8.__subscribeWithSelector)(
+    (state) => state[SLICE_NAME],
+    () => {
+      cb();
+    }
+  ),
+  actions: {
+    all: () => {
+      return selectFlatStyles((0, import_store8.__getState)());
+    },
+    get: (id) => {
+      return selectFlatStyles((0, import_store8.__getState)()).find((style) => style.id === id) ?? null;
+    }
+  }
+});
+
+// src/store/load-components-styles.ts
+var import_store10 = require("@elementor/store");
+
+// src/utils/get-component-ids.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var getComponentIds = (elements) => {
+  return elements.flatMap((element) => {
+    const ids = [];
+    const type = element.widgetType || element.elType;
+    if (type === "e-component" && element.settings?.component_id && (0, import_editor_props2.isTransformable)(element.settings?.component_id)) {
+      ids.push(element.settings.component_id.value);
+    }
+    if (element.elements) {
+      ids.push(...getComponentIds(element.elements));
+    }
+    return ids;
+  });
+};
+
+// src/store/load-components-styles.ts
+async function loadComponentsStyles(elements) {
+  const componentIds = Array.from(new Set(getComponentIds(elements)));
+  if (!componentIds.length) {
+    return;
+  }
+  const knownComponents = selectStyles((0, import_store10.__getState)());
+  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
+  if (!unknownComponentIds.length) {
+    return;
+  }
+  addComponentStyles(unknownComponentIds);
+}
+async function addComponentStyles(ids) {
+  const newComponents = await loadStyles(ids);
+  addStyles(newComponents);
+  Object.values(newComponents).forEach(([, data]) => {
+    loadComponentsStyles(data.elements);
+  });
+}
+async function loadStyles(ids) {
+  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
+}
+function addStyles(data) {
+  const styles = Object.fromEntries(
+    data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
+  );
+  (0, import_store10.__dispatch)(slice.actions.addStyles(styles));
+}
+function extractStyles(element) {
+  return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
+}
+
+// src/store/remove-component-styles.ts
+var import_store12 = require("@elementor/store");
+function removeComponentStyles(id) {
+  apiClient.invalidateComponentConfigCache(id);
+  (0, import_store12.__dispatch)(slice.actions.removeStyles({ id }));
+}
+
 // src/init.ts
 function init() {
-  (0, import_store8.__registerSlice)(slice);
+  import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
+  (0, import_store14.__registerSlice)(slice);
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n6.__)("Components", "elementor"),
+    label: (0, import_i18n5.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -745,6 +818,13 @@ function init() {
     id: "components-populate-store",
     component: PopulateStore
   });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.commandStartEvent)("editor/documents/attach-preview"), () => {
+    const { id, config } = (0, import_editor_documents.getV1CurrentDocument)();
+    if (id) {
+      removeComponentStyles(id);
+    }
+    loadComponentsStyles(config?.elements ?? []);
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {