After GrapresJs Upgrae to v0.20.1 plugin not working

[Palash-Mandal]

Hello @Anubhav Thanks to nice plugin.

Right now I have faced issue after upgrading grapesjs to v0.20.1 the current on. Can you please help to solve the issue in where I have made the modification run the plugin again.

Uncaught TypeError: Cannot set property defaults of #<n> which has only a getter
    at grapesjs@latest:2:930538
    at Module.It (grapesjs@latest:2:930754)
    at Function.$ [as extend] (grapesjs@latest:2:30156)
    at eval (Accordion.js?57d5:8:1)
    at eval (index.js?2af9:22:1)
    at eval (index.js?b635:106:1)
    at grapesjs@latest:2:979994
    at Array.forEach (<anonymous>)
    at Object.init (grapesjs@latest:2:979845)
    at (index):27:32

I think this is occur for this latest release https://github.com/artf/grapesjs/releases
Please help so that I can make it workable again . I have update the model error is fixed but code not working

    **### Accordions.js**

export default (dc, { defaultModel, ...config }) => {
  const type = "accordions";
  const attrAccordions = config.attrAccordions;

  dc.addType(type, {

    isComponent(el) {
      if (el.hasAttribute && el.hasAttribute(attrAccordions)) {
        return { type };
      }
    },
    model: {
      defaults: {
        ...defaultModel.prototype.defaults,
        copyable: false,
        droppable: false,
        name: "Accordions",
        "attr-accordions": config.attrAccordions,
        "attr-accordion": config.attrAccordion,
        "attr-accordion-content": config.attrAccordionContent,
        "attr-accordion-container": config.attrAccordionContainer,
        "class-accordion-active": config.classAccordionActive,
        "selector-accordion": config.selectorAccordion,

        script() {
          var i;
          var el = this;
          var attrAccordions = "[" + "{[ attr-accordions ]}" + "]";
          var attrAccordion = "[" + "{[ attr-accordion ]}" + "]";
          var attrAccordionContent =
            "[" + "{[ attr-accordion-content ]}" + "]";
          var attrAccordionContainer =
            "[" + "{[ attr-accordion-container ]}" + "]";
          var classAccordionActive = "{[ class-accordion-active ]}";
          var selectorAccordion = "{[ selector-accordion ]}";
          var body = document.body;
          var matches =
            body.matchesSelector ||
            body.webkitMatchesSelector ||
            body.mozMatchesSelector ||
            body.msMatchesSelector;

          // var hideContents = () => {
          //   var accordionContents =
          //     el.querySelectorAll(attrAccordionContent) || [];
          //   if (accordionContents) {
          //     for (i = 0; i < accordionContents.length; i++) {
          //       accordionContents[i].style.display = "none";
          //     }
          //   }
          // };

          var activeAccordion = (accordionEl) => {
            var accordionContainers =
              el.querySelectorAll(attrAccordionContainer) || [];

            if (accordionContainer) {
              for (i = 0; i < accordionContainers.length; i++) {
                var accordionContainer = accordionContainers[i];
                var newClass = accordionContainer.className
                  .replace(classAccordionActive, "")
                  .trim();

                accordionContainer.className = newClass;
              }
            }

            // hideContents();
            accordionEl.className += " " + classAccordionActive;
          };

          var deactiveAccordion = (accordionEl) => {
            var newClass = accordionEl.className
              .replace(classAccordionActive, "")
              .trim();
            accordionEl.className = newClass;
          };

          el.addEventListener("click", (e) => {
            var target = e.target;
            if (matches.call(target, attrAccordion)) {
              if (
                el.querySelector(target.getAttribute(selectorAccordion)).style
                  .display === "block"
              ) {
                deactiveAccordion(target.parentElement);
                el.querySelector(
                  target.getAttribute(selectorAccordion)
                ).style.display = "none";
              } else {
                activeAccordion(target.parentElement);
                el.querySelector(
                  target.getAttribute(selectorAccordion)
                ).style.display = "block";
              }
            }
          });
        },
        ...config.accordionsProps,
      },

      init() {
        const attrs = this.getAttributes();
        attrs[config.attrAccordions] = 1;
        this.setAttributes(attrs);
      },

      __oninitview() {
        const comps = this.model.components();
        !comps.length && comps.add(config.template);
      },
    }
  });
};

