Skip to content
This repository was archived by the owner on Sep 24, 2020. It is now read-only.

Commit c872165

Browse files
LinusBorgducksoupdev
LinusBorg
authored and
ducksoupdev
committed
Initial commit.
0 parents  commit c872165

34 files changed

+888
-0
lines changed

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
end_of_line = lf
6+
charset = utf-8
7+
indent_size = 2
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎README.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# webpack-typescript
2+
3+
> A Vue 2.0 Webpack and Typescript setup with hot reload, unit testing, code coverage, sass and bundling/minification.
4+
5+
> This template is for Vue 2.0
6+
7+
### Usage
8+
9+
This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
10+
11+
``` bash
12+
$ npm install -g vue-cli
13+
$ vue init ducksoupdev/vue-webpack-typescript my-project
14+
$ cd my-project
15+
$ npm install
16+
$ npm run dev
17+
```
18+
19+
### What's Included
20+
21+
- `npm run dev`: Webpack + Typescript with proper config for source maps & hot-reload.
22+
- `npm test`: Jasmine-based tests and Karma coverage reporter
23+
- `npm run build`: build with HTML/CSS/JS minification.

‎meta.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"prompts": {
3+
"name": {
4+
"type": "string",
5+
"required": true,
6+
"label": "Project name"
7+
},
8+
"description": {
9+
"type": "string",
10+
"required": true,
11+
"label": "Project description",
12+
"default": "A Vue.js project"
13+
},
14+
"author": {
15+
"type": "string",
16+
"label": "Author"
17+
}
18+
},
19+
"completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev"
20+
}

‎template/.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
end_of_line = lf
6+
charset = utf-8
7+
indent_size = 2
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎template/.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
coverage/
5+
src/css
6+
src/**/*.js
7+
src/**/*.map
8+
*.log

