feat(bundler): bundle json files by default for app skeletons of cli bundler

3cp · 3cp · commit 6b3c53eb76da · 2018-11-15T08:09:07.000+11:00
json files are processed especially without using loader-plugin. It supports three module id forms: "a.json", "text!a.json" (or "a.json!text" for systemjs), "json!a.json" (or "a.json!json" for systemjs).
diff --git a/lib/build/bundle.js b/lib/build/bundle.js
@@ -119,6 +119,7 @@ exports.Bundle = class {
         // http://requirejs.org/docs/api.html#config-bundles
         allIds.push(matchingPlugin.createModuleId(id));
       } else if (id.endsWith('.json')) {
+        allIds.push(Utils.moduleIdWithPlugin(id, 'text', this.bundler.loaderOptions.type));
         allIds.push(id);
         // be nice to requirejs json plugin users, add json! prefix
         allIds.push(Utils.moduleIdWithPlugin(id, 'json', this.bundler.loaderOptions.type));
diff --git a/lib/build/bundled-source.js b/lib/build/bundled-source.js
@@ -120,15 +120,17 @@ exports.BundledSource = class {
 
     let matchingPlugin = loaderPlugins.find(p => p.matches(modulePath));
 
-    if (matchingPlugin) {
-      deps = findDeps(modulePath, this.contents);
-      this.contents = matchingPlugin.transform(moduleId, modulePath, this.contents);
-    } else if (path.extname(modulePath).toLowerCase() === '.json') {
+    if (path.extname(modulePath).toLowerCase() === '.json') {
+      // support text! prefix
+      let contents = `define(\'${Utils.moduleIdWithPlugin(moduleId, 'text', loaderType)}\',[],function(){return ${JSON.stringify(this.contents)};});\n`;
       // support Node.js's json module
-      let contents = `define(\'${moduleId}\',[],function(){return JSON.parse(${JSON.stringify(this.contents)});});\n`;
+      contents += `define(\'${moduleId}\',[\'${Utils.moduleIdWithPlugin(moduleId, 'text', loaderType)}\'],function(m){return JSON.parse(m);});\n`;
       // be nice to requirejs json plugin users, add json! prefix
       contents += `define(\'${Utils.moduleIdWithPlugin(moduleId, 'json', loaderType)}\',[\'${moduleId}\'],function(m){return m;});\n`;
       this.contents = contents;
+    } else if (matchingPlugin) {
+      deps = findDeps(modulePath, this.contents);
+      this.contents = matchingPlugin.transform(moduleId, modulePath, this.contents);
     } else {
       deps = [];
 
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-esnext-aspnetcore.json b/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-esnext-aspnetcore.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-esnext.json b/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-esnext.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-typescript-aspnetcore.json b/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-typescript-aspnetcore.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-typescript.json b/lib/commands/generate-skeletons/project-definitions/skeleton-requirejs-typescript.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-esnext-aspnetcore.json b/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-esnext-aspnetcore.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-esnext.json b/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-esnext.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-typescript-aspnetcore.json b/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-typescript-aspnetcore.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-typescript.json b/lib/commands/generate-skeletons/project-definitions/skeleton-systemjs-typescript.json
@@ -28,6 +28,11 @@
     "displayName": "None",
     "fileExtension": ".css"
   },
+  "jsonProcessor": {
+    "id": "none",
+    "displayName": "None",
+    "fileExtension": ".json"
+  },
   "editor": {
     "id": "vscode",
     "displayName": "Visual Studio Code"
diff --git a/lib/commands/new/buildsystems/cli/index.js b/lib/commands/new/buildsystems/cli/index.js
@@ -18,6 +18,9 @@ module.exports = function(project, options) {
   let configureCSSProcessor = require(`./css-processors/${model.cssProcessor.id}`);
   configureCSSProcessor(project, options);
 
+  let configureJsonProcessor = require(`./json-processors/${model.jsonProcessor.id}`);
+  configureJsonProcessor(project, options);
+
   let unitTestRunners = project.model.unitTestRunners;
   if (unitTestRunners) {
     for (let i = 0; i < unitTestRunners.length; i++) {
@@ -48,7 +51,7 @@ module.exports = function(project, options) {
       {
         name: 'app-bundle.js',
         source: [
-          '**/*.{js,css,html}'
+          '**/*.{js,json,css,html}'
         ]
       },
       {
@@ -88,6 +91,7 @@ module.exports = function(project, options) {
   model.transpiler.source = path.posix.join(srcRoot, '**/*' + model.transpiler.fileExtension);
   model.markupProcessor.source = path.posix.join(srcRoot, '**/*' + model.markupProcessor.fileExtension);
   model.cssProcessor.source = path.posix.join(srcRoot, '**/*' + model.cssProcessor.fileExtension);
+  model.jsonProcessor.source = path.posix.join(srcRoot, '**/*' + model.jsonProcessor.fileExtension);
 
   if (model.platform.id === 'aspnetcore') {
     model.platform.baseUrl = project.dist.calculateRelativePath(project.projectOutput);
diff --git a/lib/commands/new/buildsystems/cli/json-processors/none.js b/lib/commands/new/buildsystems/cli/json-processors/none.js
@@ -0,0 +1,8 @@
+'use strict';
+const ProjectItem = require('../../../../../project-item').ProjectItem;
+
+module.exports = function(project) {
+  project.addToTasks(
+    ProjectItem.resource('process-json.ext', 'tasks/process-json.ext', project.model.transpiler)
+  );
+};
diff --git a/lib/commands/new/new-application.json b/lib/commands/new/new-application.json
@@ -22,6 +22,11 @@
           "displayName": "None",
           "fileExtension": ".css"
         },
+        "jsonProcessor": {
+          "id": "none",
+          "displayName": "None",
+          "fileExtension": ".json"
+        },
         "unitTestRunners": [{
           "id": "jest",
           "displayName": "Jest"
diff --git a/lib/resources/tasks/build.js b/lib/resources/tasks/build.js
@@ -2,6 +2,7 @@ import gulp from 'gulp';
 import {CLIOptions, build as buildCLI} from 'aurelia-cli';
 import transpile from './transpile';
 import processMarkup from './process-markup';
+import processJson from './process-json';
 import processCSS from './process-css';
 import copyFiles from './copy-files';
 import watch from './watch';
@@ -12,6 +13,7 @@ let build = gulp.series(
   gulp.parallel(
     transpile,
     processMarkup,
+    processJson,
     processCSS,
     copyFiles
   ),
diff --git a/lib/resources/tasks/build.ts b/lib/resources/tasks/build.ts
@@ -2,6 +2,7 @@ import * as gulp from 'gulp';
 import {CLIOptions, build as buildCLI} from 'aurelia-cli';
 import transpile from './transpile';
 import processMarkup from './process-markup';
+import processJson from './process-json';
 import processCSS from './process-css';
 import copyFiles from './copy-files';
 import watch from './watch';
@@ -12,6 +13,7 @@ let build = gulp.series(
   gulp.parallel(
     transpile,
     processMarkup,
+    processJson,
     processCSS,
     copyFiles
   ),
diff --git a/lib/resources/tasks/process-json.js b/lib/resources/tasks/process-json.js
@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import changedInPlace from 'gulp-changed-in-place';
+import project from '../aurelia.json';
+import {build} from 'aurelia-cli';
+
+export default function processJson() {
+  return gulp.src(project.jsonProcessor.source)
+    .pipe(changedInPlace({firstPass: true}))
+    .pipe(build.bundle());
+}
diff --git a/lib/resources/tasks/process-json.ts b/lib/resources/tasks/process-json.ts
@@ -0,0 +1,10 @@
+import * as gulp from 'gulp';
+import * as changedInPlace from 'gulp-changed-in-place';
+import * as project from '../aurelia.json';
+import {build} from 'aurelia-cli';
+
+export default function processJson() {
+  return gulp.src(project.jsonProcessor.source)
+    .pipe(changedInPlace({firstPass:true}))
+    .pipe(build.bundle());
+}
diff --git a/lib/workflow/activities/project-create.js b/lib/workflow/activities/project-create.js
@@ -26,6 +26,7 @@ module.exports = class {
       transpiler: context.state.transpiler,
       markupProcessor: context.state.markupProcessor,
       cssProcessor: context.state.cssProcessor,
+      jsonProcessor: context.state.jsonProcessor,
       editor: context.state.editor
     };
 
diff --git a/spec/lib/build/bundle.spec.js b/spec/lib/build/bundle.spec.js
@@ -206,11 +206,11 @@ describe('the Bundle module', () => {
     sut.includes = [{
       getAllModuleIds: () => ['a', 'b']
     }, {
-      getAllModuleIds: () => ['b', 'c.html']
+      getAllModuleIds: () => ['b', 'c.html', 'd.json']
     }];
 
-    expect(Array.from(sut.getRawBundledModuleIds()).sort()).toEqual(['a', 'b', 'c.html']);
-    expect(sut.getBundledModuleIds()).toEqual(['a', 'b', 'text!c.html']);
+    expect(Array.from(sut.getRawBundledModuleIds()).sort()).toEqual(['a', 'b', 'c.html', 'd.json']);
+    expect(sut.getBundledModuleIds()).toEqual(['a', 'b', 'text!c.html', 'text!d.json', 'd.json', 'json!d.json']);
   });
 
   it('getBundledModuleIds returns sorts module ids', () => {
diff --git a/spec/lib/build/bundled-source.spec.js b/spec/lib/build/bundled-source.spec.js
@@ -374,7 +374,7 @@ export {t};
     expect(deps).toBeUndefined();
     expect(bs.requiresTransform).toBe(false);
     expect(bs.contents)
-      .toBe('define(\'foo/bar/lo.json\',[],function(){return JSON.parse("{\\\"a\\\":1}");});\ndefine(\'json!foo/bar/lo.json\',[\'foo/bar/lo.json\'],function(m){return m;});\n');
+      .toBe('define(\'text!foo/bar/lo.json\',[],function(){return "{\\\"a\\\":1}";});\ndefine(\'foo/bar/lo.json\',[\'text!foo/bar/lo.json\'],function(m){return JSON.parse(m);});\ndefine(\'json!foo/bar/lo.json\',[\'foo/bar/lo.json\'],function(m){return m;});\n');
   });
 
   it('transforms npm package non-js file', () => {
