feat(preact): add native support for preact

.gitignore

@@ -8,3 +8,5 @@ typings/*.js
 *.log
 yarn.lock
 package-lock.json
+.vscode
+preact/**/*

.travis.yml

@@ -2,18 +2,13 @@ sudo: false
 language: node_js
 cache:
   directories:
-    - node_modules
+    - ~/.npm
 notifications:
   email: false
-node_js:
-  - '8'
-script:
-  - npm start validate
+node_js: '8'
+script: npm run validate
 after_success:
   - npx codecov
-  - npm i -g semantic-release
-  - semantic-release pre && npm publish && semantic-release post
-  - npm start validate.examples
+  - npx -p semantic-release@7 -c "semantic-release pre && npm publish && semantic-release post"
 branches:
-  only:
-    - master
+  only: master

CONTRIBUTING.md

@@ -7,57 +7,67 @@ Thanks for being willing to contribute!
 
 ## Project setup
 
-(`node` v6 is required to run tests.)
 1. Fork and clone the repo
 2. `$ npm install` to install dependencies
-3. `$ npm start validate` to validate you've got it working
+3. `$ npm run validate` to validate you've got it working
 4. Create a branch for your PR
 
-This project uses [`nps`][nps] and you can run `npm start` to see what scripts are available.
+> Tip: Keep your `master` branch pointing at the original repository and make
+> pull requests from branches on your fork. To do this, run:
+>
+> ```
+> git remote add upstream https://github.com/paypal/glamorous.git
+> git fetch upstream
+> git branch --set-upstream-to=upstream/master master
+> ```
+>
+> This will add the original repository as a "remote" called "upstream,"
+> Then fetch the git information from that remote, then set your local `master`
+> branch to use the upstream master branch whenever you run `git pull`.
+> Then you can make all of your pull request branches based on this `master`
+> branch. Whenever you want to update your version of `master`, do a regular
+> `git pull`.
 
 ## Add yourself as a contributor
 
-This project follows the [all contributors][all-contributors] specification. To add yourself to the table of
-contributors on the README.md, please use the automated script as part of your PR:
+This project follows the [all contributors][all-contributors] specification.
+To add yourself to the table of contributors on the `README.md`, please use the
+automated script as part of your PR:
 
 ```console
-npm start contributors.add
+npm run add-contributor
 ```
 
-Follow the prompt. If you've already added yourself to the list and are making a new type of contribution, you can run
-it again and select the added contribution type.
+Follow the prompt and commit `.all-contributorsrc` and `README.md` in the PR.
+If you've already added yourself to the list and are making
+a new type of contribution, you can run it again and select the added
+contribution type.
 
 ## Committing and Pushing changes
 
-This project uses [`semantic-release`][semantic-release] to do automatic releases and generate a changelog based on the
-commit history. So we follow [a convention][convention] for commit messages. Please follow this convention for your
-commit messages. If you don't, it's not a huge deal because we can change your commit message when we merge anyway.
-
-Please make sure to run the tests before you commit your changes. You can run `npm start test.update` which will
-update any snapshots that need updating. Make sure to include those changes in your commit.
+Please make sure to run the tests before you commit your changes. You can run
+`npm run test:update` which will update any snapshots that need updating.
+Make sure to include those changes (if they exist) in your commit.
 
 ### opt into git hooks
 
-There are git hooks set up with this project that are automatically installed when you install dependencies. They're
-really handy, but are turned off by default (so as to not hinder new contributors). You can opt into these by creating
-a file called `.opt-in` at the root of the project and putting this inside:
+There are git hooks set up with this project that are automatically installed
+when you install dependencies. They're really handy, but are turned off by
+default (so as to not hinder new contributors). You can opt into these by
+creating a file called `.opt-in` at the root of the project and putting this
+inside:
 
 ```
 pre-commit
 ```
 
 ## Help needed
 
-Please checkout the [ROADMAP.md][ROADMAP] and raise an issue to discuss
-any of the items in the want to do or might do list.
+Please checkout the [the open issues][issues]
 
