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 (e.g.
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
Use this repo like you would any other Buffer repo: make changes in a separate branch, ask for code review when necessary, merge PR in master when ready. Storybook will be added to this repo so that we can work on the composer easily in isolation. For now, see the last section of this readme for development tips.
Once changes are into master:
npm publish --access public
@bufferapp/composerpoint to the version you've just published)
gulp watch/webpack --app contentController(
watchfor dev env and watch changes,
webpackfor prod env)
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
@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-utils.js. During the Web build process, the "iframe bundles" (
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!
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!
npm run compile
/buffer-web/node_modules/@bufferapp/composer/dist(replace existing files with the new ones)
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)
/buffer-composer/directory and drop it in
yarn run bootstrapthen
yarn run watch