.babelrc

@@ -2,4 +2,4 @@
   "presets": [
     "./config/babel/node-ssr"
   ]
-}
+}

.circleci/config.yml

@@ -1,6 +1,6 @@
 defaults: &defaults
   docker:
-    - image: circleci/node:8.11.2
+    - image: circleci/node:10.14.2
 
 version: 2
 jobs:

.gitignore

@@ -1,3 +1,4 @@
 __coverage__
 dist
-node_modules
+node_modules
+topcoder-react-utils-*.*.*.tgz

.nvmrc

@@ -1 +1 @@
-v8.11.2
+v10.14.2

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Topcoder React Utils Changelog
 
+### v0.9.0
+- NodeJS updated to the latest LTS version (10.14.2);
+- NPM dependencies updated to the latest versions. In particular:
+  - Babel updated from v6 to v7;
+  - Misc related fixes.
+- Support of `npm link` for lib development;
+- `disabled` prop for `<Link>` and `<NavLink>`;
+- Default theme for `<Button>`;
+- `box-sizing`: `border-box` for all HTML elements by default.
+
+### v0.8.2
+- Adds [**`Modal`**](docs/modal.md) component.
+
+### v0.8.1
+- Adds `https` option to the [standard server factory](docs/server.md),
+  which makes it easy to run the app on HTTPS instead of HTTP.
+- Adds `workbox` option to the Wepback configuration factory for app
+  ([**`config/webpack/app-base`**](docs/webpack-config.md#configuration-details)).
+
 ### v0.7.7
 - Adds [**`Modal`**](docs/modal.md) component.
 

README.md

@@ -17,6 +17,8 @@ external ReactJS projects developed by the Topcoder community.
   - [Redux Templates](#redux-templates)
   - [Utilities](#utilities)
 - [Development](#development)
+  - [Local Testing of Library Updates within a Host Project](#local-testing-of-library-updates-within-a-host-project)
+  - [Library Releases to NPM](#library-releases-to-npm)
 - [License](#license)
 
 ## Installation
@@ -94,41 +96,57 @@ $ ./node_modules/.bin/topcoder-lib-setup
   Webpack bundling process.
 
 ## Development
-For convenient development you can link this package into your host package:
-1.  Clone [`topcoder-react-utils`](https://github.com/topcoder-platform/topcoder-react-utils)
-    to your machine, and checkout the branch you are going to work with;
-2.  Inside `topcoder-react-utils` folder:
-    - Install dependencies with `$ npm install`;
-    - Locate `node_modules/extract-css-chunks-webpack-plugin/index.js` and
-      inside the `isChunk(..)` function (line #358) add `return true;` statement,
-      so that this function always returns *true*. This step is necessary at
-      the moment, because the check `chunk instanceof Chunk` check inside this
-      function does not work as expected when Webpack config is spread across
-      multiple inter-linked packages.
-    - Run the dev build `$ npm run build:dev`. It will compile the package, and
-      also will watch for the file changes to automatically re-compile it as
-      necessary.
-3.  Inside the host package execute
-    `$ npm link PATH_TO_TOPCODER_REACT_UTILS_FOLDER`. It will create a symlink
-    from `HOST_PACKAGE/node_modules/topcoder-react-utils` to your local copy of
-    the `topcoder-react-utils` package, so that any changes you do there become
-    automatically available to the host package.
-
-CI/CD is set up with CircleCI 2.0 for this repo. A commit to any branch, beside
-`master` will trigger testing of the commited code (it will run `$ npm test` and
-ensures that it does not fail). A commit to the protected `master` branch (only
-organization members and repo admins can commit to `master`) will trigger the
-testing, and, if successful, release of the updated package to the NPM registry.
-
-For successful release to NPM you should bump the package version in the
-`package.json`. To do it conveniently you can use `$ npm version UPDATE_TYPE`
-command, where `UPDATE_TYPE` stays for one of `patch`/`minor`/`major` to bump up
-`2`, `1`, or `0` in a sample version number `v0.1.2`. This command will update
-`package.json` and `package-lock.json`, and create a new commit and tag in the
-checked-out Git branch. Mind that `patch` updates should not introduce
-any breaking changes into the codebase! Breaking changes should be done via
-`minor` or `major` update, and they should be documented in
-the [CHANGELOG](CHANGELOG.md).
+
+Whenever you are to do any changes in the library, keep in mind the following:
+
+- Different projects rely on this library, the tooling it provides should be as
+  generic and flexible as possible. When you change existing components, do your
+  best to keep backward compatibility of the updated components, any changes
+  that demand updates in the projects relying on the library, must be
+  documented in the [changelog](CHANGELOG.md).
+
+- Rely on unit tests to verify your changes, and prevent regression. Update
+  existing unit tests to keep up with your changes, and add new unit tests
+  when necessary.
+
+- For the final testing of your updates within a host project relying on this
+  lib, see the next section.
+
+- The library use semantic versioning. In case your changes demand any changes
+  in the project relying on the library, you should release it as a minor
+  library update (more severe comparing to patch update). Consider to use
+  a new branch, called after the minor version, and to not merge your changes
+  into the main **develop** / **master** branches until everybody is prepared
+  for that.
+
+### Local Testing of Library Updates within a Host Project
+
+To locally test how your library updates work within a host project relying on
+the lib (without releasing them to NPM), use
+[`npm link`](https://docs.npmjs.com/cli/link.html) to link local copy of the lib
+into the host project, then run `npm run build:dev:watch` in the library root to
+automatically re-build the lib when you change it, and use the host project to
+see the final effect of changes you make.
+
+### Library Releases to NPM
+
+Continious Integration and Delivery (CI/CD) is set up for this repository with
+CircleCI 2.0. Commits to all branches trigger testing of the code with
+`$ npm test` (it runs linters and unit tests), and also build the library.
+CI/CD flow is interrupted in case of any problems.
+
+To release updated library version to NPM do the following:
+
+- Bump library version in `package.json` and `package-lock.json` by
+  `$ npm version UPDATE_TYPE --no-git-tag` command, where `UPDATE_TYPE` should
+  be one of `patch` / `minor` / `major` to update current version `x.y.z`
+  to `x.y.(z+1)` / `x.(y+1).0` / `(x+1).0.0`. The `--no-git-tag` flag prevents
+  automatic creation of the Git tag with the same name as the version.
+
+- Tag the commit to be released with the git tag like `v0.1.2`, where `0.1.2` is
+  the new version set in the previous step.
+
+- Commit the tag to GitHub repository.
 
 ## License
 Topcoder React Utils is [MIT Licensed](LICENSE.md)

__tests__/.babelrc

@@ -3,10 +3,13 @@
     "../config/babel/node-ssr"
   ],
   "plugins": [
-    ["module-resolver", {
-      "alias": {
-        "topcoder-react-utils/dist": "./src"
+    [
+      "module-resolver",
+      {
+        "alias": {
+          "topcoder-react-utils/dist": "./src"
+        }
       }
-    }]
+    ]
   ]
 }

__tests__/__snapshots__/index.js.snap

@@ -81,6 +81,7 @@ Object {
       "animationEnd": [Function],
       "animationIteration": [Function],
       "animationStart": [Function],
+      "auxClick": [Function],
       "beforeInput": [Function],
       "blur": [Function],
       "canPlay": [Function],

__tests__/server/__snapshots__/renderer.jsx.snap

@@ -2,10 +2,13 @@
 
 exports[`Base rendering of HTML template 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
             
             
+            
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -20,6 +23,7 @@ exports[`Base rendering of HTML template 1`] = `
             />
           </head>
           <body>
+            
             <div id=\\"react-view\\"></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}
@@ -40,10 +44,13 @@ exports[`Base rendering of HTML template 1`] = `
 
 exports[`Config overriding for injection 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
             
             
+            
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -58,6 +65,7 @@ exports[`Config overriding for injection 1`] = `
             />
           </head>
           <body>
+            
             <div id=\\"react-view\\"></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}
@@ -78,10 +86,13 @@ exports[`Config overriding for injection 1`] = `
 
 exports[`Hemlet integration works 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
+            
             <title data-react-helmet=\\"true\\">Test Page Title</title>
             <meta data-react-helmet=\\"true\\" property=\\"description\\" content=\\"Test Page Description\\"/>
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -96,6 +107,7 @@ exports[`Hemlet integration works 1`] = `
             />
           </head>
           <body>
+            
             <div id=\\"react-view\\"><div data-reactroot=\\"\\"><p>Hello World!</p><p>Goodbye World!</p></div></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}
@@ -116,10 +128,13 @@ exports[`Hemlet integration works 1`] = `
 
 exports[`Injection of additional JS scripts 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
+            <script>1-st script after opening <head></script><script>2-nd script after opening <head></script>
             
             
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -134,6 +149,7 @@ exports[`Injection of additional JS scripts 1`] = `
             />
           </head>
           <body>
+            <script>1-st script after opening <body></script><script>2-nd script after opening <body></script>
             <div id=\\"react-view\\"></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}
@@ -143,7 +159,7 @@ exports[`Injection of additional JS scripts 1`] = `
               src=\\"/test/public/path/polyfills-1511941200000.js\\"
               type=\\"application/javascript\\"
             ></script>
-            <script>Dummy JS Sript</script><script>Another Dummy JS Script</script>
+            <script>Dummy JS Sript</script><script>Another Dummy JS Script</script><script>Yet another Dummy JS Script</script>
             <script
               src=\\"/test/public/path/main-1511941200000.js\\"
               type=\\"application/javascript\\"
@@ -154,10 +170,13 @@ exports[`Injection of additional JS scripts 1`] = `
 
 exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`] = `
 "<!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
+            
             <title data-react-helmet=\\"true\\"></title>
             
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -172,7 +191,8 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
             />
           </head>
           <body>
-            <div id=\\"react-view\\"><div data-reactroot=\\"\\">Hello Wold!</div></div>
+            
+            <div id=\\"react-view\\"><div>Hello Wold!</div></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}
               window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DLPyBqGDNu0Yb+sEvg3s2Nv7ZYfzgAL5LpxryHNGWLiWYlCFgBW1NkdubXDUzuNfddcSwOHmA68IbAvuQnY81RZWKcs/M+w/CFPnw0PiVYASg==\\"
@@ -193,10 +213,13 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
 exports[`Setting of response HTTP status the server-side rendering 1`] = `
 "HTTP STATUS: 404
 <!DOCTYPE html>
-        <html>
+        <html lang=\\"en\\">
           <head>
+            
             <title data-react-helmet=\\"true\\"></title>
             
+            <meta name=\\"theme-color\\" content=\\"#FFFFFF\\"/>
+            <link rel=\\"manifest\\" href=\\"/test/public/path/manifest.json\\">
             <link
               href=\\"/test/public/path/main-1511941200000.css\\"
               id=\\"tru-style\\"
@@ -211,6 +234,7 @@ exports[`Setting of response HTTP status the server-side rendering 1`] = `
             />
           </head>
           <body>
+            
             <div id=\\"react-view\\"><div data-reactroot=\\"\\">404 Error Test</div></div>
             <script id=\\"inj\\" type=\\"application/javascript\\">
               window.SPLITS = {}

__tests__/server/renderer.jsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import factory from 'server/renderer';
+import factory, { SCRIPT_LOCATIONS } from 'server/renderer';
 import fs from 'fs';
 import React from 'react';
 
@@ -142,7 +142,22 @@ test('Injection of additional JS scripts',
     beforeRender: async () => ({
       extraScripts: [
         '<script>Dummy JS Sript</script>',
-        '<script>Another Dummy JS Script</script>',
+        '<script>Another Dummy JS Script</script>', {
+          code: '<script>Yet another Dummy JS Script</script>',
+          location: SCRIPT_LOCATIONS.DEFAULT,
+        }, {
+          code: '<script>1-st script after opening <head></script>',
+          location: SCRIPT_LOCATIONS.HEAD_OPEN,
+        }, {
+          code: '<script>1-st script after opening <body></script>',
+          location: SCRIPT_LOCATIONS.BODY_OPEN,
+        }, {
+          code: '<script>2-nd script after opening <body></script>',
+          location: SCRIPT_LOCATIONS.BODY_OPEN,
+        }, {
+          code: '<script>2-nd script after opening <head></script>',
+          location: SCRIPT_LOCATIONS.HEAD_OPEN,
+        },
       ],
     }),
   }));