react-typing-animation - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/utils.js

@@ -16,2 +16,4 @@ 'use strict';
 
+var voidHTMLElements = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+
 var flatten = function flatten(arr) {
@@ -44,3 +46,3 @@ return arr.reduce(function (acc, item) {
     } else if (_react2.default.isValidElement(node)) {
-      if (!node.props.children || !node.props.children.length) {
+      if (voidHTMLElements.indexOf(node.type) !== -1) {
         return '\n';
@@ -72,3 +74,3 @@ }
     } else if (_react2.default.isValidElement(node)) {
-      if (!node.props.children || !node.props.children.length) {
+      if (voidHTMLElements.indexOf(node.type) !== -1) {
         if (text.length === 1) {
@@ -100,2 +102,4 @@ return [text.shift() === '' ? undefined : node, cursor];
 
+  __REACT_HOT_LOADER__.register(voidHTMLElements, 'voidHTMLElements', 'src/utils.js');
+
   __REACT_HOT_LOADER__.register(flatten, 'flatten', 'src/utils.js');
@@ -102,0 +106,0 @@

example/App.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
@@ -7,6 +6,2 @@ import styles from './App.css';
 
-const TestComponent = ({ children }) => <div>{children}</div>;
-
-TestComponent.propTypes = { children: PropTypes.node };
-
 class App extends Component {
@@ -27,12 +22,7 @@ constructor() {
     });
-  }
+  };
 
-  unmount = () => {
-    this.setState({ showFeatures: false });
-  }
-
   render() {
     return (
       <div className={styles.page}>
-        <button onClick={this.unmount}>Unmount</button>
         <Typing
@@ -59,3 +49,4 @@ className={styles.title}
               <li>
-                <span className={styles.checkmark}>✅</span> Type text from any valid JSX.
+                <span className={styles.checkmark}>✅</span> Type text from any
+                valid JSX.
               </li>
@@ -65,23 +56,49 @@ <Delay ms={1000} />
                 <span className={styles.styledSpan}>
-                  <span className={styles.checkmark}>✅</span> All styles and
-                  {' '}
+                  <span className={styles.checkmark}>✅</span> All styles and{' '}
                   <table className={styles.table}>
                     <tbody>
-                      <tr><td>D</td></tr>
-                      <tr><td>O</td></tr>
-                      <tr><td>M</td></tr>
-                      <tr><td>&nbsp;</td></tr>
-                      <tr><td>S</td></tr>
-                      <tr><td>T</td></tr>
-                      <tr><td>R</td></tr>
-                      <tr><td>U</td></tr>
-                      <tr><td>C</td></tr>
-                      <tr><td>T</td></tr>
-                      <tr><td>U</td></tr>
-                      <tr><td>R</td></tr>
-                      <tr><td>E</td></tr>
-                      <tr><td>S</td></tr>
+                      <tr>
+                        <td>D</td>
+                      </tr>
+                      <tr>
+                        <td>O</td>
+                      </tr>
+                      <tr>
+                        <td>M</td>
+                      </tr>
+                      <tr>
+                        <td>&nbsp;</td>
+                      </tr>
+                      <tr>
+                        <td>S</td>
+                      </tr>
+                      <tr>
+                        <td>T</td>
+                      </tr>
+                      <tr>
+                        <td>R</td>
+                      </tr>
+                      <tr>
+                        <td>U</td>
+                      </tr>
+                      <tr>
+                        <td>C</td>
+                      </tr>
+                      <tr>
+                        <td>T</td>
+                      </tr>
+                      <tr>
+                        <td>U</td>
+                      </tr>
+                      <tr>
+                        <td>R</td>
+                      </tr>
+                      <tr>
+                        <td>E</td>
+                      </tr>
+                      <tr>
+                        <td>S</td>
+                      </tr>
                     </tbody>
-                  </table>
-                  {' '}
+                  </table>{' '}
                   will be preserved.
@@ -92,15 +109,5 @@ </span>
               <li>
-                <span className={styles.checkmark}>✅</span> Change the
-                {' '}
-                <Speed ms={250} />
-                {' '}
-                speed
-                {' '}
-                <Speed ms={20} />
-                {' '}
-                of typing anywhere
-                {' '}
-                <Speed ms={40} />
-                {' '}
-                in the tree.
+                <span className={styles.checkmark}>✅</span> Change the{' '}
+                <Speed ms={250} /> speed <Speed ms={20} /> of typing anywhere{' '}
+                <Speed ms={40} /> in the tree.
               </li>
@@ -115,7 +122,6 @@ <Delay ms={1000} />
               <li>
-                <span className={styles.checkmark}>✅</span> Neither could deleting
-                {' '}
-                <span>
-                  a line of text.<Reset count={1} delay={750} />the entire tree.
-                </span>
+                <span className={styles.checkmark}>✅</span> Neither could
+                deleting a line of text.
+                <Reset count={1} delay={750} />
+                <span>Or the entire tree.</span>
                 <Reset delay={2000} />
@@ -122,0 +128,0 @@ </li>

example/webpack-dev-server.js

@@ -24,12 +24,14 @@ /* eslint-disable import/no-commonjs */
     stats: { colors: true },
-  }) // eslint-disable-line comma-dangle
+  }),
 );
 devServer.use(require('webpack-hot-middleware')(compiler));
 
-devServer.listen(port, (err) => {
+devServer.listen(port, err => {
   if (err) {
     console.error(err);
   } else {
-    console.info(`==> 🚧  Webpack development server listening on port ${port}`);
+    console.info(
+      `==> 🚧  Webpack development server listening on port ${port}`,
+    );
   }
 });

example/webpack.config.js

 const path = require('path');
-// const AssetsPlugin = require('assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -40,23 +39,27 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
           ? ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [
-                { loader: 'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:4]' },
+              fallback: 'style-loader',
+              use: [
+                {
+                  loader:
+                    'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:4]',
+                },
                 { loader: 'postcss-loader' },
-            ],
-          })
+              ],
+            })
           : [
               { loader: 'style-loader' },
-            {
-              loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
-            },
+              {
+                loader:
+                  'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+              },
               { loader: 'postcss-loader' },
-          ],
+            ],
       },
