pyr0ball
7a704441a6
- web/: Vue 3 + Vite + UnoCSS + Pinia, dark tactical theme (amber/#0d1117) - AppNav, ListingCard, SearchView with filters/sort, composables (useSnipeMode, useKonamiCode, useMotion), Pinia search store - Steal shimmer, auction countdown, Snipe Mode easter egg all native in Vue - docker/web/: nginx + multi-stage Dockerfile (node build → nginx serve) - compose.yml: api (8510) + web (8509) services - Dockerfile CMD updated to uvicorn for upcoming FastAPI layer - Clean build: 0 TS errors, 380 modules
72 lines
1.8 KiB
Markdown
72 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;
|
|
```
|