Reactive-meta-gen NPM

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  and  and  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.