-      { test: /\.(png|jpg|ico|woff|woff2|ttf|eot|svg)$/, loader: 'file-loader' },
+      {
+        test: /\.(png|jpg|ico|woff|woff2|ttf|eot|svg)$/,
+        loader: 'file-loader',
+      },
     ],
   },
   plugins: [
-    // new AssetsPlugin({
-    //   path: path.resolve(__dirname, './build'),
-    // }),
     new CopyWebpackPlugin([{ from: './public', to: './' }]),
@@ -68,20 +71,22 @@ new HtmlWebpackPlugin({
       ? [
-        new ExtractTextPlugin({
-          filename: 'styles/main.css',
-          allChunks: true,
-          publicPath: 'styles/',
-        }),
-          // new webpack.optimize.CommonsChunkPlugin({
-          //   name: 'vendor',
-          // }),
-        new webpack.optimize.UglifyJsPlugin({
-          output: {
-            comments: false,
-          },
-        }),
-      ]
+          new webpack.DefinePlugin({
+            'process.env': {
+              NODE_ENV: JSON.stringify('production'),
+            },
+          }),
+          new ExtractTextPlugin({
+            filename: 'styles/main.css',
+            allChunks: true,
+            publicPath: 'styles/',
+          }),
+          new webpack.optimize.UglifyJsPlugin({
+            output: {
+              comments: false,
+            },
+          }),
+        ]
       : [
-        new webpack.IgnorePlugin(/webpack-assets.json/),
-        new webpack.HotModuleReplacementPlugin(),
-      ]),
+          new webpack.IgnorePlugin(/webpack-assets.json/),
+          new webpack.HotModuleReplacementPlugin(),
+        ]),
   ],
@@ -88,0 +93,0 @@ stats: {

package.json

 {
   "name": "react-typing-animation",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "scripts": {

src/utils.js

 import React, { Children } from 'react';
 
+const voidHTMLElements = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'command',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
 const flatten = arr =>
-  arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? flatten(item) : item), []);
+  arr.reduce(
+    (acc, item) => acc.concat(Array.isArray(item) ? flatten(item) : item),
+    [],
+  );
 
@@ -13,10 +35,11 @@ const removeUndefined = arr => arr.filter(node => node !== undefined);
 
-export const getRandomInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+export const getRandomInRange = (min, max) =>
+  Math.floor(Math.random() * (max - min + 1)) + min;
 
 export const extractText = (...args) => {
-  const traverse = (node) => {
+  const traverse = node => {
     if (isTypingComponent(node)) {
       return node;
     } else if (React.isValidElement(node)) {
-      if (!node.props.children || !node.props.children.length) {
+      if (voidHTMLElements.indexOf(node.type) !== -1) {
         return '\n';
@@ -31,3 +54,5 @@ }
   const text = traverse(...args);
-  return Array.isArray(text) ? removeUndefined(flatten(text)) : removeUndefined([text]);
+  return Array.isArray(text)
+    ? removeUndefined(flatten(text))
+    : removeUndefined([text]);
 };
@@ -45,3 +70,3 @@
     } else if (React.isValidElement(node)) {
-      if (!node.props.children || !node.props.children.length) {
+      if (voidHTMLElements.indexOf(node.type) !== -1) {
         if (text.length === 1) {
@@ -58,3 +83,7 @@ return [text.shift() === '' ? undefined : node, cursor];
         },
-        removeUndefined(Children.toArray(node.props.children).map(child => traverse(child, text))),
+        removeUndefined(
+          Children.toArray(node.props.children).map(child =>
+            traverse(child, text),
+          ),
+        ),
       );
@@ -61,0 +90,0 @@ } else if (Array.isArray(node)) {

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

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

Improved metrics

Total package byte prevSize

494544

increased by0.69%

Lines of code

1380

increased by3.37%

No dependency changes