open-index/open-npm huggingface dataset:
npm package: @shopify/graphql-js-client
Description: Feature light client library for fetching resources via GraphQL
Author: Shopify Inc.
Latest version: 0.4.1

# graphql-js-client

Feature light client library for fetching resources via GraphQL

## Table Of Contents

- [Installation](#installation)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](http://github.com/Shopify/graphql-js-client/blob/master/LICENSE.md)

## Installation
```bash
$ yarn install graphql-js-client
```

## Examples

`GraphQLClient` requires a "type bundle" which is a set of ES6 modules generated by [graphql-js-schema](https://github.com/Shopify/graphql-js-schema)
that represent your GraphQL schema.

#### Creating and sending a query

```javascript
import GraphQLClient from 'graphql-js-client';

// This is the generated type bundle from graphql-js-schema
import types from './types.js';

const client = new GraphQLClient(types, {
  url: 'https://graphql.myshopify.com/api/graphql',
  fetcherOptions: {
    headers: `Authorization: Basic ${btoa('some-storefront-access-token')}`
  }
});

const products = [];

client.send(client.query((root) => {
  root.add('shop', (shop) => {
    shop.add('name');
    shop.addConnection('products', {args: {first: 10}}, (product) => {
      product.add('title');
    });
  });
}).then(({model, data}) => {
  console.log(model); // The serialized model with rich features
  console.log(data); // The raw data returned from the endpoint

  products.push(...model.products);

  if (model.products.hasNextPage) {
    return client.fetchNextPage(model.products);
  };

// `fetchNextPage` resolves with the model you wanted the next page of
}).then(({model, data}) => {
  products.push(...model); // Page two of products
});
```

## Contributing

#### Setting up:

```bash
$ git clone git@github.com:Shopify/graphql-js-client.git
$ cd graphql-js-client
$ yarn install
```

#### Running the tests in a browser

```bash
$ yarn start
```

Then visit [http://localhost:4200](http://localhost:4200)

#### Running the tests in node

```bash
$ yarn test
```

## License

MIT, see [LICENSE.md](http://github.com/Shopify/graphql-js-client/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/graphql-js-schema
Description: Transforms the JSON representation of a GraphQL schema into a set of ES6 type modules.
Author: Shopify Inc.
Latest version: 0.3.0

[![Circle CI](https://circleci.com/gh/Shopify/graphql-js-schema.png?circle-token=93549bd063e7d394b231f147e68f2311dc871e8d)](https://circleci.com/gh/Shopify/graphql-js-schema)

# graphql-js-schema

Transforms the JSON representation of a GraphQL schema into a set of ES6 type modules.

## Table Of Contents

- [Installation](#installation)
- [Examples](#examples)
- [API](#api)
- [Schema Modules](#schema-modules)
- [License](http://github.com/Shopify/graphql-js-schema/blob/master/LICENSE.md)

## Installation

```bash
$ npm install @shopify/graphql-js-schema
```

## Examples

To transform a GraphQL schema file (as json) into a set of ES6 consumable
modules, run the following command.

```bash
graphql-js-schema --schema-file ./schema.json --outdir schema --schema-bundle-name="Schema"
```

This will create a directory called schema, and a root module called `Schema` in
the file `schema/schema.js`. It wall also collect all the non-scalar types in
`schema/types`, and export them. The top level bundle exists for convenience,
but you can consume these modules however you like.

## API

Exports one function that transforms a schema object into a list of files and
their associated bodies.

```javascript
import graphqlJsSchema from 'graphql-js-schema';

graphqlJsSchema(schemaHash, "BundleName").then((files) => {
  // Do stuff with hashes in the format:
  // {
  //   path: 'types/product.js',
  //   body: '...'
  // }
});
```

## Schema Modules

```javascript

import Schema from 'schema/schema';

Schema.Product.name // => Product
Schema.Product.implementsNode // => true

// Types are separated into scalars, objects and connections.

// Scalars:
Schema.Product.scalars
Schema.Product.scalars.handle
Schema.Product.scalars.handle.type // => String
Schema.Product.scalars.handle.kind // => SCALAR
Schema.Product.scalars.handle.isList // => false
Schema.Product.scalars.handle.args // => []

// Objects
Schema.Product.objects.images
Schema.Product.objects.images.type // => Image
Schema.Product.objects.images.kind // => OBJECT
Schema.Product.objects.images.isList // => true
Schema.Product.objects.images.args // => ["first", "maxWidth", "maxHeight", "crop", "scale"]

// Connections
Schema.Product.connections.collections
Schema.Product.connections.collections.type // => CollectionConnection
Schema.Product.connections.collections.kind // => OBJECT
Schema.Product.connections.collections.isList // => false
Schema.Product.connections.collections.args // => ["first", "after", "reverse"]

```

## License

MIT, see [LICENSE.md](http://github.com/Shopify/graphql-js-schema/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/graphql-js-schema-fetch
Description: A simple command line tool for fetching the JSON representation of the GraphQL schema from a live server
Author: Shopify Inc.
Latest version: 1.1.0

[![Circle CI](https://circleci.com/gh/Shopify/graphql-js-schema-fetch.png?circle-token=b91d60ffd2266c360cfc56697c847af8e95f715b)](https://circleci.com/gh/Shopify/graphql-js-schema-fetch)

# graphql-js-schema-fetch

It fetches the JSON representation of the GraphQL schema from a live server

## Table Of Contents

- [Installation](#installation)
- [Examples](#examples)
- [API](#api)
- [License](http://github.com/Shopify/graphql-js-schema-fetch/blob/master/LICENSE.md)

## Installation

```bash
$ npm install @shopify/graphql-js-schema
```

## Examples

To fetch the json representation of the graphql schema from a live server that
implements the GraphQL (and optionally the Relay) spec, run:

```bash
graphql-js-schema-fetch --url https://www.my-server.com/api
```

If your server requires additional credentials or headers, use the `--header`
option:

```bash
graphql-js-schema-fetch --url https://www.my-server.com/api --header "Authorization: Basic abc123" --header "X-API-Version: 1.1"
```

If your server uses something other than the `POST` method for its API, use the
`--method` option:

```bash
graphql-js-schema-fetch --url https://www.my-server.com/api --method GET
```

## API

#### `const instance = graphqlJsSchemaFetch(url, method, [headers]);`

Params you can pass `graphqlJsSchemaFetch`:
- `url` - The url where your GraphQL API resides
- `method` - The HTTP method to use while making the request
- `headers` - A hash representing the key value pairs of headers to pass to
  `node-fetch`

## License

MIT, see [LICENSE.md](http://github.com/Shopify/graphql-js-schema-fetch/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/html-webpack-liquid-asset-tags-plugin
Description: Finds static asset references and turns them into liquid tags with the 'asset_url' filter
Author: Shopify Inc.
Latest version: 1.0.0-beta.11
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/html-webpack-liquid-asset-tags-plugin

An [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) addon which swaps out generated `<link>` and `<script>` asset URLs with Shopify Liquid tags using the [`asset_url` filter](https://help.shopify.com/themes/liquid/filters/url-filters#asset_url). For example:

```
<script type=text/javascript src="theme.js"></script>
```

gets transformed into

```
<script type=text/javascript src="{{ 'theme.js' | asset_url }}"></script>
```
npm package: @shopify/hydrogen
Description: <div align="center">
Latest version: 2026.4.0

<div align="center">

# Hydrogen

[![MIT License](https://img.shields.io/github/license/shopify/hydrogen)](LICENSE.md)
[![npm downloads](https://img.shields.io/npm/dm/@shopify/hydrogen.svg?sanitize=true)](https://npmcharts.com/compare/@shopify/hydrogen?minimal=true)

Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks.

**Create a Hydrogen app**

```bash
npm create @shopify/hydrogen@latest
```

 </div>

- Interested in contributing to Hydrogen? [Read our contributing guide](../../CONTRIBUTING.md)
- Want to learn more? [Check out the Hydrogen docs on Shopify.dev](https://shopify.dev/custom-storefronts/hydrogen)
- Questions? Feedback? Feature requests? [Discussions](https://github.com/Shopify/hydrogen/discussions)
- Upgrading from a previous version? [View the Changelog](./packages/hydrogen/CHANGELOG.md)
- Looking for Hydrogen v1? [The source code has been moved](https://github.com/Shopify/hydrogen-v1)
npm package: @shopify/hydrogen-cli
Description: Command line interface for hydrogen
Latest version: 0.12.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/cli and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/main/content/internal/operations/reference-docs/hydrogen.md. -->

## `@shopify/hydrogen-cli`

`hydrogen/cli` provides interactive project scaffolding for hydrogen apps and other useful commands to help developers build on `@shopify/hydrogen`.

Note: The CLI does not currently provide a full starter template. Run npx create-hydrogen-app instead to scaffold a new project with the starter template. To contribute to the starter template, update files in examples/template-hydrogen-default.

## Installation

The `@shopify/hydrogen-cli` is installable globally or as a project dependency.

```bash
yarn global add @shopify/hydrogen-cli
```

After installation, you will have access to the `h2` binary in your command line. You can verify that it is properly installed by running `h2 version`, which should present you with the currently installed version.

```bash
h2 version
```

### Upgrading

To upgrade the global `@shopify/hydrogen-cli` package, you need to run:

```bash
yarn global upgrade --latest @shopify/hydrogen-cli
```
npm package: @shopify/hydrogen-plugin-sanity
Description: Hydrogen plugins for integrating with Sanity
Latest version: 0.8.3

# Sanity plugin for Hydrogen

## NOTICE: This plugin has been deprecated.

**Please use [hydrogen-plugin-sanity](https://www.npmjs.com/package/hydrogen-plugin-sanity) instead.**

---

This is a plugin for Hydrogen with Sanity. A `useSanityQuery` React hook with a API similar to `useShopQuery` is exposed to efficiently and ergonomically fetch data from a Sanity instance.

## Getting Started

To add the plugin as a dependency to your project:

```bash
yarn add @shopify/hydrogen-plugin-sanity
```

To fetch data from a Sanity instance:

```javascript
import {useSanityQuery} from '@shopify/hydrogen-plugin-sanity';

const {data} = useSanityQuery({
  query: gql`
    query product($ids: String!) {
      product: allProduct(where: {id: {in: $ids}}) {
        id
        vendor {
          title
        }
        upc
      }
    }
  `,
  variables: {ids: products.map((product) => product.id)},
});
```

The `useSanityQuery` hook knows which Sanity instance to query and authenticate against through the use of two environment variables: `VITE_SANITY_ID` and `VITE_SANITY_TOKEN`. Both of these environment variables must be set in order to fetch data with the `useSanityQuery` hook.
npm package: @shopify/i18n
Description: Generic i18n-related utilities
Author: Shopify Inc.
Latest version: 2.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/i18n`

[![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%2Fi18n.svg)](https://badge.fury.io/js/%40shopify%2Fi18n.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/i18n.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/i18n.svg)

Generic i18n-related utilities.

## Installation

```bash
yarn add @shopify/i18n
```

## Usage

### `pseudotranslate()`

Takes a string and returns a version of it that appears as if it were translated (learn more about [pseudotranslation](https://help.smartling.com/hc/en-us/articles/360000307573-Testing-with-Pseudo-Translation)).

This function accepts a number of arguments to customize the translation:

- `toLocale`: a locale to simulate translation for. This is used primarily to adjust the change in size relative to the original string. When not provided, or when a locale is provided for which no custom size ratio exists, this function slightly increases the string size.
- `delimiter`, `startDelimiter`, `endDelimiter`: strings used to mark parts of the source string that should not be translated. This can be used, for example, to prevent translation of replacements within a string.
- `prepend` and `append`: strings to put at the start and end of the resulting string, respectively. This can be used to provide a common set of text around pseudotranslated code that can identify translated strings that are incorrectly joined together.

```ts
import {pseudotranslate} from '@shopify/react-i18n';

const pseudoOne = pseudoTranslate('cat'); // something like 'ͼααṭ'
const pseudoTwo = pseudoTranslate('cats: {names}', {
  toLocale: 'de',
  startDelimiter: '{',
  endDelimiter: '}',
  prepend: '[[!',
  append: '!]]',
}); // something like '[[!ͼααṭṡṡ: {names}]]!'
```

### `regionFromLocale()`

Accepts a locale and extracts the country code as defined in [BCP 47](https://tools.ietf.org/html/rfc5646#section-2.2.4), if it exists. The country code will be normalized to fully uppercase when present.

```ts
import {regionFromLocale} from '@shopify/i18n';

const regionEn = regionFromLocale('en'); // undefined
const regionEnCa = regionFromLocale('en-ca'); // 'CA'
```

### `languageFromLocale()`

Accepts a locale and extracts the language subtag as defined in [BCP 47](https://tools.ietf.org/html/rfc5646#section-2.2.1).

```ts
import {languageFromLocale} from '@shopify/i18n';

const languageFrCa = languageFromLocale('fr-CA'); // 'fr'
```
npm package: @shopify/i18n-as
Description: An i18n implementation for AssemblyScript
Author: Shopify Inc.
Latest version: 0.0.4

# i18n-as

[About this project](#about-this-project) | [How to use this project](#how-to-use-this-project) | [Development](#development)

## About this project
i18n-as is a localization package for [AssemblyScript](https://www.assemblyscript.org/) projects.
It works by using a compiler [transform](https://github.com/Shopify/i18n-as/blob/06bf5586fbf41a8b2cda8103016f3223eeb118dd/src/transform.ts) to make [translations](https://github.com/Shopify/i18n-as/tree/06bf5586fbf41a8b2cda8103016f3223eeb118dd/tests/integration/locales) locally accessible within the WebAssembly binary. 

## How to use this project
### Requirements
- Node is installed locally.

### Installation
```
# npm
$ npm install @shopify/i18n-as --save

# yarn
$ yarn add @shopify/i18n-as
```

### Using the Transform
Since i18n-as uses a compiler transform to read and parse translations, you need to tell the compiler to use the transform. Options:
  1. During all `asc` calls, add `--transform @shopify/i18n-as/dist/transform.js`
      - Ex. `asc entryFile.ts --transform @shopify/i18n-as/dist/transform.js`
      - If you use additional projects that compile your code like [as-pect](https://github.com/jtenner/as-pect), ensure those are configured to use this transform as well.
  2. Add a `transform` option to your `asconfig.json` file.
  ```
  // asconfig.json
  {
    ...
    "options": {
      ...
      "transform": "@shopify/i18n-as/dist/transform.js"
    }
  }
  ```

### Configuration
By default, i18n-as will look for locale files in the `/locales` folder at the project root. To configure this location, you can optionally add a `i18n.config.json` file:
```
// i18n.config.json
{
  "localeFilesDirectory": "/path/to/your/folder"
}
```


### Locale Files
Locale files should be written in JSON files and abide by the following folder structure:
```
.
├── assembly/
├── locales/
│   ├── en.json
│   └── fr.json
|   └── <locale>.json
└── i18n.config.json
```

```
// locales/<locale>.json
{
  "my translation key": "some translated value",
  "another key: "another value"
}
```

### AssemblyScript example

```
// locales/fr.json
{
  "hello": "bonjour",
}
```
```
// locales/es.json
{
  "hello": "hola",
}
```
```
// index.ts
import { translate } from '@shopify/i18n-as'

translate("fr", "hello") // => "bonjour"
translate("es", "hello") // => "hola"
translate("en", "hello") // => defaults to the key, "hello"
```

### More Documentation
Additional documentation can be found in the [wiki](https://github.com/Shopify/i18n-as/wiki).

## Development
### Quick Start
```
$ git clone https://github.com/Shopify/i18n-as.git
$ cd i18n-as
$ npm install
$ npm run test
```

### Commands
* `npm run asbuild` - build the WebAssembly binary.
* `npm run build` - compile the TypeScript transform into JavaScript.
* `npm run test` - run the tests.
npm package: @shopify/images
Description: Packages to help us wrangle images at Shopify.
Author: Shopify Inc.
Latest version: 3.1.2

# `@shopify/images`

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

Tools to help us wrangle images at Shopify.

## Installation

```bash
$ yarn add @shopify/images
```

## API

### `optimize.js`

This package exports helpers for optimizing images. The following members are exported:

- `svgOptions`: an object containing our recommended options for using SVGO.
npm package: @shopify/javascript-utilities
Description: A set of utilities for JavaScript and TypeScript projects at Shopify.
Author: Shopify
Latest version: 2.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<div align="center">
  <h1>javascript-utilities</h1>
  <h4>A set of utilities for JavaScript and TypeScript projects at Shopify.</h4>
  <a href="https://circleci.com/gh/Shopify/javascript-utilities">
    <img src="https://circleci.com/gh/Shopify/javascript-utilities.svg?style=shield"
         alt="CircleCI">
  </a>
  <a href="https://badge.fury.io/js/%40shopify%2Fjavascript-utilities">
    <img src="https://badge.fury.io/js/%40shopify%2Fjavascript-utilities.svg" alt="npm version">
  </a>
  <a href="https://github.com/Shopify/javascript-utilities/blob/master/LICENSE.md">
    <img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License: MIT">
  </a>
</div>

## Table of Contents

  - [Installation](#installation)
  - [API](#api-reference)
  - [Contribute](#contribute)
  - [License](#license)
  - [Changelog](http://github.com/Shopify/javascript-utilities/blob/master/CHANGELOG.md)

## Installation

```bash
$ yarn add @shopify/javascript-utilities
```

## API Reference

See the comments and TypeScript annotations in the code for details on the provided utilities.

## Contribute

Check out our [Contributing Guidelines](http://github.com/Shopify/javascript-utilities/blob/master/CONTRIBUTING.md)

## License

MIT &copy; [Shopify](https://shopify.com/), see [LICENSE.md](http://github.com/Shopify/javascript-utilities/blob/master/LICENSE.md) for details.

<a href="http://www.shopify.com/"><img src="https://cdn.shopify.com/assets2/press/brand/shopify-logo-main-small-f029fcaf14649a054509f6790ce2ce94d1f1c037b4015b4f106c5a67ab033f5b.png" alt="Shopify" width="200" /></a>
npm package: @shopify/jest-mock-apollo
Description: Jest + Enzyme mocks for Apollo 2.x
Author: Shopify Inc.
Latest version: 7.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/jest-mock-apollo`

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated. We recommend the `@shopify/graphql-testing` library instead.
npm package: @shopify/jest-mock-router
Description: Jest + Enzyme mocks for React Router 3.x
Author: Shopify Inc.
Latest version: 3.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/jest-mock-router`

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated.
npm package: @shopify/klint
Description: A modern creative coding library
Author: arthurcloche
Latest version: 0.4.0

# 🎨 Klint

Klint is a modern 2D canvas library for React, inspired by p5.js and Processing. It makes creative coding in React intuitive and powerful, perfect for generative art, data visualization, interactive graphics, and creative web experiences.

## ✨ Features

- 🎯 **React-first**: Built specifically for React with hooks and component patterns
- 🎨 **Creative coding**: p5.js-like API with modern JavaScript/TypeScript
- 🚀 **Performance**: Direct canvas access with minimal overhead
- 🛠️ **Developer friendly**: Full TypeScript support and great tooling
- 🔧 **Extensible**: Plugin system and easy customization

## 🚀 Quick Start

### Install Klint

```bash
npm install @shopify/klint
```

### Basic Usage

```jsx
import { useKlint, Klint } from '@shopify/klint';

function MySketch() {
  const { context } = useKlint();
  
  const draw = (K) => {
    K.background('#000');
    K.fillColor('#ff6b6b');
    K.circle(K.width/2, K.height/2, 50);
  };
  
  return <Klint context={context} draw={draw} />;
}
```

## 🎮 Try the Editor

Want to experiment with Klint interactively? Create a live editor environment:

```bash
npx @shopify/klint klint-create-editor my-klint-project
cd my-klint-project
npm install
npm run dev
```

This creates a Monaco-based editor with live preview - perfect for learning and prototyping!

## 📚 Documentation

- **[Getting Started Guide](https://shopify.github.io/Klint/)** - Learn the basics
- **[API Reference](https://shopify.github.io/Klint/docs/Functions/introduction)** - Complete function reference  
- **[Examples](https://shopify.github.io/Klint/experiments)** - See Klint in action
- **[Lifecycle](https://shopify.github.io/Klint/docs/klint-introduction)** - Understand how Klint works with React

## 🌟 Examples

### Animated Circle
```jsx
function AnimatedCircle() {
  const { context } = useKlint();
  
  const draw = (K) => {
    K.background('rgba(0, 0, 0, 0.1)');
    K.fillColor('#4ecdc4');
    const x = K.width/2 + Math.cos(K.frame * 0.02) * 100;
    const y = K.height/2 + Math.sin(K.frame * 0.02) * 100;
    K.circle(x, y, 20);
  };
  
  return <Klint context={context} draw={draw} />;
}
```

### Interactive Drawing
```jsx
function InteractiveDrawing() {
  const { context, KlintMouse } = useKlint();
  const { mouse } = KlintMouse();
  
  const draw = (K) => {
    if (mouse.pressed) {
      K.fillColor('red');
      K.circle(mouse.x, mouse.y, 10);
    }
  };
  
  return <Klint context={context} draw={draw} />;
}
```

## 🛠️ Development

**For contributors** who want to work on Klint itself:

```bash
git clone https://github.com/Shopify/klint.git
cd klint
npm install
npm run build
```
See [CONTRIBUTING.md](./CONTRIBUTING.md) for development guidelines.

## 📄 License
MIT

---

**Ready to create?** Start with `npx @shopify/klint klint-create-editor my-project` 🎨
npm package: @shopify/koa-liveness-ping
Description: A package for creating liveness ping middleware for use with Koa
Author: Shopify Inc.
Latest version: 2.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/koa-liveness-ping`

[![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%2Fkoa-liveness-ping.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-liveness-ping)

A package for creating liveness ping middleware for use with Koa.

A liveness ping is a URL at which your application will respond with a `200` whenever your server is running. It can be used, for example, for liveness checks in Kubernetes deployments.

## Installation

```bash
yarn add @shopify/koa-liveness-ping
```

## Usage

```typescript
import Koa from 'koa';
import ping from '@shopify/koa-liveness-ping';

const app = new Koa();

// set up any error or loggin middlewares

app.use(ping());

// other routing middlewares should go after the liveness ping
```

This middleware can also be mounted at any path via `koa-mount` ([Learn more](https://github.com/koajs/mount#mounting-middleware)).

**Note:** Mount the liveness ping middleware before all other routing-related middleware in order to ensure it can respond quickly and reliably.
npm package: @shopify/koa-metrics
Description: Aims to provide standard middleware and instrumentation tooling for metrics in Koa
Author: Shopify Inc.
Latest version: 2.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/koa-metrics`

[![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%2Fkoa-metrics.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-metrics.svg)

Opinionated performance metric tracking for Koa, implemented with DogStatsD.

## Installation

```bash
yarn add @shopify/koa-metrics
```

## Usage

```javascript
import Koa from 'koa';
import metrics from '@shopify/koa-metrics';

const app = new Koa();

app.use(
  metrics({
    prefix: 'AppName',
    host: 'some-statsd-host.com:8125',
  }),
);
```

### Options

The passed in `options` object adheres to the following API:

#### `prefix` (required)

The global StatsD metric name prefix; should be provided in `PascalCase`.

#### `host` (required)

The url for the StatsD host; should be provided in the format: `hostname:port`.

## API

An instance of the `Metrics` object will be available on `ctx.metrics` further down in the middleware stack.

### `Metrics`

#### `.distribution(name: string, value: number, sampleRate?: number, tags?: Tags)`

Sends a distribution command with the specified `value` in milliseconds.

#### `.initTimer(): Timer`

Returns a new `Timer` started at the current `process.hrtime()`

### `Timer`

#### `.stop(): number`

Returns the time, in milliseconds, since the `Timer` was created.

### `Tags`

tags are an object keyed by the name of the corresponding tag. For example:

```
{
  name: value,
  name2: value2
}
```

## Intelligent Defaults

The global metric name prefix is provided through the [options object](#options).

This package automatically provides performance metrics for HTTP requests.

### Standard tags

- `path`
- `request_method`
- `response_code`
- `response_type` (eg. `2xx`, `3xx`, ...)

### Default Metrics

#### `request_time`

Time to complete a request, from the application perspective.

#### `request_queuing_time`

Time before a request actually started being processed.

This metric is emitted when the application start processing a request. It relies on the presence of a header `X-Request-Start` set by the first HTTP hop.

#### `request_content_length`

This metric is based on the response header `Content-Length`. Some responses don't provide this header (chunked encoding); in those cases, this will not be reported.
npm package: @shopify/koa-middleware-utilities
Description: A set of common utilties and type definitions for creating koa middlewares
Author: Shopify Inc.
Latest version: 0.0.1-beta.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/koa-middleware-utilities`

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fkoa-middleware-utilities.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-middleware-utilities.svg)

Common utilities and type definitions used for creating koa middlewares

## Installation

```bash
$ yarn add @shopify/koa-middleware-utilities
```

## Usage
npm package: @shopify/koa-react-sidecar
Description: Approachable React Server Side Rendering for non-node projects.
Author: Shopify Inc.
Latest version: 0.0.2
Deprecated: Please use @shopify/react-server instead

# `@shopify/koa-react-sidecar`

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fkoa-react-sidecar.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-react-sidecar.svg)

Approachable React Server Side Rendering for non-node projects.

## Installation

```bash
$ yarn add @shopify/koa-react-sidecar
```

## Usage
npm package: @shopify/koa-shopify-graphql-proxy
Description: A wrapper around `koa-better-http-proxy` which allows easy proxying of GraphQL requests from an embedded Shopify app
Author: Shopify Inc.
Latest version: 7.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/koa-shopify-graphql-proxy`

[![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%2Fkoa-shopify-graphql-proxy.svg)](https://badge.fury.io/js/%40shopify%2Fkoa-shopify-graphql-proxy)

A wrapper around `koa-better-http-proxy` which allows easy proxying of GraphQL requests from an embedded Shopify app.

## Installation

```bash
yarn add @shopify/koa-shopify-graphql-proxy
```

## Usage

The module exports a proxy middleware as its default export. It expects that you have other middleware set up (such as [koa-shopify-auth](https://github.com/Shopify/koa-shopify-auth)) to authenticate requests with Shopify, and have session data stored on `ctx.session`.

### Basic

Attaching the middleware will proxy any requests sent to `/graphql` on your app to the current logged-in shop found in session.

```javascript
// server/index.js
import koa from 'koa';
import session from 'koa-session';
import createShopifyAuth from '@shopify/koa-shopify-auth';
import proxy from '@shopify/koa-shopify-graphql-proxy';

const app = koa();

app.use(session());

app.use(
  createShopifyAuth({
    /* your config here */
  }),
);

app.use(proxy({version: 'unstable'}));
```

This allows client-side scripts to query a logged-in merchant's shop without needing to know the user's access token.

```javascript
fetch('/graphql', {credentials: 'include', body: mySerializedGraphQL});
```

### Custom path

If you have your own `/graphql` route and don't want to clobber it, you can use a library like (`koa-mount`)[https://github.com/koajs/mount] to namespace the middleware.

```javascript
// server/index
import mount from 'koa-mount';

//....

app.use(mount('/shopify', proxy({version: 'unstable'}));
```

```javascript
// client/some-component.js
fetch('/shopify/graphql', {credentials: 'include', body: mySerializedGraphQL});
```

### Private app

If you have a [private shopify app](https://help.shopify.com/en/manual/apps/private-apps), you can than skip over the auth step and use this library directly for setting up graphql proxy.

```javascript
// server/index.js
import koa from 'koa';
import session from 'koa-session';
import proxy from '@shopify/koa-shopify-graphql-proxy';

const app = koa();

app.use(session());

app.use(
  proxy({
    version: 'unstable',
    shop: '<my-shop-name>.myshopify.com',
    password: '<your-app-password>',
  }),
);
```
npm package: @shopify/lang-jsonc
Description: JSONC language support for CodeMirror
Author: CP Clermont
Latest version: 1.0.1

# @shopify/lang-jsonc

[CodeMirror](https://codemirror.net/) 6 Language Support for VS Code's flavour of JSON with Comments. Trailing commas included.

## Usage

```js
import { basicSetup } from 'codemirror';
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { jsonc } from '@shopify/lang-jsonc';

new EditorView({
  parent: document.getElementById('json-editor'),
  state: EditorState.create({
    doc: `
      {
        // this is a comment
        "product": "Apple",

        /* block comment, with trailing comma */
        "price": "1.00$",
      }
    `
    extensions: [
      basicSetup,
      jsonc(),
    ],
  }),
});
```

## Credits

This project includes code from the following repositories. Thank you for your work!

1. [@yettoapp/jsonc](https://github.com/yettoapp/lezer-jsonc)
2. [@lezer/json](https://github.com/lezer-parser/json)
3. [@codemirror/lang-json](https://github.com/codemirror/lang-json)

See [ThirdPartyNotices.txt](../../ThirdPartyNotices.txt) for their licenses.

## License

MIT.
npm package: @shopify/layout-experimental
Description: [About this repo](#about-this-repo) | [Projects](#projects) | [How to use this repo](#how-to-use-this-repo) | [Contribute to our explorations](#contribute-to-our-explorations) | [Technical details](#technical-details)
Author: Shopify
Latest version: 0.0.1-alpha.1

# Polaris

[About this repo](#about-this-repo) | [Projects](#projects) | [How to use this repo](#how-to-use-this-repo) | [Contribute to our explorations](#contribute-to-our-explorations) | [Technical details](#technical-details)

## About this repo

> The experience platform for Shopify. This repository is focused on centralizing systems, documentation and foundations.

| Current status | Owner                                                                       | Help                                                               |
| -------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| ongoing        | [@polaris-team](https://github.com/orgs/Shopify/teams/polaris-team/members) | [#polaris](https://shopify.slack.com/app_redirect?channel=polaris) |

## Projects

A public version of our [Github Project](https://github.com/orgs/Shopify/projects/2250/views/5?type=beta) will be coming soon!

## How to use this repo

### polaris.shopify.com quick start guide

Make sure [Git](https://git-scm.com/downloads) and [Node.js](https://nodejs.org/en/) are installed on your computer then run the following commands to get started:

```shell
$ git clone https://github.com/Shopify/polaris.git    # git clone repository
$ cd polaris                                          # access the files
$ npm install                                         # install dependencies
$ npm run dev                                         # run polars.shopify.com locally
```

## Contribute to our explorations

We'd love to hear what you think. Start a conversation in [Github Discussions](https://github.com/Shopify/polaris/discussions)!

## Technical details

As we continue to iterate and evolve, these technologies are subject to change. Currently, polaris.shopify.com is built using the following technologies:

- [Sprinkles](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles), a CSS framework for vanilla-extract
- [vanilla-extract](https://vanilla-extract.style), a CSS-in-JS library
- [ViteJS](https://vitejs.dev), a frontend build tool

For questions about our tech stack, go to [#polaris](https://shopify.slack.com/app_redirect?channel=polaris)
npm package: @shopify/libra-rpc-graphql
Description: GraphQL utilities for creating an Apollo link that connects to the Libra network via the JSON-RPC API.
Author: Shopify Inc.
Latest version: 2.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/libra-rpc-graphql`

[![Build Status](https://travis-ci.com/Shopify/libra-web-tools.svg?branch=master)](https://travis-ci.com/github/Shopify/libra-web-tools)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Flibra-rpc-graphql.svg)](https://badge.fury.io/js/%40shopify%2Flibra-rpc-graphql.svg)

GraphQL utilities for connecting to the Libra network via the [JSON-RPC API](https://github.com/libra/libra/blob/master/json-rpc/json-rpc-spec.md). Try out this package with the [Libra GraphQL Playground](https://libra-graphql-playground.shopifycloud.com/).

## Installation

```bash
$ yarn add @shopify/libra-rpc-graphql
```

## Development

Running `yarn start` will start a dev server that runs the GraphQL Playground app

## Usage

Running `yarn server` will run the GraphQL Playground server

### Notes

`submitTransaction` is not currently functional.
npm package: @shopify/libra-rpc-graphql-server
Description: Libra GraphQL Playground Apollo server running on express
Author: Shopify Inc.
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/libra-rpc-graphql-server`

[![Build Status](https://travis-ci.org/Shopify/web-tools.svg?branch=master)](https://travis-ci.org/Shopify/web-tools)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Flibra-rpc-graphql-server.svg)](https://badge.fury.io/js/%40shopify%2Flibra-rpc-graphql-server.svg)

Libra GraphQL Playground server

## Installation

```bash
$ yarn add @shopify/libra-rpc-graphql-server
```

## Usage

You can build a new express server by using `createSchema` and `createContext` from [`@shopify/libra-rpc-graphql`](https://github.com/Shopify/libra-web-tools/blob/master/packages/libra-rpc-graphql)

```tsx
/* eslint-env node */
/* eslint-disable no-process-env */

import express from 'express';

import {
  createContext,
  createSchema,
  LibraNetwork,
} from '@shopify/libra-rpc-graphql';
import {
  applyMiddleware,
  createServer,
  defaults,
} from '@shopify/libra-rpc-graphql-server';

const port = 8080;
const path = defaults.path;
const app = applyMiddleware(
  createServer(createSchema(), {
    context: createContext(LibraNetwork.Testnet),
    path,
    tabs: {minter: true},
  }),
);

app.listen(port, () => {
  console.log(
    `🚀  GraphQL playground running at http://localhost:${port}${path}`,
  );
});
```
npm package: @shopify/libra-web-wallet-utils
Description: A collection of web utilities to work with libra wallets.
Author: Shopify Inc.
Latest version: 2.0.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/libra-web-wallet-utils`

[![Build Status](https://travis-ci.com/Shopify/libra-web-tools.svg?branch=master)](https://travis-ci.com/github/Shopify/libra-web-tools)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Flibra-web-wallet-utils.svg)](https://badge.fury.io/js/%40shopify%2Flibra-web-wallet-utils.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/libra-web-wallet-utils.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/libra-web-wallet-utils.svg)

A collection of web utilities to work with libra wallets.

## Installation

```bash
$ yarn add @shopify/libra-web-wallet-utils
```

## Usage
npm package: @shopify/liquid-html-parser
Description: Liquid HTML parser by Shopify
Author: CP Clermont
Latest version: 2.9.2

<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>
  Liquid HTML parser
</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@shopify/liquid-html-parser"><img src="https://img.shields.io/npm/v/@shopify/liquid-html-parser.svg?sanitize=true" alt="Version"></a>
  <a href="https://github.com/Shopify/theme-tools/blob/main/LICENSE.md"><img src="https://img.shields.io/npm/l/@shopify/liquid-html-parser.svg?sanitize=true" alt="License"></a>
  <a href="https://github.com/Shopify/liquid-html-parser-prototype/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Shopify/prettier-plugin-liquid-prototype/actions/workflows/ci.yml/badge.svg"></a>
  <!--
    <a href="https://npmcharts.com/compare/@shopify/liquid-html-parser?minimal=true"><img src="https://img.shields.io/npm/dm/@shopify/prettier-plugin-liquid.svg?sanitize=true" alt="Downloads"></a>
  -->
</p>

This module provides the Liquid HTML parser that powers the prettier plugin, linter and language server for Liquid-powered Shopify themes.

It turns a `.liquid` file contents into an Abstract Syntax Tree (AST) that contains _both_ Liquid and HTML nodes.

## Installation

```bash
# with npm
npm install @shopify/liquid-html-parser

# with yarn
yarn add @shopify/liquid-html-parser
```

## Usage

```ts
import { toLiquidHtmlAST, LiquidHtmlNode, NodeTypes } from '@shopify/prettier-plugin-liquid';

const ast: LiquidHtmlNode = toLiquidHtmlAST(`
<body>
  {% for product in all_products %}
    <img src="{{ product | image_url }}">
  {% endfor %}
</body>
`);
```

## You should know

Because Liquid is very permissive, things like the `name` of an HTML tag may have a surprising type: an array of `LiquidVariableOutput | TextNode`. 

This is because the following use cases are supported by the parser:

```liquid
{% # compound html tag names %}
<tag-{{ name }}>
</tag-{{ name }}>

{% # compound html attribute names %}
<img data-{{ attr_name }}="...">
```

## License

MIT.
npm package: @shopify/logger
Description: Opinionated logger for production-scale applications
Author: Shopify Inc.
Latest version: 2.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/logger`

[![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%2Flogger.svg)](https://badge.fury.io/js/%40shopify%2Flogger.svg)

Opinionated logger for production-scale applications.

## Installation

```bash
yarn add @shopify/logger
```

## Usage

### Instantiation

A basic logger can be created simply by calling the `Logger` constructor:

```typescript
const logger = new Logger();
```

The `Logger` constructor also takes an `options` object. For example:

```typescript
const logger = new Logger({
  name: 'my-logger',
  formatter: new ConsoleFormatter(),
});
```

The `options` object adheres to the following interface:

```typescript
interface LoggerOptions {
  formatter?: Formatter;
  name?: string;
}
```

The `name` of a logger will be used as it's root scope. A formatter may use this to provide context when outputting a log entry. For example, the `ConsoleFormatter` will preface each log with its scope, such as:

```
[my-logger] ℹ info - some log text
```

A `Formatter` is simply an object that implements the `Formatter` interface:

```typescript
export interface Formatter {
  format(entry: FormatEntry): any;
}
```

In addition to writing your own formatter, See [Formatters](#formatters) below for a list of provided formatters.

### Logging

Given the logger above, we can log information to the console using the built-in `info`, `warn`, and `error` functions. For example:

```typescript
logger.info('Hello, world!');
logger.warn('Something bad might happen');
logger.error(new Error('Operation not permitted.'));
```

## Formatters

This package provides the following formatters:

- `ConsoleFormatter`

### `ConsoleFormatter`

Formats and prints logs via `console.log`, `console.warn`, and `console.error`.

#### Screenshots

![`ConsoleFormatter` sample error output](./docs/images/ConsoleFormatter__Error.png)

![`ConsoleFormatter` sample log output on a dark background](./docs/images/ConsoleFormatter__DarkBG.png)

![`ConsoleFormatter` sample log output on a light background](./docs/images/ConsoleFormatter__LightBG.png)
npm package: @shopify/loom
Description: The core data models for loom
Author: Shopify Inc.
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/loom`

## Modeling

Loom parses the shape of a codebase by modeling it into concepts it understands. At a high-level these these concepts are a `Workspace` and `Project`.

### Project

A `Project` can be a either a `Package` (NPM library), `WebApp` (a react app) or `Service` (a Node.js server).

### Workspace

A `Workspace` is a composition of `Project`s. It includes all the `WebApp`, `Package`, and `Services` for a given codebase.

### Base

`Workspace`, `WebApp`, `Package`, and `Service` all extend a `Base` class. The `Base` class provides a number of useful properties for the classes extending it. These include the a root directory, the NPM dependencies used, and an `fs` property which should be used for all `FileSystem` related operations.

## Core

Important classes to highlight here are `TargetRuntime` and `TargetBuilder`. In the context of loom, a _target_ refers to the build output for a given [`Project`](#project).

### TargetRuntime

The `TargetRuntime` class contains information about the runtime for a build target (eg. Does the build run in a Node.js or browser runtime?). This class provides a static utility, `TargetRuntime.fromProject`, to generate the TargetRuntime for a given `Project`.

### TargetBuilder

This class is foundational to how loom generates build outputs for a given project. It's heavily used by the `loom build` CLI command. This class can also be used to plugin authors to generate custom build outputs (eg. multi-browser and multi-locale builds).

## Installation

```sh
yarn add @shopify/loom --dev
```