react-portalize - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/cjs/index.js

@@ -1,11 +0,108 @@
-"use strict";
+'use strict'
 
-exports.__esModule = true;
-exports.PORTALS = void 0;
+exports.__esModule = true
+exports.default = exports.PORTALS = void 0
 
-var _Portalize = _interopRequireWildcard(require("./Portalize"));
+var _react = _interopRequireWildcard(require('react'))
 
-exports.default = _Portalize.default;
-exports.PORTALS = _Portalize.PORTALS;
+var _reactDom = _interopRequireDefault(require('react-dom'))
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {default: obj}
+}
+
+function _getRequireWildcardCache() {
+  if (typeof WeakMap !== 'function') return null
+  var cache = new WeakMap()
+  _getRequireWildcardCache = function() {
+    return cache
+  }
+  return cache
+}
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj
+  }
+  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
+    return {default: obj}
+  }
+  var cache = _getRequireWildcardCache()
+  if (cache && cache.has(obj)) {
+    return cache.get(obj)
+  }
+  var newObj = {}
+  var hasPropertyDescriptor =
+    Object.defineProperty && Object.getOwnPropertyDescriptor
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      var desc = hasPropertyDescriptor
+        ? Object.getOwnPropertyDescriptor(obj, key)
+        : null
+      if (desc && (desc.get || desc.set)) {
+        Object.defineProperty(newObj, key, desc)
+      } else {
+        newObj[key] = obj[key]
+      }
+    }
+  }
+  newObj.default = obj
+  if (cache) {
+    cache.set(obj, newObj)
+  }
+  return newObj
+}
+
+/**
+ <Portalize container='#portals'>
+ <div>Inject me</div>
+ </Portalize>
+ */
+const PORTALS = {}
+exports.PORTALS = PORTALS
+
+const getContainer = container =>
+  typeof document !== 'undefined' && document.querySelectorAll(container)
+
+function _ref(children, {provider, value}) {
+  return _react.default.createElement(provider, {
+    children,
+    value,
+  })
+}
+
+const Portalize = ({
+  container = '#portals',
+  server = true,
+  providers,
+  children,
+}) => {
+  const [nodes, setNodes] = (0, _react.useState)(getContainer(container))
+  ;(0, _react.useEffect)(() => {
+    setNodes(getContainer(container))
+  }, [container])
+
+  if (nodes === false) {
+    // this branch only renders on the server
+    if (server === false) return null
+
+    if (providers !== void 0 && providers.length > 0) {
+      children = providers.reduceRight(_ref, children)
+    }
+
+    PORTALS[container] = children
+    return null
+  } else if (nodes.length === 0) {
+    return null
+  } else {
+    const portals = []
+
+    for (let i = 0; i < nodes.length; i++)
+      portals.push(_reactDom.default.createPortal(children, nodes[i]))
+
+    return _react.default.createElement(_react.default.Fragment, null, portals)
+  }
+}
+
+var _default = Portalize
+exports.default = _default

dist/es/index.js

@@ -1,3 +0,54 @@
-import _default from './Portalize';
-export { _default as default };
-export { PORTALS } from './Portalize';
+import React, {useState, useEffect} from 'react'
+import ReactDOM from 'react-dom'
+/**
+ <Portalize container='#portals'>
+ <div>Inject me</div>
+ </Portalize>
+ */
+
+export const PORTALS = {}
+
+const getContainer = container =>
+  typeof document !== 'undefined' && document.querySelectorAll(container)
+
+function _ref(children, {provider, value}) {
+  return React.createElement(provider, {
+    children,
+    value,
+  })
+}
+
+const Portalize = ({
+  container = '#portals',
+  server = true,
+  providers,
+  children,
+}) => {
+  const [nodes, setNodes] = useState(getContainer(container))
+  useEffect(() => {
+    setNodes(getContainer(container))
+  }, [container])
+
+  if (nodes === false) {
+    // this branch only renders on the server
+    if (server === false) return null
+
+    if (providers !== void 0 && providers.length > 0) {
+      children = providers.reduceRight(_ref, children)
+    }
+
+    PORTALS[container] = children
+    return null
+  } else if (nodes.length === 0) {
+    return null
+  } else {
+    const portals = []
+
+    for (let i = 0; i < nodes.length; i++)
+      portals.push(ReactDOM.createPortal(children, nodes[i]))
+
+    return React.createElement(React.Fragment, null, portals)
+  }
+}
+
+export default Portalize

