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 <[email protected]>",
+ "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'
+ })
+ ]
+};