[WIP] Infrastructure + misc fixes and such.

.babelrc

@@ -5,7 +5,7 @@
     "react"
   ],
   "plugins": [
-    "transform-decorators-legacy",
+    "transform-decorators-legacy"
   ],
   "env": {
     "production": {
@@ -15,8 +15,8 @@
         "transform-react-constant-elements",
         "transform-react-inline-elements",
         "transform-runtime",
-        "transform-decorators-legacy",
-      ],
+        "transform-decorators-legacy"
+      ]
     },
     "test": {
       "plugins": [

.gitignore

@@ -3,4 +3,4 @@ dist
 lib
 *.log
 .DS_Store
-.vscode
+.vscode

.npmignore

@@ -1,3 +1,11 @@
-node_modules
-src
-*.log
+/*
+!/dist/spectacle*
+dist/*.map
+!/docs
+!/lib
+!/src
+__snapshots__
+*.test.js
+!LICENSE
+!README.md
+!package.json

.travis.yml

@@ -2,9 +2,8 @@ language: node_js
 
 node_js:
   - 4
-  - 5
   - 6
-  - 7
+  - 8
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -19,10 +18,9 @@ notifications:
     on_failure: always
 
 before_install:
-  - npm install -g npm@3
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 
 script:
-  - npm run lint
-  - npm run test
+  - yarn run lint
+  - yarn run test

CONTRIBUTING.md

@@ -0,0 +1,109 @@
+Thanks for contributing!
+
+## Development
+
+### Installing dependencies
+
+```bash
+yarn install
+```
+
+You will find all building blocks that make up Spectacle in the [`src`](src) folder.
+
+### Testing
+
+You will find tests for files colocated with `*.test.js` suffixes. Whenever making any changes, ensure that all existing tests pass by running `yarn run test`.
+
+If you are adding a new feature or some extra functionality, you should also make sure to accompany those changes with appropriate tests.
+
+### Linting
+
+Before commiting any changes, be sure to do `yarn run lint`; this will lint all relevant files using [ESLint](http://eslint.org/) and report on any changes that you need to make.
+
+### Before submitting a PR...
+
+Thanks for taking the time to help us make Spectacle even better! Before you go ahead and submit a PR, make sure that you have done the following:
+
+- Run the tests using `yarn run test`.
+- Run lint and flow using `yarn run lint`
+
+## Releasing a new version to NPM (only for project administrators):
+
+1. Run `npm version patch` (or `minor`, `major` as appropriate) to run tests and lint, build the `lib` ands `dist` directories, , then update `package.json` and add a git tag.
+2. Run `npm publish` and publish to npm if all is well.
+3. Run `git push && git push --tags`
+
+## Contributor Covenant Code of Conduct
+
+### Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+### Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+### Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+### Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at ken.wheeler@formidable.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

README.markdown → README.md

@@ -1,6 +1,7 @@
 # Spectacle
 
 [![Join the chat at https://gitter.im/FormidableLabs/spectacle](https://badges.gitter.im/FormidableLabs/spectacle.svg)](https://gitter.im/FormidableLabs/spectacle?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Travis Status][trav_img]][trav_site]
 ReactJS based Presentation Library
 
 [Spectacle Boilerplate](https://github.com/FormidableLabs/spectacle-boilerplate/)
@@ -57,7 +58,9 @@ ReactJS based Presentation Library
 
 The best way to get started is by using the [Spectacle Boilerplate](https://github.com/FormidableLabs/spectacle-boilerplate).
 
-Alternatively, you can `npm install spectacle` and write your own build configurations.
+Alternatively, you can `npm install spectacle` and write your own build configurations. We also provide full UMD builds (with a `Spectacle` global variable) of the library at `dist/spectacle.js` and `dist/spectacle.min.js` for more general use cases. You could, for example, include the library via a script tag with: `https://unpkg.com/spectacle@VERSION/dist/spectacle.min.js`.
+
+Note that we have webpack externals for `react`, `react-dom`, and `prop-types`, so you will need to provide them in your upstream build or something like linking in via `script` tages in your HTML page for all three libraries. This comports with our project dependencies which place these three libraries in `peerDependencies`.
 
 But really, it is SO much easier to just use the boilerplate. Trust me.
 
@@ -75,7 +78,7 @@ Open a browser and hit [http://localhost:3000](http://localhost:3000), and we ar
 <a name="build--deployment"></a>
 ## Build & Deployment
 
-Building the dist version of the project is as easy as running `npm run build`
+Building the dist version of the slides is as easy as running `npm run build:dist`
 
 If you want to deploy the slideshow to surge, run `npm run deploy`
 
@@ -563,3 +566,6 @@ The `Typeface` tag is used to apply a specific font to text content. It can eith
 - [Spectacle Code Slide](https://github.com/thejameskyle/spectacle-code-slide) - Step through lines of code using this awesome slide extension by @thejameskyle
 - [Spectacle Terminal Slide](https://github.com/elijahmanor/spectacle-terminal) - Terminal component that can be used in a spectacle slide deck by @elijahmanor
 - [Spectacle Image Slide](https://github.com/FezVrasta/spectacle-image-slide) - Show a slide with a big image and a title on top
+
+[trav_img]: https://api.travis-ci.org/FormidableLabs/spectacle.svg
+[trav_site]: https://travis-ci.org/FormidableLabs/spectacle

index.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { render } from "react-dom";
+import React from 'react';
+import { render } from 'react-dom';
 
-import Presentation from "./example/src";
+import Presentation from './example/src';
 
-render(<Presentation/>, document.getElementById("root"));
+render(<Presentation/>, document.getElementById('root'));

package.json

@@ -4,11 +4,17 @@
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
   "scripts": {
+    "preversion": "npm run test && npm run lint",
+    "version": "npm run build:publish",
     "clean:lib": "rimraf lib",
     "clean:dist": "rimraf dist",
-    "build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && babel example/src -d example/lib --copy-files",
+    "clean": "npm run clean:lib && npm run clean:dist",
+    "build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && rimraf 'lib/**/__snapshots__' 'lib/**/*.test.js'",
     "build:dist": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
-    "lint": "eslint --ext .js,.jsx src",
+    "build:dist-umd": "webpack --config webpack.config.umd.js",
+    "build:dist-umd-prod": "cross-env NODE_ENV=production webpack --config webpack.config.umd.production.js",
+    "build:publish": "npm run clean && npm run build:lib && npm run build:dist-umd && npm run build:dist-umd-prod",
+    "lint": "eslint src *.js",
     "deploy": "npm run build:dist && surge -p .",
     "start": "node server.js",
     "test": "jest --verbose"

src/components/__snapshots__/presenter.test.js.snap

@@ -139,7 +139,7 @@ exports[`<Presenter /> should render correctly 1`] = `
           </styled.div>
           <styled.div>
             <div
-              className="hiNnBp"
+              className="haajbE"
             />
           </styled.div>
         </div>
@@ -314,7 +314,7 @@ exports[`<Presenter /> should render timer when set in params. 1`] = `
           </styled.div>
           <styled.div>
             <div
-              className="hiNnBp"
+              className="haajbE"
             >
               <div
                 dangerouslySetInnerHTML={
@@ -474,7 +474,7 @@ exports[`<Presenter /> should render with notes when slides have them. 1`] = `
           </styled.div>
           <styled.div>
             <div
-              className="hiNnBp"
+              className="haajbE"
             >
               <div
                 dangerouslySetInnerHTML={

webpack.config.production.js

@@ -1,22 +1,22 @@
-var path = require("path");
-var webpack = require("webpack");
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
-  devtool: "source-map",
+  devtool: 'source-map',
   entry: [
-    "babel-polyfill",
-    "./index"
+    'babel-polyfill',
+    './index'
   ],
   output: {
-    path: path.join(__dirname, "dist"),
-    filename: "bundle.js",
-    publicPath: "/dist/"
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/dist/'
   },
   plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.DefinePlugin({
-      "process.env": {
-        "NODE_ENV": JSON.stringify("production")
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
       }
     }),
     new webpack.optimize.UglifyJsPlugin({
@@ -29,16 +29,16 @@ module.exports = {
     loaders: [{
       test: /\.js$/,
       exclude: /node_modules/,
-      loader: "babel-loader"
+      loader: 'babel-loader'
     }, {
       test: /\.css$/,
-      loader: "style-loader!css-loader"
+      loader: 'style-loader!css-loader'
     }, {
       test: /\.(png|jpg)$/,
-      loader: "url-loader?limit=8192"
+      loader: 'url-loader?limit=8192'
     }, {
       test: /\.svg$/,
-      loader: "url-loader?limit=10000&mimetype=image/svg+xml"
+      loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
     }]
   }
 };

webpack.config.umd.js

@@ -0,0 +1,63 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    spectacle: './src/index.js'
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    pathinfo: true,
+    filename: '[name].js',
+    library: 'Spectacle',
+    libraryTarget: 'umd'
+  },
+  externals: [
+    {
+      'react': {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react'
+      }
+    },
+    {
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom'
+      }
+    },
+    {
+      'prop-types': {
+        root: 'PropTypes',
+        commonjs2: 'prop-types',
+        commonjs: 'prop-types',
+        amd: 'prop-types'
+      }
+    }
+  ],
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map'
+    })
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader'
+    }, {
+      test: /\.css$/,
+      loader: 'style-loader!css-loader'
+    }, {
+      test: /\.(png|jpg)$/,
+      loader: 'url-loader?limit=8192'
+    }, {
+      test: /\.svg$/,
+      loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+    }]
+  }
+};