-Also, please watch the repo and respond to questions/bug reports/feature requests! Thanks!
+Also, please watch the repo and respond to questions/bug reports/feature
+requests! Thanks!
 
 [egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
-[semantic-release]: https://npmjs.com/package/semantic-release
-[convention]: https://github.com/conventional-changelog/conventional-changelog-angular/blob/ed32559941719a130bb0327f886d6a32a8cbc2ba/convention.md
 [all-contributors]: https://github.com/kentcdodds/all-contributors
-[ROADMAP]: ./other/ROADMAP.md
-[nps]: https://npmjs.com/package/nps
-[examples-readme]: ./examples
-[with-jest]: ./examples/with-jest
+[issues]: https://github.com/paypal/glamorous/issues

examples/with-jest/testSetup.js

@@ -4,4 +4,4 @@ import {matcher, serializer} from 'jest-glamor-react'
 expect.addSnapshotSerializer(serializer)
 
 // this adds toMatchSnapshot to expect and makes the snapshot diff output look nice in the terminal
-expect.extend(matcher)
+expect.extend(matcher)

jest.config.js

@@ -0,0 +1,8 @@
+const jest = require('kcd-scripts/config').jest
+
+jest.coveragePathIgnorePatterns = jest.coveragePathIgnorePatterns || []
+jest.coveragePathIgnorePatterns.push('/src/.*-entry.js$', '/src/constants.js$')
+
+module.exports = Object.assign({}, jest, {
+  snapshotSerializers: ['enzyme-to-json/serializer', 'jest-glamor-react'],
+})

other/__tests__/dist-preact.js

@@ -0,0 +1,140 @@
+/*
+ * This file is here to validate that the built version
+ * of the library exposes the module in the way that we
+ * want it to. Specifically that the ES6 module import can
+ * get the glamorous function via default import. Also that
+ * the CommonJS require returns the glamorous function
+ * (rather than an object that has the glamorous as a
+ * `default` property).
+ *
+ * This file is unable to validate the global export.
+ */
+import assert from 'assert'
+
+import * as esImportStar from '../preact/dist/glamorous.es'
+import * as esImportStarTiny from '../preact/dist/glamorous.es.tiny'
+import esImport from '../preact/dist/glamorous.es'
+import esImportTiny from '../preact/dist/glamorous.es.tiny'
+
+import cjsImport from '../preact' // picks up the main from package.json
+import cjsImportTiny from '../preact/dist/glamorous.cjs.tiny'
+
+import umdImport from '../preact/dist/glamorous.umd'
+import umdImportTiny from '../preact/dist/glamorous.umd.tiny'
+
+// intentionally left out because you shouldn't ever
+// try to require the ES file in CommonJS
+// const esRequire = require('../preact/dist/glamorous.es')
+const cjsRequire = require('../preact') // picks up the main from package.json
+const umdRequire = require('../preact/dist/glamorous.umd')
+const cjsRequireTiny = require('../preact/dist/glamorous.cjs.tiny')
+const umdRequireTiny = require('../preact/dist/glamorous.umd.tiny')
+
+assert(
+  isGlamorousFunction(esImport) && hasExtraExports(esImportStar),
+  'ES build has a problem with ES Modules',
+)
+assert(
+  isGlamorousFunction(esImportTiny) && !hasExtraExports(esImportStarTiny),
+  'ES Tiny build has a problem with ES Modules',
+)
+
+// assert(
+//   isGlamorousFunction(esRequire) && hasExtraExports(esRequire),
+//   'ES build has a problem with CJS',
+// )
+// assert(
+//   isGlamorousFunction(esRequireTiny) && !hasExtraExports(esRequireTiny),
+//   'ES Tiny build has a problem with CJS',
+// )
+// intentionally left out ☝️
+
+assert(
+  isGlamorousFunction(cjsImport) && hasExtraExports(cjsImport),
+  'CJS build has a problem with ES Modules',
+)
+
+assert(
+  isGlamorousFunction(cjsImportTiny) && !hasExtraExports(cjsImportTiny),
+  'CJS Tiny build has a problem with ES Modules',
+)
+
+assert(
+  isGlamorousFunction(cjsRequire) && hasExtraExports(cjsRequire),
+  'CJS build has a problem with CJS',
+)
+assert(
+  isGlamorousFunction(cjsRequireTiny) && !hasExtraExports(cjsRequireTiny),
+  'CJS Tiny build has a problem with CJS',
+)
+
+assert(
+  isGlamorousFunction(umdImport) && hasExtraExports(umdImport),
+  'UMD build has a problem with ES Modules',
+)
+
+assert(
+  isGlamorousFunction(umdImportTiny) && !hasExtraExports(umdImportTiny),
+  'UMD Tiny build has a problem with ES Modules',
+)
+
+assert(
+  isGlamorousFunction(umdRequire) && hasExtraExports(umdRequire),
+  'UMD build has a problem with CJS',
+)
+assert(
+  isGlamorousFunction(umdRequireTiny) && !hasExtraExports(umdRequireTiny),
+  'UMD Tiny build has a problem with CJS',
+)
+
+assert(
+  hasNamedExports(esImportStar) && !hasNamedExports(esImportTiny),
+  'ES build has a problem with helper tags exports',
+)
+
+// TODO: how could we validate the global export?
+
+console.log('Built modules look good 👍')
+
+function isGlamorousFunction(thing) {
+  if (typeof thing !== 'function') {
+    console.error(
+      `glamorous thing should be a function. It's a ${typeof thing} with the properties of: ${Object.keys(
+        thing,
+      ).join(', ')}`,
+    )
+    return false
+  }
+  return true
+}
+
+function hasExtraExports(thing) {
+  const extraExports = {
+    ThemeProvider: 'function',
+    withTheme: 'function',
+  }
+  const keys = Object.keys(extraExports)
+  return keys.every(key => typeof thing[key] === extraExports[key])
+}
+
+function hasNamedExports(thing) {
+  const GlamorousComponents = {
+    Div: 'function',
+    ObjectTag: 'function',
+  }
+  const keys = Object.keys(GlamorousComponents)
+  return keys.every(
+    key =>
+      typeof thing[key] === GlamorousComponents[key] &&
+      thing[key].isGlamorousComponent,
+  )
+}
+
+/*
+ eslint
+  no-console: 0,
+  import/extensions: 0,
+  import/no-unresolved: 0,
+  import/no-duplicates: 0,
+  no-duplicate-imports: 0,
+ */

dist-test/index.js → other/__tests__/dist-react.js

@@ -10,7 +10,6 @@
  * This file is unable to validate the global export.
  */
 import assert from 'assert'
-import {oneLine} from 'common-tags'
 
 import * as esImportStar from '../dist/glamorous.es'
 import * as esImportStarTiny from '../dist/glamorous.es.tiny'
@@ -100,11 +99,9 @@ console.log('Built modules look good 👍')
 function isGlamorousFunction(thing) {
   if (typeof thing !== 'function') {
     console.error(
-      oneLine`
-        glamorous thing should be a function.
-        It's a ${typeof thing} with the
-        properties of: ${Object.keys(thing).join(', ')}
-      `,
+      `glamorous thing should be a function. It's a ${typeof thing} with the properties of: ${Object.keys(
+        thing,
+      ).join(', ')}`,
     )
     return false
   }