Skip to content

(feat): add missing @babel/preset-react dependency and add @Sage alia#44

Merged
YvetteNikolov merged 2 commits into
mainfrom
feat/lint-and-format
Jul 29, 2025
Merged

(feat): add missing @babel/preset-react dependency and add @Sage alia#44
YvetteNikolov merged 2 commits into
mainfrom
feat/lint-and-format

Conversation

@YvetteNikolov
Copy link
Copy Markdown
Contributor

@YvetteNikolov YvetteNikolov commented Jul 29, 2025

…s resolver

  • Paar missende dependencies toegevoegd
  • Alias resolver toegevoegd aan eslint zodat we @sage/ aliasses kunnen gebruiken
  • @wordpress/scripts vervangen met prettier en stylelint

Doei 657 packages 👋

Screenshot 2025-07-29 at 15 25 32

Comment on lines +21 to +37
const args = [
...( glob?.path ? [ glob.path ] : [] ),
...( userPath ? [ userPath ] : [] ),
'--check',
'--write',
];

const child = spawn( command, args, {
stdio: 'inherit',
shell: true, // required for glob support like {*,**/*}.css
} );

child.on( 'exit', ( code ) => {
if ( code !== 0 ) {
error( `Prettier exited with code ${ code }` );
}
} );
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ik ga dit nog herschrijven, want dubbele code met lint.js, komt in de andere PR nadat deze gemerged is

{
filetype: filetypes.css.name,
path: './web/app/themes/**/resources/styles/**/*.css',
path: './web/app/themes/**/resources/styles/{*,**/*}.css',
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Met path: './web/app/themes/**/resources/styles/{*,**/*}.css', pakte hij ./web/app/themes/**/resources/styles/frontend.css niet. Met deze glob nu wel.

Comment on lines +14 to +26
const command = 'prettier';

const glob = getGlobByFormatModeAndFiletype(
formatMode,
formatFiletype.name
);

run( `${ command } ${ glob?.path ?? '' } ${ userPath ?? '' }`, 'format' );
const args = [
...( glob?.path ? [ glob.path ] : [] ),
...( userPath ? [ userPath ] : [] ),
'--check',
'--write',
];
Copy link
Copy Markdown
Contributor Author

@YvetteNikolov YvetteNikolov Jul 29, 2025

Choose a reason for hiding this comment

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

Dit was trouwens het probleem waar we eerder tegenaan liepen. Met run( ${ command } ${ glob?.path ?? '' } ${ userPath ?? '' }, 'format' ); werden de aanhalingstekens niet meegenomen:

prettier ./web/app/themes/**/resources/styles/{*,**/*}.css --write

Terwijl we die wel nodig hadden voor het command

prettier './web/app/themes/**/resources/styles/{*,**/*}.css' --write

Met spawn() en het gebruik van een args array worden de argumenten nu wel goed doorgegeven.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Interessant, glob?.path is toch gewoon een string. Dus '${ glob?.path ?? '' }' had denk ik ook kunnen werken.
Overigens deze manier (met een args array) lijkt mij veel netter!

Wellicht kan deze logica nog weg geabstraheerd worden naar een helper of wellicht in run (of niet :) )

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Nope, '${ glob?.path ?? '' }' met aanhalingstekens werkt ook niet - de aanhalingstekens werden gestript

@YvetteNikolov YvetteNikolov requested review from a team, WybeBosch, Yannicvanveen, hnccox-yard, laravdiemen and rivanuff and removed request for a team July 29, 2025 14:15
@WybeBosch
Copy link
Copy Markdown
Contributor

Eyo is babel nogsteeds nodig? Dat was toch voor like transpiling js naar oudere js zodat het cross browser compatible blijft?

@YvetteNikolov
Copy link
Copy Markdown
Contributor Author

Eyo is babel nogsteeds nodig? Dat was toch voor like transpiling js naar oudere js zodat het cross browser compatible blijft?

eslint vraagt erom als je een lint draait. Is verder niet nodig voor @wordpress/scripts (wordt intern al geregeld) of Vite.

Screenshot 2025-07-29 at 16 29 45


settings: {
'import/resolver': {
alias: [
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Dit is neem ik aan zodat hij Vite begrijpt? Ik neem aan dat het geen probleem is als deze config in een project met webpack wordt gebruikt, tock?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ook in oude projecten gaat dit fout en gaat de linter kapot

Dit is bijv. hier https://github.com/yardinternet/brave-scaffold/blob/main/stubs/sage-child/resources/scripts/frontend/frontend.js

"chalk": "^5.4.1",
"eslint": "^9.32.0",
"meow": "^13.2.0",
"prettier": "npm:wp-prettier@^3.0.3",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Was dit dus toch nodig voor de override? Of is dit voor de verbositeit?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Nu nodig omdat we prettier direct gebruiken in het format.js bestand

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Nu je het zegt, kunnen we de overrides weghalen. Ga ik doen.

"stylelint": "^16.23.0"
},
"optionalDependencies": {
"@yardinternet/eslint-config": "*",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is any version wel handig? Zo meteen ontstaan er in de toekomst compatibiliteit problemen in oude projecten (een oude versie an de Toolkit CLI maar een nieuwe config). Anderzijds is het wel handig dat het dan automatisch 'geüpdatet' zonder dat je een nieuwe versie moet uitbrengen.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ja dat laatste. Als de toolkit geupdatet wordt in een project, doen we dat vaak via zo'n command die alle @yardinternet/ dependencies updatet.

Het is dan apart dat hier bij optionalDependencies een mogelijk oude versie staat.

'--write',
];

const child = spawn( command, args, {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is het niet beter om de exec in de run helper gewoon te vervangen voor de deze spawn functie? De functionaliteit is toch het zelfde? Alleen de logs worden wel getoond

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Laat maar ik zie nu je opmerking hierover: https://github.com/yardinternet/toolkit/pull/44/files#r2239860906

Comment on lines +14 to +26
const command = 'prettier';

const glob = getGlobByFormatModeAndFiletype(
formatMode,
formatFiletype.name
);

run( `${ command } ${ glob?.path ?? '' } ${ userPath ?? '' }`, 'format' );
const args = [
...( glob?.path ? [ glob.path ] : [] ),
...( userPath ? [ userPath ] : [] ),
'--check',
'--write',
];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Interessant, glob?.path is toch gewoon een string. Dus '${ glob?.path ?? '' }' had denk ik ook kunnen werken.
Overigens deze manier (met een args array) lijkt mij veel netter!

Wellicht kan deze logica nog weg geabstraheerd worden naar een helper of wellicht in run (of niet :) )


const child = spawn( command, args, {
stdio: 'inherit',
shell: true, // Required for glob support
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

interessant dat je daar een optie voor moet mee geven. Ik zal denken dat dat gewoon binnen de 'stylelint' code wordt afgehandeld

Copy link
Copy Markdown
Contributor Author

@YvetteNikolov YvetteNikolov Jul 29, 2025

Choose a reason for hiding this comment

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

https://nodejs.org/api/child_process.html#child_processspawncommand-args-options

spawn() gebruikt standaard geen shell en in de shell worden de glob patterns geïnterpreteerd. Als ik dit niet zou doorgeven, zal de glob letterlijk doorgegeven worden als string.

@YvetteNikolov YvetteNikolov merged commit bce5448 into main Jul 29, 2025
1 check passed
@YvetteNikolov YvetteNikolov deleted the feat/lint-and-format branch July 29, 2025 14:52
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.

3 participants