@swell/apps-sdk 1.0.123 → 1.0.125

package/dist/index.mjs

@@ -8030,7 +8030,7 @@ function getEasyblocksPagePropsWithConfigs(themeGlobals, allSections, pageSectio
           {
             _id: "swell_page",
             _component: "swell_page",
-            ContentSections: pageSections.filter((config) => componentSet.has(config.section.type)).map(({ section, settings, schema }) => ({
+            [SECTION_GROUP_CONTENT]: pageSections.filter((config) => componentSet.has(config.section.type)).map(({ section, settings, schema }) => ({
               _id: prepareSectionId(section.id),
               _component: section.type,
               custom_css: settings?.section?.custom_css || "",
@@ -16409,6 +16409,18 @@ function ShopifyTemplate(_instance, template) {
   );
 }
 
+// src/compatibility/drops/render.ts
+import { Drop as Drop5 } from "liquidjs";
+var RenderDrop = class extends Drop5 {
+  constructor(handler) {
+    super();
+    this.handler = handler;
+  }
+  valueOf() {
+    return this.handler();
+  }
+};
+
 // src/liquid/index.ts
 import { Liquid as Liquid3 } from "liquidjs";
 
@@ -17010,7 +17022,7 @@ function bind11(liquidSwell) {
           }
         });
       });
-      if (output) {
+      if (output && schema && settings) {
         const { shopify_compatibility: shopifyCompatibility } = liquidSwell.theme.globals;
         const tag = schema.tag || "div";
         const id = `${shopifyCompatibility ? "shopify" : "swell"}-section-${settings.id || this.fileName}`;
@@ -17035,10 +17047,16 @@ function bind12(liquidSwell) {
       this.fileName = tokenizer.readValue()?.content;
     }
     *render(_ctx, emitter) {
-      const filePath = yield liquidSwell.getSectionGroupPath(this.fileName);
-      const themeConfig = yield liquidSwell.getThemeConfig(filePath);
+      const filePath = yield liquidSwell.getSectionGroupPath(
+        this.fileName
+      );
+      const themeConfig = yield liquidSwell.getThemeConfig(
+        filePath
+      );
       try {
-        const sectionGroup = JSON54.parse(themeConfig.file_data);
+        const sectionGroup = JSON54.parse(
+          themeConfig.file_data
+        );
         const sectionConfigs = yield liquidSwell.renderPageSections(
           sectionGroup
         );
@@ -17051,6 +17069,7 @@ function bind12(liquidSwell) {
             return `<${tag} id="${id}" class="${className} ${section.class || ""}">${section.output}</${tag}>`;
           }).join("")}</div>`
         );
+        yield liquidSwell.theme.addPageSection(this.fileName, true);
       } catch (err) {
         console.warn(err);
       }
@@ -18209,8 +18228,8 @@ function arrayEqual(lhs, rhs) {
 
 // src/liquid/color.ts
 import Color from "color";
-import { Drop as Drop5 } from "liquidjs";
-var ThemeColor = class _ThemeColor extends Drop5 {
+import { Drop as Drop6 } from "liquidjs";
+var ThemeColor = class _ThemeColor extends Drop6 {
   color;
   colorValues;
   red;
@@ -18777,6 +18796,7 @@ var SwellTheme3 = class {
   globalData = {};
   // Swell-native theme settings if not using Shopify compatibility
   themeSettingFilePath = "theme/config/theme.json";
+  pageSectionGroups = null;
   constructor(swell, options = {}) {
     const { forms, resources, globals, shopifyCompatibilityClass } = options;
     this.swell = swell;
@@ -19668,9 +19688,10 @@ var SwellTheme3 = class {
     }
     return "";
   }
-  async renderLayout(data) {
-    if (this.liquidSwell.layoutName) {
-      return this.renderLayoutTemplate(this.liquidSwell.layoutName, data);
+  async renderLayout(layoutName, data) {
+    layoutName = layoutName || this.liquidSwell.layoutName;
+    if (layoutName) {
+      return this.renderLayoutTemplate(layoutName, data);
     } else {
       return data?.content_for_layout || "";
     }
@@ -19803,15 +19824,30 @@ ${this.shopifyCompatibility.getContentForHeader()}`;
     }
     return sectionConfigs;
   }
+  async addPageSection(sectionFileName, group) {
+    if (this.pageSectionGroups === null) {
+      return;
+    }
+    const { pageSectionGroups } = this;
+    const sectionSchema = await this.getSectionSchema(sectionFileName);
+    const sectionName = sectionSchema?.label || sectionFileName;
+    let sourcePath = "";
+    if (group) {
+      const sectionConfig = await this.getThemeTemplateConfigByType(
+        "sections",
+        `${sectionFileName}.json`
+      );
+      sourcePath = sectionConfig?.file_path ?? "";
+    }
+    pageSectionGroups.push({
+      prop: getSectionGroupProp(sectionFileName),
+      label: sectionName,
+      source: sourcePath,
+      group
+    });
+  }
   /**
    * Get a list of sections and section groups in a page layout.
-   *
-   * Basically we should get these section groups: `header`, `content` and `footer`.
-   * For now, section groups are searched for using regex in the page layout.
-   * There may be cases where section groups can be nested in other files,
-   * in which case they will not be visible to this function.
-   *
-   * In the future, we may use a dummy page renderer and thus extract all section groups.
    */
   async getPageSectionGroups(pageId) {
     const pageConfig = await this.getThemeTemplateConfigByType(
@@ -19822,45 +19858,31 @@ ${this.shopifyCompatibility.getContentForHeader()}`;
       return [];
     }
     const pageSchema = parseJsonConfig(pageConfig);
-    const pageLayout = pageSchema.layout || "theme";
-    const layoutConfig = await this.getThemeTemplateConfigByType(
-      "layouts",
-      `${pageLayout}.liquid`
-    );
-    if (layoutConfig === null) {
-      return [];
-    }
-    const layoutData = layoutConfig.file_data;
-    const iterator = layoutData.matchAll(
-      /\bsections '(\w.*?)'|(\bcontent_for_layout\b)/gm
-    );
-    const sections = [];
-    for (const match of iterator) {
-      if (match[1]) {
-        const sectionFileName = match[1] || match[2];
-        const sectionSchema = await this.getSectionSchema(sectionFileName);
-        const sectionName = sectionSchema?.label || sectionFileName;
-        const sectionConfig = await this.getThemeTemplateConfigByType(
-          "sections",
-          `${sectionFileName}.json`
-        );
-        sections.push({
-          prop: getSectionGroupProp(sectionFileName),
-          label: sectionName,
-          source: sectionConfig?.file_path
-        });
-      } else if (match[2]) {
-        sections.push({
+    const pageLayout = pageSchema.layout || "";
+    const pageSectionGroups = [];
+    this.pageSectionGroups = pageSectionGroups;
+    await this.renderLayout(pageLayout, {
+      content_for_layout: new RenderDrop(() => {
+        pageSectionGroups.push({
           prop: SECTION_GROUP_CONTENT,
           label: "Template",
-          source: pageConfig.file_path
+          source: pageConfig.file_path,
+          group: true
         });
+        return "";
+      })
+    });
+    this.pageSectionGroups = null;
+    return pageSectionGroups;
+  }
+  async getLayoutSectionGroups(sectionGroups, resolveSettings = true) {
+    const configs = /* @__PURE__ */ new Map();
+    for (const sectionGroup of sectionGroups) {
+      const config = await this.getThemeConfig(sectionGroup.source);
+      if (config) {
+        configs.set(config.file_path, config);
       }
     }
-    return sections;
-  }
-  async getLayoutSectionGroups(resolveSettings = true) {
-    const configs = await this.getThemeConfigsByPath("theme/sections/");
     const layoutSectionGroups = await getLayoutSectionGroups(
       configs,
       this.getTemplateSchema.bind(this)