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

1pnpx reactive-meta-gen

1npx reactive-meta-gen

Continuous Update

1. Add following to package.json

1{
2  "scripts": {
3
4    "prepare": "pnpm run update",
5    "update": "pnpx vscode-ext-gen ./package.json --readme ./README.md --output ./src/generated-meta.ts"
6  }
7}

2. 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:

1{
2  "emeraldwalk.runonsave": {
3    "commands": [
4      {
5        "match": "package.json",
6        "isAsync": true,
7        "cmd": "npm run update"
8      }
9    ]
10  }
11}

Examples

Generates src/generated-meta.ts file with the following content which syncs with your package.json:

1export type CommandKey = 'sample.toggle-annotations' | 'sample.toggle-inplace' | 'sample.clear-cache' | 'sample.update-date'
2
3export const useCommand = (commandFullKey: CommandKey, callback: (...args: any[]) => any): void => useReactiveCommand(commandFullKey, callback)
4
5export const useCommands = (commands: Partial<Record<CommandKey, (...args: any[]) => any>>): void => useReactiveCommands(commands)
6
7export type LoggerNameType = typeof name | typeof displayName | typeof extensionId
8
9export const useLogger = (loggerName: LoggerNameType = displayName ?? name ?? extensionId, getPrefix?: ((type: string) => string) | null) => useReactiveLogger(loggerName, { getPrefix })
10
11export const useCommandToggleAnnotations = (callback: (...args: any[]) => any) => useCommand(commands.toggleAnnotations, callback)
12
13export const useConfig = <K extends ConfigSecionKey>(section: K) => defineConfigs<typeof sampleDefaults[K]>(section, sampleDefaults[section])
14
15export const useConfigObject = <K extends ConfigSecionKey>(section: K) => defineConfigObject<typeof sampleDefaults[K]>(section, sampleDefaults[section])
16
17export const useConfigObjectSample = () => useConfigObject(configs.sample)
18
19export const useConfigSample = () => useConfig(configs.sample)

On usage:

1import { defineExtension, watchEffect } from 'reactive-vscode'
2import { window } from 'vscode'
3import { useCommandUpdateDate, useConfigObjectSample } from './generated-meta'
4
5const { activate, deactivate } = defineExtension(() => {
6  const sample = useConfigObjectSample()
7  // another way to get the config value
8  const _configValue = sample.date // get value
9
10  watchEffect(() => {
11    // watch value change
12    window.showInformationMessage(`sampleConfigs.annotations.value:${sample.date}`)
13  })
14  useCommandUpdateDate(async () => {
15    // update value to ConfigurationTarget.Workspace/ConfigurationTarget.Global/ConfigurationTarget.WorkspaceFolder
16    sample.$update('date', Date.now().toLocaleString())
17  })
18},
19)
20export { 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:

1# Your Extension
2
3## Commands
4
5<!-- commands -->
6<!-- commands -->
7
8## Configurations
9
10<!-- configs -->
11<!-- configs -->
12
13## Configurations Json
14
15<!-- configsJson -->
16<!-- 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