Pre/Post-Vue/JS code formatter
enhancementjavascript
`playgroundCodePreFormatter` Would be a function that is handed an object like this:
```js
{
'v-model': {
type: 'directive',
value: 'yourDataValue'
},
mobileToggleIcon: {
type: 'static',
value: 'hamburger-open'
},
navData: {
type: 'dynamic',
value: `[
{
icon: 'IconRocket',
id: 'getting-started',
text: 'Getting Started',
to: {
name: 'gettingStarted'
}
}
]`
},
router: {
type: 'dynamic',
value: `{
resolve: o=>({path:o?.name||o}),
currentRoute: {
value: {
path: 'CurrentRoute'
}
}
}`
},
title: {
type: 'static',
value: 'ATC Alloy'
},
titleUrl: {
type: 'static',
value: '/'
},
'mobile-toggle': {
type: 'event',
value: 'yourMethodName'
},
'nav-link-clicked': {
type: 'event',
value: 'yourMethodName'
}
};
```
Then you can edit that object and return it.
All `value`s must be strings.
All `type`s must be `'directive' || 'dynamic' || 'static' || 'event'`.
Allowing you to do:
```js
const demo = {
component: MyComponent,
/**
* Pre-processing of values for the code example.
*
* @param {object} attributes Object with each code attribute
* @return {object} Mutated or new object
*/
playgroundCodePreFormatter: function (attributes) {
return {
...attributes,
router: {
type: 'dynamic',
value: '$router'
}
};
},
/**
* Mutates the string of code at the last moment before it is put on the page.
*
* @param {string} code The formatted string of code to be displayed
* @return {string} The modified string of code to be displayed
*/
playgroundVuePostFormatter: function (code) {
return '<!-- SomeStuff -->\n' + code.toUpperCase();
},
/**
* Mutates the string of code at the last moment before it is put on the page.
*
* @param {string} code The formatted string of code to be displayed
* @return {string} The modified string of code to be displayed
*/
playgroundJavaScriptPostFormatter: function (code) {
return '// Some stuff\n' + code.toUpperCase();
}
};
```
0 条评论