open-index/open-npm huggingface dataset:
npm package: @shopify/splash
Description: Adds a comment to a pull request with areas of your code to test
Author: Shopify
Latest version: 0.0.14

# `splash` (beta)

`splash` is utilities library that helps with parsing and building a dependency graph of a Shopify JS project

It is used by consuming projects to identify dependencies and aid in manual testing.

## Types

### Dependencies

```ts
{
  fileName: string;
  dependencies: string[];
}[];
```

## API

### getDependencies(codebaseGlob: string, ignoreGlob: string, fileGlobs: string[]): Promise\<Dependencies\>

This is the main function of the library. It will build a dependency graph for all files within the `codebaseGlob`, ignoring the files in `ignoreGlob`, and then build the dependency tree for all files in `fileGlobs`. It returns a promise that returns an array of objects containing the dependencies for each of the files in `fileGlobs`.

`codebaseGlob: string`: A glob for the codebase that you want to build the dependency graph for. Example: `src/**/*.tsx`

`ignoreGlob: string`: A glob for the codebase that you want to build the dependency graph for. Example `src/**/test/*`

`fileGlobs: string[]`: A list of globs for all the files to build the dependency tree for. Example: `['src/Button/Button.tsx', 'src/List/List.tsx']`

### getGitStagedFiles(scope: string): Promise<string[]>

This is a helper function to run Splash locally. It runs `git status` and outputs a list of files modified. Call it, and use its output as the `fileGlobs` input for the `getDependencies` function.

`scope: string`: A filepath to filter filenames. For example, if the scope is `src/` then only files starting with `src/` would be included in the output. This means the file `.eslintrc` would be filtered from the output. Example: `src/`
npm package: @shopify/statsd
Description: An opinionated StatsD client for Shopify Node.js servers and other StatsD utilities
Author: Shopify Inc.
Latest version: 4.5.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/statsd`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fstatsd.svg)](https://badge.fury.io/js/%40shopify%2Fstatsd.svg)

An opinionated StatsD client for Shopify Node.js servers and other StatsD utilities.

## Installation

```bash
yarn add @shopify/statsd
```

## Usage

### Client

Create a StatsD client with the following:

```javascript
import {StatsDClient} from '@shopify/statsd';

