Skip to content

Commit 96fe7e6

Browse files
abichingerabichinger
committed
feat(core): upgrade to vue3
BREAKING CHANGE: no vue2 support
1 parent ff60680 commit 96fe7e6

File tree

8 files changed

+2226
-1353
lines changed

8 files changed

+2226
-1353
lines changed

‎core/build/rollup.config.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
22
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
3-
import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
43
export default {
54
input: 'src/index.js', // Path relative to package.json
65
output: {
@@ -13,11 +12,5 @@ export default {
1312
css: true, // Dynamically inject css as a <style> tag
1413
compileTemplate: true, // Explicitly convert template to render function
1514
}),
16-
// buble({
17-
// objectAssign: 'Object.assign',
18-
// transforms: {
19-
// forOf: false
20-
// }
21-
// }), // Transpile to ES5
2215
],
2316
};

‎core/dev/example-usage.vue

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
11
<template>
22
<div id="app">
33
Cron: <input :value="value" @change="value = $event.target.value" type="text" />
4-
<VueCronCore v-model="value">
5-
<template #default="{period, error, fields}">
6-
<div>
4+
<VueCronCore :value="value" @update:value="value = $event" v-slot="{period, error, fields}">
5+
<div>
6+
<span>
7+
{{period.prefix}}:
8+
<select @input="period.events.input(JSON.parse($event.target.value))">
9+
<option v-for="item in period.items" :key="item.text" :value="JSON.stringify(item)">{{item.text}}</option>
10+
</select>
11+
</span>
12+
13+
<template v-for="f in fields" :key="f.id">
714
<span>
8-
{{period.prefix}}:
9-
<select @input="period.events.input(JSON.parse($event.target.value))">
10-
<option v-for="item in period.items" :key="item.text" :value="JSON.stringify(item)">{{item.text}}</option>
15+
{{f.prefix}}
16+
<select @input="f.events.input(getSelected($event.target))" multiple>
17+
<option v-for="item in f.items" :key="item.value" :value="item.value">{{item.text}}</option>
1118
</select>
19+
{{f.suffix}}
1220
</span>
21+
</template>
1322

14-
15-
<template v-for="f in fields">
16-
<span :key="f.id">
17-
{{f.prefix}}
18-
<select @input="f.events.input(getSelected($event.target))" multiple>
19-
<option v-for="item in f.items" :key="item.value" :value="item.value">{{item.text}}</option>
20-
</select>
21-
{{f.suffix}}
22-
</span>
23-
</template>
24-
25-
<div>-</div>
26-
27-
<div>error:{{error}}</div>
28-
<div>period:{{period.attrs.value}}</div>
29-
<div v-for="f in fields" :key="'div'+f.id">{{f.id}}: {{f.attrs.value}}, {{f.cron}}, {{f.selectedStr}}</div>
30-
</div>
31-
</template>
23+
<div>-</div>
24+
25+
<div>error:{{error}}</div>
26+
<div>period:{{period.attrs.value}}</div>
27+
<div v-for="f in fields" :key="'div'+f.id">{{f.id}}: {{f.attrs.value}}, {{f.cron}}, {{f.selectedStr}}</div>
28+
</div>
3229
</VueCronCore>
3330
</div>
3431
</template>

‎core/dev/serve.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import Vue from 'vue'
2-
import example from './example-usage.vue'
1+
import { createApp } from 'vue';
2+
import example from './example-usage.vue';
33

4-
Vue.config.productionTip = false
5-
6-
new Vue({
7-
render: h => h(example),
8-
}).$mount('#app')
4+
const app = createApp(example)
5+
app.mount('#app');