`

AccordionContent.js

`export default (dc, { defaultModel, ...config }) => { const type = "accordion-content"; const attrKey = config.attrAccordionContent; const classKey = config.classAccordionContent;

dc.addType(type, { isComponent(el) { if (el.hasAttribute && el.hasAttribute(attrKey)) { return { type }; } }, model: { defaults: { ...defaultModel.prototype.defaults, name: "Accordion Content", draggable: [${config.attrAccordionContainer}], copyable: false, removable: false, selectable: true, ...config.accordionContentProps, },

  init() {
    const attrs = this.getAttributes();
    attrs[attrKey] = 1;
    this.setAttributes(attrs);
    classKey && this.addClass(classKey);
  },
},

}); }; `

AccordionContainer.js

`export default (dc, { defaultModel, ...config }) => { const type = "accordion-container"; const attrAccordions = config.attrAccordions; const attrKey = config.attrAccordionContainer; const classKey = config.classAccordionContainer; const attrAccordionContent = config.attrAccordionContent; const selectorAccordion = config.selectorAccordion;

dc.addType(type, { isComponent(el) { if (el.hasAttribute && el.hasAttribute(attrKey)) { return { type }; } }, model: { defaults: { ...defaultModel.prototype.defaults, name: "Accordion Container", draggable: [${attrAccordions}, ${attrAccordionContent}], droppable: false, copyable: true, removable: true, ...config.accordionContainerProps, },

  init() {
    const attrs = this.getAttributes();
    attrs[attrKey] = 1;
    this.setAttributes(attrs);
    classKey && this.addClass(classKey);
    this.listenTo(this, "add", this.onAdd);
  },

  onAdd() {
    const componentModels = this.components().models;
    if (componentModels && Array.isArray(componentModels)) {
      let accordionContentID;
      for (let i = componentModels.length - 1; i >= 0; i--) {
        const model = componentModels[i];
        const attrs = model.getAttributes();
        if (attrs[`${attrAccordionContent}`]) {
          accordionContentID = model.getId();
          model.setId(accordionContentID);
        } else {
          model.addAttributes({
            [selectorAccordion]: `#${accordionContentID}`,
          });
        }
      }
    }
  },
},

}); }; `

Accordion.js

`export default (dc, { defaultModel, ...config }) => { const type = "accordion"; const attrKey = config.attrAccordion; const classKey = config.classAccordion; const selectorAccordion = config.selectorAccordion;

dc.addType(type, { isComponent(el) { if (el.hasAttribute && el.hasAttribute(attrKey)) { return { type }; } },

model: {
  defaults: {
    name: "Accordion",
    draggable: `[${config.attrAccordionContainer}]`,
    droppable: false,
    copyable: false,
    removable: false,
    selectable: false,
    ...config.accordionProps,
  },

  init() {
    const attrs = this.getAttributes();
    attrs[attrKey] = 1;
    this.setAttributes(attrs);
    classKey && this.addClass(classKey);
  },

  clone() {
    const cloned = defaultModel.prototype.clone.apply(this, arguments);
    cloned.addAttributes({ [selectorAccordion]: "" });
    return cloned;
  },
},

}); }; `

[mitcht]

Better late than never. Check out my pull request. I've found that refactoring these older grapesJS plugins isn't that hard. Too bad the developer of GrapesJS doesn't include backward compatiblity.

[snehlata08]

@mitcht i have tried your pull request but it still doesn't work. Below is the error I am getting
Uncaught TypeError: Cannot set property defaults of #<o> which has only a getter at grapes.min.js:2:355393 at Module.Vt (grapes.min.js:2:355609) at Function.q [as extend] (grapes.min.js:2:30147) at d (grapesjs-accordion.min.js:2:2579) at h (grapesjs-accordion.min.js:2:8639) at e.default (grapesjs-accordion.min.js:2:11793) at grapes.min.js:2:989344 at Array.forEach (<anonymous>) at Object.init (grapes.min.js:2:989283) at architecture-development/:179:24

I am using grapesjs version 0.21.11