Initial commit

developit · Mar 5, 2016 · 08bbe05 · 08bbe05
commit 08bbe05
Show file tree

Hide file tree

Showing 14 changed files with 449 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+	"sourceMap": "inline",
+	"presets": ["es2015-loose", "stage-0", "react"],
+	"plugins": [
+		"transform-object-rest-spread",
+		["transform-react-jsx", { "pragma":"h" }]
+	]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,.*rc,*.yml}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+*.md
+*.conf.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,55 @@
+{
+  "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "rules": {
+    "no-empty": 0,
+    "no-console": 0,
+    "no-unused-vars": [0, { "varsIgnorePattern": "^h$" }],
+    "no-cond-assign": 1,
+    "semi": 2,
+    "camelcase": 0,
+    "comma-style": 2,
+    "comma-dangle": [2, "never"],
+    "indent": [2, "tab", {"SwitchCase": 1}],
+    "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
+    "no-trailing-spaces": [2, { "skipBlankLines": true }],
+    "max-nested-callbacks": [2, 3],
+    "no-eval": 2,
+    "no-implied-eval": 2,
+    "no-new-func": 2,
+    "guard-for-in": 2,
+    "eqeqeq": 2,
+    "no-else-return": 2,
+    "no-redeclare": 2,
+    "no-dupe-keys": 2,
+    "radix": 2,
+    "strict": [2, "never"],
+    "no-shadow": 0,
+    "no-delete-var": 2,
+    "no-undef-init": 2,
+    "no-shadow-restricted-names": 2,
+    "handle-callback-err": 0,
+    "no-lonely-if": 2,
+    "keyword-spacing": 2,
+    "constructor-super": 2,
+    "no-this-before-super": 2,
+    "no-dupe-class-members": 2,
+    "no-const-assign": 2,
+    "prefer-spread": 2,
+    "no-useless-concat": 2,
+    "no-var": 2,
+    "object-shorthand": 2,
+    "prefer-arrow-callback": 2
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/dist
+/node_modules
+/npm-debug.log
+.DS_Store
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+.eslintrc
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 4
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Jason Miller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,84 @@
+# preact-portal
+
+[![NPM](https://img.shields.io/npm/v/preact-portal.svg?style=flat)](https://www.npmjs.org/package/preact-portal)
+[![travis-ci](https://travis-ci.org/developit/preact-portal.svg?branch=master)](https://travis-ci.org/developit/preact-portal)
+
+> Render [Preact] components somewhere in [a different] space.
+
+Use this if you have a component that needs to render children into some other place in the DOM.
+
+An example of this would be modal dialogs, where you may need to render `<Dialog />` into `<body>`.
+
+
+**[JSFiddle Demo](http://jsfiddle.net/developit/f1jmxtvg/)**
+
+
+---
+
+
+## Installation
+
+Via npm:
+
+`npm install --save preact-portal`
+
+
+
+## Usage
+
+```js
+import { h, Component, render } from 'preact';
+import Portal from 'preact-portal';
+
+class Thumbnail extends Component {
+  open = () => this.setState({ open:true });
+  close = () => this.setState({ open:false });
+
+  render({ url }, { open }) {
+    return (
+      <div class="thumb" onClick={this.open}>
+        <img src={url} />
+
+        { open ? (
+          <Portal into="body">
+            <div class="popup" onClick={this.close}>
+              <img src={url} />
+            </div>
+          </Portal>
+        ) : null }
+      </div>
+    );
+  }
+}
+
+render(<Thumbnail url="//i.imgur.com/6Rp4hbs.gif" />, document.body);
+```
+
+
+---
+
+
+Or, wrap up a very common case into a simple high order function:
+
+```js
+const Popup = ({ open, into="body", children }) => (
+  open ? <Portal into={into}>{ children }</Portal> : null
+);
+
+// Example: show popup on error.
+class Form extends Component {
+  render({}, { error }) {
+    return (
+      <form>
+        <Popup open={error}>
+          <p>Error: {error}</p>
+        </Popup>
+        ...etc
+      </form>
+    );
+  }
+}
+```
+
+
+[preact]: https://github.com/developit/preact
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,42 @@
+var path = require('path');
+
+module.exports = function(config) {
+	config.set({
+		frameworks: ['mocha', 'chai-sinon'],
+		reporters: ['mocha'],
+
+		browsers: ['PhantomJS'],
+
+		files: [
+			'test/**/*.js'
+		],
+
+		preprocessors: {
+			'test/**/*.js': ['webpack'],
+			'src/**/*.js': ['webpack'],
+			'**/*.js': ['sourcemap']
+		},
+
+		webpack: {
+			module: {
+				loaders: [
+					{
+						test: /\.jsx?$/,
+						exclude: /node_modules/,
+						loader: 'babel'
+					}
+				]
+			},
+			resolve: {
+				modulesDirectories: [__dirname, 'node_modules'],
+				alias: {
+					src: __dirname+'/src'
+				}
+			}
+		},
+
+		webpackMiddleware: {
+			noInfo: true
+		}
+	});
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "preact-portal",
+  "amdName": "preactPortal",
+  "version": "1.0.0",
+  "description": "Render Preact components somewhere in [a different] space.",
+  "main": "dist/preact-portal.js",
+  "minified:main": "dist/preact-portal.min.js",
+  "jsnext:main": "src/preact-portal.js",
+  "scripts": {
+    "build": "npm-run-all transpile minify size",
+    "transpile": "rollup -c rollup.config.js",
+    "minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map",
+    "size": "echo \"gzip size: $(gzip-size $npm_package_minified_main | pretty-bytes)\"",
+    "test": "npm-run-all lint build test:karma",
+    "lint": "eslint {src,test}",
+    "test:karma": "karma start --single-run",
+    "prepublish": "npm-run-all build test",
+    "release": "npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "start": "node server.js"
+  },
+  "keywords": [
+    "preact",
+    "react",
+    "portals"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/developit/preact-portal.git"
+  },
+  "author": "Jason Miller <jason@developit.ca>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/developit/preact-portal/issues"
+  },
+  "homepage": "https://github.com/developit/preact-portal",
+  "devDependencies": {
+    "babel-core": "^6.6.4",
+    "babel-eslint": "^5.0.0",
+    "babel-loader": "^6.2.3",
+    "babel-plugin-transform-class-properties": "^6.5.2",
+    "babel-plugin-transform-object-rest-spread": "^6.6.4",
+    "babel-plugin-transform-react-jsx": "^6.6.5",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-es2015-loose-rollup": "^7.0.0",
+    "babel-preset-es2015-minimal": "^1.1.0",
+    "babel-preset-es2015-minimal-rollup": "^1.1.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "chai": "^3.5.0",
+    "eslint": "~2.2.0",
+    "gzip-size-cli": "^1.0.0",
+    "karma": "^0.13.21",
+    "karma-chai": "^0.1.0",
+    "karma-chai-sinon": "^0.1.5",
+    "karma-mocha": "^0.2.2",
+    "karma-mocha-reporter": "^1.2.1",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "mkdirp": "^0.5.1",
+    "mocha": "^2.4.5",
+    "npm-run-all": "^1.5.1",
+    "phantomjs-prebuilt": "^2.1.4",
+    "preact": "^4.1.1",
+    "pretty-bytes-cli": "^1.0.0",
+    "rollup": "^0.25.4",
+    "rollup-plugin-babel": "^2.4.0",
+    "rollup-plugin-commonjs": "^2.2.1",
+    "rollup-plugin-node-resolve": "^1.4.0",
+    "sinon": "^1.17.2",
+    "sinon-chai": "^2.8.0",
+    "uglify-js": "^2.6.2",
+    "webpack": "^1.12.14"
+  },
+  "peerDependencies": {
+    "preact": "*"
+  },
+  "directories": {
+    "test": "test"
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,40 @@
+import path from 'path';
+import fs from 'fs';
+import babel from 'rollup-plugin-babel';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+let babelrc = JSON.parse(fs.readFileSync('./.babelrc'));
+let pkg = JSON.parse(fs.readFileSync('./package.json'));
+let external = Object.keys(pkg.peerDependencies || {}).concat(Object.keys(pkg.dependencies || {}));
+
+export default {
+	entry: pkg['jsnext:main'],
+	dest: pkg.main,
+	sourceMap: path.resolve(pkg.main),
+	moduleName: pkg.amdName,
+	format: 'umd',
+	external,
+	plugins: [
+		babel({
+			babelrc: false,
+			comments: false,
+			exclude: 'node_modules/**',
+			presets: [
+				'es2015-minimal-rollup'
+			].concat(babelrc.presets.slice(1)),
+			plugins: require('babel-preset-es2015-minimal-rollup').plugins.concat([
+				['transform-react-jsx', { pragma:'h' }]
+			])
+		}),
+		nodeResolve({
+			jsnext: true,
+			main: true,
+			skip: external
+		}),
+		commonjs({
+			include: 'node_modules/**',
+			exclude: '**/*.css'
+		})
+	]
+};