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.

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

Jump to bottom

Build TS: fix TS watch mode. (#24491) #24522

Merged
merged 1 commit into from
May 5, 2023
Merged

Build TS: fix TS watch mode. (#24491) #24522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
148 changes: 81 additions & 67 deletions build/gulp/transpile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
const babel = require('gulp-babel');
const flatMap = require('gulp-flatmap');
const fs = require('fs');
const del = require('del');
const gulp = require('gulp');

const normalize = require('normalize-path');
Expand Down Expand Up @@ -60,28 +61,23 @@ const generatedTs = [

const bundlesSrc = ['js/bundles/**/*.js'];

const TS_OUTPUT_SRC = ['artifacts/dist_ts/__internal/**/*.js'];
const TS_OUTPUT_BASE_DIR = 'artifacts/dist_ts';
const TS_OUTPUT_SRC = [`${TS_OUTPUT_BASE_DIR}/__internal/**/*.js`];
const TS_COMPILER_CONFIG = {
tsconfigAbsPath: path.resolve(__dirname, '../../js/__internal/tsconfig.json'),
aliasAbsPath: path.resolve(__dirname, '../../js'),
clearFilePattern: 'artifacts/dist_ts',
normalizeTsAliasFilePath: (filePath) => filePath.replace(/\/artifacts\/dist_ts\//, '/js/'),
baseAbsPath: path.resolve(__dirname, '../..'),
relativePath: {
tsconfig: 'js/__internal/tsconfig.json',
alias: 'js',
dist: TS_OUTPUT_BASE_DIR,
},
tsBaseDirName: '__internal',
messages: {
createDirErr: 'Cannot create directory',
createFileErr: 'Cannot create file',
compilationFailed: 'TS Compilation failed',
},
};

function transpileTs(compiler, src) {
return async() => await compiler.compileTsAsync(src);
}
transpileTs.displayName = 'transpile TS';

function transpileTsClear(compiler) {
return async() => await compiler.clearAfterTSCompileAsync();
}
transpileTsClear.displayName = 'clear after TS transpile';

const createModuleConfig = (name, dir, filePath) => {
const isIndex = name === 'index.js';
Expand All @@ -108,7 +104,20 @@ const createModuleConfig = (name, dir, filePath) => {
return JSON.stringify(result, null, 2);
};

function transpile(src, dist, pipes = [], isEsm = false) {
function transpileTs(compiler, src) {
const task = () => {
const tsStream = compiler.compileTs(src);
return tsStream.pipe(gulp.dest(TS_OUTPUT_BASE_DIR));
};
task.displayName = 'transpile TS';
return task;
}

function transpileTsClean() {
return async() => await del(TS_OUTPUT_BASE_DIR, { force: true });
}

function transpile(src, dist, pipes = [], isEsm) {
const task = () => {
let result = gulp.src(src);

Expand All @@ -121,13 +130,12 @@ function transpile(src, dist, pipes = [], isEsm = false) {
task.displayName = `transpile JS: ${dist}`;

const babelTSTask = () => gulp.src(TS_OUTPUT_SRC)
.pipe(
isEsm
? babel(transpileConfig.esm)
: babel(transpileConfig.tsCjs)
.pipe(isEsm
? babel(transpileConfig.esm)
: babel(transpileConfig.tsCjs)
)
.pipe(gulp.dest(`${dist}/__internal`));
babelTSTask.displayName = `babel TS: ${dist}`;
babelTSTask.displayName = `babel TS dist: ${dist}`;

return gulp.series([task, babelTSTask]);
}
Expand Down Expand Up @@ -209,16 +217,17 @@ const transpileEsm = (dist) => gulp.series.apply(gulp, [
gulp.task('transpile-esm', transpileEsm(ctx.TRANSPILED_PROD_ESM_PATH));

gulp.task('transpile', (done) => {
const compiler = createTsCompiler(TS_COMPILER_CONFIG);
gulp.series(
'bundler-config',
transpileTs(compiler, srcTsPattern),
transpileDefault(),
transpileRenovation(),
transpileRenovationProd(),
ifEsmPackage('transpile-esm'),
transpileTsClear(compiler),
)(done);
createTsCompiler(TS_COMPILER_CONFIG).then((compiler) => {
gulp.series(
'bundler-config',
transpileTs(compiler, srcTsPattern),
transpileDefault(),
transpileRenovation(),
transpileRenovationProd(),
ifEsmPackage('transpile-esm'),
transpileTsClean(),
)(done);
});
});

const replaceTask = (sourcePath) => {
Expand Down Expand Up @@ -256,44 +265,49 @@ gulp.task('renovated-components-watch', () => {

});

gulp.task('compile-ts-watch', async() => {
const compiler = createTsCompiler(TS_COMPILER_CONFIG);
await compiler.watchTsAsync();

gulp.watch(TS_OUTPUT_SRC)
.on('change', (path) => {
gulp.src(path)
.pipe(babel(transpileConfig.tsCjs))
.pipe(writeFilePipe((filePath) => replaceArtifactPath(filePath, ctx.TS_OUT_PATH, ctx.TRANSPILED_PATH)))
.pipe(writeFilePipe((filePath) => replaceArtifactPath(filePath, ctx.TS_OUT_PATH, ctx.TRANSPILED_RENOVATION_PATH)))
.pipe(writeFilePipe((filePath) => replaceArtifactPath(filePath, ctx.TS_OUT_PATH, ctx.TRANSPILED_PROD_RENOVATION_PATH)));
});
});

gulp.task('transpile-watch', gulp.series(
() => {
const watchTask = watch(src)
.on('ready', () => console.log('transpile task is watching for changes...'))
.pipe(plumber({
errorHandler: notify
.onError('Error: <%= error.message %>')
.bind() // bind call is necessary to prevent firing 'end' event in notify.onError implementation
}));
watchTask
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_PATH));
watchTask
.pipe(replaceWidgets(true))
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_RENOVATION_PATH));
watchTask
.pipe(removeDebug())
.pipe(replaceWidgets(true))
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_PROD_RENOVATION_PATH));
return watchTask;
}
));
const watchJsTask = () => {
const watchTask = watch(src)
.on('ready', () => console.log('transpile JS is watching for changes...'))
.pipe(plumber({
errorHandler: notify
.onError('Error: <%= error.message %>')
.bind() // bind call is necessary to prevent firing 'end' event in notify.onError implementation
}));
watchTask
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_PATH));
watchTask
.pipe(replaceWidgets(true))
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_RENOVATION_PATH));
watchTask
.pipe(removeDebug())
.pipe(replaceWidgets(true))
.pipe(babel(transpileConfig.cjs))
.pipe(gulp.dest(ctx.TRANSPILED_PROD_RENOVATION_PATH));
return watchTask;
};
watchJsTask.displayName = 'transpile JS watch';

const watchTsTask = async() => {
const compiler = await createTsCompiler(TS_COMPILER_CONFIG);
const tsWatch = compiler.watchTs();

tsWatch
.pipe(plumber({
errorHandler: notify
.onError('Error: <%= error.message %>')
.bind() // bind call is necessary to prevent firing 'end' event in notify.onError implementation
}))
.pipe(babel(transpileConfig.tsCjs))
.pipe(gulp.dest(ctx.TRANSPILED_PATH))
.pipe(gulp.dest(ctx.TRANSPILED_RENOVATION_PATH))
.pipe(gulp.dest(ctx.TRANSPILED_PROD_RENOVATION_PATH));
};
watchTsTask.displayName = 'transpile TS watch';

gulp.task('transpile-watch', gulp.parallel(watchJsTask, watchTsTask));

gulp.task('transpile-tests', gulp.series('bundler-config', () =>
gulp
Expand Down
Loading