2

Description

Let's say I have a class that extends LightningElement of ~450 lines of code. Now I want to split up the class into multiple files to manage the code.

I do have some helper functions that I include from a helpers file. But since the class consists of many properties I reference using this. it seems easier to me to put them into the same class.

Is it possible to split class methods into separate files in order to organize my code?

Example

import { LightningElement } from 'lwc';

export default class MyApp extends LightningElement
{
    a;
    b;
    c;
    d;
    e;

    Method1()
    {
        this.a = this.e;
        this.c = this.b + 1;

        // ...
    }

    Method2()
    {
        this.c = this.d;

        // ...
    }

    // Method 3 etc ...
}
2
  • 1
    I don't think you can do what you want in the way you want. You could, perhaps, consider using inheritance so you have a base component you extend, and split the code up that way? This approach may not work for you, of course.
    – Phil W
    Commented Dec 5, 2023 at 9:15
  • 1
    You can pass this into other components; we do that for our error handling where we combine the reduceErrors with toast generation. And you can compose smaller components inside other components. But I'll be interested to see if there are other patterns that people have used effectively.
    – Keith C
    Commented Dec 5, 2023 at 10:30

1 Answer 1

4

You have two options for splitting your code.

Super Class

In a given JS file, you can write a class, like this:

import { LightningElement } from 'lwc';

export default class BaseComponent extends LightningElement {
  sayHello() {
    console.log('Hello World');
  }
}

Now, you can use that for your other components:

import BaseComponent from 'c/baseComponent';

export default class MyDerivedComponent extends BaseComponent {
  connectedCallback() {
    this.sayHello();
  }
}

Be warned, however, that a duplicated function or property on the child will take precedence over the super class.


Mixin

You can write a mixin, which is how, for example, NavigationMixin operates.

export const Wrapper = (superclass) => class extends superclass {
  sayHello() {
    console.log('Hello World');
  }
}

And then in your component, you can use the mixin just like you would the NavigationMixin:

import { LightningElement } from 'lwc';
import { Wrapper } from 'c/wrapper';

export default MyDisplayComponent extends Wrapper(LightningElement) {
  connectedCallback() {
    this.sayHello();
  }
}

Note that you don't need separate components if you don't want. For example, you might have a component with two JS files, the main file and a helper, and you can import the helper as well:

import { Wrapper } from './helper';

Further, you can organize your files into folders within the component, so you might have:

import { Wrapper } from './utils/helper';

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .