Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update ink to v3 #26190

Merged
merged 28 commits into from
Dec 15, 2020
Merged

chore: update ink to v3 #26190

merged 28 commits into from
Dec 15, 2020

Conversation

herecydev
Copy link
Contributor

@herecydev herecydev commented Aug 2, 2020

Description

Updates ink to v3. Pretty straightforward migration for most things; but some small bugs to fix:

image

Closes #19658

@herecydev herecydev requested review from a team as code owners August 2, 2020 11:11
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Aug 2, 2020
@vladar vladar added status: needs core review Currently awaiting review from Core team member topic: reporter and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Aug 3, 2020
@vladar vladar marked this pull request as draft August 3, 2020 17:01
@vladar
Copy link
Contributor

vladar commented Aug 3, 2020

I converted the PR to draft until it's ready. Thanks for doing this upgrade! 💜

@herecydev
Copy link
Contributor Author

Still looking into this duplicate message at the end; I've created a simplified cli.tsx that demonstrates the weirdness. There are a total of 27 messages that need rendering in the Static ink component. If I only render 26 it's fine (so it's not a last message problem). If I add additional items to the list they are all duplicated

image

Outputs the following:

image

It seems consistently after the 26th index it starts repeating the 26th, 27th. 28th, etc messages.

@sidharthachatterjee
Copy link
Contributor

@herecydev Thanks for picking this up!

@herecydev
Copy link
Contributor Author

No problem, I'm very close to getting an understanding of the duplicate log (tracking that in main ink repo). Ink-spinner still needs fixing as well; otherwise this shouldn't be too far away

@herecydev
Copy link
Contributor Author

Looking much healthier now:

Build
image

Dev
image

Dev (forced error)
image

Recipes
image
image

@herecydev herecydev marked this pull request as ready for review August 23, 2020 10:51
@herecydev
Copy link
Contributor Author

@sidharthachatterjee hopefully you can help with this one. Trying to fix up the tests and getting stuck on this line: https://github.com/gatsbyjs/gatsby/blob/master/integration-tests/gatsby-cli/__tests__/new.js#L11

I'm not sure if this is a script that should have been resolved, but I'm getting:

image

@hoobdeebla
Copy link
Contributor

It looks like the integration test is trying to call del-cli, but the del-cli docs indicate that the command for doing so is just del on Unix-like systems. Try editing that line like so:

-   const clean = dir => execa(`yarn`, ["del-cli", dir])`
+   const clean = dir => execa(`yarn`, ["del", dir])`

Hopefully this helps :)

@herecydev
Copy link
Contributor Author

I'm on windows and it explicity calls out using del-cli there:

Windows users: Since $ del is already a builtin command on Windows, you need to use $ del-cli there.

@hoobdeebla
Copy link
Contributor

Gotcha. I cloned your PR just now on Windows and WSL and the new test worked in both places as-is for me, and it worked in the last CI build as-is too. Not sure I can offer any further insight here but happy to help if needed

@herecydev
Copy link
Contributor Author

I'll give it another try then 🤔 the errors look fairly straightforward to fix regardless

@hoobdeebla
Copy link
Contributor

This should be ready @wardpeet. I don't have direct write access to this PR, so I can't fix the 2 conflicts.

@pieh pieh self-assigned this Dec 11, 2020
@pieh
Copy link
Contributor

pieh commented Dec 11, 2020

This should be ready @wardpeet. I don't have direct write access to this PR, so I can't fix the 2 conflicts.

I'll fix the conflicts and do some more testing ;)

@pieh
Copy link
Contributor

pieh commented Dec 11, 2020

Was trying to test this locally just now with gatsby-dev. It kept failing with a React error saying it received an object instead of a component.

I got the same error when testing locally - the PR updates ink and ink-spinner as production dependencies rather than devDeps. This was changed upstream with #27058. To fix it, I removed ink and ink-spinner from deps then updated them in devDeps. All local CLI tests passed, and gatsby-dev worked without erroring after this change.

So interesting thing I discovered as I worked on resolving conflicts on this PR + getting it through finish line.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/src/reporter/start-logger.ts#L12-L16 checks if ink is installed - and switches to legacy logger if it's not. #27058 in practice broke auto-selecting ink for majority of users. I didn't see this problem because I was testing it inside gatsbyjs/gatsby monorepo which has ink installed, but user sites actually don't install ink package anymore ...

