Merge pull request #1301 from p3ol/feature/addons-definitions-updates

✨ feat: handle addons definitions updates
p3ol · Nov 15, 2023 · 4afee73 · 4afee73
2 parents 747fb72 + 842a169
commit 4afee73
Show file tree

Hide file tree

Showing 20 changed files with 236 additions and 107 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,10 +4,11 @@ const WARN = 1;
 module.exports = {
   extends: ['@poool/eslint-config-react'],
   rules: {
-    'react/prop-types': 0,
-    'react/jsx-uses-react': 0,
-    'react/react-in-jsx-scope': 0,
+    'react/prop-types': OFF,
+    'react/jsx-uses-react': OFF,
+    'react/react-in-jsx-scope': OFF,
     'max-len': [WARN, { code: 80, ignorePattern: '^import .*' }],
+    'n/no-callback-literal': OFF,
   },
   overrides: [{
     files: ['packages/**/*.test.js', 'packages/**/tests/**/*.js'],
@@ -26,9 +27,9 @@ module.exports = {
     },
     rules: {
       // function params are considered as unused vars
-      'no-unused-vars': 0,
-      'lines-between-class-members': 0,
-      'no-use-before-define': 0,
+      'no-unused-vars': OFF,
+      'lines-between-class-members': OFF,
+      'no-use-before-define': OFF,
     },
   }, {
     files: ['packages/strapi-plugin/**/*.js'],

diff --git a/packages/core/lib/Builder/index.d.ts b/packages/core/lib/Builder/index.d.ts
@@ -28,6 +28,7 @@ export declare class Builder extends Emitter {
   subscribe(cb: Function): Function;
   setAddons(addons: Array<AddonObject>): void;
   addAddon(addon: AddonObject): void;
+  removeAddon(addon: AddonObject): void;
   getAvailableComponents(): Array<ComponentsGroup>;
   getComponent(type: string): Component;
   getComponentDisplayableSettings(component: Component): Array<any>;

diff --git a/packages/core/lib/Builder/index.js b/packages/core/lib/Builder/index.js
@@ -18,6 +18,7 @@ export default class Builder extends Emitter {
   #texts = null;
   #store = null;
   #settings = null;
+  #addons = [];
 
   constructor ({ addons, content, options = {} } = {}) {
     super();
@@ -33,6 +34,7 @@ export default class Builder extends Emitter {
     this.#settings = new Settings({ builder: this });
 
     if (Array.isArray(addons)) {
+      this.#addons = addons;
       addons.forEach(addon => {
         this.logger.log('Initializing builder with addon:', addon);
         this.addAddon(addon);
@@ -62,10 +64,18 @@ export default class Builder extends Emitter {
   }
 
   setAddons (addons) {
-    addons?.forEach(addon => {
+    this.#addons?.forEach(addon => {
+      this.logger.log('Removing builder addon:', addon);
+      this.removeAddon(addon);
+    });
+
+    this.#addons = addons;
+    this.#addons?.forEach(addon => {
       this.logger.log('Updating builder addon:', addon);
       this.addAddon(addon);
     });
+
+    this.emit('addons.update', addons);
   }
 
   addAddon (addon) {
@@ -90,6 +100,28 @@ export default class Builder extends Emitter {
     });
   }
 
+  removeAddon (addon) {
+    addon.settings?.forEach(setting => {
+      this.#settings.remove(setting.id);
+    });
+
+    addon.overrides?.forEach(override => {
+      this.#overrides.remove(override.id);
+    });
+
+    addon.texts?.forEach(sheet => {
+      this.#texts.removeSheet(sheet.id);
+    });
+
+    addon.components?.forEach(component => {
+      this.#components.remove(component.id);
+    });
+
+    addon.fields?.forEach(field => {
+      this.#fields.remove(field.type);
+    });
+  }
+
   getAvailableComponents () {
     const { groups, defaultGroup } = this.#components.all();
 

diff --git a/packages/core/lib/Components/index.js b/packages/core/lib/Components/index.js
@@ -78,15 +78,14 @@ export default class Components extends Emitter {
     const mutateMethod = mode === 'append' ? 'push' : 'unshift';
 
     // This component is a group, add a new group
-    if (
-      component.type === Components.TYPE_GROUP &&
-      !this.hasGroup(component.id)
-    ) {
-      component = new ComponentsGroup(component);
-      component.components = component.components || [];
+    if (component.type === Components.TYPE_GROUP) {
+      if (!this.hasGroup(component.id)) {
+        component = new ComponentsGroup(component);
+        component.components = component.components || [];
 
-      this.#groups[mutateMethod](component);
-      this.emit('groups.add', component);
+        this.#groups[mutateMethod](component);
+        this.emit('groups.add', component);
+      }
 
       return;
     }
@@ -120,6 +119,7 @@ export default class Components extends Emitter {
       .findIndex(ComponentsGroup.FIND_PREDICATE(id));
 
     if (groupIndex !== -1) {
+      this.#builder.logger.log('Removing group:', this.#groups[groupIndex]);
       const group = this.#groups[groupIndex];
       this.#groups.splice(groupIndex, 1);
       this.emit('groups.remove', group);
@@ -132,6 +132,8 @@ export default class Components extends Emitter {
         .findIndex(Component.FIND_PREDICATE(id));
 
       if (index !== -1) {
+        this.#builder.logger
+          .log('Removing component:', group.components[index]);
         const component = group.components[index];
         group.components.splice(index, 1);
         this.emit('components.remove', component, group);
@@ -144,6 +146,9 @@ export default class Components extends Emitter {
       .findIndex(Component.FIND_PREDICATE(id));
 
     if (index !== -1) {
+      this.#builder.logger.log(
+        'Removing component:', this.#defaultGroup.components[index]
+      );
       const component = this.#defaultGroup.components[index];
       this.#defaultGroup.components.splice(index, 1);
       this.emit('components.remove', component, this.#defaultGroup);
@@ -167,7 +172,7 @@ export default class Components extends Emitter {
         return displayable;
       }
 
-      fields = component.settings.fields;
+      fields = component?.settings.fields;
     }
 
     for (const setting of fields) {

diff --git a/packages/core/lib/Overrides/index.d.ts b/packages/core/lib/Overrides/index.d.ts
@@ -44,6 +44,9 @@ export declare class Overrides extends Emitter {
     setting?: ComponentSettingsField,
   }): ComponentOverride | FieldOverrideObject;
 
+  /** Removes an override by its id (if available) */
+  remove (id: string): void;
+
   /** Merges overrides into a single non-typed object */
   merge(overrides: Array<ComponentOverride | FieldOverride>): object;
 

diff --git a/packages/core/lib/Overrides/index.js b/packages/core/lib/Overrides/index.js
@@ -4,6 +4,8 @@ import { ComponentOverride, FieldOverride, SettingOverride } from '../types';
 import Emitter from '../Emitter';
 
 export default class Overrides extends Emitter {
+  static FIND_PREDICATE = id => o => id ? o.id === id : null;
+
   #overrides = [];
   #builder = null;
 
@@ -14,6 +16,22 @@ export default class Overrides extends Emitter {
   }
 
   add (override) {
+    const existing = this.#overrides
+      .find(Overrides.FIND_PREDICATE(override.id));
+
+    if (existing) {
+      this.#builder?.logger.log(
+        'Override already exists, updating definition.',
+        'Old:', existing,
+        'New:', override
+      );
+
+      this.#overrides.splice(this.#overrides.indexOf(existing), 1, override);
+      this.emit('overrides.update', override);
+
+      return override;
+    }
+
     switch (override.type) {
       case 'component':
         override = new ComponentOverride(override);
@@ -69,6 +87,22 @@ export default class Overrides extends Emitter {
     }
   }
 
+  remove (id) {
+    if (!id) {
+      return;
+    }
+
+    const index = this.#overrides.findIndex(Overrides.FIND_PREDICATE(id));
+
+    if (index !== -1) {
+      this.#builder?.logger.log('Removing override:', this.#overrides[index]);
+
+      const override = this.#overrides[index];
+      this.#overrides.splice(index, 1);
+      this.emit('overrides.remove', this, override);
+    }
+  }
+
   merge (overrides) {
     return overrides.reduce((res, override) => {
       Object.assign(res, override);

diff --git a/packages/core/lib/Overrides/index.test.js.snap b/packages/core/lib/Overrides/index.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Overrides should allow to add overrides 1`] = `
 [
   FieldOverride {
+    "id": undefined,
     "props": {},
     "render": undefined,
     "targets": [],
@@ -14,6 +15,7 @@ exports[`Overrides should allow to add overrides 1`] = `
     "fields": [
       {},
     ],
+    "id": undefined,
     "render": undefined,
     "sanitize": undefined,
     "targets": [
@@ -31,6 +33,7 @@ ComponentOverride {
   "fields": [
     {},
   ],
+  "id": undefined,
   "render": undefined,
   "sanitize": undefined,
   "targets": [

diff --git a/packages/core/lib/Settings/index.js b/packages/core/lib/Settings/index.js
@@ -87,7 +87,7 @@ export default class Settings extends Emitter {
       .getSetting(setting.id || setting.key, { tabId: tab.id });
 
     if (existing) {
-      this.#builder.logger.log(
+      this.#builder?.logger.log(
         'Setting already exists, updating definition.',
         'Old:', existing,
         'New:', setting
@@ -107,6 +107,7 @@ export default class Settings extends Emitter {
       .findIndex(ComponentSettingsTab.FIND_PREDICATE(id));
 
     if (tabIndex !== -1) {
+      this.#builder?.logger.log('Removing tab:', this.#tabs[tabIndex]);
       const tab = this.#tabs[tabIndex];
       this.#tabs.splice(tabIndex, 1);
       this.emit('tabs.remove', tab);
@@ -119,6 +120,7 @@ export default class Settings extends Emitter {
         .findIndex(ComponentSettingsField.FIND_PREDICATE(id));
 
       if (index !== -1) {
+        this.#builder?.logger.log('Removing setting:', tab.fields[index]);
         const setting = tab.fields[index];
         tab.fields.splice(index, 1);
         this.emit('settings.remove', setting);

diff --git a/packages/core/lib/types.d.ts b/packages/core/lib/types.d.ts
@@ -50,6 +50,7 @@ export declare class Field {
 }
 
 export declare interface ComponentOverrideObject {
+  id: string;
   type: string;
   targets: Array<string>;
   fields: Array<any>;
@@ -61,6 +62,7 @@ export declare interface ComponentOverrideObject {
 
 export declare class ComponentOverride {
   constructor(props: object);
+  id: string;
   type: string;
   targets: Array<string>;
   fields: Array<any>;
@@ -71,6 +73,7 @@ export declare class ComponentOverride {
 }
 
 export declare interface FieldOverrideObject {
+  id: string;
   type: string;
   targets: Array<string>;
   props: object;
@@ -79,6 +82,7 @@ export declare interface FieldOverrideObject {
 
 export declare class FieldOverride {
   constructor(props: object);
+  id: string;
   type: string;
   targets: Array<string>;
   props: object;

diff --git a/packages/core/lib/types.js b/packages/core/lib/types.js
@@ -71,6 +71,7 @@ export class Field {
 export class ComponentOverride {
   constructor (props) {
     this.type = 'component';
+    this.id = props.id;
     this.targets = props.targets || [];
     this.fields = props.fields || [];
     this.render = props.render;
@@ -83,6 +84,7 @@ export class ComponentOverride {
 export class FieldOverride {
   constructor (props) {
     this.type = 'field';
+    this.id = props.id;
     this.targets = props.targets || [];
     this.render = props.render;
     this.props = props.props || {};

diff --git a/packages/react/lib/Builder/index.js b/packages/react/lib/Builder/index.js
@@ -12,7 +12,7 @@ const Builder = forwardRef(({
   className,
   defaultValue,
   value,
-  addons,
+  addons: addonsProp,
   rootBoundary,
   onChange,
   onImageUpload,
@@ -26,10 +26,10 @@ const Builder = forwardRef(({
   const innerRef = useRef();
   const catalogueRef = useRef();
   const floatingsRef = useRef();
-  const { builder, content, canUndo, canRedo } = useRootBuilder({
+  const { builder, content, addons, canUndo, canRedo } = useRootBuilder({
     content: value,
     defaultContent: defaultValue,
-    addons,
+    addons: addonsProp,
     onChange,
     ...opts,
   });
@@ -45,12 +45,13 @@ const Builder = forwardRef(({
   const getContext = useCallback(() => ({
     builder,
     content,
+    addons,
     rootBoundary: rootBoundary?.current
       ? rootBoundary : { current: rootBoundary },
     onImageUpload,
     rootRef: innerRef,
     floatingsRef,
-  }), [builder, content, rootBoundary, onImageUpload]);
+  }), [builder, content, addons, rootBoundary, onImageUpload]);
 
   const onAppend = component => {
     catalogueRef.current?.close();

diff --git a/packages/react/lib/Editable/Field.js b/packages/react/lib/Editable/Field.js
@@ -10,25 +10,25 @@ const Field = ({
   onCustomChange,
   editableRef,
 }) => {
-  const { builder, floatingsRef } = useBuilder();
+  const { builder, addons, floatingsRef } = useBuilder();
 
   const overrides = useMemo(() => ({
     field: builder.getOverride('component', element.type, {
       output: 'field', setting: fieldSetting,
     }),
     settings: builder
       .getOverride('setting', element.type, { setting: fieldSetting }),
-  }), [element, fieldSetting]);
+  }), [element, fieldSetting, addons]);
 
   const field = useMemo(() => (
     builder.getField(overrides?.field?.type || fieldSetting?.type)
-  ), [overrides, fieldSetting]);
+  ), [overrides, fieldSetting, addons]);
 
   const setting = useMemo(() => ({
     ...fieldSetting,
     ...overrides.settings,
     ...overrides.field,
-  }), [fieldSetting, overrides]);
+  }), [fieldSetting, overrides, addons]);
 
   const fieldProps = {
     id: setting.id,