[IMPORTANT & URGENT] Critical update to custom components

Developer corner
1

Hello :wave:

As many of you will know already, we are currently working on the new no-code components feature.

A consequence of that new feature is that some functions currently present in the wwLib are deprecated starting today, and will be removed completely on December 6.

What does this mean for you?

If you’ve never developed or imported a custom Vue.js component in one of your WeWeb projects, this news doesn’t affect you at all :slight_smile:

If you work with custom components, you may need to update the code of some of your custom components.

We have provided a walk-through below but if you’re unsure how to do this, please do NOT hesitate to contact us through the support chat or via a direct message in the community.

We will provide hands-on support for each and everyone of you :slight_smile:

Timing: action required by December 5th

The code of custom components needs to be updated by December 5th OR before you next publish the apps that use these custom components.

On December 6th, we will remove the old functions completely. Live apps will not be affected if you have not updated your code by then as long as you don’t publish the project again.

Functions affected by the update

The functions impacted by the update are:

  • wwLib.createElement
  • wwObjectHelper.create
  • wwObjectHelper.cloneElement

IMPORTANT

If you also use the following functions in you code, please contact us via the support chat or in a private message in the community:
wwLib.createElementFromTemplate
wwObjectHelper.createFromTemplate
wwElementHelper.create
wwElementHelper.cloneElement
wwElementHelper.createFromTemplate

How to update your code

Please note that this is not a documentation for the new functions.
The documentation will come early next year and will be more complete than this tutorial.
For now, you can use WeWeb public repositories on Github to view examples of how to use these functions.

wwFrontState.sectionId

This is a parameter that is only used by the above functions and will not be needed anymore once the code is migrated.
You can remove any reference to this parameter.

wwLib.createElement

Currently, your code should look like this:

const content = wwLib.createElement(type, content, _state, parentSectionId, keepChildren)

First you need to import the function from the setup part of your component:

setup() {
    const { createElement } = wwLib.useCreateElement();
    return { createElement };
}

The function will then be available as this.createElement anywhere in the code.

The new syntax for this function is:

const content = this.createElement(type, { content, _state }, { keepChildren })

The new function returns the same thing as the old one.
Example of a migrated component: GitHub - weweb-assets/ww-progress-bar

wwObjectHelper.create

Currently, your code should look like this:

const uid = wwObjectHelper.create(type, content, _state, parentSectionId, keepChildren)

First you need to import the function from the setup part of your component:

setup() {
    const { createElement } = wwLib.useCreateElement();
    return { createElement };
}

The function will then be available as this.createElement anywhere in the code.

The new syntax for this function is:

const { uid } = this.createElement(type, { content, _state }, { keepChildren })
- or -
const content = this.createElement(type, { content, _state }, { keepChildren })
const uid = content.uid

The new function returns an object containing the uid of the new element.
This is different from the old function that was returning only the uid as a string.
Example of a migrated component: https://github.com/weweb-assets/button

wwObjectHelper.cloneElement

Currently, your code should look like this:

const uid = wwObjectHelper.cloneElement(uid, parentSectionId, name)

First you need to import the function from the setup part of your component:

setup() {
    const { cloneElement  } = wwLib.useCreateElement();
    return { cloneElement };
}

The function will then be available as this.cloneElement anywhere in the code.

The new syntax for this function is:

const { uid } = this.cloneElement(uid, { name })
- or -
const content = this.cloneElement(uid, { name })
const uid = content.uid

The new function returns an object containing the uid of the new element.
This is different from the old function that was returning only the uid as a string.
Example of a migrated component: GitHub - weweb-assets/ww-tabs

Ok, that’s it for now.

Again, if you need help with any of this, we’re here! Please do NOT hesitate to reach out to the team via the support chat or a direct message in the community.

We believe we have identified all the projects affected by this update and reached out personally to all the relevant project owners but if we have overlooked you, please do let us know so we can offer support where needed.

8 Likes
7

Hello !
Does it will change anything regarde css classes ? Or no breaking or resetting whatsoever !

8

Hi @Zacharyb,
It will not change anything for the classes !
It is basicaly just some javascript functions that are renamed and their parameters are reordered.

1 Like
9

Does this only apply if there are components used in the Dev tab of the editor? And since my project is on a Starter plan, this would not apply?

10

This is only for custom code component, and among them only a very few advanced ones

1 Like
11

Hey guys! Does this effect the “stop propagation” event? Noticed it isn’t working on my app anymore

12

This is completely unrelated @neelsarode

I’d recommend creating a new topic with information of how things are setup on your side, what used to work and seems to be working differently now so we can provide support

13

Hi did this also affect some of wewebs advanced existing components like tabs?

14

Nope. We updated all our components so they should work :slight_smile:

If you find a bug with the tabs element (or any other for that matter), please report it here so the tech team can take a look.

1 Like