Coveo Turbo Core
The Coveo Turbo Core library provides common utilities to facilitate turbo-charged JSUI component development.
Disclaimer: This library was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Getting Started
- Install the library into your project.
npm i @coveops/turbo-core
Decorators
Component Initialization
Coveo's component registration allows for two main strategies to load a component once the scripts and markup are present on the page: Eager and Lazy.
These decorators make it simple to choose the initialization structure without requiring boilerplate code. All of the strategies fallback to component
if the LazyInitialization
class isn't present by importing Coveo.Lazy.js
.
component
The component
decorator injects the Initialization
call. It is the equivalent of having the following code at the bottom of each component:
class CustomComponent extends Component {}
Initialization.registerAutoCreateComponent(CustomComponent);
To use:
Typescript:
import { component } from '@coveopos/turbo-core'
@component
export class CustomComponent extends Component {}
Vanilla Javascript:
const component = require('@coveopos/turbo-core').component;
const CustomComponent = (function(_super) {})(Component);
module.exports.CustomComponent = component(CustomComponent);
lazy
The lazy
decorator injects the LazyInitialization
call. It is the equivalent of having the following code at the bottom of each component:
class CustomComponent extends Component {}
LazyInitialization.registerLazyComponent(CustomComponent.ID, () => {
Initialization.registerAutoCreateComponent(CustomComponent);
return CustomComponent;
});
To use:
Typescript:
import { lazyComponent } from '@coveopos/turbo-core'
@lazyComponent
export class CustomComponent extends Component {}
Vanilla Javascript:
const lazyComponent = require('@coveopos/turbo-core').lazyComponent;
const CustomComponent = (function(_super) {})(Component);
module.exports.CustomComponent = lazyComponent(CustomComponent);
lazy-dependent
The lazy-dependent
decorator injects the LazyInitialization
call and ensures the dependent component is loaded first. It is the equivalent of having the following code at the bottom of each component:
class CustomComponent extends Component {}
LazyInitialization.registerLazyComponent(CustomComponent.ID, () => {
return load<IComponentDefinition>(dependentComponentId).then(() => {
Initialization.registerAutoCreateComponent(CustomComponent);
return CustomComponent;
});
});
The key difference in implementation, is the ID of the dependent component must be passed as an argument to the decorator.
To use:
Typescript:
import { lazyDependentComponent } from '@coveopos/turbo-core'
@lazyDependentComponent('ResultList')
export class CustomComponent extends Component {}
Vanilla Javascript:
const lazyDependentComponent = require('@coveopos/turbo-core').lazyDependentComponent;
const CustomComponent = (function(_super) {})(Component);
module.exports.CustomComponent = lazyDependentComponent('ResultList')(CustomComponent);
requires-fields
The requires-fields
decorator passes a list of fields declared in the platform to the search request:
class CustomComponent extends Component {}
Initialization.registerAutoCreateComponent(CustomComponent);
Initialization.registerComponentFields(CustomComponent.ID, ['field1', 'field2']);
To use:
Typescript:
import { requiresFields } from '@coveopos/turbo-core'
@component()
@requiresFields('field1', 'field2')
export class CustomComponent extends Component {}
Vanilla Javascript:
const component = require('@coveopos/turbo-core').component;
const requiresFields = require('@coveopos/turbo-core').requiresFields;
const CustomComponent = (function(_super) {})(Component);
module.exports.CustomComponent = requiresFields('field1', 'field2')(component(CustomComponent));
Utilities
swapVar
Merges the Coveo namespace with the namespace of the component so that exported components can be instantiated from the Coveo
global object. Declare it after your exports at the root index
file.
To use:
Typescript:
import { swapVar } from '@coveopos/turbo-core'
swapVar(this)
Vanilla Javascript:
```javascript
const swapVar = require('@coveopos/turbo-core').swapVar;
swapVar(module.exports);
Contribute
- Clone the project
- Build the code base:
npm run build
- Run
npm pack
to get a local build - Copy the resulting
.tgz
file to a test project, and install it.