const statsdClient = new StatsDClient({
  host: 'some-statsd-host.com',
  port: '8125',
  prefix: 'AppName',
  suffix: 'AppSuffix',
  globalTags: {hello: 'world'},
});
```

#### `distribution`

Tracks the statistical distribution of a set of values across your infrastructure.

```javascript
statsdClient.distribution(
  'navigationComplete',
  100, // in milliseconds
  ['navigation', 'complete', 'performance'], // user-defined tags to go with the data
);
```

#### `timing`

Represents the timing stat

```javascript
statsdClient.timing(
  'request_duration',
  100, // in milliseconds
  [], // user-defined tags to go with the data
);
```

#### `gauge`

Represents the gauge stat

```javascript
statsdClient.gauge(
  'my_gauge',
  123.45, // value
  [], // user-defined tags to go with the data
);
```

#### `increment`

Increments a stat by 1.

```javascript
statsdClient.increment(
  'myCounter',
  ['navigation', 'complete', 'performance'], // user-defined tags to go with the data
);
```

Increment can also be supplied a value to increment the metric by.

```javascript
statsdClient.increment(
  'myCounter',
  ['navigation', 'complete', 'performance'], // user-defined tags to go with the data,
  {}, // additional options
  4, // value to increment by
);
```

#### `close`

Close statsd client.
This will ensure all stats are sent and stop statsd from doing anything more.

```javascript
statsdClient.close();
```

#### `childClient`

Create a child client and add more context to the client.
The globalTags will be merged.
The prefix and suffix will be concatenated like in this example.

```javascript
statsdClient.childClient({
  prefix: '.NewPrefix',
  suffix: '.NewSuffix',
  globalTags: {foo: 'bar'},
});
```

In this example the prefix will be `AppName.NewPrefix`, the suffix will be `AppSuffix.NewSuffix` and the globalTags will be `{hello: 'world', foo: 'bar'}`.
npm package: @shopify/stylelint-plugin
Description: Shopify's stylelint rules and config
Latest version: 15.0.2

# `@shopify/stylelint-plugin`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fstylelint-plugin.svg)](https://badge.fury.io/js/%40shopify%2Fstylelint-plugin.svg)

Shopify's stylelint rules and config

## Installation

Install [stylelint](https://stylelint.io/) and `@shopify/stylelint-plugin`:

**With Yarn**

```
yarn add --dev stylelint @shopify/stylelint-plugin
```

**With npm**

```
npm install stylelint @shopify/stylelint-plugin --save-dev
```

## Usage

Shopify’s stylelint rules come bundled in `@shopify/stylelint-plugin`. To enable these rules, add a `stylelint` property in your `package.json`. See the [stylelint configuration docs](https://stylelint.io/user-guide/configuration/) for more details.

```
"stylelint": {
  "extends": ["@shopify/stylelint-plugin"]
}
```

Now you can run stylelint by adding the following linting script to your `package.json`. See the [stylelint CLI docs](https://stylelint.io/user-guide/cli/) for more details.

```
"scripts": {
  "stylelint": "stylelint 'src/**/*.scss'"
}
```

Run it:

**With Yarn**

```
yarn run stylelint
```

**With npm**

```
npm run stylelint
```

## Prettier

This config also includes a prettier config which can be extended to format `.scss`.
Using the [`stylelint-prettier`](https://github.com/bpscott/stylelint-prettier) plugin, prettier changes are exposed as stylelint rule violations.

Install [`prettier`](https://github.com/prettier/prettier):

```
$ yarn add --dev prettier
```

Extend the config in your `package.json`:

```json
"stylelint": {
  "extends": [
    "@shopify/stylelint-plugin/prettier"
  ]
}
```

Add a prettier config in `package.json`:

```json
"prettier": {
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false
}
```

Prettier fixes shall be reported when you run `stylelint **/*.css` and shall be autofixed when you run `stylelint --fix **/*.scss`.
npm package: @shopify/stylelint-polaris
Description: Polaris Design System Stylelint tooling
Author: Shopify
Latest version: 16.0.7

# Stylelint Polaris

Collection of Stylelint configs and rules that promote Polaris Design System adoption and coverage

[Stylelint Polaris documentation](https://polaris.shopify.com/tools/stylelint-polaris)
npm package: @shopify/synapse
Description: node --experimental-loader ./dist/index.js
Author: Dave Geddes
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

node --experimental-loader ./dist/index.js

## Using Synapse

TODO: publish to internal registry and update this. In the meantime consumers of Synapse can import it as a dependency directly from Github.

Synapse comes with two tools:

1. A CLI that helps you transform your data into [embeddings](https://platform.openai.com/docs/guides/embeddings).
2. A TypeScript utility library that you can use to compare input to those embeddings, and use the result to craft context-aware prompts/messages to send to OpenAI for completion.

### Using the Synapse CLI

You'll need to add `commander` to your project. `yarn add -D commander fast-glob tsx`.

To use the CLI make a `synapse.config.mts` in the root of your project.

#### Commands

generate all embeddings
`npx tsx ./path/to/synapse/src/cli.ts embeddings`

- generate embeddings for a synapse group (as you define in synapse.config.mts)
`npx tsx ./path/to/synapse/src/cli.ts embeddings --name examples`

### Using the Synapse TS lib

Note that Synapse is packed in ESM format, which is supported in Node once you get things setup correctly. ESM format is nice because it can import both ESM and Commonjs dependencies. See [ESM & Node & TypeScript](https://www.typescriptlang.org/docs/handbook/esm-node.html).

Here is a sample Node/TypeScript server configured properly for ESM, that uses Synapse: [Shopify/test-synapse](https://github.com/Shopify/test-synapse).

TODO: document the various functions. In the meantime see test-synapse for an example.

## Development on Synapse

Clone this repo and run `dev up`.

### setup OpenAI
To run the tests you'll need an OpenAI account & secret. If you want to use Shopify's talk to your lead (or Teddy Hwang, he's great).

The tests use [ejson2env](https://github.com/Shopify/ejson2env) to safely store OpenAI key in the repo.

Once you have your key, copy it and then run `dev ejson-paste`.

### run Synapse in dev mode

`yarn dev` will start the [tsup](https://tsup.egoist.dev/) bundler in watch mode, outputting the result to `/dist/*`.
npm package: @shopify/theme-a11y
Description: A library of useful functions that help make your theme more accessible.
Author: Shopify Inc.
Latest version: 4.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/theme-a11y

## Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

```
yarn add @shopify/theme-a11y
```

and then import the functions you wish to use through ES6 imports:

```
import * as a11y from '@shopify/theme-a11y';
```

If you prefer not to use a package manager, you can download the latest version of Theme A11y and include it in your project manually from the following links:

- [theme-a11y.js](http://unpkg.com/@shopify/theme-a11y@latest/dist/theme-a11y.js)
- [theme-a11y.min.js](http://unpkg.com/@shopify/theme-a11y@latest/dist/theme-a11y.min.js)

These files make Theme A11y accessible via the `Shopify.theme.a11y` global variable.

---

## Browser Support

Theme A11y uses a method not available in legacy browsers: `Element.matches()`. If you wish to support legacy browsers, make sure you add the following dependencies to your project:

```
yarn add element-matches
```

and then import them before you import Theme A11y:

```js
// Only need to import these once
import 'element-matches';

// Import @shopify/theme-a11y anywhere you need it
import * as a11y from '@shopify/theme-a11y';
```

## Methods

### accessibleLinks(elements, options)

Add a descriptive message to external links and links that open to a new window.

- `elements` - Specific elements to be targeted
- `options.messages` - Custom messages object to overwrite with keys: newWindow, external, newWindowExternal
- `options.messages.newWindow` - When the link opens in a new window (e.g. `target="_blank"`)
- `options.messages.external` - When the link is to a different host domain.
- `options.messages.newWindowExternal` - When the link is to a different host domain and opens in a new window.
- `options.prefix` - Prefix to namespace "id" of the messages
npm package: @shopify/theme-check-browser
Description: This is the Browser wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm.im/@shopify/theme-check-common) package. It does not come with batteries included and assumes you know what you're doing.
Author: CP Clermont
Latest version: 3.24.0

# `@shopify/theme-check-browser`

This is the Browser wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm.im/@shopify/theme-check-common) package. It does not come with batteries included and assumes you know what you're doing.

See the [@shopify/theme-check-common README](../theme-check-common) for more details.

## License

MIT.
npm package: @shopify/theme-check-common
Description: <h1 align="center" style="position: relative;" >   <br>     <img src="https://github.com/Shopify/theme-check-vscode/blob/main/images/shopify_glyph.png?raw=true" alt="logo" width="141" height="160">   <br>   Theme Check </h1>
Author: CP Clermont
Latest version: 3.24.0

<h1 align="center" style="position: relative;" >
  <br>
    <img src="https://github.com/Shopify/theme-check-vscode/blob/main/images/shopify_glyph.png?raw=true" alt="logo" width="141" height="160">
  <br>
  Theme Check
</h1>

<h4 align="center">A linter for Shopify Themes</h4>

Theme Check helps you follow best practices by analyzing the files inside your Shopify theme.

Theme Check is available [to code editors that support the Language Server Protocol](https://github.com/Shopify/theme-tools/wiki).

You may be interested by the sibling modules:

- `@shopify/theme-check-common`: (you are here) npm module to run checks on a [Theme](https://github.com/Shopify/theme-check-js/blob/121715a68cc107023fceb7983f590c468095cda9/packages/common/src/types.ts#L6-L8) (runtime agnostic).
- `@shopify/theme-check-node`: npm module to run checks from a [Node.js ](https://nodejs.org) runtime.
- `@shopify/theme-check-browser`: npm module to run checks in a Browser.

## Installation

### CLI

Theme Check is integrated in the [Shopify CLI](https://github.com/Shopify/cli).

```bash
shopify theme check
```

### As a library

There are three libraries:

```
yarn add @shopify/theme-check-node
yarn add @shopify/theme-check-common
yarn add @shopify/theme-check-browser
```

## Usage

This repo only contains the library over the functionality. The CLI is implemented in [Shopify/cli](https://github.com/shopify/cli).

For CLI usage documentation, refer to [shopify.dev](https://shopify.dev/docs/storefronts/themes/tools/theme-check).

### Node

The node version comes with batteries included. All you need is the root path of the theme.

```ts
// simple-cli.ts
import { check } from '@shopify/theme-check-node';

async function main() {
  const root = process.cwd();
  const offenses = await check(root);
  console.log(offenses);
}

main();
```

### Browser

The browser version is a bit more complex, you need to provide your own implementation of all the dependency injections.

```ts
import { simpleCheck, recommended, ThemeData, Config, Dependencies } from '@shopify/theme-check-browser';

async function main() {
  const themeDesc = {
    'snippets/product-card.liquid': '{{ product | image_url | image_tag }}',
    'snippets/for-loop.liquid': '{% for variant in product.variants %}...{% endfor %}',
  };

  const config: Config = {
    checks: recommended,
    settings: {},
    root: '/',
  };

  const dependencies: Dependencies = {
    // ...
  };

  const offenses = await simpleCheck(themeDesc, config, dependencies);

  console.log(offenses);
}

main();
```

## Contributing

See [CONTRIBUTING.md](../../docs/contributing.md).
npm package: @shopify/theme-check-node
Description: This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm.im/@shopify/theme-check-common) package. It comes with batteries included.
Author: CP Clermont
Latest version: 3.24.0

# `@shopify/theme-check-node`

This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm.im/@shopify/theme-check-common) package. It comes with batteries included.

See the [@shopify/theme-check-common README](../theme-check-common) for more details.

## License

MIT.
npm package: @shopify/theme-currency
Description: A library that helps with managing currencies in Shopify Themes
Author: Shopify Inc.
Latest version: 4.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/theme-currency

## Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

```
yarn add @shopify/theme-currency
```

and then import the functions you wish to use through ES6 imports:

```
import * as currency from '@shopify/theme-currency';
```
npm package: @shopify/theme-graph
Description: Shopify Theme Graph as a data structure
Author: CP Clermont
Latest version: 0.2.3

<h1 align="center" style="position: relative;" >
  <br>
    <img src="https://github.com/Shopify/theme-tools/blob/main/packages/vscode-extension/images/shopify_glyph.png?raw=true" alt="logo" width="141" height="160">
  <br>
  Theme Graph
</h1>

<h4 align="center">A data structure that represents your Shopify theme</h4>

A Shopify Theme Graph is a data structure that spans Liquid, JSON, JavaScript and CSS files.

It has the following interface:

```ts
interface ThemeGraph {
  rootUri: UriString; // e.g. 'file:/path/to/horizon'
  entryPoints: ThemeModule[];
  modules: Record<UriString, ThemeModule>
}
```

A `ThemeModule` holds _dependencies_ and _references_ of a module. For instance,

```ts
interface LiquidModule {
  uri: UriString;
  type: 'liquid';
  kind: 'block' | 'layout' | 'section' | 'snippet' | 'template';
  references: Reference[];
  dependencies: Reference[];
}
```

For a module $M$,
- a _reference_ is a backlink to _other_ modules that depend on $M$,
- a _dependency_ is a dependent link on another module.

```ts
interface Reference {
  /* The file that initiated the dependency/reference */
  source: { uri: string, range?: Range };

  /* The file that it points to */
  target: { uri: string, range?: Range };

  type:
    | 'direct'   // e.g. {% render 'child' %}, {{ 'theme.js' | asset_url }}, <custom-element>, etc.
    | 'indirect' // e.g. Sections and blocks that accept theme blocks
    | 'preset'   // e.g. Section and block presets
}
```

See [types.md](./src/types.ts) for more details and [how-it-works.md](./docs/how-it-works.md) for an overview of the algorithm.

## Installation

```bash
npm install @shopify/theme-graph
```

## Usage

### Through the VS Code extension

The theme graph is used by the VS Code extension to power the dependencies, references and dead code features.

### From the CLI

```
Usage:
  theme-graph <path-to-theme-directory>

