metrix on production mode + up cli version

package.json

@@ -25,7 +25,7 @@
         "eslint-plugin-react": "^7.34.1"
     },
     "dependencies": {
-        "@brojs/cli": "^0.0.4-alpha.9",
+        "@brojs/cli": "^0.0.4-alpha.10",
         "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.4",

src/app.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Global, css } from '@emotion/react'
+import { Global } from '@emotion/react'
 import { BrowserRouter } from 'react-router-dom';
 import ruLocale from 'dayjs/locale/ru';
 import dayjs from 'dayjs';
 import { ChakraProvider } from '@chakra-ui/react'
 
 import { Dashboard } from './dashboard';
+import { globalStyles } from './global.styles';
 
 dayjs.locale('ru', ruLocale);
 
@@ -17,65 +18,7 @@ const App = ({ store }) => (
                 <meta name="viewport" content="width=device-width, user-scalable=no" />
                 <title>Журнал</title>
             </Helmet>
-            <Global
+            <Global styles={globalStyles} />
-                styles={css`
-                      html {
-                          height: 100%;
-                          max-width: 100%;
-                          overflow: hidden;
-                      }
-                      body {
-                          color: #000;
-                          /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
-                          background: radial-gradient(
-                              farthest-side at bottom left,
-                              rgba(35, 235, 4, 0.709), 
-                              rgba(255, 255, 255, 0) 65%
-                          ),
-                          radial-gradient(
-                              farthest-corner at bottom center,
-                              rgba(244, 244, 8, 0.6), 
-                              rgba(255, 255, 255, 0) 40%
-                          ),
-                          radial-gradient(
-                              farthest-side at bottom right,
-                              rgba(0, 195, 255, 0.648), 
-                              rgb(239 244 246) 65%
-                              /* rgba(255, 255, 255, 0) 65% */
-                          );
-                          height: 100%;
-                          /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
-                          font-weight: 600;
-                      }
-                      #app {
-                          height: 100%;
-                          overflow-y: auto;
-                      }
-
-                      @font-face {
-                          font-family: 'KiyosunaSans';
-                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
-                          font-weight: normal;
-                          font-style: normal;
-                      }
-                      @font-face {
-                          font-family: 'KiyosunaSans';
-                          src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
-                          font-weight: lighter;
-                          font-style: normal;
-                      }
-                      @font-face {
-                          font-family: 'RFKrabuler';
-                          src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
-                          src:
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
-                              url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
-                          font-weight: normal;
-                          font-style: normal;
-                      }
-                  `}
-            />
             <Dashboard store={store} />
         </BrowserRouter>
     </ChakraProvider>

src/global.styles.ts

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react'
+
+export const globalStyles = css`
+html {
+    height: 100%;
+    max-width: 100%;
+    min-width: 320px;
+    overflow: hidden;
+}
+body {
+    color: #000;
+    /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
+    background: radial-gradient(
+        farthest-side at bottom left,
+        rgba(35, 235, 4, 0.709), 
+        rgba(255, 255, 255, 0) 65%
+    ),
+    radial-gradient(
+        farthest-corner at bottom center,
+        rgba(244, 244, 8, 0.6), 
+        rgba(255, 255, 255, 0) 40%
+    ),
+    radial-gradient(
+        farthest-side at bottom right,
+        rgba(0, 195, 255, 0.648), 
+        rgb(239 244 246) 65%
+        /* rgba(255, 255, 255, 0) 65% */
+    );
+    height: 100%;
+    /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
+    font-weight: 600;
+}
+#app {
+    height: 100%;
+    overflow-y: auto;
+}
+
+@font-face {
+    font-family: 'KiyosunaSans';
+    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'KiyosunaSans';
+    src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
+    font-weight: lighter;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'RFKrabuler';
+    src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
+    src:
+        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
+        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
+        url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+`

src/index.tsx

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
   
 import App from './app';
-import './ym';
 import { keycloak } from "./__data__/kc";
 import { createStore } from "./__data__/store";
 
+if(!module.hot) {
+  import('./ym');
+}
+
 export default (props) => <App {...props} />;
   
 let rootElement: ReactDOM.Root

src/ym.ts

@@ -13,3 +13,5 @@ ym(98045358, "init", {
     accurateTrackBounce: true,
     webvisor: true
 });
+
+export const dummy = true;