Skip to content

Commit cc72325

Browse files
asvaeasvae
committed
Merge + tweak app config
2 parents 49554e3 + 75a01a3 commit cc72325

File tree

98 files changed

+5745
-4308
lines changed

Some content is hidden

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

98 files changed

+5745
-4308
lines changed

‎.babelrc

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.gitignore

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
/.idea/
21
/node_modules/
3-
/public/
42
/dist/
53
/coverage/
6-
/npm-debug.log
7-
/yarn-error.log
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
inspect-result.js
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
/.idea/
17+
/.vscode/

‎.postcssrc.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {},
4+
},
5+
}

‎README.md

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
[![Build status][circleci-badge]][circleci-url]
22

3-
# vue-component-tree
3+
# vue-book
44

5-
Tree view for your demo components. [Demo](http://vue-component-tree-demo.asva.by/#/Demo/ContactComponent.vue).
5+
Tree view for your demo components. [Demo](http://vue-book-demo.asva.by/#/Demo/ContactComponent.vue).
66

77
![Interface](docs/main.gif)
88

99
## Install
1010

11-
* **npm**: `npm install -D vue-component-tree`
12-
* **yarn**: `yarn add -D vue-component-tree`
11+
* **npm**: `npm install -D vue-book`
12+
* **yarn**: `yarn add -D vue-book`
1313

1414
## Features
1515
* Display your components as a tree or flat list.
1616
* Preview components on the page.
17-
* Text search (keybind: press Shift then Shift)
17+
* Text search.
1818
* Routing support.
19-
* Shows dependencies for you components.
2019
* Saves on page reload.
21-
* Colored statuses.
2220

2321
## The gist
2422

2523
I'll talk a bit about demo based workflow I employ in my projects.
2624

2725
Before doing any work on component I create a demo. Demo allows me to define an interface, like this:
2826
```html
29-
<vm-new-component v-model="dataItem" :some-prop="prop"/>
27+
<my-new-component v-model="dataItem" :some-prop="prop"/>
3028
```
3129
Only then I start to work on component.
3230

@@ -35,20 +33,23 @@ You can think of demo as of semi-manual unit tests. But why not use actual unit
3533
* Demos are visual. In many cases you can *see* if something goes wrong. But unit tests won't show any of your styling mistakes.
3634
* Demos are developer friendly. You can instantly find usage examples or just glance over existing components. Which is crucial for teamwork.
3735

38-
Of course, this doesn't mean you have to dump unit tests. Leave them for appropriate tasks. Like logic heavy classes.
36+
Of course, this doesn't mean that you have to dump unit tests. Just keep them for appropriate tasks. Like logic heavy classes.
3937

4038
So, back to the library. The main intent behind is simplifying demo workflow as much as possible. Just toss your demos into folder and enjoy tree generation.
4139

4240
## Config
4341

4442
Attach VueComponentTree to your router. And yes, [vue-router](https://github.com/vuejs/vue-router) is required.
45-
```
43+
```js
4644
import Router from 'vue-router'
47-
import VueComponentTree from 'vue-component-tree'
45+
import { createRoute } from 'vue-book'
4846

4947
const router = new Router({
5048
routes: [
51-
VueComponentTree(require.context('./../tree', true, /.vue$/), '/demo'),
49+
createRoute({
50+
requireContext: require.context('./..', true, /.demo.vue$/),
51+
path: '/demo'
52+
}),
5253
]
5354
})
5455
```
@@ -62,11 +63,29 @@ So, about arguments.
6263

6364
You don't have to keep demos in production. Use webpack [define-plugin](https://webpack.js.org/plugins/define-plugin/) and exclude them from bundle.
6465

66+
```javascript
67+
if (process.env.NODE_ENV !== 'production') {
68+
const createRoute = require('vue-book').createRoute
69+
70+
routes.push({
71+
path: '/demo',
72+
component: App,
73+
children: [
74+
createRoute({
75+
requireContext: require.context('./..', true, /.demo.vue$/),
76+
path: '/demo'
77+
}),
78+
],
79+
})
80+
}
81+
```
82+
6583
### Deploy
6684

67-
* `yarn demo` - compile assets
68-
* `yarn dist` - compile assets
69-
* `npm publish` - publish to npm
85+
* `yarn serve` - run dev server;
86+
* `yarn demo` - compile assets;
87+
* `yarn dist` - compile assets;
88+
* `npm publish` - publish to npm.
7089

7190
## Feedback | Support
7291
Leave an issue if something doesn't work for you.
@@ -76,5 +95,5 @@ Also remember: Stars fuel package development!
7695
## Licence
7796
MIT
7897

79-
[circleci-badge]: https://img.shields.io/circleci/project/github/asvae/vue-component-tree/master.svg?style=flat-square
80-
[circleci-url]: https://circleci.com/gh/asvae/vue-component-tree
98+
[circleci-badge]: https://img.shields.io/circleci/project/github/asvae/vue-book/master.svg?style=flat-square
99+
[circleci-url]: https://circleci.com/gh/asvae/vue-book

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app',
4+
],
5+
}

‎circle.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ machine:
44

55
dependencies:
66
override:
7-
- yarn
7+
- yarn

‎demo/App.vue

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
2-
<router-view></router-view>
2+
<router-view></router-view>
33
</template>
44

55
<script lang="ts">
6-
import router from './routes.js'
7-
import Vue, {ComponentOptions} from 'vue'
6+
import router from './routes.js'
87
9-
export default {
10-
data () {
11-
return {}
12-
},
13-
router,
14-
}
8+
export default {
9+
data () {
10+
return {}
11+
},
12+
router,
13+
}
1514
</script>

‎demo/app.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎demo/components/Child1.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div>
3-
I am {{$options.name}}
4-
</div>
2+
<div>
3+
I am {{$options.name}}
4+
</div>
55
</template>
66

77
<script>
8-
export default {
9-
name: 'VmChild1',
10-
}
8+
export default {
9+
name: 'VmChild1',
10+
}
1111
</script>

‎demo/components/Child2.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div>
3-
I am {{$options.name}}
4-
</div>
2+
<div>
3+
I am {{$options.name}}
4+
</div>
55
</template>
66

77
<script>
8-
export default {
9-
name: 'VmChild2',
10-
}
8+
export default {
9+
name: 'VmChild2',
10+
}
1111
</script>

‎demo/components/ChildWithoutDemo1.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div>
3-
I am {{$options.name}}
4-
</div>
2+
<div>
3+
I am {{$options.name}}
4+
</div>
55
</template>
66

77
<script>
8-
export default {
9-
name: 'VmChildWithoutDemo1',
10-
}
8+
export default {
9+
name: 'VmChildWithoutDemo1',
10+
}
1111
</script>
1212

‎demo/components/ChildWithoutDemo2.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div>
3-
I am {{$options.name}}
4-
</div>
2+
<div>
3+
I am {{$options.name}}
4+
</div>
55
</template>
66

77
<script>
8-
export default {
9-
name: 'VmChildWithoutDemo2',
10-
}
8+
export default {
9+
name: 'VmChildWithoutDemo2',
10+
}
1111
</script>
1212

‎demo/components/Grandparent.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<template>
2-
<div>
3-
<h2>I am grandparent</h2>
4-
<vm-parent/>
5-
<vm-parent-without-demo/>
6-
</div>
2+
<div>
3+
<h2>I am grandparent</h2>
4+
<vm-parent/>
5+
<vm-parent-without-demo/>
6+
</div>
77
</template>
88

99
<script>
10-
import VmParent from './Parent.vue'
11-
import VmParentWithoutDemo from './ParentWithoutDemo.vue'
10+
import VmParent from './Parent.vue'
11+
import VmParentWithoutDemo from './ParentWithoutDemo.vue'
1212
13-
export default {
14-
components: {
15-
VmParent,
16-
VmParentWithoutDemo,
17-
},
18-
name: 'VmGrandparent',
19-
}
13+
export default {
14+
components: {
15+
VmParent,
16+
VmParentWithoutDemo,
17+
},
18+
name: 'VmGrandparent',
19+
}
2020
</script>
2121

‎demo/components/Parent.vue

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<template>
2-
<div>
3-
<h3>I am {{$options.name}}</h3>
4-
<vm-child1/>
5-
<vm-child2/>
6-
<vm-child-without-demo1/>
7-
<vm-child-without-demo2/>
8-
</div>
2+
<div>
3+
<h3>I am {{$options.name}}</h3>
4+
<vm-child1/>
5+
<vm-child2/>
6+
<vm-child-without-demo1/>
7+
<vm-child-without-demo2/>
8+
</div>
99
</template>
1010

1111
<script>
12-
import VmChild1 from './Child1.vue'
13-
import VmChild2 from './Child2.vue'
14-
import VmChildWithoutDemo1 from './ChildWithoutDemo1.vue'
15-
import VmChildWithoutDemo2 from './ChildWithoutDemo2.vue'
12+
import VmChild1 from './Child1.vue'
13+
import VmChild2 from './Child2.vue'
14+
import VmChildWithoutDemo1 from './ChildWithoutDemo1.vue'
15+
import VmChildWithoutDemo2 from './ChildWithoutDemo2.vue'
1616
17-
export default {
18-
name: 'VmParent',
19-
components: {
20-
VmChildWithoutDemo2,
21-
VmChildWithoutDemo1,
22-
VmChild2,
23-
VmChild1
24-
},
25-
}
17+
export default {
18+
name: 'VmParent',
19+
components: {
20+
VmChildWithoutDemo2,
21+
VmChildWithoutDemo1,
22+
VmChild2,
23+
VmChild1
24+
},
25+
}
2626
</script>

‎demo/components/ParentWithoutDemo.vue

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
<template>
2-
<div>
3-
<h3>I am {{$options.name}}</h3>
4-
<vm-child1/>
5-
<vm-child2/>
6-
<vm-child-without-demo1/>
7-
<vm-child-without-demo2/>
8-
</div>
2+
<div>
3+
<h3>I am {{$options.name}}</h3>
4+
<vm-child1/>
5+
<vm-child2/>
6+
<vm-child-without-demo1/>
7+
<vm-child-without-demo2/>
8+
</div>
99
</template>
1010

1111
<script>
12-
import VmChild1 from './Child1.vue'
13-
import VmChild2 from './Child2.vue'
14-
import VmChildWithoutDemo1 from './ChildWithoutDemo1.vue'
15-
import VmChildWithoutDemo2 from './ChildWithoutDemo2.vue'
12+
import VmChild1 from './Child1.vue'
13+
import VmChild2 from './Child2.vue'
14+
import VmChildWithoutDemo1 from './ChildWithoutDemo1.vue'
15+
import VmChildWithoutDemo2 from './ChildWithoutDemo2.vue'
1616
17-
export default {
18-
name: 'VmParentWithoutDemo',
19-
components: {
20-
VmChildWithoutDemo2,
21-
VmChildWithoutDemo1,
22-
VmChild2,
23-
VmChild1
24-
},
25-
}
17+
export default {
18+
name: 'VmParentWithoutDemo',
19+
components: {
20+
VmChildWithoutDemo2,
21+
VmChildWithoutDemo1,
22+
VmChild2,
23+
VmChild1
24+
},
25+
}
2626
</script>
2727

0 commit comments

Comments
 (0)