package.json

 {
-  "version": "2.0.1",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
-  "jsnext:main": "dist/es/index.js",
-  "esnext": "dist/es/index.js",
-  "scripts": {
-    "build": "yarn run build:es && yarn run build:cjs && yarn run build:server",
-    "build:es": "rimraf dist/es && cross-env NODE_ENV=production BABEL_ENV=es babel src --out-dir dist/es",
-    "build:cjs": "rimraf dist/cjs && cross-env NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist/cjs",
-    "build:server": "rimraf server && cross-env NODE_ENV=production BABEL_ENV=node-cjs babel server-src --out-dir server",
-    "watch": "rimraf dist/es && rimraf server && cross-env NODE_ENV=production BABEL_ENV=es babel src -w --out-dir dist/es & cross-env NODE_ENV=production BABEL_ENV=es babel server-src -w --out-dir server",
-    "prepublishOnly": "yarn build"
-  },
-  "author": "Jared Lunde <[e-mail]> (https://github.com/jaredLunde)",
-  "sideEffects": false,
-  "analyze": true,
+  "name": "react-portalize",
+  "version": "2.0.2",
+  "homepage": "https://github.com/jaredLunde/react-portalize#readme",
+  "repository": "github:jaredLunde/react-portalize",
+  "bugs": "https://github.com/jaredLunde/react-portalize/issues",
+  "author": "Jared Lunde <[e-mail]> (https://jaredLunde.com)",
   "license": "MIT",
-  "repository": "https://github.com/jaredLunde/react-portalize",
+  "description": "",
   "keywords": [
     "react",
+    "react component",
+    "react portalize",
     "portal",
-    "ssr",
-    "server side render",
-    "react-dom"
+    "portal component",
+    "portalize"
   ],
-  "name": "react-portalize",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "files": [
+    "/dist",
+    "/server"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "npm run build:cjs && npm run build:es && npm run build:server && npm run build:types",
+    "build:cjs": "babel src -d dist/cjs -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/test.ts\",\"**/*.test.tsx\",\"**/test.tsx\" --delete-dir-on-start",
+    "build:server": "babel server-src -d server -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/test.ts\",\"**/*.test.tsx\",\"**/test.tsx\" --delete-dir-on-start",
+    "build:es": "cross-env BABEL_ENV=es babel src -d dist/es -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/test.ts\",\"**/*.test.tsx\",\"**/test.tsx\" --delete-dir-on-start",
+    "build:types": "tsc -p tsconfig.json -d --outDir dist/es --emitDeclarationOnly && mkdir -p dist/cjs && cp -R dist/es/**.d.ts dist/cjs && tsc -p tsconfig.server.json -d --outDir server --emitDeclarationOnly && rimraf dist/**/*.test.d.ts",
+    "check-types": "tsc --noEmit -p tsconfig.json",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,babelrc,eslintrc,prettierrc}\"",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
+    "test": "jest",
+    "validate": "npm run check-types && npm run lint && npm run test -- --coverage"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && npm run build:types"
+    }
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx,js,jsx}": [
+      "eslint",
+      "prettier --write"
+    ],
+    "**/*.{md,yml,json,babelrc,eslintrc,prettierrc}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
-    "@stellar-apps/babel-preset-es": "^1.0.4",
-    "@stellar-apps/babel-preset-react": "^1.0.1",
-    "cross-env": "^5.2.0",
-    "rimraf": "^2.6.2"
+    "@babel/preset-react": "latest",
+    "@lunde/babel-preset-es": "latest",
+    "@testing-library/jest-dom": "latest",
+    "@testing-library/react": "latest",
+    "@testing-library/react-hooks": "latest",
+    "@types/jest": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "cross-env": "latest",
+    "eslint": "latest",
+    "eslint-import-resolver-jest": "latest",
+    "eslint-plugin-jest": "latest",
+    "eslint-plugin-react": "latest",
+    "eslint-plugin-react-hooks": "latest",
+    "husky": "latest",
+    "jest": "latest",
+    "lint-staged": "latest",
+    "prettier": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-test-renderer": "latest",
+    "rimraf": "^2.6.3",
+    "ts-jest": "latest",
+    "typescript": "latest"
   },
@@ -38,6 +84,6 @@ "dependencies": {
   "peerDependencies": {
-    "prop-types": ">= 15.6.0",
-    "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0"
+    "prop-types": ">=15.7.2",
+    "react": ">=16.8",
+    "react-dom": ">=16"
   }
 }

README.md

@@ -1,11 +0,38 @@
-# Portalize
-A component for injecting elements into React Portals via DOM selectors. You may
-optionally choose to render your portals on the server side as well :)
+<hr>
+<div align="center">
+  <h1 align="center">
+    react-portalize
+  </h1>
+</div>
 
+<p align="center">
+  <a href="https://bundlephobia.com/result?p=react-portalize">
+    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="Types" href="https://www.npmjs.com/package/react-portalize">
+    <img alt="Types" src="https://img.shields.io/npm/types/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="Code coverage report" href="https://codecov.io/gh/jaredLunde/react-portalize">
+    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/jaredLunde/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="Build status" href="https://travis-ci.org/jaredLunde/react-portalize">
+    <img alt="Build status" src="https://img.shields.io/travis/jaredLunde/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/react-portalize">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
+    <img alt="MIT License" src="https://img.shields.io/npm/l/react-portalize?style=for-the-badge&labelColor=24292e">
+  </a>
+</p>
 
-### Installation
-```yarn add react-portalize``` or ```npm i react-portalize```
+<pre align="center">npm i react-portalize</pre>
+<hr>
 
-## Basic Usage
-```js
+A convenient component for injecting elements into React Portals via DOM selectors. You may optionally choose to render
+your portals on the server side as well :)
+
+## Quick Start
+
+```jsx harmony
 import Portalize from 'react-portalize'
