Skip to content

How to implement component helpers

Pravus edited this page Sep 12, 2025 · 5 revisions

SDK Helpers are implemented for some components or some component usages so that creator's scene code has less boilerplate and their code gets easier to maintain and to implement.

There are 2 type of helpers that are normally implemented:

  • Component Definition Extended: useful to avoid boilerplate when configuring the component properties from the scene code. e.g.: Material, MeshRenderer...
  • Helper systems: useful to have systems running in the background without forcing creators to manually instantiate very common systems. e.g.: raycastSystem, pointerEventsSystem, videoEventsSystem...

Check those existent helpers as reference.

Component Helpers

Create a dedicated component helper file at packages/@dcl/ecs/src/components/extended

Add the export of the LwwComponentGetter of the extended definition at packages/@dcl/ecs/src/components/index.ts

Reference the definition extended type at packages/@dcl/ecs/src/components/types.ts

Export extended definition of the component at packages/@dcl/ecs/src/index.ts

System Helpers

Create a dedicated system helper file at packages/@dcl/ecs/src/systems

Then initialize the helper system at packages/@dcl/ecs/src/runtime/initialization/index.ts

Add the re-export of your helper system file at packages/@dcl/ecs/src/index.ts like all the other helper systems in there

A specific test for the system may need to be created at test/ecs/events/videoEventsSystem.spec.ts or other pertinent location if it's not related to events

Clone this wiki locally