npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nacelle/compatibility-connector

v1.4.2

Published

Connect @nacelle/client-js-sdk to Nacelle's v2 back end with minimal code changes

Downloads

4,113

Readme

Nacelle Compatibility Connector

Connects @nacelle/client-js-sdk to Nacelle's v2 back end, and transforms data to match the Nacelle v1 data shapes used in existing Nacelle projects.

Installation

If your @nacelle/client-js-sdk version is below 3.7.1, please install the @latest version:

npm i @nacelle/client-js-sdk@latest

Once you have @nacelle/[email protected] or above installed, install both @nacelle/compatibilty-connector and @nacelle/storefront-sdk:

npm i @nacelle/compatibility-connector @nacelle/storefront-sdk

Usage

Setting Up The Connector

Provide the connector with Storefront API credentials available from the Nacelle Dashboard. Then initialize the NacelleClient SDK with the compatibility connector.

import NacelleClient from '@nacelle/client-js-sdk';
import createCompatibilityConnector from '@nacelle/compatibility-connector';

// Initialize the Compatibility Connector
const compatibilityConnector = new createCompatibilityConnector({
  endpoint: 'nacelle-v2-storefront-endpoint',
  token: 'nacelle-v2-public-storefront-token'
});

// Initialize the SDK client
const client = new NacelleClient({
  connector: compatibilityConnector
});

Alternatively, the connector can be initialized with a Nacelle v2 Storefront client instead of the endpoint and token parameters.

import NacelleClient from '@nacelle/client-js-sdk';
import Storefront from '@nacelle/storefront-sdk';
import createCompatibilityConnector from '@nacelle/compatibility-connector';

// Initialize the v2 Storefront SDK
const storefrontClient = new Storefront({
  endpoint: 'nacelle-v2-storefront-endpoint',
  token: 'nacelle-v2-public-storefront-token'
});

// Initialize the Compatibility Connector
const compatibilityConnector = new createCompatibilityConnector({
  client: storefrontClient
});

// Initialize the SDK client
const client = new NacelleClient({
  connector: compatibilityConnector
});

Optional Parameters

In addition to the required endpoint and token params or client param, you can also pass the following optional params:

  • locale - the default locale used across client.data methods. This can be overridden on-the-fly by specifying a locale in the arguments to any of the client.data methods. See the @nacelle/client-js-sdk docs for details. If no locale is provided, a default value of en-US will be set. If the client param is provided, the locale will be set to the locale of the provided client.

Fetching Data

Once the connector has been initialized and the client updated, you can fetch data using any of the @nacelle/client-js-sdk methods. Below is an example of fetching a product.

const product = await client.data.product({
  handle: 'handle-1'
});

Using with @nacelle/nacelle-nuxt-module

When using @nacelle/nacelle-nuxt-module, additional steps are required in order to use the Compatibility Connector.

First, please ensure that your version version of @nacelle/nacelle-nuxt-module is 5.0.0 or higher. If it's below 5.0.0, install the latest version of @nacelle/nacelle-nuxt-module:

npm i @nacelle/nacelle-nuxt-module@latest

In nuxt.config.js, initialize @nacelle/compatibility-connector by providing the Nacelle v2 Storefront API credentials. Next, initialize @nacelle/client-js-sdk with the compatibility connector. Then pass the SDK client to buildClient in the nacelle options. See below for an example:

import NacelleClient from '@nacelle/client-js-sdk';
import createCompatibilityConnector from '@nacelle/compatibility-connector';

// Initialize the Compatibility Connector
const compatibilityConnector = new createCompatibilityConnector({
  endpoint: 'nacelle-storefront-endpoint',
  token: 'nacelle-storefront-token',
  locale: 'en-US'
});

// Initialize the SDK client
const client = new NacelleClient({
  connector: compatibilityConnector
});

export default {
  // ...
  // Rest of nuxt.config.js settings
  // ...

  nacelle: {
    buildClient: client // The client that was initialized and updated above.
  }
};

Now whenever $nacelle is used, data will be fetched from Nacelle's v2 back end.

const product = await this.$nacelle.data.product({
  handle: 'handle-1'
});

Limitations

General

Media with the type external_video will now return as video.

Products & Collections

The fields pimSyncSource and pimSyncSourceDomain will return an empty string.

Content

The field cmsSyncSourceDomain will return an empty string.

Contentful

For content entries with relatedArticles, each of the relatedArticles will have createdAt and updatedAt values of 0.

Space

The name and domain returned with client.data.space() will be an empty string.

When using version 1.7.0 and above of @nacelle/storefront-sdk, link lists returned by client.data.space() will have their type mapped correctly from corresponding Nacelle v2 Navigation Items. If using a version of @nacelle/storefront-sdk below 1.7.0: for link lists returned with client.data.space(), absolute URLs (e.g. https://nacelle.com/some/page) will have their type set to External, while relative URLs (e.g. /path/to/some/page) will have their type set to Page.

Supported link type:

  • Blog
  • Collection
  • External
  • General
  • Page
  • Product