Add styled `console.log` notice in Dev Mode to explain the mutation events warning

Question

Add styled `console.log` notice in Dev Mode to explain the mutation events warning

tigt opened this issue a year ago · comments

Description

if (process.env.NODE_ENV !== 'production') {
  console.log(
    "%cThe deprecation warnings about Mutation Events are exclusive to Marko’s development mode. You don’t have to worry about them for your deployed app.",
        "color:orange;font-size:4em;text-shadow: 2px 2px #00;font-weight:700"
  );
}

Why

Marko authors understandably are concerned when the browser console starts yelling about deprecated events, and it’s not clear right now that Marko only uses them in development mode, not production: #1857 (comment)

Possible Implementation & Open Questions

Styling console.log() Output Formatting With CSS
Probably use sessionStorage to only show the notice once per-devtools for each browsing context (despite the name, sessionStorage does not match what a website session is commonly understood as)

Dylan Piercey · Answer 1 · Sat Feb 11 2023 11:49:22 GMT+0800 (China Standard Time)

One option we've considered before which may be better so I'll document here:

We could use a MutationObserver to detect the issue and show a warning. The main reason we can't just use that is because it fires too late and we can't capture a useful stack trace. So we could also have the ability to configure eg a local storage property like localStorage.setItem('MARKO_DEBUG', 1); and when that is detected it could attach the synchronous listeners.

Dylan Piercey · Answer 2 · Thu Mar 16 2023 05:22:03 GMT+0800 (China Standard Time)

Chrome no longer warns when using this api.