Example:
  theme-graph horizon > graph.json
```

### As a library

[See bin/theme-graph](./bin/theme-graph) for inspiration.

## Contributing

See [CONTRIBUTING.md](../../docs/contributing.md).
npm package: @shopify/theme-hot-reload
Description: [![Build status](https://badge.buildkite.com/a6b763e2a7156c467ac9175d86c935b62457f9a7059d3c3902.svg)](https://buildkite.com/shopify/theme-hot-reload)
Latest version: 0.0.22

# @shopify/theme-hot-reload

[![Build status](https://badge.buildkite.com/a6b763e2a7156c467ac9175d86c935b62457f9a7059d3c3902.svg)](https://buildkite.com/shopify/theme-hot-reload)

This is a library for hot reloading the development theme in local development, the Online Store Editor, and Theme Preview.

## Contributing

Check the [CONTRIBUTING.md](./CONTRIBUTING.md) file to understand how to set up your development environment. Once you've made changes to the codebase, follow these steps:

- **1. Create a new changeset**: Use the `changeset` command to create a new changeset for your changes
    ```bash
    pnpm changeset
    ```

- **2. Commit your changes**: Commit your changes with a descriptive commit message

- **3. Push your changes**: Push your changes to the theme-hot-reload repository on GitHub

- **4. Create a pull request**: Go to the theme-hot-reload repository and click on the "New Pull Request" button

- **5. Describe your changes**: Write a clear and concise description of the changes you've made, the issue or feature request they address, and any additional information that might be helpful to reviewers

- **6. Submit your pull request**: Click the "Create Pull Request" button to submit your PR for review

## Releasing

- Merge the **Version Packages** PR

- Publish the CDN asset [here](https://buildkite.com/shopify/theme-hot-reload):
  - Click on "New build"
  - Use the version number (X.Y.Z) as the message
  - Click on "Create build"

- Done!
npm package: @shopify/theme-images
Description: A library that helps with basic image operations within Shopify Themes
Author: Shopify Inc.
Latest version: 4.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/theme-images

## Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

```
yarn add @shopify/theme-images
```

and then import the functions you wish to use through ES6 imports:

```
import * as images from '@shopify/theme-images';
```
npm package: @shopify/theme-language-server-browser
Description: This is the Browser wrapper of the runtime-agnostic [`@shopify/theme-language-server-common`](https://npm.im/@shopify/theme-language-server-common) package. It does not come with batteries included and assumes you know what you're doing.
Author: CP Clermont
Latest version: 2.20.2

# `@shopify/theme-language-server-browser`

This is the Browser wrapper of the runtime-agnostic [`@shopify/theme-language-server-common`](https://npm.im/@shopify/theme-language-server-common) package. It does not come with batteries included and assumes you know what you're doing.

Presumably for use in CodeMirror along with [`@shopify/codemirror-language-client`](https://npm.im/@shopify/codemirror-language-client).

See the [@shopify/theme-language-server-common README](../theme-language-server-common) for more details.

## License

MIT.
npm package: @shopify/theme-language-server-node
Description: This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-language-server-node`](https://npm.im/@shopify/theme-language-server-common) package. It comes with batteries included.
Author: CP Clermont
Latest version: 2.20.2

# `@shopify/theme-language-server-node`

This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-language-server-node`](https://npm.im/@shopify/theme-language-server-common) package. It comes with batteries included.

See the [@shopify/theme-language-server-common README](../theme-language-server-common) for more details.

## License

MIT.
npm package: @shopify/theme-lint
Description: A linter for Shopify theme localization written in Node
Author: Shopify Inc.
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Theme Lint

[![Build Status](https://travis-ci.com/Shopify/theme-lint.svg?branch=master)](https://travis-ci.com/Shopify/theme-lint) [![npm version](https://badge.fury.io/js/%40shopify%2Ftheme-lint.svg)](https://badge.fury.io/js/%40shopify%2Ftheme-lint)

A linter for Shopify theme localization written in Node.

## Getting started

Add `theme-lint` as a devDependency to a Shopify theme by running the following command inside of the theme directory:

```bash
$ npm install --save-dev @shopify/theme-lint
```

Add a new NPM script to your theme's `package.json` like so:

```js
"scripts": {
  "lint": "theme-lint ./dist"
}
```

Finally, run `npm run lint` to run the translation tests.

## License

MIT, see [LICENSE.md](http://github.com/Shopify/theme-lint/blob/master/LICENSE.md) for details.

<img src="https://cdn.shopify.com/shopify-marketing_assets/builds/19.0.0/shopify-full-color-black.svg" width="200" />
npm package: @shopify/theme-predictive-search-component
Description: Shopify Predictive Search UI Component
Author: Shopify Inc.
Latest version: 4.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## `@shopify/theme-predictive-search-component`

## Description

Predictive search UI state component.

## Dependency

[`@shopify/theme-predictive-search`](https://github.com/Shopify/theme-scripts/blob/master/packages/theme-predictive-search/README.md)

## Example

```js
const predictiveSearch = new PredictiveSearch({
  selectors: {
    input: '[data-predictive-search-input="header"]',
    reset: '[data-predictive-search-reset="header"]',
    result: '[data-predictive-search-result="header"]'
  },
  resultTemplateFct: data => {
    return `
      <div class="predictive-search">
        <ul class="predictive-search__list">
          ${data.products.map(
            product => `
            <li data-search-result> <!-- important to add the data-search-result attribute to each result -->
              <img src="${product.image}" alt="${product.title}" />
              <span>${product.title}</span>
            </li>
          `
          )}
        </ul>
      </div>
    `;
  },
  // (a11y) Function to return the number of results that you will display.
  // This will be announced to the user via an aria-live.
  numberOfResultsTemplateFct: data => {
    if (data.products.length === 1) {
      return "one result found";
    } else {
      return "[results_count] results found".replace(
        "[results_count]",
        data.products.length
      );
    }
  },
  // (a11y) Return a string that indicates that we're loading results.
  // This will be announced to the user via an aria-live.
  loadingResultsMessageTemplateFct: () => {
    return "loading";
  },
  onInputFocus: nodes => {
    // You can get a reference to active target
    console.log(nodes.input.id); //-> input
    console.log(nodes.submit.id); //-> submit
    console.log(nodes.result.id); //-> result
  },
  onInputKeyup: nodes => {
    return true; // This will allow the event callback to execute
  },
  onInputBlur: nodes => {
    return false; // This will prevent the event callback to execute
  },
  onInputClear: nodes => {},
  onBeforeKill: nodes => {},
  onBeforeOpen: nodes => {},
  onOpen: nodes => {},
  onBeforeClose: nodes => {},
  onClose: nodes => {},
  onDestroy: nodes => {}
});

// Public methods
predictiveSearch.open();
predictiveSearch.close();
predictiveSearch.destroy();
predictiveSearch.clearAndClose();
```

---
npm package: @shopify/theme-rte
Description: A library that helps developers work with the RTE sections in Shopify Themes
Author: Shopify Inc.
Latest version: 4.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/theme-rte

## Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

```
yarn add @shopify/theme-rte
```

and then import the functions you wish to use through ES6 imports:

```
import * as rte from '@shopify/theme-rte';
```
npm package: @shopify/tokengate
Description: Tokengate component library for Shopify storefronts
Author: Shopify Inc.
Latest version: 1.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/tokengate`

[![npm version](https://img.shields.io/npm/v/@shopify/tokengate.svg?label=@shopify/tokengate)](https://www.npmjs.com/package/@shopify/tokengate) [![CI](https://github.com/Shopify/blockchain-components/actions/workflows/ci.yml/badge.svg)](https://github.com/Shopify/blockchain-components/actions?query=branch%3Amain) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](../../.github/contributing.md)

The `tokengate` component presents the gate requirements to unlock a reaction, and the buyer's eligibility status based on their connected wallet.

[View in Storybook](https://main--639b1f308693132693d9b82c.chromatic.com/?path=/story/tokengate-discount-locked--locked)

## Installation

Install the `shopify/tokengate` package.

```bash
yarn add @shopify/tokengate
```

## Documentation

For detailed documentation, [visit shopify.dev](https://shopify.dev/api/blockchain/components/tokengate).

## Contributing

Pull requests are welcome. See the [contribution guidelines](../../.github/contributing.md) for more information.

## License

MIT &copy; [Shopify](https://shopify.com/), see [LICENSE.md](LICENSE.md) for details.

<a href="https://shopify.com" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="../../images/shopify-light.svg">
    <source media="(prefers-color-scheme: light)" srcset="../../images/shopify-dark.svg">
    <img alt="Shopify Logo" src="../../images/shopify-dark.svg">
  </picture>
</a>