feat(new-application): add scaffolding feature for navigation skeleton

aurelia · Dec 3, 2018 · b918ac3 · b918ac3
1 parent 076a59d
commit b918ac3
Show file tree

Hide file tree

Showing 36 changed files with 1,632 additions and 24 deletions.
diff --git a/lib/commands/new/buildsystems/cli/index.js b/lib/commands/new/buildsystems/cli/index.js
@@ -108,8 +108,13 @@ module.exports = function(project, options) {
     }
   }
 
+  for (let featureName in model.features) {
+    project.addFeature(featureName, project, model, options);
+  }
+
   project.addToSource(
-    ProjectItem.resource('main.ext', 'src/main-cli.ext', model.transpiler)
+    ProjectItem.resource('main.ext', 'src/main-cli.template.ext', model.transpiler)
+    .asTemplate(model)
   ).addToTasks(
     ProjectItem.resource('build.ext', 'tasks/build.ext', model.transpiler),
     ProjectItem.resource('build.json', 'tasks/build.json'),

diff --git a/lib/commands/new/buildsystems/cli/loaders/require.js b/lib/commands/new/buildsystems/cli/loaders/require.js
@@ -24,9 +24,8 @@ module.exports = function(project, options) {
   project.addToClientDependencies(
     'requirejs',
     'text'
+  )
+  .addToContent(ProjectItem.resource('index.html', 'content/index.template.html')
+      .asTemplate(model, { type: model.markupProcessor })
   );
-
-  if (model.platform.id === 'web') {
-    project.addToContent(ProjectItem.resource('index.html', 'content/require.index.html'));
-  }
 };
diff --git a/lib/commands/new/buildsystems/cli/loaders/system.js b/lib/commands/new/buildsystems/cli/loaders/system.js
@@ -28,5 +28,8 @@ module.exports = function(project, options) {
   project.addToClientDependencies(
     'systemjs',
     'systemjs-plugin-text'
-  ).addToContent(ProjectItem.resource('index.html', 'content/system.index.html'));
+  )
+  .addToContent(ProjectItem.resource('index.html', 'content/index.template.html')
+    .asTemplate(model, { type: model.markupProcessor })
+  );
 };
diff --git a/lib/commands/new/buildsystems/cli/platforms/aspnetcore.js b/lib/commands/new/buildsystems/cli/platforms/aspnetcore.js
@@ -7,7 +7,9 @@ module.exports = function(project) {
   project.configureDist(ProjectItem.directory('scripts'));
   project.configurePort(5000);
   project.projectOutput.add(
-    ProjectItem.resource('index.html', `content/${project.model.loader.id}.index.html`).askUserIfExists()
+    ProjectItem.resource('index.html', `content/index.template.html`)
+    .asTemplate(project.model, { type: project.model.markupProcessor })
+    .askUserIfExists()
   );
   project.configureDefaultSetup();
 };
