lepffm / issuance

Blogging with Github Issues.
https://github.com/lepffm/issuance/issues
MIT License
1 stars 0 forks source link

[VUE] parse with vue-template-compiler #83

Open lepffm opened 1 year ago

lepffm commented 1 year ago

for vue2

const compiler = require('vue-template-compiler');
const espree = require("espree");

const templateSrc = `<template>
<div>
    <div class="greeting">hello</div>
    <ur-button>button</ur-button>
</div>
</template>`

const scriptSrc = `<script>
import _ from 'lodash';
export default {
    props: {
        name: {
            type: String,
            required: false,
        }
    },
    data () {
        return {
            greeting: 'hello'
        }
    },
}
</script>`

const styleSrc = `<style scoped>
.greeting {
    color: red;
}
</style>
`;
const src = `${templateSrc}
${scriptSrc}
${styleSrc}`;

const parsed = compiler.parseComponent(src);
// console.log(result.template.content); //SFCBlock 

// template
const templateResult = compiler.compile(parsed.template.content)
console.log(templateResult.ast.children[2].children[0].text); // button text

// script 
console.log(parsed.script.content)
const ast = espree.parse(parsed.script.content, {ecmaVersion: 2015, sourceType: 'module'});
console.log(ast);

//style
console.log(parsed.styles);

ref: https://github.com/vuejs/vue/blob/dev/test/unit/modules/compiler/codegen.spec.js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import https://github.com/vuejs/vue-loader#readme https://www.npmjs.com/package/espree