After fixing above check (well removing it, because it's not needed anymore) I also did hit this problem and this is because

import InkSpinner from "ink-spinner"
console.log({ InkSpinner })
{ InkSpinner: { default: [Function: Spinner] } }

So rollup (well, our setup at least) doesn't "prefer" default so instead of InkSpinner being just component InkSpinner here actually is "namespace". I will use this trick

{p.isDone ? `✔ ` : <Spinner.default />}
to workaround it for now to not mess with bundling setup (and avoid prolonging this PR any more).

I also want to sure couple more niceties that this upgrade - ink@2 (or maybe the way we use it now) sometimes truncates longer messages ( #19658 ) - this PR (so this might be either ink upgrade or component changes done here or both) actually seems to fix that - see https://www.loom.com/share/925e12ce153c49d2a0ddb7d1ae7bb1a6

  • left yurnalist logger - problem - multiple "self updating" things are flickering and "fighting" to control terminal
  • center - current ink@2 - messages get truncated (they are supposed to have 5 paragraphs and end with clear -- END --
  • right - this PR with couple of adjustments that I will push shortly - no flickering spinners/progress bars and no truncated messages - clear winner

@pieh pieh changed the title WIP: update ink to v3 chore: update ink to v3 Dec 11, 2020
… accumulate output as is and instead of checking exact output, replace spaces with any whitespace in matcher
@@ -17,7 +17,7 @@ export const StoreStateProvider: React.FC = ({
(getStore().getState() as any) as IGatsbyState
)

useEffect(
useLayoutEffect(
Copy link
Contributor

Choose a reason for hiding this comment

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

This seems needed for quick commands (like gatsby options) that are in practice short sync ink@3 doesn't seem to run useEffect before we start printing things and result in no output in those cases

@pieh
Copy link
Contributor

pieh commented Dec 12, 2020

I published gatsby@ink3 / gatsby-cli@ink3 if anyone want to do some checking on how it works with current state of things - I will be doing some more cheks too

@pieh
Copy link
Contributor

pieh commented Dec 12, 2020

Ok, it seems like I did broke gatsby recipes in most recent changes:

➜  gatsby-ink3 git:(master) ✗ gatsby recipes
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at hd (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:174:108)
    at ld (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:59:104)
    at Q (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:81:38)
    at ig (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:161:347)
    at hg (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:139:22)
    at bg (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:138:366)
    at c (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:132:214)
    at b (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:30:115)
    at Mb (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/scheduler/cjs/scheduler.production.min.js:18:437)
    at hc (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.production.min.js:29:325)

  ERROR Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message
       or use the non-minified dev environment for full errors and additional helpful warnings.

 /Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.produc
 tion.min.js:174:108

 -hd (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:174:108)
 -ld (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:59:104)
 -Q (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.pr
   oduction.min.js:81:38)
 -ig (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:161:347)
 -hg (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:139:22)
 -bg (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:138:366)
 -c (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.pr
   oduction.min.js:132:214)
 -b (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.pr
   oduction.min.js:30:115)
 - Mb (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/scheduler/cjs/scheduler.production.min.js:18:437)
 -hc (/Users/misiek/.nvm/versions/node/v12.18.2/lib/node_modules/gatsby-cli/node_modules/ink/node_modules/react-reconciler/cjs/react-reconciler.p
    roduction.min.js:29:325)

@pieh
Copy link
Contributor

pieh commented Dec 13, 2020

New version were published for gatsby@ink3 / gatsby-cli@ink3 that seem to fix recipes (again)

Copy link
Contributor

@wardpeet wardpeet left a comment

Choose a reason for hiding this comment

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

One small nit

@pieh pieh merged commit 1e702ae into gatsbyjs:master Dec 15, 2020
LekoArts pushed a commit that referenced this pull request Dec 15, 2020
* Fix most stuff

* Whitespace

* Upgrade spinners

* Format

* Wrap error in text

* Fix devDeps

* Remove ink-box

* Eslint fix

* Eslint

* Eslint

* Eslint

* Fix return type missing

* fix: update bundled ink

* fix: update caniuse-lite so tests pass

* since we started bundling ink resolution check was almost never true ... because `ink` module wasn't installed - it was bundled in `gatsby-cli` (yikes)

* workaround rollup problem when trying to import cjs with default

* some tests should be fixed

* ink auto wraps output, so current ln splitting won't work well - just accumulate output as is and instead of checking exact output, replace spaces with any whitespace in matcher

* fix "default" import thingies

* add comment about nullable stdout

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
Co-authored-by: Adam Schay <adamschay@gmail.com>
Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
(cherry picked from commit 1e702ae)
LekoArts added a commit that referenced this pull request Dec 15, 2020
* Fix most stuff

* Whitespace

* Upgrade spinners

* Format

* Wrap error in text

* Fix devDeps

* Remove ink-box

* Eslint fix

* Eslint

* Eslint

* Eslint

* Fix return type missing

* fix: update bundled ink

* fix: update caniuse-lite so tests pass

* since we started bundling ink resolution check was almost never true ... because `ink` module wasn't installed - it was bundled in `gatsby-cli` (yikes)

* workaround rollup problem when trying to import cjs with default

* some tests should be fixed

* ink auto wraps output, so current ln splitting won't work well - just accumulate output as is and instead of checking exact output, replace spaces with any whitespace in matcher

* fix "default" import thingies

* add comment about nullable stdout

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
Co-authored-by: Adam Schay <adamschay@gmail.com>
Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
(cherry picked from commit 1e702ae)

Co-authored-by: Dan Kirkham <herecy@live.co.uk>
pragmaticpat pushed a commit to pragmaticpat/gatsby that referenced this pull request Apr 28, 2022
* Fix most stuff

* Whitespace

* Upgrade spinners

* Format

* Wrap error in text

* Fix devDeps

* Remove ink-box

* Eslint fix

* Eslint

* Eslint

* Eslint

* Fix return type missing

* fix: update bundled ink

* fix: update caniuse-lite so tests pass

* since we started bundling ink resolution check was almost never true ... because `ink` module wasn't installed - it was bundled in `gatsby-cli` (yikes)

* workaround rollup problem when trying to import cjs with default

* some tests should be fixed

* ink auto wraps output, so current ln splitting won't work well - just accumulate output as is and instead of checking exact output, replace spaces with any whitespace in matcher

* fix "default" import thingies

* add comment about nullable stdout

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
Co-authored-by: Adam Schay <adamschay@gmail.com>
Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs core review Currently awaiting review from Core team member
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ink CLI logger truncates long messages
7 participants