‎core/package.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@
2323
"dependencies": {
2424
"mustache": "^4.2.0"
2525
},
26-
"devDependencies": {
27-
"@vue/cli-service": "^4.5.15"
28-
},
26+
"devDependencies": {},
2927
"files": [
3028
"package.json",
3129
"dist",

‎core/src/core.vue

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export default {
2020
},
2121
fields: {
2222
type: Array,
23-
default: function() {
23+
default: function(props) {
2424
25-
let items = defaultItems(this.locale)
25+
let items = defaultItems(props.locale)
2626
2727
return [
2828
{id: 'minute', items: items.minuteItems},
@@ -48,15 +48,16 @@ export default {
4848
},
4949
customLocale: {
5050
type: Object,
51-
default: function() {
52-
return getLocale(this.locale)
51+
default: function(props) {
52+
return getLocale(props.locale)
5353
}
5454
},
5555
mergeLocale: {
5656
type: Boolean,
5757
default: true
58-
}
58+
},
5959
},
60+
emits: ["update:value", "error"],
6061
data(){
6162
6263
let selected = {}
@@ -134,7 +135,7 @@ export default {
134135
135136
render(){
136137
137-
if(!this.$scopedSlots.default){
138+
if(!this.$slots || !this.$slots.default){
138139
return
139140
}
140141
@@ -163,7 +164,7 @@ export default {
163164
})
164165
}
165166
166-
return this.$scopedSlots.default({
167+
return this.$slots.default({
167168
error: this.error,
168169
fields: fieldProps,
169170
@@ -190,7 +191,7 @@ export default {
190191
},
191192
cronToSelected(value){
192193
if(!value){
193-
this.$emit('input', this.defaultValue())
194+
this.$emit('update:value', this.defaultValue())
194195
return
195196
}
196197
@@ -232,7 +233,7 @@ export default {
232233
strings.push(str.value)
233234
}
234235
this.error = ''
235-
this.$emit('input', strings.join(' '))
236+
this.$emit('update:value', strings.join(' '))
236237
},
237238
238239
sort(array){

‎core/test/core.test.js

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,37 @@
1-
import { shallowMount } from '@vue/test-utils'
2-
import VueCron from '../src/core.vue'
1+
import { config, mount } from '@vue/test-utils'
32
import 'regenerator-runtime/runtime'
3+
import VueCron from '../src/core.vue'
4+
5+
config.renderStubDefaultSlot = true
46

57
test('test VueCron', async () => {
68
// render the component
7-
let onInput = jest.fn()
8-
let props = null
9+
let onUpdateValue = jest.fn()
10+
let slotProps = null
911

10-
let wrapper = shallowMount(VueCron, {
11-
propsData: {
12+
let wrapper = mount(VueCron, {
13+
props: {
1214
value: '*/15 12 * * *'
1315
},
14-
scopedSlots: {
16+
slots: {
1517
default: function(p){
16-
props = p
17-
}
18-
},
19-
listeners:{
20-
input: function(value){
21-
onInput()
22-
expect(value).toEqual('1-5 12 * * *')
18+
slotProps = p
2319
}
2420
}
2521
})
2622

2723
await wrapper.vm.$nextTick()
2824

29-
expect(props.fields[4].attrs.value).toEqual([0,15,30,45])
30-
expect(props.fields[3].attrs.value).toEqual([12])
31-
expect(props.fields[2].attrs.value).toEqual([])
32-
expect(props.fields[1].attrs.value).toEqual([])
33-
expect(props.fields[0].attrs.value).toEqual([])
25+
expect(slotProps.fields[4].attrs.value).toEqual([0,15,30,45])
26+
expect(slotProps.fields[3].attrs.value).toEqual([12])
27+
expect(slotProps.fields[2].attrs.value).toEqual([])
28+
expect(slotProps.fields[1].attrs.value).toEqual([])
29+
expect(slotProps.fields[0].attrs.value).toEqual([])
3430

35-
props.fields[4].events.input([1,2,3,4,5])
31+
slotProps.fields[4].events.input([1,2,3,4,5])
3632

3733
await wrapper.vm.$nextTick()
3834

39-
expect(onInput).toHaveBeenCalled()
40-
35+
expect(wrapper.emitted()).toHaveProperty('update:value')
36+
expect(wrapper.emitted('update:value')[0]).toEqual(['1-5 12 * * *'])
4137
})

‎package.json

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,25 @@
2727
"devDependencies": {
2828
"@babel/core": "^7.12.13",
2929
"@babel/preset-env": "^7.12.13",
30-
"@rollup/plugin-buble": "^0.21.3",
3130
"@rollup/plugin-commonjs": "^17.1.0",
3231
"@semantic-release/commit-analyzer": "^9.0.2",
3332
"@semantic-release/git": "^10.0.1",
3433
"@semantic-release/github": "^8.0.2",
3534
"@semantic-release/npm": "^8.0.3",
3635
"@semantic-release/release-notes-generator": "^10.0.3",
37-
"@vue/compiler-sfc": "^3.0.5",
38-
"@vue/test-utils": "^1.1.3",
36+
"@vue/cli-service": "^5.0.8",
37+
"@vue/test-utils": "^2.0.2",
3938
"babel-core": "^7.0.0-bridge.0",
4039
"babel-jest": "^26.6.3",
4140
"jest": "^26.6.3",
4241
"multi-semantic-release": "^2.11.0",
4342
"rollup": "^2.38.5",
4443
"rollup-jest": "^1.1.1",
45-
"rollup-plugin-vue": "^5.1.9",
46-
"vue-jest": "^3.0.7",
47-
"vue-template-compiler": "^2.6.12"
44+
"rollup-plugin-css-only": "^3.1.0",
45+
"rollup-plugin-vue": "^6.0.0",
46+
"vue-jest": "^5.0.0-alpha.10"
4847
},
4948
"dependencies": {
50-
"vue": "^2.6.12"
49+
"vue": "^3.2.37"
5150
}
5251
}

0 commit comments

Comments
 (0)