[![](https://img.shields.io/npm/v/@bufferapp/composer.svg)](https://www.npmjs.com/package/@bufferapp/composer)

# buffer-composer

## Deprecation Notice
Buffer Classic will now use the `classic` branch for the composer. Buffer Publish will continue to use the `master` branch.

## New steps to updating the composer within Buffer Classic
1. Go to the buffer-composer package `cd buffer-composer`
2. Checkout the classic branch `git checkout classic`
3. Pull down the latest changes `git pull` and create a new branch off of the `classic` branch `git checkout -b your-branch-name`
4. Once you have made your changes, create a new PR and ask for a code review if necessary.
5. Go ahead and merge your changes into the `classic` branch.
6. Bump the version of the classic composer. Do not bump to version v3.0.0 or above as that is reserved for the `master` branch of the composer (i.e., the New Publish version). Bump the minor or patch versions instead so that classic stays on `v2.x`. `npm version [minor|patch]`
7. Publish this new version to npm using the `classic` tag: `npm publish --access public --tag classic`
8. Update to this new version in buffer-web's `package.json` (e.g.,: `"@bufferapp/composer": "2.7.0"`)
9. Bundle and deploy as usual:
  - run `gulp watch/webpack --app contentController` (`watch` for dev env and watch changes, `webpack` for prod env)

## Repo Structure

- `composer/`: the composer itself, exports a React component; should only be consumed in this package
- `interfaces/`: composer wrappers; use those wrappers to make use of the composer in a project; interfaces are named according to their target environment
  - `utils/`: wrapper utilities; for some projects, e.g. buffer-web with its iframe approach, an extra set of helpers is needed on the other side of the frame, for communication and whatnot: this is it

## How the composer is consumed

The composer is the same across all projects. However each project has its own set of specificities,
so this package offers a tailored interface for each project the composer is currently being used in.

Here's how the composer is being used across our apps:

- `buffer-publish`: The Publish interface is nothing more than a `Composer` React component that you
  can drop anywhere in the app and pass props to. It's exported as `bufferPublishComposer` from `@bufferapp/composer`. Publish will import those source files and build them; the JS is imported into Publish's larger JS bundle, the CSS is transformed and bundled in a separate CSS file.

- `buffer-web`: When the composer package is published to npm, JS and CSS bundles are generated at the same time: `composer-web-iframe-bundle.js`, `composer-web-iframe-bundle.css`, and `composer-web-iframe-utils.js`. During the Web build process, the "iframe bundles" (`composer-web-iframe-bundle.js` & `composer-web-iframe-bundle.css`) are copied over to the assets directory, to be served to the browser as is. The "iframe utils" bundle (`composer-web-iframe-utils.js`), however, is imported into Web's `content_controller.js` to access utility methods that the dashboard needs to handle the Web composer's iframe setup and communication with the composer. How this works when the Web dashboard loads in a browser: an hidden iframe is created without slowing down the loading of the rest of the dashboard, pre-loading the composer (served from buffer.com/add) inside of it. Web's content controller uses `postMessage` to init the composer with the appropriate data when desired, also showing/hiding its wrapper iframe as needed.

- `buffer-extensions`: Down the road we're also hoping this package can pave the way to native browser extensions, instead of the iframe we're currently using, which would make our extensions much faster.

Search for "@bufferapp/composer" in any of those repos to see examples of how the Composer is currently being used!

## Dev tips

Without Storybook, there's no super easy way to make changes while getting feedback yet. Here's how I've made it work so far, feel free to add alternative workflows while Storybook makes its way here!

- `buffer-web`:
  - Make desired changes to the composer package
  - Run, in `buffer-composer`: `npm run compile-dev`
  - Copy `/buffer-composer/dist/*` to `/buffer-web/node_modules/@bufferapp/composer/dist` (replace existing files with the new ones)
  - Run, in `buffer-web`: `gulp watch --app contentController` (or stop/restart it if it's already running, it'll copy those bundles to the right place when starting up)
