Skip to content

Make build script handling more flexible #23

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Apr 29, 2021
Merged

Make build script handling more flexible #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b263c59
Avoid newline conflicts when switching between Windows and Unix
AlCalzone Apr 18, 2021
03707d7
Make build script handling more flexible
AlCalzone Apr 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 25 additions & 10 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,15 @@ class DevServer {
// figure out if we need parcel (React)
const pkg = this.readPackageJson();
const scripts = pkg.scripts;
if (scripts && scripts['watch:parcel']) {
// use parcel
await this.startParcel();
if (scripts) {
if (scripts['watch:react']) {
// use React with default script name
await this.startReact();
}
else if (scripts['watch:parcel']) {
// use React with legacy script name
await this.startReact('watch:parcel');
}
}
this.startBrowserSync(this.getPort(config.adminPort, HIDDEN_BROWSER_SYNC_PORT_OFFSET));
// browser-sync proxy
Expand Down Expand Up @@ -349,10 +355,12 @@ class DevServer {
}
return generator.toJSON();
}
async startParcel() {
this.log.notice('Starting parcel');
this.log.debug('Waiting for first successful parcel build...');
await this.spawnAndAwaitOutput('npm', ['run', 'watch:parcel'], this.rootDir, 'Built in', { shell: true });
async startReact(scriptName = 'watch:react') {
this.log.notice('Starting React build');
this.log.debug('Waiting for first successful React build...');
await this.spawnAndAwaitOutput('npm', ['run', scriptName], this.rootDir, /(done in|watching (files )?for)/i, {
shell: true,
});
}
startBrowserSync(port) {
this.log.notice('Starting browser-sync');
Expand Down Expand Up @@ -435,7 +443,7 @@ class DevServer {
async startTscWatch() {
this.log.notice('Starting tsc --watch');
this.log.debug('Waiting for first successful tsc build...');
await this.spawnAndAwaitOutput('npm', ['run', 'watch:ts', '--', '--preserveWatchOutput'], this.rootDir, 'Watching for', { shell: true });
await this.spawnAndAwaitOutput('npm', ['run', 'watch:ts' /*, '--', '--preserveWatchOutput'*/], this.rootDir, /watching (files )?for/i, { shell: true });
Comment on lines -438 to +446
Copy link
Contributor Author

@AlCalzone AlCalzone Apr 18, 2021

Choose a reason for hiding this comment

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

Why was the preserveWatchOutput flag necessary? Since I'm using esbuild (estrella), this causes errors, but I didn't see any downside to disabling it.

Maybe we should make the scripts, their flags and the test regexp/string configurable.

Copy link
Collaborator

@UncleSamSwiss UncleSamSwiss Apr 29, 2021

Choose a reason for hiding this comment

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

The problem with watch:ts using tsc was that it would clear the screen with every build. Since we are "forwarding" stdout from watch:ts, this would clear the screen every time, thus we would not be able to see all other logs anymore.

}
startFileSync(destinationDir) {
this.log.notice(`Starting file system sync from ${this.rootDir}`);
Expand Down Expand Up @@ -719,8 +727,15 @@ class DevServer {
(_a = proc.stdout) === null || _a === void 0 ? void 0 : _a.on('data', (data) => {
const str = data.toString('utf-8');
console.log(str.trimEnd());
if (str.includes(awaitMsg)) {
resolve(proc);
if (typeof awaitMsg === 'string') {
if (str.includes(awaitMsg)) {
resolve(proc);
}
}
else {
if (awaitMsg.test(str)) {
resolve(proc);
}
}
});
proc.on('exit', (code) => reject(`Exited with ${code}`));
Expand Down
37 changes: 25 additions & 12 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,9 +243,14 @@ class DevServer {
// figure out if we need parcel (React)
const pkg = this.readPackageJson();
const scripts = pkg.scripts;
if (scripts && scripts['watch:parcel']) {
// use parcel
await this.startParcel();
if (scripts) {
if (scripts['watch:react']) {
// use React with default script name
await this.startReact();
} else if (scripts['watch:parcel']) {
// use React with legacy script name
await this.startReact('watch:parcel');
}
}

this.startBrowserSync(this.getPort(config.adminPort, HIDDEN_BROWSER_SYNC_PORT_OFFSET));
Expand Down Expand Up @@ -418,10 +423,12 @@ class DevServer {
return generator.toJSON();
}

private async startParcel(): Promise<void> {
this.log.notice('Starting parcel');
this.log.debug('Waiting for first successful parcel build...');
await this.spawnAndAwaitOutput('npm', ['run', 'watch:parcel'], this.rootDir, 'Built in', { shell: true });
private async startReact(scriptName = 'watch:react'): Promise<void> {
this.log.notice('Starting React build');
this.log.debug('Waiting for first successful React build...');
await this.spawnAndAwaitOutput('npm', ['run', scriptName], this.rootDir, /(done in|watching (files )?for)/i, {
shell: true,
});
}

private startBrowserSync(port: number): void {
Expand Down Expand Up @@ -519,9 +526,9 @@ class DevServer {
this.log.debug('Waiting for first successful tsc build...');
await this.spawnAndAwaitOutput(
'npm',
['run', 'watch:ts', '--', '--preserveWatchOutput'],
['run', 'watch:ts' /*, '--', '--preserveWatchOutput'*/],
this.rootDir,
'Watching for',
/watching (files )?for/i,
{ shell: true },
);
}
Expand Down Expand Up @@ -832,16 +839,22 @@ class DevServer {
command: string,
args: ReadonlyArray<string>,
cwd: string,
awaitMsg: string,
awaitMsg: string | RegExp,
options?: cp.SpawnOptions,
): Promise<cp.ChildProcess> {
return new Promise<cp.ChildProcess>((resolve, reject) => {
const proc = this.spawn(command, args, cwd, { ...options, stdio: ['ignore', 'pipe', 'inherit'] });
proc.stdout?.on('data', (data: Buffer) => {
const str = data.toString('utf-8');
console.log(str.trimEnd());
if (str.includes(awaitMsg)) {
resolve(proc);
if (typeof awaitMsg === 'string') {
if (str.includes(awaitMsg)) {
resolve(proc);
}
} else {
if (awaitMsg.test(str)) {
resolve(proc);
}
}
});
proc.on('exit', (code) => reject(`Exited with ${code}`));
Expand Down
3 changes: 3 additions & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
// this is necessary for the automatic typing of the adapter config
"resolveJsonModule": true,

// Avoid conflicts with line endings in compiled files
"newLine": "lf",

// Set this to false if you want to disable the very strict rules (not recommended)
"strict": true,
// Or enable some of those features for more fine-grained control
Expand Down