# Package contents

## Public test packages

The following packages are available on npm for testing purposes.

* `@pqina/pintura`
* `@pqina/pintura-video`
* `@pqina/react-pintura`
* `@pqina/vue-pintura`
* `@pqina/svelte-pintura`
* `@pqina/angular-pintura`
* `@pqina/filepond-plugin-image-editor`

You can install the `@pqina/pintura` package like shown below.

```bash
npm install @pqina/pintura
```

You can install the video editor extension `@pqina/pintura-video` like this.

```bash
npm install @pqina/pintura-video
```

The test version `@pqina/pintura` will render a watermark on top of the editor and generated images. It is available for testing purposes only.

The [private](#private-npm-packages) and [downloadable](#downloadable-pintura-package) package will not overlay a watermark.

## Private npm packages

The Pintura Labs private npm hosts the following packages.

* `@pqina/pintura`
* `@pqina/pintura-video`

[Example projects are available on GitHub](#example-projects-and-components-on-github)

Locale files are available in the package, but can also be imported from `@pqina/pintura/locale/<locale_code>`

### Installing the private npm package

#### Npm

Before installing the production version make sure to remove the existing package and clear the npm cache.

1. Run `npm uninstall @pqina/pintura`
2. Uninstall framework components, for example `@pqina/svelte-pintura`
3. Run `npm cache clean`
4. Add a `.npmrc` file with the following content.  
```bash  
@pqina:registry=https://npm.pqina.nl/  
//npm.pqina.nl/:_authToken=${PQINA_NPM_TOKEN}  
```  
Replace `${PQINA_NPM_TOKEN}` with your private pqina npm token as shown on the customer portal under your license details. Or you can use [npm environment variables](https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#create-and-check-in-a-project-specific-npmrc-file) in your `.npmrc` file to better secure your private token.
5. Run npm install @pqina/pintura

To determine if the production version is installed you can open the `node_modules` directory and navigate to the `@pqina/pintura` package. The package.json file should have its `publishConfig` property set to `https://npm.pqina.nl`.

If the production version is installed but you still see the test version, please make sure your front-end framework has not cached the test version.

[How to prevent accidental installation of test version?](#prevent-accidental-installation-of-test-version)

#### Yarn

If you're using Yarn 1.x, we recommend updating to at least v2\. Alternatively please see this [GitHub issue on using private npm registries with Yarn 1.x](https://github.com/yarnpkg/yarn/issues/6436).

Before installing the production version make sure to remove the existing package and clear the Yarn cache.

1. Run `yarn remove @pqina/pintura`
2. Remove Pintura framework components, for example `@pqina/svelte-pintura`
3. Run `yarn cache clean`
4. Add a `.yarnrc.yml` file wit the following content.  
```bash  
npmScopes:  
  pqina:  
    npmRegistryServer: "https://npm.pqina.nl/"  
    npmAlwaysAuth: true  
    npmAuthToken: ${PQINA_NPM_TOKEN}  
```  
Replace `${PQINA_NPM_TOKEN}` with your private pqina npm token as shown on the customer portal under your license details. Or you can use [npm environment variables](https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#create-and-check-in-a-project-specific-npmrc-file) in your `.npmrc` file to better secure your private token.
5. Run `yarn add @pqina/pintura`

To determine if the production version is installed you can run `yarn npm info @pqina/pintura`. This command will log information about the installed package. The package should have its `publishConfig` property set to `https://npm.pqina.nl`.

If the production version is installed but you still see the test version, please make sure your front-end framework has not cached the test version.

[How to prevent accidental installation of test version?](#prevent-accidental-installation-of-test-version)

#### Pnpm

Before installing the production version make sure to remove the existing package and clear the Pnpm cache.

1. Run pnpm remove @pqina/pintura
2. Remove Pintura framework components, for example `@pqina/svelte-pintura`
3. Run pnpm cache delete
4. Run pnpm store prune
5. Add a .npmrc file wit the following content.  
```bash  
@pqina:registry=https://npm.pqina.nl/  
//npm.pqina.nl/:_authToken=${PQINA_NPM_TOKEN}  
```  
Replace `${PQINA_NPM_TOKEN}` with your private pqina npm token as shown on the customer portal under your license details. Or you can use [npm environment variables](https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#create-and-check-in-a-project-specific-npmrc-file) in your `.npmrc` file to better secure your private token.
6. Run pnpm add `@pqina/pintura`

To determine if the production version is installed you can open the `node_modules` directory and navigate to the `@pqina/pintura` package. The package.json file should have its `publishConfig` property set to `https://npm.pqina.nl`.

If the production version is installed but you still see the test version, please make sure your front-end framework has not cached the test version.

[How to prevent accidental installation of test version?](#prevent-accidental-installation-of-test-version)

### Prevent accidental installation of test version

To prevent installation of the test version we can use the [@pqina/package-has-origin](https://www.npmjs.com/package/@pqina/package-has-origin) npm package.

By running the check in a `prebuild` script we can make sure that the production build always uses the production version of Pintura.

If it finds the package wasn't installed from `npm.pqina.nl` it will throw an error and the build will not run.

```js
// package.json
{
    "scripts": {
        "prebuild": "npx @pqina/package-has-origin @pqina/pintura npm.pqina.nl",
        "build": "echo \"Running build\" && exit 1"
    }
}
```

## Downloadable Pintura package

The downloadable product package contains the following folders and files.

The `package` folder contains the Pintura JavaScript Module, IIFE, and UMD builds as well as the stylesheet and the TypeScript declaration file.

The `package` folder also contains the `locale` folder that has all exposes all the different language packs. Note that if your locale isn't available in the default pack you can duplicate and edit the files to support different locales.

* README.md
* CHANGELOG.md
* package  
  * pintura.css
  * pintura.module.css
  * pintura.js
  * pintura.d.ts
  * pintura-iife.js
  * pintura-umd.js
  * locale  
    * en\_GB
    * de\_DE
    * es\_ES
    * fr\_FR
    * pt\_PT
    * hi\_IN
    * ko\_KR
    * it\_IT
    * nb\_NO
    * nl\_NL
    * sv\_SE
    * ja\_JP
    * zh\_CN
    * ru\_RU

## Example projects and components on GitHub

### JavaScript

* [JavaScript](https://github.com/pqina/pintura-example-javascript)
* [PinturaInput](https://github.com/pqina/pintura-example-pintura-input)
* [CustomElement](https://github.com/pqina/pintura-example-custom-element)

### Frameworks

* [jQuery](https://github.com/pqina/pintura-example-jquery)
* [Angular](https://github.com/pqina/pintura-example-angular)
* [Vue 2](https://github.com/pqina/pintura-example-vue-2)
* [Vue 3](https://github.com/pqina/pintura-example-vue-3)
* [Nuxt 2](https://github.com/pqina/pintura-example-nuxt-2)
* [Nuxt 3](https://github.com/pqina/pintura-example-nuxt-3)
* [Svelte](https://github.com/pqina/pintura-example-svelte)
* [SvelteKit](https://github.com/pqina/pintura-example-sveltekit)
* [React](https://github.com/pqina/pintura-example-react)
* [React TypeScript](https://github.com/pqina/pintura-example-react-typescript)
* [NextJS](https://github.com/pqina/pintura-example-nextjs)
* [React Native](https://github.com/pqina/pintura-example-react-native)
* [React Native TypeScript](https://github.com/pqina/pintura-example-react-native-typescript)
* [React Native Expo](https://github.com/pqina/pintura-example-react-native)
* [Cordova](https://github.com/pqina/pintura-example-cordova)
* [Capacitor](https://github.com/pqina/pintura-example-capacitor)
* [Ionic 6](https://github.com/pqina/pintura-example-ionic-6)

### Integrations

* [FilePond](https://github.com/pqina/pintura-example-filepond)
* [jQuery File Upload](https://github.com/pqina/pintura-example-jquery-file-upload)
* [React Dropzone](https://github.com/pqina/pintura-example-react-dropzone)
* [Dropzone](https://github.com/pqina/pintura-example-dropzone)
* [Uppy](https://github.com/pqina/pintura-example-uppy)

### Components

* [PinturaInput](https://github.com/pqina/pintura-component-pintura-input)
* [Vue](https://github.com/pqina/pintura-component-vue)
* [React](https://github.com/pqina/pintura-component-react)
* [Angular](https://github.com/pqina/pintura-component-angular)
* [Svelte](https://github.com/pqina/pintura-component-svelte)
* [React Native](https://github.com/pqina/pintura-component-react-native)
* [React Native Expo](https://github.com/pqina/pintura-component-react-native-expo)

### Adapters

* [jQuery](https://github.com/pqina/pintura-adapter-jquery)
* [FilePond](https://github.com/pqina/filepond-plugin-image-editor)
* [Uppy](https://github.com/pqina/pintura-adapter-uppy)
* [Dropzone](https://github.com/pqina/pintura-adapter-dropzone)