Skip to content

docs: use consola's fancy reporter in init demo GIF#2485

Open
thribhuvan003 wants to merge 2 commits into
wxt-dev:mainfrom
thribhuvan003:docs/init-demo-fancy-logger
Open

docs: use consola's fancy reporter in init demo GIF#2485
thribhuvan003 wants to merge 2 commits into
wxt-dev:mainfrom
thribhuvan003:docs/init-demo-fancy-logger

Conversation

@thribhuvan003

Copy link
Copy Markdown

Problem

The wxt init demo GIF shows consola's basic reporter output ([log] / [info] prefixes) instead of the fancy reporter (no prefix / ).

Root cause

initialize.ts logs through consola's default instance, which picks its reporter at import time:

options.fancy ?? !(isCI || isTest) ? new FancyReporter() : new BasicReporter()

std-env reports isCI: true whenever GITHUB_ACTIONS is present with any value (CI provider scan), independent of CI. The vhs recording runs on the GitHub Actions runner, so the ttyd shell inherits CI=true and GITHUB_ACTIONS=true → BasicReporter.

Fix

unset CI GITHUB_ACTIONS in the tape's hidden preparation block, before bunx wxt init runs. A shell-level unset (rather than vhs Env) reliably defeats both the env.CI check and the provider scan, and it never appears in the recording.

Verification

Reproduced the reporter selection with consola 3.4.2 using the same calls wxt init makes:

Environment Output
CI=true GITHUB_ACTIONS=true [info] Initializing new project (basic)
both unset ℹ Initializing new project (fancy)

Since vhs.yml triggers on tape changes (and supports workflow_dispatch), the GIF will regenerate on merge and can be re-checked there.

Fixes #2461

@netlify

netlify Bot commented Jul 4, 2026

Copy link
Copy Markdown

Deploy Preview for creative-fairy-df92c4 ready!

Name Link
🔨 Latest commit a4181ae
🔍 Latest deploy log https://app.netlify.com/projects/creative-fairy-df92c4/deploys/6a4a0a33cca0ff0008c7f88b
😎 Deploy Preview https://deploy-preview-2485--creative-fairy-df92c4.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@PatrykKuniczak PatrykKuniczak left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the preview there's still:
Image

@codecov

codecov Bot commented Jul 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.55%. Comparing base (40c6c19) to head (a4181ae).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2485      +/-   ##
==========================================
+ Coverage   79.32%   79.55%   +0.22%     
==========================================
  Files         134      134              
  Lines        4005     4005              
  Branches      910      910              
==========================================
+ Hits         3177     3186       +9     
+ Misses        736      730       -6     
+ Partials       92       89       -3     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pkg-pr-new

pkg-pr-new Bot commented Jul 5, 2026

Copy link
Copy Markdown

Open in StackBlitz

@wxt-dev/analytics

npm i https://pkg.pr.new/@wxt-dev/analytics@2485

@wxt-dev/auto-icons

npm i https://pkg.pr.new/@wxt-dev/auto-icons@2485

@wxt-dev/browser

npm i https://pkg.pr.new/@wxt-dev/browser@2485

@wxt-dev/i18n

npm i https://pkg.pr.new/@wxt-dev/i18n@2485

@wxt-dev/is-background

npm i https://pkg.pr.new/@wxt-dev/is-background@2485

@wxt-dev/module-react

npm i https://pkg.pr.new/@wxt-dev/module-react@2485

@wxt-dev/module-solid

npm i https://pkg.pr.new/@wxt-dev/module-solid@2485

@wxt-dev/module-svelte

npm i https://pkg.pr.new/@wxt-dev/module-svelte@2485

@wxt-dev/module-vue

npm i https://pkg.pr.new/@wxt-dev/module-vue@2485

@wxt-dev/runner

npm i https://pkg.pr.new/@wxt-dev/runner@2485

@wxt-dev/storage

npm i https://pkg.pr.new/@wxt-dev/storage@2485

@wxt-dev/unocss

npm i https://pkg.pr.new/@wxt-dev/unocss@2485

@wxt-dev/webextension-polyfill

npm i https://pkg.pr.new/@wxt-dev/webextension-polyfill@2485

wxt

npm i https://pkg.pr.new/wxt@2485

commit: a4181ae

@PatrykKuniczak PatrykKuniczak left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WAIT WAIT
"the GIF will regenerate on merge" i see, maybe right, GH Actions need to run on target branch.

Let's try it, but you need to fix CSpell issue.

@PatrykKuniczak PatrykKuniczak enabled auto-merge (squash) July 5, 2026 06:44
@nishu-murmu

Copy link
Copy Markdown
Collaborator

@PatrykKuniczak how do we test this?
We have to merge it to check this right?

@PatrykKuniczak

Copy link
Copy Markdown
Collaborator

@nishu-murmu Yeah, i hope.

This works only inside this tapes, we can safely check it on main, if it won't work, i'll revert it and @thribhuvan003 will be able to try again.

@thribhuvan003

Copy link
Copy Markdown
Author

added consola to the cspell words, should be green now. and yeah @nishu-murmu — the vhs workflow only runs when the tape changes on main, so the gif regenerates after merge. if it still looks off after that I'll follow up.

auto-merge was automatically disabled July 5, 2026 07:39

Head branch was pushed to by a user without write access

@PatrykKuniczak PatrykKuniczak enabled auto-merge (squash) July 5, 2026 07:53
@PatrykKuniczak

Copy link
Copy Markdown
Collaborator

And after last commit we need @aklinker1 Approval 🤣

@PatrykKuniczak

Copy link
Copy Markdown
Collaborator

@nishu-murmu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Init demo GIF not using consola's pretty formatter

3 participants