Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@coveo/atomic

Package Overview
Dependencies
Maintainers
0
Versions
2187
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@coveo/atomic

A web-component library for building modern UIs interfacing with the Coveo platform

  • 3.10.1
  • beta
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

npm version Built With Stencil

Atomic

A web-component library for building modern UIs interfacing with the Coveo platform. Atomic web-components are built with Stencil. They are self-encapsulated, composable, and light-weight.

Using the library: Coveo Atomic Library Official Documentation.

Entry points

The @coveo/atomic package exposes the following entry points:

  • @coveo/atomic: exports various types and utilities used by Coveo Atomic.
  • @coveo/atomic/loader: exports the Coveo Atomic components types, as well as the defineCustomElements and setNonce utilities.
  • @coveo/atomic/themes: exports the sample Coveo Atomic themes.
  • @coveo/atomic/assets: exports the SVG icons used by Coveo Atomic.
  • @coveo/atomic/lang: exports the localization files used by Coveo Atomic.

Getting Started

Once you have cloned the repo, follow the instructions in the top-level README.md to install dependencies and link packages.

To start the project in development mode, run:

npm run start

To build the library for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Run Cypress for Atomic components

Ref: https://docs.cypress.io/

  • All the tests will need to be under folder cypress\integration

Open

To open cypress, run:

npm run e2e:watch

To run all the test, run:

npm run e2e

To run all the test in Firefox:

npm run e2e:firefox

Separate test for Hosted Search Page

To test the current Atomic build against the hosted search pages for Trials, use the following commands:

npm run e2e:hsp:watch
npm run e2e:hsp
npm run e2e:hsp:firefox

Utilities

Stencil decorators

When building Atomic components, a series of decorators are used to make development faster.

InitializeBindings & BindStateToController decorators

InitializeBindings is a utility that automatically fetches the bindings from the parent atomic-search-interface or atomic-external component. This decorator has to be applied to a property named bindings.

Important In order for a component using this decorator to render properly, it should have an internal state bound to one of the properties from bindings. This is possible by using the BindStateToController decorator along with a State decorator.

Here is a complete example:

import {
  InitializeBindings,
  InitializableComponent,
  BindStateToController,
  Bindings,
} from '@coveo/atomic';
import {ControllerState, Controller, buildController} from '@coveo/headless';
import {Component, State} from '@stencil/core';

@Component({
  tag: 'atomic-component',
})
export class AtomicComponent implements InitializableComponent {
  @InitializeBindings() public bindings!: Bindings;
  private controller!: Controller;

  // Automatically subscribes the `controllerState` to the state of the `controller`
  @BindStateToController('controller')
  @State()
  private controllerState!: ControllerState;

  // Method called after bindings are defined, where controllers should be initialized
  public initialize() {
    this.controller = buildController(this.bindings.engine);
  }

  render() {
    return [this.strings.value(), this.controllerState.value];
  }
}

ResultContext decorator

ResultContext is a utility that automatically fetches the result from the parent component's rendered atomic-result. This utility is used inside of custom result template components.

import {ResultContext} from '@coveo/atomic';
import {Component, State} from '@stencil/core';

@Component({
  tag: 'atomic-result-component',
})
export class AtomicResultComponent {
  @ResultContext() private result!: Result;

  @State() public error!: Error;

  public render() {
    return this.result.title;
  }
}

FAQs

Package last updated on 06 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc