Skip to content

Commit ac38db0

Browse files
VadorequestVadorequest
committed
Replace @unly/utils-simple-logger and winston by @unly/simple-logger and chalk (reduces bundle size by 40Kb) (#314)
1 parent e03b530 commit ac38db0

File tree

89 files changed

+380
-354
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+380
-354
lines changed

Diff for: ‎next.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ module.exports = withBundleAnalyzer(withSourceMaps({
8282
NEXT_PUBLIC_APP_BUILD_TIMESTAMP: +date,
8383
NEXT_PUBLIC_APP_NAME: packageJson.name,
8484
NEXT_PUBLIC_APP_NAME_VERSION: `${packageJson.name}-${APP_RELEASE_TAG}`,
85-
UNLY_SIMPLE_LOGGER_ENV: process.env.NEXT_PUBLIC_APP_STAGE, // Used by @unly/utils-simple-logger - Fix missing staging logs because otherwise it believes we're in production
8685
GIT_COMMIT_SHA_SHORT,
8786
GIT_COMMIT_SHA: process.env.GIT_COMMIT_SHA, // Resolve commit hash from ENV first (set through CI), fallbacks to reading git (when used locally, through "/scripts/populate-git-env.sh")
8887
GIT_COMMIT_REF: process.env.GIT_COMMIT_REF, // Resolve commit ref (branch/tag) from ENV first (set through CI), fallbacks to reading git (when used locally, through "/scripts/populate-git-env.sh")

Diff for: ‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,14 @@
118118
"@sentry/browser": "6.2.4",
119119
"@sentry/node": "6.2.4",
120120
"@types/lodash.isequal": "4.5.5",
121+
"@unly/simple-logger": "1.0.0",
121122
"@unly/universal-language-detector": "2.0.3",
122123
"@unly/utils": "1.0.3",
123-
"@unly/utils-simple-logger": "1.4.0",
124124
"amplitude-js": "8.1.0",
125125
"animate.css": "4.1.1",
126126
"append-query": "2.1.0",
127127
"bootstrap": "4.6.0",
128+
"chalk": "4.1.1",
128129
"classnames": "2.2.6",
129130
"cookieconsent": "3.1.1",
130131
"cookies": "0.8.0",
@@ -173,8 +174,7 @@
173174
"tinycolor2": "1.4.2",
174175
"type-fest": "1.0.1",
175176
"uuid": "8.3.2",
176-
"webfontloader": "1.6.28",
177-
"winston": "3.3.3"
177+
"webfontloader": "1.6.28"
178178
},
179179
"devDependencies": {
180180
"@cypress/react": "4.16.4",

Diff for: ‎process.env.d.ts

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ declare global {
2929
NEXT_PUBLIC_LOCIZE_PROJECT_ID: string;
3030
NEXT_PUBLIC_NRN_PRESET: string;
3131
SENTRY_DSN: string;
32-
UNLY_SIMPLE_LOGGER_ENV: NEXT_PUBLIC_APP_STAGE;
3332

3433
// Git env variables
3534
GIT_COMMIT_SHA_SHORT: string;

Diff for: ‎src/app/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ App
44
> Check out the [documentation about the folder structure](../README.md#app-folder)
55
66
Summary:
7+
78
- This folder is a way to organize what happens in `pages/_app`.
89
- It also contains app-wide configuration (constants).
910
- `Multiversal` means code executed "no matter what".

Diff for: ‎src/app/components/BrowserPageBootstrap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import useCustomer from '@/modules/core/data/hooks/useCustomer';
77
import useDataset from '@/modules/core/data/hooks/useDataset';
88
import { Customer } from '@/modules/core/data/types/Customer';
99
import { detectLightHouse } from '@/modules/core/lightHouse/lighthouse';
10+
import { createLogger } from '@/modules/core/logging/logger';
1011
import { configureSentryUser } from '@/modules/core/sentry/sentry';
1112
import { cypressContext } from '@/modules/core/testing/contexts/cypressContext';
1213
import {
@@ -28,7 +29,6 @@ import {
2829
} from '@amplitude/react-amplitude';
2930
import { useTheme } from '@emotion/react';
3031
import * as Sentry from '@sentry/node';
31-
import { createLogger } from '@unly/utils-simple-logger';
3232
import { AmplitudeClient } from 'amplitude-js';
3333
import React from 'react';
3434
import { useTranslation } from 'react-i18next';
@@ -37,7 +37,7 @@ import { MultiversalAppBootstrapProps } from '../types/MultiversalAppBootstrapPr
3737

3838
const fileLabel = 'app/components/BrowserPageBootstrap';
3939
const logger = createLogger({
40-
label: fileLabel,
40+
fileLabel,
4141
});
4242

4343
export type BrowserPageBootstrapProps = MultiversalAppBootstrapProps<MultiversalPageProps & MultiversalAppBootstrapPageProps>;

Diff for: ‎src/app/components/MultiversalAppBootstrap.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { DEFAULT_LOCALE } from '@/modules/core/i18n/i18n';
1313
import i18nextLocize from '@/modules/core/i18n/i18nextLocize';
1414
import { stringifyQueryParameters } from '@/modules/core/i18n/i18nRouter';
1515
import { detectLightHouse } from '@/modules/core/lightHouse/lighthouse';
16+
import { createLogger } from '@/modules/core/logging/logger';
1617
import previewModeContext from '@/modules/core/previewMode/contexts/previewModeContext';
1718
import {
1819
startPreviewMode,
@@ -29,7 +30,6 @@ import { ApolloProvider } from '@apollo/client';
2930
import { ThemeProvider } from '@emotion/react';
3031
import * as Sentry from '@sentry/node';
3132
import { isBrowser } from '@unly/utils';
32-
import { createLogger } from '@unly/utils-simple-logger';
3333
import { i18n } from 'i18next';
3434
import isEmpty from 'lodash.isempty';
3535
import size from 'lodash.size';
@@ -42,7 +42,7 @@ import ServerPageBootstrap, { ServerPageBootstrapProps } from './ServerPageBoots
4242

4343
const fileLabel = 'app/components/MultiversalAppBootstrap';
4444
const logger = createLogger({
45-
label: fileLabel,
45+
fileLabel,
4646
});
4747

4848
type Props = MultiversalAppBootstrapProps<SSGPageProps> | MultiversalAppBootstrapProps<SSRPageProps>;
@@ -205,8 +205,8 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
205205
// The "customer" was forwarded as a JSON-ish string (using Flatten) in order to avoid circular dependencies issues (SSG/SSR)
206206
// It now being converted back into an object to be actually usable on all pages
207207
// eslint-disable-next-line no-console
208-
console.debug('pageProps.serializedDataset length (bytes)', (serializedDataset as unknown as string)?.length);
209-
// console.debug('serializedDataset', serializedDataset);
208+
logger.debug('pageProps.serializedDataset length (bytes)', (serializedDataset as unknown as string)?.length);
209+
// logger.debug('serializedDataset', serializedDataset);
210210
}
211211

212212
const dataset: GraphCMSDataset = deserializeSafe(serializedDataset);

Diff for: ‎src/app/components/ServerPageBootstrap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { MultiversalPageProps } from '@/layouts/core/types/MultiversalPageProps';
22
import { OnlyServerPageProps } from '@/layouts/core/types/OnlyServerPageProps';
3+
import { createLogger } from '@/modules/core/logging/logger';
34
import { configureSentryUser } from '@/modules/core/sentry/sentry';
45
import { userSessionContext } from '@/modules/core/userSession/userSessionContext';
56
import * as Sentry from '@sentry/node';
6-
import { createLogger } from '@unly/utils-simple-logger';
77
import React from 'react';
88
import { MultiversalAppBootstrapPageProps } from '../types/MultiversalAppBootstrapPageProps';
99
import { MultiversalAppBootstrapProps } from '../types/MultiversalAppBootstrapProps';
1010

1111
const fileLabel = 'app/components/ServerPageBootstrap';
1212
const logger = createLogger({
13-
label: fileLabel,
13+
fileLabel,
1414
});
1515

1616
export type ServerPageBootstrapProps = MultiversalAppBootstrapProps<MultiversalPageProps & MultiversalAppBootstrapPageProps>;

Diff for: ‎src/common/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ Common
44
> Check out the [documentation about the folder structure](../README.md#common-folder)
55
66
Summary:
7+
78
- This folder uses an MVC-ish design pattern, where you split your files in separated folders, depending on their kind.
89
- This folder is great to quickly write some piece of code, you don't need to think a lot about how organized your code should be, and can get started quickly.
910
- If you don't know or are unsure whether to go for `common` or `modules`, pick `common`. You can always change your mind later.

Diff for: ‎src/common/components/dataDisplay/Markdown.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { CSSStyles } from '@/modules/core/css/types/CSSStyles';
22
import { Markdown as MarkdownType } from '@/modules/core/data/types/Markdown';
33
import I18nBtnChangeLocale from '@/modules/core/i18n/components/I18nBtnChangeLocale';
44
import I18nLink from '@/modules/core/i18n/components/I18nLink';
5+
import { createLogger } from '@/modules/core/logging/logger';
56
import * as Sentry from '@sentry/node';
6-
import { createLogger } from '@unly/utils-simple-logger';
77
import classnames from 'classnames';
88
import deepmerge from 'deepmerge';
99
import MarkdownToJSXLib, { MarkdownToJSX } from 'markdown-to-jsx';
@@ -26,7 +26,7 @@ import Tooltip from './SimpleTooltip';
2626

2727
const fileLabel = 'common/components/dataDisplay/Markdown';
2828
const logger = createLogger({ // eslint-disable-line no-unused-vars,@typescript-eslint/no-unused-vars
29-
label: fileLabel,
29+
fileLabel,
3030
});
3131

3232
type Props = {

Diff for: ‎src/common/utils/logo.test.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ describe('utils/assets/logo.ts', () => {
3030
const baseWidth = 120;
3131
const baseHeight = 60;
3232

33-
expect(generateSizes({ baseWidth, baseHeight })).toEqual(
33+
expect(generateSizes({
34+
baseWidth,
35+
baseHeight,
36+
})).toEqual(
3437
{
3538
'xs': {
3639
'height': '30px',

Diff for: ‎src/common/utils/logo.ts

+23-4
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,12 @@ export const generateSizes = (
101101
* @param height
102102
* @returns {{width:}}
103103
*/
104-
export const resolveRatio = ({ baseWidth, baseHeight, width, height }): Size => {
104+
export const resolveRatio = ({
105+
baseWidth,
106+
baseHeight,
107+
width,
108+
height,
109+
}): Size => {
105110
if (width) {
106111
// Need to resolve the height
107112
return {
@@ -128,7 +133,11 @@ export const resolveRatio = ({ baseWidth, baseHeight, width, height }): Size =>
128133
* @param logo
129134
* @returns {{width: *, height: *}}
130135
*/
131-
export const resolveSize = ({ width, height, logo }: Size & { logo: Logo }): Size => {
136+
export const resolveSize = ({
137+
width,
138+
height,
139+
logo,
140+
}: Size & { logo: Logo }): Size => {
132141
if (width && height) {
133142
// Both width and height provided, which means we force the logo's size
134143
return {
@@ -139,12 +148,22 @@ export const resolveSize = ({ width, height, logo }: Size & { logo: Logo }): Siz
139148
// Only the width is provided, therefore only the width should be set
140149
return {
141150
width: width,
142-
height: resolveRatio({ baseHeight: logo.height, baseWidth: logo.width, width, height }).height,
151+
height: resolveRatio({
152+
baseHeight: logo.height,
153+
baseWidth: logo.width,
154+
width,
155+
height,
156+
}).height,
143157
};
144158
} else if (height) {
145159
// Only the height is provided, therefore only the height should be set
146160
return {
147-
width: resolveRatio({ baseHeight: logo.height, baseWidth: logo.width, width, height }).width,
161+
width: resolveRatio({
162+
baseHeight: logo.height,
163+
baseWidth: logo.width,
164+
width,
165+
height,
166+
}).width,
148167
height: height,
149168
};
150169
} else {

Diff for: ‎src/common/utils/mobile.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import { createLogger } from '@/modules/core/logging/logger';
12
import * as Sentry from '@sentry/node';
23
import { isBrowser } from '@unly/utils';
3-
import { createLogger } from '@unly/utils-simple-logger';
44

5+
const fileLabel = 'common/utils/mobile';
56
const logger = createLogger({
6-
label: 'utils/mobile',
7+
fileLabel,
78
});
89

910
/**

Diff for: ‎src/layouts/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ Page layouts
44
> Check out the [documentation about the folder structure](../README.md#folder-structure)
55
66
Summary:
7+
78
- `core`: Share reusable components between layouts.
89
- `default`: Used by all non-demo pages. Customise it, or change the core, as you prefer.
910
- `demo`: Used by all demo pages. You'll eventually get rid of it, but until then it can be a good inspiration.

Diff for: ‎src/layouts/core/components/Layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { SoftPageProps } from '@/layouts/core/types/SoftPageProps';
22
import { GenericObject } from '@/modules/core/data/types/GenericObject';
33
import DefaultErrorLayout from '@/modules/core/errorHandling/DefaultErrorLayout';
4+
import { createLogger } from '@/modules/core/logging/logger';
45
import PreviewModeBanner from '@/modules/core/previewMode/components/PreviewModeBanner';
56
import Sentry from '@/modules/core/sentry/sentry';
67
import ErrorPage from '@/pages/_error';
78
import {
89
Amplitude,
910
LogOnMount,
1011
} from '@amplitude/react-amplitude';
11-
import { createLogger } from '@unly/utils-simple-logger';
1212
import classnames from 'classnames';
1313
import {
1414
NextRouter,
@@ -22,7 +22,7 @@ import DefaultPageContainer from './PageContainer';
2222

2323
const fileLabel = 'layouts/core/components/Layout';
2424
const logger = createLogger({
25-
label: fileLabel,
25+
fileLabel,
2626
});
2727

2828
type Props = {

Diff for: ‎src/layouts/demo/components/BuiltInFeaturesSidebar.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,11 @@ const BuiltInFeaturesSidebar: React.FunctionComponent<Props> = (props): JSX.Elem
8989
>
9090
{
9191
map(BUILT_IN_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
92-
const { label, href, params = null } = link;
92+
const {
93+
label,
94+
href,
95+
params = null,
96+
} = link;
9397

9498
return (
9599
<NavItem key={href}>

Diff for: ‎src/layouts/demo/components/BuiltInUtilitiesSidebar.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,11 @@ const BuiltInUtilitiesSidebar: React.FunctionComponent<Props> = (props): JSX.Ele
7373
>
7474
{
7575
map(BUILT_IN_UTILITIES_SIDEBAR_LINKS, (link: SidebarLink) => {
76-
const { label, href, params = null } = link;
76+
const {
77+
label,
78+
href,
79+
params = null,
80+
} = link;
7781

7882
return (
7983
<NavItem key={href}>

Diff for: ‎src/layouts/demo/components/DemoLayout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { SoftPageProps } from '@/layouts/core/types/SoftPageProps';
22
import { GenericObject } from '@/modules/core/data/types/GenericObject';
33
import DefaultErrorLayout from '@/modules/core/errorHandling/DefaultErrorLayout';
4+
import { createLogger } from '@/modules/core/logging/logger';
45
import PreviewModeBanner from '@/modules/core/previewMode/components/PreviewModeBanner';
56
import Sentry from '@/modules/core/sentry/sentry';
67
import ErrorPage from '@/pages/_error';
78
import {
89
Amplitude,
910
LogOnMount,
1011
} from '@amplitude/react-amplitude';
11-
import { createLogger } from '@unly/utils-simple-logger';
1212
import classnames from 'classnames';
1313
import {
1414
NextRouter,
@@ -22,7 +22,7 @@ import DemoPageContainer from './DemoPageContainer';
2222

2323
const fileLabel = 'layouts/demo/components/DemoLayout';
2424
const logger = createLogger({
25-
label: fileLabel,
25+
fileLabel,
2626
});
2727

2828
export type SidebarProps = {

Diff for: ‎src/layouts/demo/components/NativeFeaturesSidebar.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,11 @@ const NativeFeaturesSidebar: React.FunctionComponent<Props> = (props): JSX.Eleme
6464
>
6565
{
6666
map(NATIVE_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
67-
const { label, href, params = null } = link;
67+
const {
68+
label,
69+
href,
70+
params = null,
71+
} = link;
6872
const isActive = router.pathname.replace('/[locale]', '').replace('/[[...slug]]', '') === href;
6973

7074
return (

Diff for: ‎src/modules/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ Modules
44
> Check out the [documentation about the folder structure](../README.md#modules-folder)
55
66
Summary:
7+
78
- This folder contains modules.
89
- `src/modules/core` contain modules built-in with NRN, so you can easily differentiate your own code with NRN's code.
910
- Modules are a way to organize your code, by putting all related files together, instead of splitting them by "kind".

Diff for: ‎src/modules/core/amplitude/amplitude.ts

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1+
import { createLogger } from '@/modules/core/logging/logger';
12
import * as Sentry from '@sentry/node';
23
import { isBrowser } from '@unly/utils';
34
import {
45
AmplitudeClient,
56
Identify,
67
} from 'amplitude-js';
7-
import { NextWebVitalsMetricsReport } from '../webVitals/types/NextWebVitalsMetricsReport';
8+
import UniversalCookiesManager from '../cookiesManager/UniversalCookiesManager';
89
import { UserConsent } from '../userConsent/types/UserConsent';
910
import { UserSemiPersistentSession } from '../userSession/types/UserSemiPersistentSession';
10-
import UniversalCookiesManager from '../cookiesManager/UniversalCookiesManager';
11+
import { NextWebVitalsMetricsReport } from '../webVitals/types/NextWebVitalsMetricsReport';
12+
13+
const fileLabel = 'module/core/amplitude/amplitude';
14+
const logger = createLogger({
15+
fileLabel,
16+
});
1117

1218
/**
1319
* Event actions.
@@ -98,14 +104,14 @@ export const getAmplitudeInstance = (props: GetAmplitudeInstanceProps): Amplitud
98104
amplitudeInstance.setOptOut(true); // If true, then no events will be logged or sent.
99105

100106
if (process.env.STORYBOOK !== 'true') {
101-
console.info('User has opted-out of analytics tracking.'); // eslint-disable-line no-console
107+
logger.info('User has opted-out of analytics tracking.'); // eslint-disable-line no-console
102108
}
103109
} else {
104110
// Re-enable tracking (necessary if it was previously disabled!)
105111
amplitudeInstance.setOptOut(false);
106112

107113
if (process.env.STORYBOOK !== 'true') {
108-
console.info(`User has opted-in into analytics tracking. (Thank you! This helps us make our product better, and we don't track any personal/identifiable data.`); // eslint-disable-line no-console
114+
logger.info(`User has opted-in into analytics tracking. (Thank you! This helps us make our product better, and we don't track any personal/identifiable data.`); // eslint-disable-line no-console
109115
}
110116
}
111117

Diff for: ‎src/modules/core/cookiesManager/UniversalCookiesManager.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import {
1111
} from 'http';
1212
import BrowserCookies, { CookieAttributes } from 'js-cookie';
1313
import { v1 as uuid } from 'uuid'; // XXX Use v1 for uniqueness - See https://www.sohamkamani.com/blog/2016/10/05/uuid1-vs-uuid4/
14-
import { Cookies } from './types/Cookies';
14+
import { addYears } from '../date/date';
1515
import {
1616
PatchedUserSemiPersistentSession,
1717
UserSemiPersistentSession,
1818
} from '../userSession/types/UserSemiPersistentSession';
19-
import { addYears } from '../date/date';
19+
import { Cookies } from './types/Cookies';
2020

2121
const USER_LS_KEY = 'user';
2222

0 commit comments

Comments
 (0)