diff --git a/lib/commands/new/buildsystems/webpack/index.js b/lib/commands/new/buildsystems/webpack/index.js
@@ -30,8 +30,13 @@ module.exports = function(project, options) {
   let configureEditor = require(`./editors/${model.editor.id}`);
   configureEditor(project);
 
+  for (let featureName in model.features) {
+    project.addFeature(featureName, project, model, options);
+  }
+
   project.addToSource(
-    ProjectItem.resource('main.ext', 'src/main-webpack.ext', model.transpiler)
+    ProjectItem.resource('main.ext', 'src/main-webpack.template.ext', model.transpiler)
+      .asTemplate(model)
   ).addToTasks(
     ProjectItem.resource('build.ext', 'tasks/build-webpack.ext', project.model.transpiler),
     ProjectItem.resource('build.json', 'tasks/build.json'),

diff --git a/lib/commands/new/new-application.json b/lib/commands/new/new-application.json
@@ -64,7 +64,13 @@
         "integrationTestRunner": {
           "id": "none",
           "displayName": "None"
-        }
+        },
+        "features": [
+          {
+            "id": "none",
+            "displayName": "None"
+          }
+        ]
       }
     },
     {
@@ -106,7 +112,7 @@
       "branches": [
         {
           "case": "default-esnext",
-          "nextActivity": 1000
+          "nextActivity": 950
         },
         {
           "case": "default-typescript",
@@ -121,7 +127,7 @@
     {
       "type": "state-assign",
       "id": 500,
-      "nextActivity": 1000,
+      "nextActivity": 950,
       "state": {
         "transpiler": {
           "id": "typescript",
@@ -223,13 +229,16 @@
             "coverage": false
           }
         },
-        "unitTestRunners": [{
-          "id": "jest",
-          "displayName": "Jest"
-        }, {
-          "id": "karma",
-          "displayName": "Karma"
-        }],
+        "unitTestRunners": [
+          {
+            "id": "jest",
+            "displayName": "Jest"
+          },
+          {
+            "id": "karma",
+            "displayName": "Karma"
+          }
+        ],
         "testFramework": {
           "id": "jasmine",
           "displayName": "Jasmine"
@@ -495,7 +504,7 @@
     {
       "id": 900,
       "type": "input-select",
-      "nextActivity": 1000,
+      "nextActivity": 950,
       "question": "What is your default code editor?",
       "stateProperty": "editor",
       "options": [
@@ -541,6 +550,47 @@
         }
       ]
     },
+    {
+      "id": 950,
+      "type": "input-multiselect",
+      "nextActivity": 1000,
+      "question": "Which features do you want scaffolded into your project?",
+      "stateProperty": "features",
+      "options": [
+        {
+          "displayName": "None",
+          "description": "Just give me an empty project.",
+          "value": {
+            "id": "none",
+            "displayName": "None"
+          }
+        },
+        {
+          "displayName": "Navigation",
+          "description": "Add a router and some sample routes. (Also adds Bootstrap and Font Awesome.)",
+          "value": {
+            "id": "navigation",
+            "displayName": "Navigation"
+          }
+        },
+        {
+          "displayName": "Bootstrap",
+          "description": "Install and setup Bootstrap styles and features.",
+          "value": {
+            "id": "bootstrap",
+            "displayName": "Bootstrap"
+          }
+        },
+        {
+          "displayName": "Font Awesome",
+          "description": "Install and setup Font Awesome icons and styles.",
+          "value": {
+            "id": "fontAwesome",
+            "displayName": "Font Awesome"
+          }
+        }
+      ]
+    },
     {
       "type": "project-create",
       "id": 1000,

diff --git a/lib/commands/new/project-template.js b/lib/commands/new/project-template.js
@@ -73,6 +73,8 @@ exports.ProjectTemplate = class {
       this.environments,
       this.aureliaJSON
     );
+
+    this.addedFeatures = {};
   }
 
   get name() {
@@ -183,8 +185,10 @@ exports.ProjectTemplate = class {
 
   configureDefaultSetup() {
     this.addToSource(
-      ProjectItem.resource('app.ext', 'src/app.ext', this.model.transpiler),
-      ProjectItem.resource('app.ext', 'src/app.ext', this.model.markupProcessor),
+      ProjectItem.resource('app.ext', 'src/app.template.ext', this.model.transpiler)
+      .asTemplate(this.model),
+      ProjectItem.resource('app.ext', 'src/app.template.ext', this.model.markupProcessor)
+        .asTemplate(this.model, { type: this.model.markupProcessor }),
       ProjectItem.resource('environment.ext', 'environments/dev.js', this.model.transpiler)
     ).addToResources(
       ProjectItem.resource('index.ext', 'src/resources/index.ext', this.model.transpiler)
@@ -309,6 +313,31 @@ exports.ProjectTemplate = class {
     return this;
   }
 
+  addToAureliaDependencies() {
+    this.model.build.bundles[1].dependencies.push(...arguments);
+    return this;
+  }
+
+  addToAureliaPrepend() {
+    this.model.build.bundles[1].prepend.push(...arguments);
+    return this;
+  }
+
+  addToCopyFiles(files) {
+    this.model.build.copyFiles = Object.assign({}, this.model.copyFiles, files);
+    return this;
+  }
+
+  addFeature(featureName, project, model, options) {
+    if (this.addedFeatures[featureName]) {
+      return ;
+    }
+    this.addedFeatures[featureName] = true;
+    model.features[featureName] = featureName;
+    let feature = require(`../../resources/features/${featureName}`);
+    feature(project, model, options);
+  }
+
   renderManualInstructions() {
     let instructions = this.manualInstructions.getText();
     if (instructions) {

diff --git a/lib/resources/content/index.template.html b/lib/resources/content/index.template.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Aurelia</title>
+<!-- @if features.navigation='navigation' -->
+    <link rel="stylesheet" href="styles/styles.css">
+<!-- @endif -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+
+  <body aurelia-app="main">
+<!-- @if build.loader.type='require' -->
+    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
+<!-- @endif -->
+<!-- @if build.loader.type='system' -->
+    <script src="scripts/vendor-bundle.js"></script>
+    <script>SystemJS.import("aurelia-bootstrapper").catch(function(err) { console.log(err); })</script>
+<!-- @endif -->
+  </body>
+</html>
diff --git a/lib/resources/content/webpack.config.template.js b/lib/resources/content/webpack.config.template.js
@@ -200,8 +200,12 @@ module.exports = ({ production, server, extractCss, coverage, analyze, karma } =
     ...when(!karma, new DuplicatePackageCheckerPlugin()),
     new AureliaPlugin(),
     new ProvidePlugin({
-      'Promise': 'bluebird'
-    }),
+      'Promise': 'bluebird',
+    // @if features.jquery='jquery'
+      $: 'jquery',
+      jQuery: 'jquery',
+  // @endif
+  }),
     new ModuleDependenciesPlugin({
       'aurelia-testing': ['./compile-spy', './view-spy']
     }),

diff --git a/lib/resources/features/aureliaFetchClient.js b/lib/resources/features/aureliaFetchClient.js
@@ -0,0 +1,17 @@
+'use strict';
+const ProjectItem = require('../../project-item').ProjectItem;
+
+module.exports = function (project, model, options) {
+    project.addToDependencies(
+        'whatwg-fetch@^2.0.3',
+        'aurelia-fetch-client@^1.0.0'
+    );
+    if (model.bundler.id !== 'webpack') {
+        project.addToAureliaDependencies(
+            'aurelia-fetch-client',
+            // 'whatwg-fetch'
+        ).addToAureliaPrepend(
+            'node_modules/whatwg-fetch/fetch.js'
+        );
+    }
+};
diff --git a/lib/resources/features/bootstrap.js b/lib/resources/features/bootstrap.js
@@ -0,0 +1,26 @@
+'use strict';
+const ProjectItem = require('../../project-item').ProjectItem;
+
+module.exports = function (project, model, options) {
+  project.addFeature('jquery', project, model, options);
+
+  project.addToDependencies(
+    'bootstrap@^3.3.6'
+  );
+  if (model.bundler.id !== 'webpack') {
+    project.addToAureliaDependencies(
+      {
+        'name': 'bootstrap',
+        'path': '../node_modules/bootstrap/dist',
+        'main': 'js/bootstrap.min',
+        'deps': [
+          'jquery'
+        ],
+        'exports': '$',
+        'resources': [
+          'css/bootstrap.css'
+        ]
+      }
+    );
+  }
+};
diff --git a/lib/resources/features/fontAwesome.js b/lib/resources/features/fontAwesome.js
@@ -0,0 +1,23 @@
+'use strict';
+const ProjectItem = require('../../project-item').ProjectItem;
+
+module.exports = function (project, model, options) {
+  const baseDir = (model.bundler.id !== 'webpack' ? model.platform.baseDir : 'dist');
+
+  project.addToDependencies(
+    '[email protected]'
+  );
+  if (model.bundler.id !== 'webpack') {
+    project.addToCopyFiles(
+      {
+        './node_modules/font-awesome/fonts/**/*.*': baseDir + '/fonts'
+      }
+    ).addToAureliaDependencies(
+      {
+        'name': 'font-awesome',
+        'path': '../node_modules/font-awesome/css',
+        'main': 'font-awesome.css'
+      }
+    );
+  }
+};
diff --git a/lib/resources/features/jquery.js b/lib/resources/features/jquery.js
@@ -0,0 +1,13 @@
+'use strict';
+const ProjectItem = require('../../project-item').ProjectItem;
+
+module.exports = function (project, model, options) {
+  project.addToDependencies(
+    'jquery@^2.2.4',
+  );
+  if (model.bundler.id !== 'webpack') {
+    project.addToAureliaDependencies(
+      'jquery'
+    );
+  }
+};
diff --git a/lib/resources/features/navigation.js b/lib/resources/features/navigation.js
@@ -0,0 +1,34 @@
+'use strict';
+const ProjectItem = require('../../project-item').ProjectItem;
+
+module.exports = function (project, model, options) {
+    project.addFeature('aureliaFetchClient', project, model, options);
+    project.addFeature('bootstrap', project, model, options);
+    project.addFeature('fontAwesome', project, model, options);
+
+    let baseDir = (model.bundler.id !== 'webpack' ? model.platform.baseDir.substring(1) : '');
+    if (baseDir.length) {
+        baseDir += '/';
+    }
+    project.addToSource(
+        ProjectItem.resource('blur-image.ext', 'features/navigation/blur-image.ext', model.transpiler),
+        ProjectItem.resource('child-router.html', 'features/navigation/child-router.html', model.transpiler),
+        ProjectItem.resource('child-router.ext', 'features/navigation/child-router.ext', model.transpiler)
+            .asTemplate(model),
+        ProjectItem.resource('nav-bar.html', 'features/navigation/nav-bar.html', model.transpiler),
+        ProjectItem.resource('users.html', 'features/navigation/users.html', model.transpiler)
+            .asTemplate(model, { type: model.markupProcessor }),
+        ProjectItem.resource('users.ext', 'features/navigation/users.ext', model.transpiler),
+        ProjectItem.resource('welcome.html', 'features/navigation/welcome.html', model.transpiler),
+        ProjectItem.resource('welcome.ext', 'features/navigation/welcome.ext', model.transpiler),
+    ).addToContent(
+        ProjectItem.resource(baseDir + 'styles/styles.css', 'features/navigation/styles.css', model.transpiler),
+    ).addToDependencies(
+        'aurelia-animator-css@^1.0.0'
+    );
+    if (model.bundler.id !== 'webpack') {
+        project.addToAureliaDependencies(
+            'aurelia-animator-css'
+        );
+    }
+};