tangweijie
5099f2e87e
- Vue 3 + TypeScript + Element Plus 前端界面 - Pinia 状态管理 - Vue Router 4 路由管理 - Axios HTTP 客户端 - MSW (Mock Service Worker) 开发环境模拟 - 账户管理界面 (列表、详情、三科目余额展示) - 交易管理界面 (列表、详情) - 对账管理界面 (三账校验) - 完善的 API 客户端封装 - Docker 容器化配置 - Nginx 配置用于生产环境
73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown
This library aims to provide codegen helpers and data structure for Vue language plugin API v1.x that does not depend on Volar runtime.
|
|
|
|
## Why "Muggle"?
|
|
|
|
A better situation is Volar can use magic-string on the Vue plugin API, but currently can't do this easily.
|
|
|
|
This solution is just for Vue language plugin API v1.x and planned to be deprecate in v2.
|
|
|
|
## Usage
|
|
|
|
The example is base-on [magic-string readme](https://github.com/rich-harris/magic-string#usage).
|
|
|
|
```html
|
|
<script>problems = 99</script>
|
|
|
|
<more-script lang="js">console.log( answer )</more-script>
|
|
```
|
|
|
|
```ts
|
|
import {
|
|
toString,
|
|
replace,
|
|
} from 'muggle-string';
|
|
|
|
/** @type {import('@volar/vue-language-core').VueLanguagePlugin} */
|
|
const plugin = () => {
|
|
return {
|
|
name: 'example-vue-language-plugin',
|
|
version: 1,
|
|
resolveEmbeddedFile(fileName, sfc, embeddedFile) {
|
|
if (embeddedFile.fileName.replace(fileName, '').match(/^\.(js|ts|jsx|tsx)$/)) {
|
|
|
|
const s = embeddedFile.content;
|
|
toString(s); // 'problems = 99'
|
|
|
|
replace(s, 'problems', 'answer');
|
|
toString(s); // 'answer = 99'
|
|
|
|
replace(s, '99', '42');
|
|
toString(s); // 'answer = 42'
|
|
|
|
// add string by Array method directly
|
|
s.unshift('var ');
|
|
s.push(';');
|
|
toString(s); // 'var answer = 42;'
|
|
|
|
for (const block of sfc.customBlocks) {
|
|
if (block.type === 'more-script') {
|
|
s.push([
|
|
block.content, // text to add
|
|
block.name, // source
|
|
0, // content offset in source
|
|
{
|
|
// language capabilities to enable in this segment
|
|
hover: true,
|
|
references: true,
|
|
definition: true,
|
|
diagnostic: true,
|
|
rename: true,
|
|
completion: true,
|
|
semanticTokens: true,
|
|
},
|
|
]);
|
|
toString(s); // 'var answer = 42;console.log( answer )'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
module.exports = plugin;
|
|
```
|