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

@postinumero/config

v0.2.1

Published

Configuration management utility for handling environment variables and runtime configurations.

Downloads

115

Readme

@postinumero/config

Configuration management utility for handling environment variables and runtime configurations.

Usage

To use the configuration utility, simply import the desired source and format:

import config from "@postinumero/config/env/runtime/awaited";
//                                      ^^^^^^^^^^^ ^^^^^^^
//                                      Sources     Format

console.log(config);

Sources

The configuration is derived from multiple sources. These sources are merged recursively, with priority given to sources listed later in the import path.

env

The env source allows you to access configuration values directly from environment variables. The VITE_ prefix is automatically stripped, variable names are unflattened into nested objects, and JSON values are parsed when possible. To remove another prefix or prefixes, import and modify removePrefix array from @postinumero/config/env.

Example environment variables:

VITE_foo=true
VITE_some.list=[1,2,3]
VITE_some.list.1.prop=123

Initialization in the app entry point:

To initialize the configuration with environment variables, call the init function:

import { init } from "@postinumero/config/env/promise";

init(import.meta.env); // Or init(process.env);

// ...

Accessing the configuration:

Once initialized, you can import and use the configuration in other parts of your application:

import config from "@postinumero/config/env/awaited";

console.log(config.foo); // true
console.log(config.some.list); // [1, { prop: 123 }, 3]

runtime

This source fetches configuration at runtime from public/config.json.

import config from "@postinumero/config/runtime/awaited";

Formats

Configuration can be accessed in different formats depending on your project’s needs.

awaited

Uses top-level await. This format requires an ES2022 target in your vite.config.ts:

{
  // ...
  "build": {
    "target": "ES2022"
  }
}

Example usage:

import config from "@postinumero/config/**/awaited";

console.log(config.some.value);

promise

This format returns a promise that resolves to the configuration object:

import configPromise from "@postinumero/config/**/promise";

async function something() {
  const config = await configPromise;

  console.log(config.some.value);
}

ref

This format provides a reference object that can be accessed synchronously. Initially, current is null until the config is ready.

import configRef from "@postinumero/config/**/ref";

function something() {
  const config = configRef.current; // null | Config

  console.log(config?.some.value);
}

async function somethingElse() {
  await configRef.ready();

  const config = configRef.current!; // Config is ready

  console.log(config.some.value);
}

proxy (Experimental)

This experimental format uses a proxy to access the configuration. It throws an error if the configuration is accessed before it is ready.

import config, { ready } from "@postinumero/config/**/proxy";

console.log(config.some.value); // May throw an error if accessed too early

async function something() {
  await ready();

  console.log(config.some.value); // Safe to access after ready() resolves
}

Types

⚠️ Ensure that your environment variables, .env files, or public/config.json have the same structure as config.example.json. Inconsistent structures will result in incorrect type hints and potential runtime errors.

To ensure type safety:

  1. Add a config.example.json file with example configuration values.

  2. Add the following .d.ts declarations to your project:

    declare module "@postinumero/config/*/awaited" {
      const config: typeof import("./config.example.json");
      export default config;
    }
    
    declare module "@postinumero/config/*/promise" {
      const config: Promise<typeof import("./config.example.json")>;
      export default config;
    }
    
    declare module "@postinumero/config/*/ref" {
      const config: {
        ready: () => Promise<void>;
        current: null | typeof import("./config.example.json");
      };
      export default config;
    }
    
    declare module "@postinumero/config/*/proxy" {
      export const ready: () => Promise<void>;
      const config: typeof import("./config.example.json");
      export default config;
    }