‎template/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# {{ name }}
2+
3+
> {{ description }}
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
npm install
10+
11+
# serve with hot reload at localhost:8080
12+
npm run dev
13+
14+
# run the tests
15+
npm test
16+
17+
# run the test suite and generate a coverage report
18+
npm run coverage
19+
20+
# build for production with minification
21+
npm run build
22+
23+
# clean the production build
24+
npm run clean
25+
```

‎template/karma.coverage.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var parseArgs = require('minimist');
2+
var webpackConfig = require('./webpack.config');
3+
4+
var args = parseArgs(process.argv.slice(2), {
5+
string: ['env'],
6+
default: {
7+
'env': 'mocha'
8+
}
9+
});
10+
11+
webpackConfig.module.postLoaders = [
12+
{
13+
test: /\.ts$/,
14+
loader: 'istanbul-instrumenter-loader',
15+
exclude: [
16+
'node_modules',
17+
/\.spec\.ts$/
18+
]
19+
}
20+
];
21+
22+
var reporters = ['mocha', 'coverage'];
23+
var browsers = ['PhantomJS'];
24+
25+
if (args.env === 'tc') {
26+
reporters = ['teamcity', 'coverage'];
27+
}
28+
29+
if (args.env === 'jk') {
30+
reporters = ['junit', 'coverage'];
31+
}
32+
33+
module.exports = function (config) {
34+
config.set({
35+
basePath: '',
36+
frameworks: ['jasmine', 'source-map-support'],
37+
files: [
38+
'node_modules/es6-promise/dist/es6-promise.auto.js',
39+
'src/test.ts'
40+
],
41+
reporters: reporters,
42+
preprocessors: {
43+
'src/test.ts': ['webpack']
44+
},
45+
webpack: {
46+
devtool: 'inline-source-map',
47+
resolve: webpackConfig.resolve,
48+
module: webpackConfig.module,
49+
ts: {
50+
compilerOptions: {
51+
inlineSourceMap: true,
52+
sourceMap: false
53+
}
54+
}
55+
},
56+
webpackServer: {noInfo: true},
57+
junitReporter: {
58+
outputDir: 'reports/'
59+
},
60+
coverageReporter: {
61+
reporters: [{
62+
type: 'json',
63+
dir: 'coverage/json',
64+
subdir: '.'
65+
}]
66+
},
67+
port: 9876,
68+
colors: true,
69+
logLevel: config.LOG_INFO,
70+
autoWatch: false,
71+
browsers: browsers,
72+
singleRun: true
73+
});
74+
};

‎template/karma.unit.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var webpackConfig = require('./webpack.config');
2+
3+
module.exports = function(config) {
4+
config.set({
5+
basePath: '',
6+
frameworks: ['jasmine'],
7+
files: [
8+
'node_modules/es6-promise/dist/es6-promise.auto.js',
9+
'src/test.ts'
10+
],
11+
preprocessors: {
12+
'src/test.ts': ['webpack']
13+
},
14+
webpack: {
15+
resolve: webpackConfig.resolve,
16+
module: webpackConfig.module
17+
},
18+
webpackServer: { noInfo: true },
19+
reporters: ['mocha'],
20+
port: 9876,
21+
colors: true,
22+
logLevel: config.LOG_INFO,
23+
autoWatch: false,
24+
browsers: ['PhantomJS'],
25+
singleRun: true
26+
});
27+
};

‎template/package.json

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{
2+
"name": "{{ name }}",
3+
"description": "{{ description }}",
4+
"version": "1.0.0",
5+
"author": "{{ author }}",
6+
"private": true,
7+
"scripts": {
8+
"build": "cross-env NODE_ENV=production npm run clean && npm run test && npm run sass && npm run build-parts && npm run clean-css && npm run process-html",
9+
"build-parts": "npm run sass && npm run compile",
10+
"clean": "rimraf dist && rimraf coverage",
11+
"clean-css": "cleancss -o dist/css/main.min.css dist/css/main.css",
12+
"compile": "webpack",
13+
"coverage": "karma start karma.coverage.js && npm run ts-coverage-remap && npm run coverage-report-open",
14+
"coverage-report-open": "http-server coverage/html-ts/ -o -p 8888",
15+
"dev": "cross-env NODE_ENV=development npm run sass && concurrent --kill-others \"webpack --watch\" \"node-sass --watch --output ./src/css ./src/sass\" \"live-server --quiet --open=src/\"",
16+
"lint": "ts-node ./scripts/ts-lint.ts -f src/**/*.ts",
17+
"process-html": "htmlprocessor src/index.html -o dist/index.html",
18+
"sass": "node-sass --output ./src/css ./src/sass",
19+
"serve": "http-server dist/ -o",
20+
"test": "karma start karma.unit.js",
21+
"ts-coverage-remap": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html"
22+
},
23+
"dependencies": {
24+
"axios": "^0.15.3",
25+
"bootstrap": "^3.3.7",
26+
"vue": "^2.1.8",
27+
"vue-class-component": "^4.4.0",
28+
"vue-property-decorator": "^3.2.1",
29+
"vue-router": "^2.1.1"
30+
},
31+
"devDependencies": {
32+
"@types/axios": "^0.9.34",
33+
"@types/es6-promise": "0.0.32",
34+
"@types/jasmine": "^2.5.40",
35+
"@types/jquery": "^2.0.39",
36+
"@types/node": "^6.0.60",
37+
"compression-webpack-plugin": "^0.3.2",
38+
"concurrently": "^3.1.0",
39+
"copy-webpack-plugin": "^4.0.1",
40+
"cross-env": "^3.1.4",
41+
"es6-promise": "^4.0.5",
42+
"file-loader": "^0.9.0",
43+
"globby": "~6.1.0",
44+
"htmlprocessor": "~0.2.3",
45+
"http-server": "^0.9.0",
46+
"inject-loader": "^3.0.0-beta3",
47+
"istanbul-instrumenter-loader": "^1.2.0",
48+
"jasmine-core": "^2.5.2",
49+
"json-loader": "^0.5.4",
50+
"karma": "^1.4.0",
51+
"karma-coverage": "^1.1.1",
52+
"karma-jasmine": "^1.1.0",
53+
"karma-junit-reporter": "^1.2.0",
54+
"karma-mocha-reporter": "^2.2.1",
55+
"karma-phantomjs-launcher": "^1.0.2",
56+
"karma-source-map-support": "^1.2.0",
57+
"karma-teamcity-reporter": "^1.0.0",
58+
"karma-webpack": "^2.0.1",
59+
"live-server": "~1.0.0",
60+
"lodash.merge": "^4.6.0",
61+
"minimist": "^1.2.0",
62+
"node-sass": "^4.1.1",
63+
"phantomjs-prebuilt": "^2.1.14",
64+
"raw-loader": "^0.5.1",
65+
"remap-istanbul": "^0.8.4",
66+
"rimraf": "^2.5.4",
67+
"ts-loader": "^1.3.3",
68+
"tslint": "~4.0.2",
69+
"tslint-loader": "~3.3.0",
70+
"typescript": "^2.1.4",
71+
"webpack": "^1.14.0",
72+
"webpack-dev-server": "^1.16.2"
73+
}
74+
}

‎template/src/assets/img/logo.png

6.69 KB
Loading

‎template/src/components/about/about.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="container">
2+
<div class="row">
3+
<div class="content col-md-4">
4+
<h1><strong>This is the about page</strong></h1>
5+
6+
<p>Make sure to follow the project on <a class="repo-link" v-bind:href="repo">GitHub</a> to stay up to date with the latest releases, or contribute to the broject by opening an issue or making a pull-request!</p>
7+
</div>
8+
</div>
9+
</div>

‎template/src/components/about/about.spec.ts

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as Vue from 'vue';
2+
import {ComponentTest} from '../../util/component-test';
3+
import {ILogger} from '../../util/log';
4+
5+
describe('About component', () => {
6+
// ensure component is loaded into webpack
7+
// modules loaded using es6 imports (as above) that are not used are removed through transpilation
8+
let aboutComponent = require('./about');
9+
10+
let directiveTest: ComponentTest;
11+
let aboutComponentInjector: any;
12+
let infoLoggerSpy = jasmine.createSpy('loggerInfo');
13+
14+
class MockLogger implements ILogger {
15+
info(msg: any) {
16+
infoLoggerSpy(msg);
17+
}
18+
19+
warn(msg: any) {
20+
infoLoggerSpy(msg);
21+
}
22+
23+
error(msg: any) {
24+
infoLoggerSpy(msg);
25+
}
26+
}
27+
28+
beforeEach(() => {
29+
aboutComponentInjector = require('inject-loader!./about'); // load the module from the webpack bundle
30+
31+
let mockAboutComponent = aboutComponentInjector({
32+
'../../util/log': { Logger: MockLogger }
33+
}).AboutComponent;
34+
35+
directiveTest = new ComponentTest('<div><about></about></div>', { 'about': mockAboutComponent });
36+
});
37+
38+
it('should render correct contents', (done) => {
39+
directiveTest.createComponent();
40+
directiveTest.execute((vm) => {
41+
expect(vm.$el.querySelector('.repo-link').getAttribute('href')).toBe('https://github.com/ducksoupdev/vue-typescript-seed');
42+
expect(infoLoggerSpy).toHaveBeenCalledWith('about is ready!');
43+
done();
44+
});
45+
});
46+
});

‎template/src/components/about/about.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as Vue from 'vue';
2+
import Component from 'vue-class-component';
3+
import {Logger} from '../../util/log';
4+
5+
@Component({
6+
template: require('./about.html')
7+
})
8+
export class AboutComponent extends Vue {
9+
10+
private logger: Logger;
11+
repo: string = 'https://github.com/ducksoupdev/vue-typescript-seed';
12+
13+
mounted() {
14+
if (!this.logger) this.logger = new Logger();
15+
this.$nextTick(() => this.logger.info('about is ready!'));
16+
}
17+
}

‎template/src/components/home/home.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="container">
2+
<div class="row">
3+
<div class="content col-md-4">
4+
<h1><strong>Thank you for using <span class="text-primary package">{{package}}</span></strong></h1>
5+
6+
<p>Make sure to follow the project on <a v-bind:href="repo">GitHub</a> to stay up to date with the latest releases, or contribute to the broject by opening an issue or making a pull-request!</p>
7+
</div>
8+
</div>
9+
</div>

‎template/src/components/home/home.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.content h1 {
2+
text-align: center;
3+
}

‎template/src/components/home/home.spec.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {HomeComponent} from './home';
2+
import {ComponentTest} from '../../util/component-test';
3+
4+
describe('Home component', () => {
5+
let directiveTest: ComponentTest;
6+
7+
beforeEach(() => {
8+
directiveTest = new ComponentTest('<div><home></home></div>', { 'home': HomeComponent });
9+
});
10+
11+
it('should render correct contents', () => {
12+
directiveTest.createComponent();
13+
expect(directiveTest.vm.$el.querySelector('.package').textContent).toBe('vue-typescript-seed');
14+
});
15+
});

0 commit comments

Comments
 (0)