Minor package and security updates. Update to latest gulp-sass for high severity error. Silence annoying babel warning.

 @atomic-reactor/cli  ^2.2.55  →  ^2.2.57
 nodemon               ^2.0.7  →  ^2.0.12
 ora                   ^5.4.0  →   ^5.4.1
 action-sequence       ^1.1.1  →   ^1.1.2
 dayjs                 ^1.10.4 → ^1.10.6
 chalk                 ^4.1.0  →   ^4.1.2
 xss                   ^1.0.8  →   ^1.0.9

Author: jdillick

.core/babel.config.js

@@ -68,6 +68,7 @@ module.exports = {
         ],
         ['@babel/plugin-proposal-export-default-from'],
         ['@babel/plugin-proposal-private-methods', { loose: true }],
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     ],
     env: {
         test: {
@@ -106,6 +107,10 @@ module.exports = {
                     },
                 ],
                 ['@babel/plugin-syntax-dynamic-import'],
+                [
+                    '@babel/plugin-proposal-private-property-in-object',
+                    { loose: true },
+                ],
             ],
         },
     },

.core/gulp.tasks.js

@@ -10,8 +10,7 @@ const browserSync = require('browser-sync');
 const gulpif = require('gulp-if');
 const gulpwatch = require('@atomic-reactor/gulp-watch');
 const prefix = require('gulp-autoprefixer');
-const sass = require('gulp-sass');
-sass.compiler = require('sass');
+const sass = require('gulp-sass')(require('sass'));
 const fiber = require('fibers');
 const gzip = require('gulp-gzip');
 const reactiumImporter = require('@atomic-reactor/node-sass-reactium-importer');

docs/api_project.js

@@ -8,7 +8,7 @@ define({
   "apidoc": "0.3.0",
   "generator": {
     "name": "apidoc",
-    "time": "2021-07-17T01:45:24.214Z",
+    "time": "2021-08-17T19:20:16.141Z",
     "url": "https://apidocjs.com",
     "version": "0.25.0"
   }

docs/api_project.json

@@ -8,7 +8,7 @@
   "apidoc": "0.3.0",
   "generator": {
     "name": "apidoc",
-    "time": "2021-07-17T01:45:24.214Z",
+    "time": "2021-08-17T19:20:16.141Z",
     "url": "https://apidocjs.com",
     "version": "0.25.0"
   }

package-lock.json

@@ -53,19 +53,19 @@
     "@babel/cli": "^7.13.14",
     "@babel/node": "^7.13.13",
     "@loadable/component": "^5.14.1",
-    "action-sequence": "^1.1.1",
+    "action-sequence": "^1.1.2",
     "axios": "^0.21.1",
     "axios-retry": "^3.1.9",
     "body-parser": "^1.19.0",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.2",
     "classnames": "^2.3.1",
     "cookie-parser": "^1.4.5",
     "cookie-session": "^2.0.0-beta.3",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.10.1",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.6",
     "directory-tree": "^2.2.7",
     "express": "^4.17.1",
     "express-static-gzip": "^2.1.1",
@@ -95,10 +95,10 @@
     "shallow-equals": "^1.0.0",
     "underscore": "*",
     "uuid": "^3.4.0",
-    "xss": "^1.0.8"
+    "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@atomic-reactor/cli": "^2.2.55",
+    "@atomic-reactor/cli": "^2.2.57",
     "@atomic-reactor/gulp-watch": "^5.0.2",
     "@atomic-reactor/node-sass-reactium-importer": "^1.0.0",
     "@atomic-reactor/webpack-po-loader": "0.0.3",
@@ -141,7 +141,7 @@
     "gulp-less": "^4.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-run": "^1.7.1",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp4-run-sequence": "^1.0.1",
     "handlebars": "^4.7.7",
@@ -151,8 +151,8 @@
     "lint-staged": "^9.4.3",
     "module-alias": "^2.2.2",
     "node-sass": "^5.0.0",
-    "nodemon": "^2.0.7",
-    "ora": "^5.4.0",
+    "nodemon": "^2.0.12",
+    "ora": "^5.4.1",
     "readdir-recursive": "0.0.4",
     "sass": "^1.34.1",
     "slugify": "^1.5.0",

package.json

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import Reactium from 'reactium-core/sdk';
+import { Link } from 'react-router-dom';
+
+const Article = props => {
+    const {
+        active,
+        currentRoute,
+        previousRoute,
+        transitionState,
+        transitionStates,
+        changes,
+    } = props;
+
+    useEffect(() => {
+        const to = setTimeout(() => {
+            if (transitionState !== 'READY') {
+                Reactium.Routing.nextState();
+            }
+        }, 1000);
+        return () => clearTimeout(to);
+    }, [transitionState]);
+
+    console.log('Article', { transitionState });
+
+    if (transitionState === 'LOADING') return <div>Loading...</div>;
+
+    return (
+        <div>
+            <div>(Article) Route Status: {transitionState}</div>
+            <Link to={'/product/1'}>Product 1</Link>
+        </div>
+    );
+};
+
+export default Article;

src/app/components/RoutingTest/Article.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+import Reactium from 'reactium-core/sdk';
+import { Link } from 'react-router-dom';
+
+const Product = props => {
+    const {
+        active,
+        currentRoute,
+        previousRoute,
+        transitionState,
+        transitionStates,
+        changes,
+    } = props;
+
+    useEffect(() => {
+        // Change Transition State on this component if not READY
+        // every 1 second
+        const to = setTimeout(() => {
+            if (transitionState !== 'READY') {
+                Reactium.Routing.nextState();
+            }
+        }, 1000);
+        return () => clearTimeout(to);
+    }, [transitionState]);
+
+    console.log('Product', { transitionState });
+
+    if (transitionState === 'LOADING') return <div>Loading...</div>;
+
+    return (
+        <div>
+            <div>(Product) Route Status: {transitionState}</div>
+            <Link to={'/article/1'}>Article 1</Link>
+        </div>
+    );
+};
+
+export default Product;

src/app/components/RoutingTest/Product.js

@@ -0,0 +1,39 @@
+import Article from './Article';
+import Product from './Product';
+
+// This is the same as the default
+const transitionStates = [
+    {
+        state: 'EXITING',
+        active: 'previous',
+    },
+    {
+        state: 'LOADING',
+        active: 'current',
+    },
+    {
+        state: 'ENTERING',
+        active: 'current',
+    },
+    {
+        state: 'READY',
+        active: 'current',
+    },
+];
+
+// route.js can export an array of routes as well
+export default [
+    {
+        path: '/article/:id',
+        component: Article,
+        transitions: true,
+        transitionStates,
+        type: 'articles',
+    },
+    {
+        path: '/product/:id',
+        component: Product,
+        transitions: true,
+        transitionStates,
+    },
+];