# @corejam/plugin-canvas

> Corejam Visual Canvas CMS Plugin

Latest version **0.0.11** (published 2021-03-22) · MIT license · 35 weekly downloads

## Install

```sh
npm install @corejam/plugin-canvas
pnpm add @corejam/plugin-canvas
yarn add @corejam/plugin-canvas
bun add @corejam/plugin-canvas
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2021-03-22 |
| First published | 2020-12-11 |
| Weekly downloads | 35 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 46.6 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | mattvb91, patrickhaug |

## Links

- npm: https://www.npmjs.com/package/@corejam/plugin-canvas
- npm.io page: https://npm.io/package/@corejam/plugin-canvas

## Dependencies (9)

- [xstate](https://npm.io/package/xstate.md) 4.16.2
- [aws-sdk](https://npm.io/package/aws-sdk.md) 2.865.0
- [faunadb](https://npm.io/package/faunadb.md) 4.1.1
- [graphql-tag](https://npm.io/package/graphql-tag.md) 2.11.0
- [@corejam/run](https://npm.io/package/@corejam/run.md) 0.0.13
- [@corejam/base](https://npm.io/package/@corejam/base.md) 0.0.14
- [@stencil/store](https://npm.io/package/@stencil/store.md) 1.4.1
- [deep-parse-json](https://npm.io/package/deep-parse-json.md) 1.0.1
- [rollup-plugin-node-polyfills](https://npm.io/package/rollup-plugin-node-polyfills.md) 0.2.1

## Recent versions

- 0.0.11 (latest) — 2021-03-22
- 0.0.11-alpha.341 (next) — 2021-03-13
- 0.0.11-alpha.333 — 2021-03-11
- 0.0.10 — 2021-03-08
- 0.0.10-alpha.307 — 2021-03-03
- 0.0.10-alpha.305 — 2021-03-03
- 0.0.10-alpha.301 — 2021-03-03
- 0.0.10-alpha.299 — 2021-03-02
- 0.0.9 — 2021-03-02
- 0.0.9-alpha.288 — 2021-03-02
- 0.0.9-alpha.283 — 2021-03-01
- 0.0.9-alpha.222 — 2021-02-28
- 0.0.9-alpha.216 — 2021-02-27
- 0.0.8 — 2021-02-26
- 0.0.8-alpha.210 — 2021-02-19
- … 13 more at https://npm.io/package/@corejam/plugin-canvas/versions

## README

# @corejam/canvas-plugin

The Visual Canvas CMS plugin allows you to create dynamic "canvas" pages inside your corejam application using the `<corejam-canvas>` element.

In short, this package gives you a static site builder that works directly inside your browser and deploys directly to a CDN (currently only supports S3, more coming soon)

It currently supports the following data connectors: 

- FaunaDB
- S3 Bucket


## Getting Started

Install:

```bash
//yarn
yarn install @corejam/plugin-canvas

// npm
npm i @corejam/plugin-canvas
```

## How does it work?

When you create a new canvas page everything happens on the client side. The app is already bootstrapped and we take the `<corejam-run-router>` innerHTML and post it to your corejam API which includes the following endpoints:

```graphql

type CanvasPage implements Timestamp @cacheControl(maxAge: 300) {
  id: ID!
  canvas: String!
  seo: SEO!
  peers: CanvasPeers
  dateCreated: String!
  dateUpdated: String!
}

extend type Mutation {
  canvasPageCreate(canvasPageInput: CanvasPageInput!): CanvasPage
  canvasPageEditSEO(id: ID!, seoInput: SEOInput!): CanvasPage
  canvasPageEdit(id: ID!, canvasPage: CanvasPageInput!): CanvasPage
  canvasOpenPeers(id: ID!, peerInput: CanvasPeerInput!): CanvasPeers
  canvasPollPeers(id: ID!): CanvasPeers
  canvasClosePeers(id: ID!): CanvasPage
}

extend type Query {
  allCanvasPages: [CanvasPage]
  paginateCanvasPages(page: Int!, size: Int!): CanvasPageList
  canvasPageById(id: ID!): CanvasPage
  canvasPollPeers(id: ID!): CanvasPeers
}
```

The `CanvasPage` object contains a `canvas: String!` attribute which is the `<corejam-run-router>` outerHTML contents. 

Creating a new canvas page:

```graphql
mutation createCanvas($canvasPageInput: CanvasPageInput!) {
    canvasPageCreate(canvasPageInput: $canvasPageInput) {
        id
        seo {
            url
        }
        canvas
    }
}
```

## Canvas Peers

** This is work in progress

The canvas has the ability to open a peer to peer connection with another user for realtime collaboriation.

TODO more

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