@@ -35,32 +62,24 @@
 
-## Examples
-**[Hello world](examples/hello-world)**<br/>
-**[Hello world w/ Context](examples/hello-world-context)**
+## API
 
-____
+### `<Portalize>`
 
-## react-portalize
-```js
-<Portalize
-  container={string}
-  children={React.Component}
-  providers={Array}
-  server={boolean}
-/>
-```
-- `container <string>`
+- `container: string`
+
   - The DOM selector you'd like to render your children into
   - **default** `#portals`
 
-- `children <React.Component>`
+- `children: React.ReactNode`
+
   - Anything React can render
 
-- `server <boolean>`
+- `server: boolean`
+
   - If you want to skip rendering this component on the server side you can do
-    so with the `server={false}` flag. You don't need to worry about turning this 
+    so with the `server={false}` flag. You don't need to worry about turning this
     off if you aren't rendering on the server with `renderPortalsToString`
   - **default** `true`
 
-- `providers <Array[Object<{provider, value}>]>`
-  - Critically, this component will not work with portals that utilize context
+- `providers {provider: React.ReactProvider, value: any}[]`
+  - Critically, this component will not work with portals in SSR that utilize context
     out of the box. This is because the children are never rendered into the
@@ -70,9 +89,6 @@ virtual DOM tree on the server side. This hacky approach fixes that problem
     around them. The providers supplied in the array are reduced from the
-    right, so `[a, b, c]` renders as `<a><b><c/></b></a>`. You can check out
-    an example **[here](examples/hello-world-context)**.
+    right, so `[a, b, c]` renders as `<a><b><c/></b></a>`.
     ```js
     <Portalize providers={[{provider: YourProvider, value: YourProviderValue}]}>
-      <YourConsumer>
-        {value => JSON.stringify(value)}
-      </YourConsumer>
+      <YourConsumer>{value => JSON.stringify(value)}</YourConsumer>
     </Portalize>
@@ -82,10 +98,14 @@ ```
 ## react-portalize/server
+
 ### `renderPortalsToString(html <string>)`
-  - Injects portals created within your App into their respective containers.
-    You can provide either your entire `<!DOCTYPE html>` string here or
-    alternatively just the React root generated by
-    `ReactDOMServer.renderToString()`.
 
+- Injects portals created within your App into their respective containers.
+  You can provide either your entire `<!DOCTYPE html>` string here or
+  alternatively just the React root generated by
+  `ReactDOMServer.renderToString()`.
+
 ## Server side rendering
+
 ### Example with React root as the entry point
+
 ```js
@@ -114,7 +134,8 @@ import {renderPortalsToString} from 'react-portalize/server'
 ### Example with HTML root as the entry point
+
 ```js
 import {renderPortalsToString} from 'react-portalize/server'
 
-function serverRenderer (req, res, next) {
-  const page = ReactDOMServer.renderToString(<App/>)
+function serverRenderer(req, res, next) {
+  const page = ReactDOMServer.renderToString(<App />)
 
@@ -138,2 +159,3 @@ res.set('Content-Type', 'text/html').send(
 ## Note
+
 You will receive a warning message in the console from `ReactDOM.hydrate()` in
@@ -144,3 +166,4 @@ "development" akin to `Did not expect server HTML to contain the text node "Hello" in <div>.`.
 
-## Future
-- `renderPortalsToNodeStream()`
+## LICENSE
+
+MIT

server/index.js

@@ -1,23 +0,29 @@
-"use strict";
+'use strict'
 
-exports.__esModule = true;
-exports.renderPortalsToString = renderPortalsToString;
+exports.__esModule = true
+exports.renderPortalsToString = renderPortalsToString
 
-var _server = require("react-dom/server");
+var _server = require('react-dom/server')
 
-var _cheerio = require("cheerio");
+var _cheerio = require('cheerio')
 
-var _reactPortalize = require("react-portalize");
+var _reactPortalize = require('react-portalize')
 
 function renderPortalsToString(html) {
-  const selectors = Object.keys(_reactPortalize.PORTALS);
-  if (selectors.length === 0) return html;
-  const doc = (0, _cheerio.load)(html);
+  const selectors = Object.keys(_reactPortalize.PORTALS)
+  if (selectors.length === 0) return html
+  const doc = (0, _cheerio.load)(html)
 
   for (let i = 0; i < selectors.length; i++) {
-    const selector = selectors[i];
-    doc(selector).html((0, _server.renderToStaticMarkup)(_reactPortalize.PORTALS[selector]));
+    const selector = selectors[i]
+    doc(selector).html(
+      (0, _server.renderToStaticMarkup)(_reactPortalize.PORTALS[selector])
+    )
   }
 
-  return String(html.match(/^\s*(<!|<html|<body|<head)/) ? doc.html() : doc('body').contents());
-}
+  return String(
+    html.match(/^\s*(<!|<html|<body|<head)/)
+      ? doc.html()
+      : doc('body').contents()
+  )
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14661

increased by4.48%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

164

increased by16.31%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Dev dependency count

26

increased by550%

Number of package files

9

decreased by-25%

Lines of code

195

decreased by-8.02%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes