npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reactive-meta-gen

v0.3.2

Published

Generate TypeScript meta with `reactive-vscode` info for VS Code extension from package.json

Downloads

259

Readme

reactive-meta-gen

npm version npm downloads bundle JSDocs License

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

  1. 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"
  }
}
  1. 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