core icon indicating copy to clipboard operation
core copied to clipboard

27598 edit page v2 move communication events to proper library

Open KevinDavilaDotCMS opened this issue 1 year ago • 1 comments

Proposed Changes

  • Moved editor logic to standalone lib

Disclaimer: This PR have comments and dont have testing, descriptions and docs yet. For now we need to discuss about the best approach

For this lib, i move the editor logic (later inside react/next sdk) to editor standalone lib. For this, we need to extract the logic and create functions that can run in all Javascript frameworks (Angular, Vue, Astro, etc)

So, the types and functions must to use only Browser API

Also, the naming of the lib must to be agnostic to frameworks (Cant use "useXXX" like React)

In the editor-lib we have 2 proposals: object and standalone functions

 const dotSdkCustomerActions = {
     someAction: () => {}
}

With this approach we gain the advantage to have shorts and clearly functions names because the object name is the glibal description like

dotSdkCustomerActions.someAction()

The other approach is standalone functions like

export const dotOnSetURL = () => {};

This approach is simple, because the customer actions doesnt need any comunication between them, but the names are more verbose and must to be clear I have this proposals

export const notifyDotEditorOfSetBounds = () => {};
export const notifyDotEditorOfSetURL = () => {};

I really like this because the CustomerActions are a notifier from page to editor.

export const sendCustomerActionSetURL = () => {}; The prefix send is common, and then describe exactly that we are doing

export const dotTriggerSetURL = () => {}; The prefix trigger is common, but idk if that is exactly what we are doing

export const dotOnCustomerActionSetURL = () => {};
or
export const onCustomerActionSerURL = () => {};

The prefix on is from BrowserAPI, but the syntax refers a callback, like (when user clicks this, execute this callback), if we dont have problem with this debate, this name is so cool

export const dotOnSetURL = () => {}; Same as above, but cut CustomerAction words

KevinDavilaDotCMS avatar Feb 22 '24 04:02 KevinDavilaDotCMS

👇 Click on the image for a new way to code review

Review these changes using an interactive CodeSee Map

Legend

CodeSee Map legend

ghost avatar Feb 22 '24 04:02 ghost