Skip to content

Commit d587733

Browse files
chrisvfritzchrisvfritz
committed
refactor based on vue team feedback and add tests
1 parent 60214a7 commit d587733

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+13276
-1102
lines changed

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/dist/
2+
/public/browser/dist/
3+
/tests/unit/coverage/

‎.eslintrc.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
module.exports = {
2+
root: true,
3+
parserOptions: {
4+
sourceType: 'script'
5+
},
6+
extends: [
7+
// https://github.com/vuejs/eslint-plugin-vue#bulb-rules
8+
'plugin:vue/recommended',
9+
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
10+
'standard',
11+
// https://github.com/prettier/eslint-config-prettier
12+
'prettier',
13+
'prettier/standard'
14+
],
15+
rules: {
16+
// Only allow debugger in development
17+
'no-debugger': process.env.PRE_COMMIT ? 'error' : 'off',
18+
// Only allow `console.log` in development
19+
'no-console': process.env.PRE_COMMIT
20+
? ['error', { allow: ['warn', 'error'] }]
21+
: 'off',
22+
'vue/component-name-in-template-casing': [
23+
'error',
24+
'PascalCase',
25+
{
26+
ignores: [
27+
'component',
28+
'template',
29+
'transition',
30+
'transition-group',
31+
'keep-alive',
32+
'slot',
33+
'router-view',
34+
'router-link'
35+
]
36+
}
37+
],
38+
'vue/multiline-html-element-content-newline': 'error',
39+
'vue/singleline-html-element-content-newline': 'error',
40+
'vue/no-spaces-around-equal-signs-in-attribute': 'error',
41+
'vue/script-indent': ['error', 2, { baseIndent: 0 }]
42+
},
43+
overrides: [
44+
{
45+
files: ['src/**/*', 'demo/**/*', 'tests/unit/**/*'],
46+
parserOptions: {
47+
parser: 'babel-eslint',
48+
sourceType: 'module'
49+
},
50+
env: {
51+
browser: true
52+
}
53+
},
54+
{
55+
files: ['tests/e2e/**/*'],
56+
parserOptions: {
57+
parser: 'babel-eslint',
58+
sourceType: 'module'
59+
},
60+
plugins: ['cypress'],
61+
env: {
62+
'cypress/globals': true
63+
}
64+
},
65+
{
66+
files: ['**/*.unit.js'],
67+
parserOptions: {
68+
parser: 'babel-eslint',
69+
sourceType: 'module'
70+
},
71+
env: { jest: true },
72+
globals: {
73+
mount: false,
74+
shallowMount: false,
75+
createComponentMocks: false
76+
}
77+
}
78+
]
79+
}

‎.gitignore

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
1+
# OS Files
12
.DS_Store
2-
node_modules
3-
/dist
3+
Thumbs.db
44

5-
# local env files
5+
# Dependencies
6+
node_modules/
7+
8+
# Dev/Build Artifacts
9+
/dist/
10+
/tests/e2e/videos/
11+
/tests/e2e/screenshots/
12+
/tests/unit/coverage/
13+
jsconfig.json
14+
15+
# Local Env Files
616
.env.local
717
.env.*.local
818

9-
# Log files
19+
# Log Files
20+
*.log
1021
npm-debug.log*
1122
yarn-debug.log*
1223
yarn-error.log*
1324

14-
# Editor directories and files
25+
# Unconfigured Editors
1526
.idea
16-
.vscode
1727
*.suo
1828
*.ntvs*
1929
*.njsproj

‎.markdownlintrc

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"default": true,
3+
// Rule customizations for markdownlint go here
4+
// https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md
5+
6+
// Disable line length restrictions, because editor soft-wrapping is being
7+
// used instead.
8+
"line-length": false,
9+
// ===
10+
// Prettier overrides
11+
// ===
12+
"no-multiple-blanks": false,
13+
"list-marker-space": false
14+
}

‎.prettierignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/**
2+
/dist/**
3+
/public/browser/dist/**
4+
/tests/unit/coverage/**

‎.prettierrc.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
printWidth: 80,
3+
tabWidth: 2,
4+
useTabs: false,
5+
semi: false,
6+
singleQuote: true,
7+
trailingComma: 'none',
8+
bracketSpacing: true,
9+
jsxBracketSameLine: false,
10+
arrowParens: 'avoid',
11+
proseWrap: 'never'
12+
}

‎.vscode/settings.json

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
// ===
3+
// Spacing
4+
// ===
5+
6+
"editor.insertSpaces": true,
7+
"editor.tabSize": 2,
8+
"editor.trimAutoWhitespace": true,
9+
"files.trimTrailingWhitespace": true,
10+
"files.eol": "\n",
11+
"files.insertFinalNewline": true,
12+
"files.trimFinalNewlines": true,
13+
14+
// ===
15+
// Files
16+
// ===
17+
18+
"files.exclude": {
19+
"**/*.log": true,
20+
"**/*.log*": true,
21+
"**/dist": true,
22+
"**/coverage": true
23+
},
24+
"files.associations": {
25+
".markdownlintrc": "jsonc"
26+
},
27+
28+
// ===
29+
// Event Triggers
30+
// ===
31+
32+
"editor.formatOnSave": true,
33+
"eslint.autoFixOnSave": true,
34+
"eslint.run": "onSave",
35+
"eslint.validate": [
36+
{ "language": "javascript", "autoFix": true },
37+
{ "language": "javascriptreact", "autoFix": true },
38+
{ "language": "vue", "autoFix": true },
39+
{ "language": "vue-html", "autoFix": true },
40+
{ "language": "html", "autoFix": true }
41+
],
42+
"vetur.completion.useScaffoldSnippets": false,
43+
44+
// ===
45+
// HTML
46+
// ===
47+
48+
"html.format.enable": false,
49+
"html.suggest.angular1": false,
50+
"html.suggest.ionic": false,
51+
"vetur.validation.template": false,
52+
"emmet.triggerExpansionOnTab": true,
53+
"emmet.includeLanguages": {
54+
"vue-html": "html"
55+
},
56+
57+
// ===
58+
// JS(ON)
59+
// ===
60+
61+
"jest.autoEnable": false,
62+
"jest.enableCodeLens": false,
63+
"javascript.format.enable": false,
64+
"json.format.enable": false,
65+
"vetur.validation.script": false,
66+
67+
// ===
68+
// CSS
69+
// ===
70+
71+
"stylelint.enable": true,
72+
"css.validate": false,
73+
"scss.validate": false,
74+
"vetur.validation.style": false,
75+
76+
// ===
77+
// MARKDOWN
78+
// ===
79+
80+
"[markdown]": {
81+
"editor.wordWrap": "wordWrapColumn",
82+
"editor.wordWrapColumn": 80
83+
}
84+
}

