# @withkoji/vcc

> Core library for developing remixable Koji templates

Latest version **1.1.49** (published 2021-04-16) · 0 weekly downloads

## Install

```sh
npm install @withkoji/vcc
pnpm add @withkoji/vcc
yarn add @withkoji/vcc
bun add @withkoji/vcc
```

Provides the command `koji-vcc`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.49 |
| Published | 2021-04-16 |
| First published | 2019-08-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 10 |
| Maintainers | arist0tl3, anderjason, sthielen |
| Keywords | koji, devtool |

## Links

- npm: https://www.npmjs.com/package/@withkoji/vcc
- Repository: https://github.com/madewithkoji/koji-vcc
- Homepage: https://withkoji.com
- Issues: https://github.com/madewithkoji/koji-vcc/issues
- npm.io page: https://npm.io/package/@withkoji/vcc

## Dependencies (12)

- [lodash](https://npm.io/package/lodash.md) ^4.17.19
- [chokidar](https://npm.io/package/chokidar.md) ^3.4.0
- [deep-diff](https://npm.io/package/deep-diff.md) ^1.0.2
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.10.5
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.10.5
- [object-path](https://npm.io/package/object-path.md) ^0.11.4
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.10.5
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.10.4
- [ansi-colors-and-styles](https://npm.io/package/ansi-colors-and-styles.md) ^1.0.3
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.10.5

## Recent versions

- 1.1.49 (latest) — 2021-04-16
- 1.1.48 — 2021-02-17
- 1.1.47 — 2020-12-26
- 1.1.46 — 2020-12-10
- 1.1.45 — 2020-12-09
- 1.1.44 — 2020-11-17
- 1.1.43 — 2020-11-17
- 1.1.42 — 2020-11-05
- 1.1.41 — 2020-10-29
- 1.1.40 — 2020-10-28
- 1.1.39 — 2020-10-27
- 1.1.38 — 2020-10-23
- 1.1.37 — 2020-10-23
- 1.1.36 — 2020-10-23
- 1.1.35 — 2020-10-23
- … 53 more at https://npm.io/package/@withkoji/vcc/versions

## README

# Koji VCC (deprecated)
![npm (scoped)](https://img.shields.io/npm/v/@withkoji/vcc?color=green&style=flat-square)

**Core library for developing remixable Koji templates.**

## Overview

The @withkoji/vcc package enables you to implement core platform features in your Koji template, including instant remixing, Visual Customization Controls (VCCs), and the Koji feed.

**[DEPRECATED]**
This package is deprecated and is included only for backwards compatibility.
For new templates, use [@withkoji/core](https://developer.withkoji.com/reference/core/withkoji-koji-core).

## Installation

Install the package in your Koji project.

```
npm install --save @withkoji/vcc
```

## Basic use

### Start the watcher

Reconfigure the `package.json` file to run the watcher (`koji-vcc watch`) concurrently with your development  server.
You can install and use a package like npm-run-all.
For example:

```
{
  "scripts": {
    ...
    "start": "npm-run-all -p watch start:server",
    "watch": "koji-vcc watch",
    "start:server": "webpack-dev-server --config ./.internals/webpack.development.js --inline --hot"
  }
}
```

**NOTE:** Make sure to replace the value of `"start:server"` with the `"start"` command for your project and remove the `prestart` command, if there is one.

### Support TypeScript

To ensure that VCCs work correctly in your TypeScript project, add the following line to the `scripts` section of the `package.json` file.

```
"prebuild": "koji-vcc preinstall-ts"
```

### InstantRemixing

Instant remixing enables users to customize values directly from the template preview, rather than from the Koji editor, for a quick and easy way to remix without coding.

To enable instant remixing for your Koji template, you must implement the `InstantRemixing` class and enable the `InstantRemixing` entitlement in the `.koji/project/entitlements.json` file.

```
{
  "entitlements": {
    "InstantRemixing": true
  }
}
```

Instantiate `InstantRemixing`.

```
import { InstantRemixing } from '@withkoji/vcc';
const instantRemixing = new InstantRemixing();
```

### VccMiddleware

This package includes an [Express middleware](http://expressjs.com/en/guide/using-middleware.html) to manage the environment variables for instant remixes and for access to VCC values from dynamic backends, as a companion to the frontend `InstantRemixing` class.

To implement this middleware, add it to your Express server.

```
import { VccMiddleware } from '@withkoji/vcc';

const app = express();
app.use(VccMiddleware.express);
```

This middleware is required to manage the environment variables to scope them for instant remixes of the original template.
In particular, you must call this middleware before instantiating certain packages, including [@withkoji/koji-iap](https://developer.withkoji.com/reference/packages/withkoji-koji-iap-package), [@withkoji/database](https://developer.withkoji.com/reference/packages/withkoji-database-package), and [@withkoji/koji-auth-sdk](https://developer.withkoji.com/reference/packages/withkoji-koji-auth-sdk).

### FeedSdk

The Koji feed enables users to browse available templates, moving them from off screen or out of focus, into the main window of the feed.

To ensure a template can be displayed correctly in the Koji feed, you must implement the `FeedSdk` and enable the `FeedEvents` entitlement in the `.koji/project/entitlements.json` file.

```
{
  "entitlements": {
    "FeedEvents": true
  }
}
```

**NOTE:** Kojis must be authorized by the Koji team to be displayed within the feed.
When you are confident that your template is able to function well within a feed, please contact us for review and authorization.

Instantiate `FeedSdk`.

```
import { FeedSdk } from '@withkoji/vcc';
const feed = new FeedSdk();
```

### Keystore

The `Keystore` module is used in conjunction with the secret VCC type to store sensitive data, ensuring the value is not visible when the project is remixed.

Instantiate `Keystore`.

```
import { Keystore } from '@withkoji/vcc';
const keystore = new Keystore();
```

## Related resources

- [Package documentation](https://developer.withkoji.com/reference/deprecated-packages/withkoji-vcc-package)
- [What is remixing?](https://developer.withkoji.com/docs/getting-started/instant-remixing)
- [Koji homepage](http://withkoji.com/)

## Contributions and questions

See the [contributions page](https://developer.withkoji.com/docs/about/contribute-koji-developers) on the developer site for info on how to make contributions to Koji repositories and developer documentation.

For any questions, reach out to the developer community or the `@Koji Team` on our [Discord server](https://discord.com/invite/9egkTWf4ec).

---
_Source: https://npm.io/package/@withkoji/vcc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._