Permalink
Browse files

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

  • Loading branch information...
jwx committed Jan 19, 2018
1 parent 076a59d commit b918ac3dde6f69d8f0ec10d0bbd281bde135600b
Showing with 1,632 additions and 24 deletions.
  1. +6 −1 lib/commands/new/buildsystems/cli/index.js
  2. +3 −4 lib/commands/new/buildsystems/cli/loaders/require.js
  3. +4 −1 lib/commands/new/buildsystems/cli/loaders/system.js
  4. +3 −1 lib/commands/new/buildsystems/cli/platforms/aspnetcore.js
  5. +6 −1 lib/commands/new/buildsystems/webpack/index.js
  6. +61 −11 lib/commands/new/new-application.json
  7. +31 −2 lib/commands/new/project-template.js
  8. +21 −0 lib/resources/content/index.template.html
  9. +6 −2 lib/resources/content/webpack.config.template.js
  10. +17 −0 lib/resources/features/aureliaFetchClient.js
  11. +26 −0 lib/resources/features/bootstrap.js
  12. +23 −0 lib/resources/features/fontAwesome.js
  13. +13 −0 lib/resources/features/jquery.js
  14. +34 −0 lib/resources/features/navigation.js
  15. +368 −0 lib/resources/features/navigation/blur-image.js
  16. +368 −0 lib/resources/features/navigation/blur-image.ts
  17. +17 −0 lib/resources/features/navigation/child-router.html
  18. +13 −0 lib/resources/features/navigation/child-router.js
  19. +16 −0 lib/resources/features/navigation/child-router.ts
  20. +30 −0 lib/resources/features/navigation/nav-bar.html
  21. +175 −0 lib/resources/features/navigation/styles.css
  22. +21 −0 lib/resources/features/navigation/users.html
  23. +25 −0 lib/resources/features/navigation/users.js
  24. +22 −0 lib/resources/features/navigation/users.ts
  25. +20 −0 lib/resources/features/navigation/welcome.html
  26. +34 −0 lib/resources/features/navigation/welcome.js
  27. +34 −0 lib/resources/features/navigation/welcome.ts
  28. +5 −0 lib/resources/features/none.js
  29. +22 −0 lib/resources/src/app.template.html
  30. +19 −0 lib/resources/src/app.template.js
  31. +27 −0 lib/resources/src/app.template.ts
  32. +29 −0 lib/resources/src/main-cli.template.js
  33. +29 −0 lib/resources/src/main-cli.template.ts
  34. +41 −0 lib/resources/src/main-webpack.template.js
  35. +42 −0 lib/resources/src/main-webpack.template.ts
  36. +21 −1 lib/workflow/activities/project-create.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'),
@@ -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'));
}
};
@@ -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 })
);
};
@@ -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();
};
@@ -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'),
@@ -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,
@@ -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) {
@@ -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>
@@ -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']
}),
@@ -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'
);
}
};
@@ -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'
]
}
);
}
};
@@ -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(
'font-awesome@4.6.3'
);
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'
}
);
}
};
@@ -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'
);
}
};
@@ -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'
);
}
};
Oops, something went wrong.

0 comments on commit b918ac3

Please sign in to comment.