‎README.md

+56-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
55
## Usage
66

7+
### Directly in the browser
8+
79
Drop the library in with a `<script>` tag alongside Vue to globally install all components:
810

911
```html
@@ -19,7 +21,25 @@ Drop the library in with a `<script>` tag alongside Vue to globally install all
1921
</script>
2022
```
2123

22-
Or, if you are using this library in a module system, install it with NPM:
24+
Or, if you only want to use a small subset of components, drop them in individually:
25+
26+
```html
27+
<div id="app">
28+
<hello-a></hello-a>
29+
<hello-b></hello-b>
30+
</div>
31+
32+
<script src="https://unpkg.com/vue"></script>
33+
<script src="https://unpkg.com/hello-vue-components/dist/HelloA/index.umd.min.js"></script>
34+
<script src="https://unpkg.com/hello-vue-components/dist/HelloB/index.umd.min.js"></script>
35+
<script>
36+
new Vue({ el: '#app' })
37+
</script>
38+
```
39+
40+
### In a module system (without Vue CLI)
41+
42+
Install the library with NPM:
2343

2444
```bash
2545
npm install hello-vue-components
@@ -49,3 +69,38 @@ Or, if you only want to use a small subset of components, import individually bu
4969
import HelloA from 'hello-vue-components/dist/HelloA'
5070
import HelloB from 'hello-vue-components/dist/HelloB'
5171
```
72+
73+
### In a module system (with Vue CLI)
74+
75+
> If using Vue CLI 3 with Babel or TypeScript, it's recommended that you import the library from its `src` directory. This will minimize the size of your application by preventing duplicate or unnecessary polyfills.
76+
77+
Install the library with NPM:
78+
79+
```bash
80+
npm install hello-vue-components
81+
```
82+
83+
Then register the library as a plugin to globally install all components:
84+
85+
```js
86+
import HelloVueComponents from 'hello-vue-components/src'
87+
88+
Vue.use(HelloVueComponents)
89+
```
90+
91+
Or, import components individually for local registration:
92+
93+
```js
94+
import { HelloA, HelloB } from 'hello-vue-components/src'
95+
96+
export default {
97+
components: { HelloA, HelloB }
98+
}
99+
```
100+
101+
Or, if you only want to use a small subset of components, import individually bundled components from the `dist` directory to reduce the size of your application:
102+
103+
```js
104+
import HelloA from 'hello-vue-components/src/HelloA'
105+
import HelloB from 'hello-vue-components/src/HelloB'
106+
```

‎babel.config.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
module.exports = {
2-
presets: ['@vue/app'],
2+
presets: [
3+
[
4+
'@babel/env',
5+
{
6+
useBuiltIns: 'usage',
7+
loose: process.env.NODE_ENV === 'production'
8+
}
9+
]
10+
],
11+
plugins: ['transform-vue-jsx']
312
}

‎bin/build-lib.js

-26
This file was deleted.

‎cypress.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"pluginsFile": "tests/e2e/plugins/index.js"
3+
}

‎src/App.vue ‎demo/App.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<HelloA/>
4-
<HelloB/>
3+
<HelloA />
4+
<HelloB />
55
</div>
66
</template>

‎demo/main.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Vue from 'vue'
2+
import App from './App'
3+
4+
if (window.__e2e_lib) {
5+
Vue.use(require('hello-vue-components').default)
6+
} else if (window.__e2e_components) {
7+
Vue.component('HelloA', require('hello-vue-components/dist/HelloA'))
8+
Vue.component('HelloB', require('hello-vue-components/dist/HelloB'))
9+
} else if (window.__e2e_src_lib) {
10+
Vue.use(require('hello-vue-components/src').default)
11+
} else if (window.__e2e_src_components) {
12+
Vue.component('HelloA', require('hello-vue-components/src/HelloA').default)
13+
Vue.component('HelloB', require('hello-vue-components/src/HelloB').default)
14+
} else {
15+
Vue.use(require('../src').default)
16+
}
17+
18+
Vue.config.productionTip = false
19+
20+
new Vue({
21+
render: h => h(App)
22+
}).$mount('#app')

0 commit comments

Comments
 (0)