feat(build-plugin): add sourcemaps and watch support for plugin devel…

…opment

skeleton/cli-bundler/aurelia_project/tasks__if_babel/transpile.js

@@ -7,18 +7,23 @@ import cache from 'gulp-cache';
 import project from '../aurelia.json';
 import fs from 'fs';
 import through from 'through2';
-import {CLIOptions, build, Configuration} from 'aurelia-cli';
+import { CLIOptions, build, Configuration } from 'aurelia-cli';
+import gulpSourcemaps from 'gulp-sourcemaps';
 
 let env = CLIOptions.getEnvironment();
 const buildOptions = new Configuration(project.build.options);
 const useCache = buildOptions.isApplicable('cache');
 
 function configureEnvironment() {
-  return gulp.src(`aurelia_project/environments/${env}.js`, {since: gulp.lastRun(configureEnvironment)})
+  return gulp.src(`aurelia_project/environments/${env}.js`, {
+      since: gulp.lastRun(configureEnvironment)
+    })
     .pipe(rename('environment.js'))
     .pipe(through.obj(function (file, _, cb) {
       // https://github.com/aurelia/cli/issues/1031
-      fs.unlink(`${project.paths.root}/${file.relative}`, function () { cb(null, file); });
+      fs.unlink(`${project.paths.root}/${file.relative}`, function () {
+        cb(null, file);
+      });
     }))
     .pipe(gulp.dest(project.paths.root));
 }
@@ -28,11 +33,18 @@ function buildJavaScript() {
   if (useCache) {
     // the cache directory is "gulp-cache/projName-env" inside folder require('os').tmpdir()
     // use command 'au clear-cache' to purge all caches
-    transpile = cache(transpile, {name: project.name + '-' + env});
+    transpile = cache(transpile, {
+      name: project.name + '-' + env
+    });
   }
 
-  return gulp.src(project.transpiler.source, {sourcemaps: true, since: gulp.lastRun(buildJavaScript)})
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
+  return gulp.src(project.transpiler.source, {
+      sourcemaps: true,
+      since: gulp.lastRun(buildJavaScript)
+    })
+    .pipe(plumber({
+      errorHandler: notify.onError('Error: <%= error.message %>')
+    }))
     .pipe(transpile)
     .pipe(build.bundle());
 }
@@ -49,13 +61,21 @@ export function buildPluginJavaScript(dest, format) {
     if (format === 'commonjs') {
       opts = {
         plugins: [
-          ['@babel/plugin-transform-modules-commonjs', {loose: true}]
+          ['@babel/plugin-transform-modules-commonjs', {
+            loose: true
+          }]
         ]
       };
     }
     const transpile = babel(opts);
+
     return gulp.src(project.plugin.source.js)
+      .pipe(gulpSourcemaps.init())
       .pipe(transpile)
+      .pipe(gulpSourcemaps.write('.', {
+        includeContent: false,
+        sourceRoot: '../../src/'
+      }))
       .pipe(gulp.dest(dest));
   };
 }

skeleton/cli-bundler/aurelia_project/tasks__if_typescript/transpile.ts

@@ -6,12 +6,13 @@ import * as ts from 'gulp-typescript';
 import * as project from '../aurelia.json';
 import * as fs from 'fs';
 import * as through from 'through2';
-import {CLIOptions, build} from 'aurelia-cli';
+import { CLIOptions, build, Configuration } from 'aurelia-cli';
+import * as gulpSourcemaps from 'gulp-sourcemaps';
 
 function configureEnvironment() {
   let env = CLIOptions.getEnvironment();
 
-  return gulp.src(`aurelia_project/environments/${env}.ts`, {since: gulp.lastRun(configureEnvironment)})
+  return gulp.src(`aurelia_project/environments/${env}.ts`, { since: gulp.lastRun(configureEnvironment) })
     .pipe(rename('environment.ts'))
     .pipe(through.obj(function (file, _, cb) {
       // https://github.com/aurelia/cli/issues/1031
@@ -50,9 +51,12 @@ export function buildPluginJavaScript(dest, format) {
       typescript: require('typescript'),
       module: format
     });
+
     return gulp.src(project.transpiler.dtsSource)
       .pipe(gulp.src(project.plugin.source.js))
+      .pipe(gulpSourcemaps.init())
       .pipe(typescriptCompiler())
+      .pipe(gulpSourcemaps.write('.', { includeContent: false, sourceRoot: '../../src/' }))
       .pipe(gulp.dest(dest));
   };
 }

skeleton/plugin/aurelia_project/tasks/build-plugin.ext

@@ -6,17 +6,17 @@ import del from 'del';
 import * as gulp from 'gulp';
 import * as del from 'del';
 // @endif
-import {pluginMarkup} from './process-markup';
-import {pluginCSS} from './process-css';
-import {pluginJson} from './process-json';
-import {buildPluginJavaScript} from './transpile';
+import { pluginMarkup } from './process-markup';
+import { pluginCSS } from './process-css';
+import { pluginJson } from './process-json';
+import { buildPluginJavaScript } from './transpile';
+import { CLIOptions } from 'aurelia-cli';
 
 function clean() {
   return del('dist');
 }
 
-export default gulp.series(
-  clean,
+let build = gulp.series(
   gulp.parallel(
     // package.json "module" field pointing to dist/native-modules/index.js
     pluginMarkup('dist/native-modules'),
@@ -29,6 +29,26 @@ export default gulp.series(
     pluginCSS('dist/commonjs'),
     pluginJson('dist/commonjs'),
     buildPluginJavaScript('dist/commonjs', 'commonjs'),
-  ),
-  () => console.log('Finish building Aurelia plugin to dist/commonjs and dist/native-modules')
+  ), (done) => {
+    console.log('Finish building Aurelia plugin to dist/commonjs and dist/native-modules.');
+    done();
+  }
 );
+
+let main;
+if (CLIOptions.hasFlag('watch')) {
+  main = gulp.series(
+    clean,
+    () => {
+      console.log('Watching plugin sources for changes ...');
+      return gulp.watch('src/**/*', { ignoreInitial: false }, build);
+    }
+  );
+} else {
+  main = gulp.series(
+    clean,
+    build
+  );
+}
+
+export { main as default };

skeleton/plugin/package.json

@@ -6,6 +6,7 @@
   "license": "UNLICENSED",
   "scripts": {
     "build": "au build-plugin",
+    "watch": "au build-plugin --watch",
     "prepare": "npm run build",
     // @if feat.karma || feat.jest
     "pretest": "au lint",
@@ -14,9 +15,11 @@
 
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "devDependencies": {
-    "del": ""
+    "del": "",
+    "gulp-sourcemaps": ""
   }
-}
+}