This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new fe69570 use composition api for better type
fe69570 is described below
commit fe69570b5169aba841a58de187f2908645afdc86
Author: pissang <bm2736...@gmail.com>
AuthorDate: Wed Jun 2 21:46:31 2021 +0800
use composition api for better type
---
components/markdown/Example.vue | 15 ++++++---
components/markdown/Live.vue | 74 +++++++++++++++++++++++++----------------
components/markdown/global.ts | 4 +++
package-lock.json | 15 +++++++++
package.json | 1 +
5 files changed, 75 insertions(+), 34 deletions(-)
diff --git a/components/markdown/Example.vue b/components/markdown/Example.vue
index c512c39..c67fbd3 100644
--- a/components/markdown/Example.vue
+++ b/components/markdown/Example.vue
@@ -3,9 +3,10 @@
</template>
<script lang="ts">
-import Vue, { PropType } from 'vue'
+import { computed, defineComponent, ref } from '@vue/composition-api'
import config from '~/configs/config'
-export default Vue.extend({
+
+export default defineComponent({
props: {
width: {
type: String,
@@ -17,9 +18,13 @@ export default Vue.extend({
},
src: String
},
- computed: {
- fullSrc() {
- return config.exampleViewPath + this.src
+
+ setup(props) {
+ const fullSrc = computed(() => {
+ return config.exampleViewPath + props.src
+ })
+ return {
+ fullSrc
}
}
})
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 21b6832..c0ce290 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -5,12 +5,11 @@
</prism-editor>
<div class="md-live-tag">live</div>
</div>
- <div class="md-live-preview"></div>
+ <div ref="previewContainer" class="md-live-preview"></div>
</div>
</template>
<script lang="ts">
-import Vue, { PropType } from 'vue'
import { PrismEditor } from 'vue-prism-editor'
import 'vue-prism-editor/dist/prismeditor.min.css'
import { highlight, languages } from 'prismjs/components/prism-core'
@@ -18,6 +17,16 @@ import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prism-themes/themes/prism-material-oceanic.css'
import { loadScriptsAsync } from '../helper/loadScripts'
+import {
+ defineComponent,
+ watch,
+ ref,
+ unref,
+ onMounted,
+ getCurrentInstance
+} from '@vue/composition-api'
+
+declare const echarts: any
function ensureECharts() {
if (typeof echarts === 'undefined') {
@@ -28,7 +37,7 @@ function ensureECharts() {
return Promise.resolve()
}
-export default Vue.extend({
+export default defineComponent({
components: {
PrismEditor
},
@@ -38,39 +47,46 @@ export default Vue.extend({
default: 'js'
}
},
- data() {
- return {
- innerCode: ''
- }
- },
- computed: {},
- mounted() {
- this.innerCode = (
- (this.$slots.default && this.$slots.default[0].text) ||
- ''
- ).trim()
- },
- methods: {
- highlighter(code) {
- return highlight(code, languages[this.lang] || languages.js)
- }
- },
- watch: {
- innerCode() {
+
+ setup(props, context) {
+ const innerCode = ref('')
+ const previewContainer = ref(null)
+
+ let chartInstance
+
+ function update() {
ensureECharts().then(() => {
- // TODO type, resize, throttle
- if (!this._chartInstance) {
- this._chartInstance = echarts.init(
- this.$el.querySelector('.md-live-preview')
- )
+ if (!chartInstance) {
+ // TODO Better way to get ref?
+ chartInstance = echarts.init(unref(previewContainer))
}
- const func = new Function(this.innerCode + '\n return option;')
+ const func = new Function(unref(innerCode) + '\n return option;')
+ // TODO refresh, throttle.
try {
const option = func()
- this._chartInstance.setOption(option)
+ chartInstance.setOption(option, true)
} catch (e) {}
})
}
+
+ watch(innerCode, () => {
+ update()
+ })
+ // Update first time.
+ onMounted(() => {
+ const defaultSlot = context.slots.default && context.slots.default()
+ innerCode.value = ((defaultSlot && defaultSlot[0].text) || '').trim()
+ })
+
+ return {
+ innerCode,
+
+ previewContainer,
+
+ highlighter(code) {
+ return highlight(code, languages[props.lang] || languages.js)
+ }
+ }
}
})
</script>
diff --git a/components/markdown/global.ts b/components/markdown/global.ts
index ada0e5e..d36c62b 100644
--- a/components/markdown/global.ts
+++ b/components/markdown/global.ts
@@ -1,8 +1,12 @@
import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+
import Example from './Example.vue'
import Alert from './Alert.vue'
import Live from './Live.vue'
+// Use vue composition api in the components
+Vue.use(VueCompositionAPI)
Vue.component('md-example', Example)
Vue.component('md-alert', Alert)
Vue.component('md-live', Live)
diff --git a/package-lock.json b/package-lock.json
index 3336c4d..34b5975 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5045,6 +5045,21 @@
}
}
},
+ "@vue/composition-api": {
+ "version": "1.0.0-rc.10",
+ "resolved":
"https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.10.tgz";,
+ "integrity":
"sha512-ftm4OU8H1Ipw64gxIVqzlCW9lJrtr9iOJME0/KJ/fWmVGy55Qbd0uIgIttOkCdLL94A5cjTSbJFTQhu9jBDRXw==",
+ "requires": {
+ "tslib": "^2.2.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz";,
+ "integrity":
"sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+ }
+ }
+ },
"@webassemblyjs/ast": {
"version": "1.9.0",
"resolved":
"https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz";,
diff --git a/package.json b/package.json
index fec488d..04b5e5f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
},
"dependencies": {
"@nuxt/types": "^2.15.6",
+ "@vue/composition-api": "^1.0.0-rc.10",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0",
"markdown-it-anchor": "^6.0.0",
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
