ADD logLever preset property && filter lower lever log messages

lib/client-logger/package.json

@@ -28,7 +28,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "core-js": "^3.0.1"
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "loglevel": "^1.6.7"
   },
   "publishConfig": {
     "access": "public"

lib/client-logger/src/index.ts

@@ -1,16 +1,25 @@
-const { console } = global;
-
-/* tslint:disable: no-console */
+import { window, LOGLEVEL } from 'global';
+import console from 'loglevel';
 
 export const logger = {
+  trace: (message: any, ...rest: any[]): void => console.trace(message, ...rest),
   debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
-  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  log: (message: any, ...rest: any[]): void => window.console.log(message, ...rest),
   info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
   warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
   error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };
 
-export const pretty = (type: keyof typeof logger) => (...args: string[]) => {
+if (LOGLEVEL) {
+  console.setLevel(LOGLEVEL);
+}
+
+// eslint-disable-next-line no-underscore-dangle
+window.__STORYBOOK_LOGGER = console;
+
+export const pretty = (type: 'trace' | 'debug' | 'info' | 'warn' | 'error') => (
+  ...args: string[]
+) => {
   const argArray = [];
 
   if (args.length) {
@@ -36,8 +45,8 @@ export const pretty = (type: keyof typeof logger) => (...args: string[]) => {
   console[type].apply(console, argArray);
 };
 
+pretty.trace = pretty('trace');
 pretty.debug = pretty('debug');
-pretty.log = pretty('log');
 pretty.info = pretty('info');
 pretty.warn = pretty('warn');
 pretty.error = pretty('error');

lib/client-logger/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

lib/core/src/server/common/common-preset.js

@@ -9,3 +9,5 @@ export const babel = async (_, options) => {
     presets.apply('babelDefault', babelConfig(options), options)
   );
 };
+
+export const logLevel = () => 'info';

lib/core/src/server/manager/manager-webpack.config.js

@@ -21,7 +21,7 @@ import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
 const context = path.join(coreDirName, '../../node_modules');
 
-export default ({
+export default async ({
   configDir,
   configType,
   docsMode,
@@ -32,8 +32,10 @@ export default ({
   cache,
   previewUrl,
   versionCheck,
+  presets,
 }) => {
   const { raw, stringified } = loadEnv();
+  const logLevel = await presets.apply('logLevel', []);
   const isProd = configType === 'PRODUCTION';
   const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
     encoding: 'utf8',
@@ -78,6 +80,7 @@ export default ({
           version,
           dlls: dll ? ['./sb_dll/storybook_ui_dll.js'] : [],
           globals: {
+            LOGLEVEL: JSON.stringify(logLevel),
             VERSIONCHECK: JSON.stringify(versionCheck),
             DOCS_MODE: docsMode, // global docs mode
             PREVIEW_URL: previewUrl, // global preview URL

lib/core/src/server/preview/iframe-webpack.config.js

@@ -39,6 +39,7 @@ export default async ({
   presets,
 }) => {
   const dlls = await presets.apply('webpackDlls', []);
+  const logLevel = await presets.apply('logLevel', []);
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions);
   const isProd = configType === 'PRODUCTION';
@@ -107,7 +108,9 @@ export default async ({
           files,
           options,
           version: packageJson.version,
-          globals: {},
+          globals: {
+            LOGLEVEL: JSON.stringify(logLevel),
+          },
           headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
           dlls,
           bodyHtmlSnippet: getPreviewBodyHtml(configDir, process.env),