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

current.js

v0.2.1

Published

On-demand JavaScript objects from 'current' HTML <meta> elements

Downloads

3,071

Readme

Introduction

current.js is a tiny 🤏 JavaScript library (only 410 bytes) that allows you to access data stored in "current" HTML <meta> elements.

Installation

To add current.js to your project, run the following command in your terminal:

yarn add current.js

Then, in the JavaScript file where you want to use current.js (usually application.js), add the following line of code:

import "current.js"

This will make the Current object available globally, so you can access it in any file without having to import it again.

Alternatively, you can import the Current object directly:

import { Current } from "current.js"

Usage

To use current.js, you need to add <meta> elements to the <head> section of your HTML document, with the name attribute starting with current-:

<head>
  <meta name="current-environment" content="production">
  <meta name="current-user-id" content="123">
  <meta name="current-user-time-zone-name" content="Central Time (US & Canada)">
</head>

You can then access the data stored in these elements using the Current object. If there is only one <meta> tag with the name you requested, current.js will return the value as a string:

Current.environment
// => "production"

If there are multiple <meta> tags with the same name, current.js will return an object with the remaining name as a camelized key.

Current.user
// => { id: "123", timeZoneName: "Central Time (US & Canada)" }

If the name you requested is not found, it will return an empty object

Current.foo
// => {}

Configuration

Custom Prefix

The prefix property on config can be used to customize the prefix used to lookup the <meta> tags.

import { config } from "current.js"
config.prefix = "config"
<meta name="current-environment" content="development">
<meta name="config-environment" content="production">

Calling Current.environment would now look for the meta tag with the config-environment name.

Current.environment
// => "production"

No Prefix

You can also configure current.js to use no prefix if you set the prefix to null.

import { config } from "current.js"
config.prefix = null
<meta name="current-environment" content="development">
<meta name="environment" content="production">

Calling Current.environment would also return "production" in this case.

Development

To run the test runner:

yarn install
yarn build
yarn test

Acknowledgments

This library was inspired by the source code of HEY.com, developed by 37signals. The original source code can be found here.

A big shout out to the team at 37signals and HEY.com for not minifying the JavaScript source code in their apps by "Paying tribute to the web with View Source".

We have made some changes and improvements, but this library wouldn't have been possible without their inspiration and ideas. Thanks, it's really appreciated!