open-index/open-npm huggingface dataset:
npm package: @shopify/ui-extensions-webpack-hot-client
Description: A custom webpack-hot-client implementation that works in the web worker environment of a UI extension
Latest version: 0.2.2

# `@shopify/ui-extensions-webpack-hot-client`

This package provides utilities for automatically reloading an UI extension script when content changes. The tools provided are similar to [`webpack-hot-client`](https://github.com/webpack-contrib/webpack-hot-client), but supports being run in a web worker and using the `self.shopify` API for "full" reloads.

## Installation

```bash
$ yarn add @shopify/ui-extensions-webpack-hot-client --dev
```

## Usage

You’ll reference two parts of this package in your webpack configuration:

- Include the `@shopify/ui-extensions-webpack-hot-client/worker` file in an array of files for the `entry` config.
- Import the `UIExtensionsHotClient` plugin and include it in your webpack configuration. This plugin **should not** be used in production builds. It also includes webpack’s `HotModuleReplacementPlugin` automatically, so do not include it manually in your configuration.

```ts
import {UIExtensionsHotClient} from '@shopify/ui-extensions-webpack-hot-client';

export function createWebpackConfig() {
  return {
    // Rest of config...
    entry: [
      // Make sure this entry appears first!
      '@shopify/ui-extensions-webpack-hot-client/worker',
      // Other entries
      'app/index',
    ],
    plugins: [
      // The order of your webpack plugins usually doesn’t matter
      new UIExtensionsHotClient(),
    ],
  };
}
```
npm package: @shopify/web-pixels-extension
Description: Provides tools to author Web Pixels extension
Latest version: 2.18.0

# Web Pixels Extension

Provides an `register` method to register a Web Pixels Extension.

## Installation

```bash
$ yarn add @shopify/web-pixels-extension
```

## Usage

Registering a Web Pixels Extension:

```js
import {register} from '@shopify/web-pixels-extension';

register(({configuration, analytics, browser, init}) => {
  window.my_pixel.configure({
    pixelId: configuration.pixelId,
    href: init.context.window.location.href,
    origin: init.context.window.location.origin,
  });

  analytics.subscribe('page_viewed', async (event) => {
    const cookieValue = await browser.cookie.get('my_pixel_cookie');

    window.my_pixel.publish('page_viewed', {
      href: event.context.window.location.href,
      origin: event.context.window.location.origin,
      cookie: cookieValue,
    });
  });
});
```
npm package: @shopify/web-worker-swc-plugin
Description: swc transform plugin for `@shopify/web-worker`
Author: Shopify Inc.
Latest version: 0.7.6

# shopify_web_worker_swc_plugin

Plugin for [`@shopify/web-worker`](https://github.com/Shopify/quilt/tree/main/packages/web-worker).

A swc plugin that identifies uses of createWorkerFactory that need to be processed.

## Tests

We do _not_ recommend including the plugin for the test environments. When the swc plugin is omitted, `Factory` will know to access your module asynchronously, and will proxy all method calls to it. When in this mode, the function returned from `createWorkerFactory` _will not_ actually construct a `Worker` for your code. As a result, this will only work if your worker code is written such that it will also execute successfully on the "main" thread. If you do use features in the worker that make it incompatible to run alongside the browser code, we recommend mocking the "worker" module (using [`jest.mock()`](https://jestjs.io/docs/mock-functions), for example).

## Usage

To load plugins, you may use `swcrc`'s `jsc.experimental` configs:

```
{
  jsc: {
    ...
   experimental: {
     ...
     cache_root: String // optional, specify where swc will create wasm bytecode cache
    // list of plugins. If `pluginname` is resolvable to npm package, it'll try to load from installed npm packages.
    // or it can be an absolute path to the .wasm binary
     plugins: [
        [
          '@shopify/web-worker-swc-plugin',
          {
            "webpackLoader": path.resolve('@shopify/web-worker/build/cjs/webpack-parts/loader.js'),
            "packages": {
              "@shopify/web-worker": [
                {
                  "name": "createPlainWorkerFactory"
                },
                {
                  "name": "createWorkerFactory",
                  wrapperModule: path.resolve('@shopify/web-worker/build/cjs/wrappers/expose.js.raw'),
                }
              ]
            }
          }
        ]
      ]
   }
}
```
npm package: @shopify/webpack-asset-metadata-plugin
Description: Generates a webpack asset metadata file containing subresource integrity SHAs
Author: Shopify Inc.
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/webpack-asset-metadata-plugin`

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

Webpack plugin use to generate manifest file.

## Installation

```sh
$ yarn add @shopify/webpack-asset-metadata-plugin
```

## Usage

```ts
import {AssetMetadataPlugin} from '@shopify/webpack-asset-metadata-plugin';

const compiler = webpack({
  plugins: [
    new AssetMetadataPlugin(
      {name: 'baseline'},
      {
        filename: 'assets.json',
        assetBasePath: path.resolve(buildDir, '..'),
        includeIntegrity: true,
      },
    ),
  ],
});
```

## Options

### `identifier`

A target name required. Display directly in the manifest file.

```ts
export interface ManifestIdentifier {
  locales?: string[];
  target: string;
}
```

### `browsers`

Optional. Display directly in the manifest file.

### `assetBasePath`

Optional. Default value 'false'.

Use if asset location is different from webpack setup. (ie. in Rails+React project it is `public`)

### `filename`

Optional. Default value 'assets.json'.
The name of the manifest file, often chaned to `sewing-kit-manifest.json`

### `includeIntegrity`

Optional. Default value 'false'.
This value is typically set to true for production mode.
npm package: @shopify/webpack-persisted-graphql-plugin
Description: Generates a GraphQL metadata file mapping hash identifiers to the original source
Author: Shopify Inc.
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `webpack-persisted-graphql-plugin`

## Usage

This plugin hooks into `emit` stage of the Webpack compilation, finds all modules that were originally `.graphql` files, extracts some metadata, and writes it to a JSON file. The contents of this file are a map from unique identifier to the "resolved" GraphQL document. In order for this process to work, you must use the [`graphql-mini-transforms` Webpack loader](https://github.com/Shopify/graphql-tools-web/tree/main/packages/graphql-mini-transforms) to transform GraphQL documents, as this plugin depends on the shape of that loader's output.

With this file, it is easy to implement persisted queries:

- Send the unique identifier from the GraphQL document instead of its contents (for example, using the [`graphql-persisted` Apollo link](https://github.com/Shopify/quilt/tree/master/packages/graphql-persisted))
- On the server, read the manifest file produced by this plugin
- Take the identifier from the GraphQL request, and look that value up in the manifest file
- If a value is found, use that as the GraphQL document (otherwise, send a response that forces the client to send the full GraphQL document)

The JSON file produced by this plugin is written in the `outputPath` of the compilation, with the `filename` set when constructing this plugin.

```tsx
import {PersistedGraphQLPlugin} from '@shopify/webpack-persisted-graphql-plugin';

const webpackConfig = {
  //
  // Rest of the config...
  //
  plugins: [
    new PersistedGraphQLPlugin({
      filename: 'graphql.json', // default is 'persisted-graphql.json'
    }),
  ],
};
```
npm package: @shopify/webpack-react-loadable-plugin
Description: Fails webpack builds when a module is unexpectedly tree-shaken
Author: Shopify Inc.
Latest version: 2.0.0
Deprecated: This

# `@shopify/webpack-react-loadable-plugin`

## 🛑 Deprecated Package

This plugin is deprecated. Use [`@shopify/react-async`](https://github.com/Shopify/quilt/tree/master/packages/react-async) and [`@shopify/async`](https://github.com/Shopify/quilt/tree/master/packages/async) instead.
npm package: @shopify/webpack-runtime-sri-verification-plugin
Description: Verifies that SRI hashes embedded in async JavaScript and CSS filenames are referenced by a runtime file
Author: Shopify Inc.
Latest version: 2.0.0
Deprecated: This

# `@shopify/webpack-runtime-sri-verification-plugin`

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated.
npm package: @shopify/with-env
Description: A utility for executing code under a specific `NODE_ENV`
Author: Shopify Inc.
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/with-env`

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

A utility for executing code under a specific `NODE_ENV`.

## Installation

```bash
yarn add @shopify/with-env
```

Or, if you just need this for `test`s:

```bash
yarn add --dev @shopify/with-env
```

## Example Usage

In this example, we are testing some code using `Jest`. Note that, while `Jest` is not required to use `@shopify/with-env`, it is our recommended testing framework for node and javascript applications.

```ts
import withEnv from '@shopify/with-env';

it('does one thing in development', () => {
  withEnv('development', () => {
    // your code here
  });
});

it('does another thing in production', () => {
  withEnv('production', () => {
    // your code here
  });
});
```

It also allows to change (and reset) multiple environment variables at once.

```ts
import withEnv from '@shopify/with-env';

it('does one thing', () => {
  withEnv({MY_ENV_ONE: 'test', ANOTHER_ENV: 'test-2'}, () => {
    // your code here
  });
});
```