Legacy components

Don't create new legacy components

Legacy component support only exists for adapting existing SALVO-lite code to SALVO-TS.

Please don't use legacy components in new code - you won't get any of the benefits available with standard components, and they will be less functional with other parts of the framework. You'll also miss out on safety and convenience features like type checking.

Enabling support

Because supporting legacy components requires setting up a compatibility layer, support is disabled by default. To enable it, set enableSalvoLiteLegacySupport in src/main.ts:

typescript
// src/main.ts
main({
  // ...
  enableSalvoLiteLegacySupport: true,
})

typescript
// src/main.ts
main({
  // ...
  enableSalvoLiteLegacySupport: true,
})

caution

Because all of the normal checking and linting is disabled, legacy components are more likely to contain unnoticed errors, and more likely to have errors introduced into them as the rest of your project is developed. Be aware of what your legacy component is doing, and if it's an important piece of functionality then consider reimplementing it as a standard component.

Adapting legacy components

Components written for SALVO-Lite can be adapted to SALVO-TS by using the @LegacySalvoLiteComponent() decorator.

Legacy components are nessacrily written in plain JS, since SALVO-Lite does not use typescript. You should use the // @ts-nocheck directive at the top of the file to disable Typescript checking.

Note that legacy components should be .js files.

typescript
// components/MyLegacyComponent.js
// Remove any `import log from 'salvo-lit/log'` line if it exists
import {
    registerLegacySalvoLiteComponent,
    legacySalvoLiteLog as log
} from '@eastsideco/salvo-ts';
// Unmodified legacy component class
class CopyToClipboard {
    constructor(theme, elem) {
        this._name = this.constructor.name;
        this._elem = elem;
        this._content = elem.getAttribute('data-copy-to-clipboard');
    }
    onInit() {
        this._elem.addEventListener('click', () => {
            window.prompt('Copy to clipboard: Ctrl/Cmd+C, Enter', this._content);
            log.info(this._name, 'Copied!');
        });
        log.debug(this._name, 'Initiated', this);
    }
}
// Replace default export with this call
export default registerLegacySalvoLiteComponent({
    component: CopyToClipboard,
    selector: '[data-copy-to-clipboard]', // Required
});

typescript
// components/MyLegacyComponent.js
// Remove any `import log from 'salvo-lit/log'` line if it exists
import {
    registerLegacySalvoLiteComponent,
    legacySalvoLiteLog as log
} from '@eastsideco/salvo-ts';
// Unmodified legacy component class
class CopyToClipboard {
    constructor(theme, elem) {
        this._name = this.constructor.name;
        this._elem = elem;
        this._content = elem.getAttribute('data-copy-to-clipboard');
    }
    onInit() {
        this._elem.addEventListener('click', () => {
            window.prompt('Copy to clipboard: Ctrl/Cmd+C, Enter', this._content);
            log.info(this._name, 'Copied!');
        });
        log.debug(this._name, 'Initiated', this);
    }
}
// Replace default export with this call
export default registerLegacySalvoLiteComponent({
    component: CopyToClipboard,
    selector: '[data-copy-to-clipboard]', // Required
});

Theme object shim

The theme parameter passed to legacy components is a fake version of of SALVO-Lite's Theme class which adapts it to SALVO-TS, but it isn't perfect. Legacy components which rely on certain functionality from the theme object may not work as expected. Particularly, the theme.getComponents...() methods will never return any component instances.

Using @eastsideco/escshopify

SALVO-TS no longer uses @eastsideco/escshopify, but you can still install it if your legacy components use it:

sh
npm install --save @eastsideco/escshopify

sh
npm install --save @eastsideco/escshopify

Avoid using @eastsideco/escshopify in new code.