reactive-meta-gen
v0.3.2
Published
Generate TypeScript meta with `reactive-vscode` info for VS Code extension from package.json
Downloads
636
Readme
reactive-meta-gen
Generate TypeScript
meta info with 'reactive-vscode' and Markdown tables for VS Code extension from package.json
This was inspired by vscode-ext-gen. I planed to submit a PR for this change, but after thought carefull, duo to the huge changes, I created a new cli tool for these features. Any way this idea is base on
antfu/vscoe-ext-gen
.
Usage
Under the VS Code extension project root
pnpx reactive-meta-gen
npx reactive-meta-gen
Continuous Update
- Add following to
package.json
{
"scripts": {
"prepare": "pnpm run update",
"update": "pnpx vscode-ext-gen ./package.json --readme ./README.md --output ./src/generated-meta.ts"
}
}
- We recommend using the Run on Save extension with the following config in your
.vscode/settings.json
or.code-workspace
to always generate the meta file on save:
{
"emeraldwalk.runonsave": {
"commands": [
{
"match": "package.json",
"isAsync": true,
"cmd": "npm run update"
}
]
}
}
Examples
Generates src/generated-meta.ts
file with the following content which syncs with your package.json
:
export type CommandKey = 'sample.toggle-annotations' | 'sample.toggle-inplace' | 'sample.clear-cache' | 'sample.update-date'
export const useCommand = (commandFullKey: CommandKey, callback: (...args: any[]) => any): void => useReactiveCommand(commandFullKey, callback)
export const useCommands = (commands: Partial<Record<CommandKey, (...args: any[]) => any>>): void => useReactiveCommands(commands)
export type LoggerNameType = typeof name | typeof displayName | typeof extensionId
export const useLogger = (loggerName: LoggerNameType = displayName ?? name ?? extensionId, getPrefix?: ((type: string) => string) | null) => useReactiveLogger(loggerName, { getPrefix })
export const useCommandToggleAnnotations = (callback: (...args: any[]) => any) => useCommand(commands.toggleAnnotations, callback)
export const useConfig = <K extends ConfigSecionKey>(section: K) => defineConfigs<typeof sampleDefaults[K]>(section, sampleDefaults[section])
export const useConfigObject = <K extends ConfigSecionKey>(section: K) => defineConfigObject<typeof sampleDefaults[K]>(section, sampleDefaults[section])
export const useConfigObjectSample = () => useConfigObject(configs.sample)
export const useConfigSample = () => useConfig(configs.sample)
On usage:
import { defineExtension, watchEffect } from 'reactive-vscode'
import { window } from 'vscode'
import { useCommandUpdateDate, useConfigObjectSample } from './generated-meta'
const { activate, deactivate } = defineExtension(() => {
const sample = useConfigObjectSample()
// another way to get the config value
const _configValue = sample.date // get value
watchEffect(() => {
// watch value change
window.showInformationMessage(`sampleConfigs.annotations.value:${sample.date}`)
})
useCommandUpdateDate(async () => {
// update value to ConfigurationTarget.Workspace/ConfigurationTarget.Global/ConfigurationTarget.WorkspaceFolder
sample.$update('date', Date.now().toLocaleString())
})
},
)
export { activate, deactivate }
For a full example, check this file
Generate Docs
Add comments <!-- commands -->
and <!-- configs -->
and <!-- configsJson -->
as the slots in your README.md:
# Your Extension
## Commands
<!-- commands -->
<!-- commands -->
## Configurations
<!-- configs -->
<!-- configs -->
## Configurations Json
<!-- configsJson -->
<!-- configsJson -->
They will be replaced with the generated tables when you run npx reactive-meta-gen
.
Sponsors
Waiting for your support!
License
MIT License © 2023-PRESENT Calm Ripple