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

@patrtorg/enim-magni-hic

v3.1.30

Published

![GitHub branch checks state][build-url] [![codecov][cov-img]][cov-url] [![Known Vulnerabilities][snyk-img]][snyk-url]

Downloads

34,438

Maintainers

minhtran645176minhtran645176

Keywords

safepackage.jsonObject.keysTypedArraycommand-linelazylintwidthECMAScript 2023byteless compilerworkflowqueuerecursiveutilityArrayRegExp#flagssyntaxdescriptorrangeerrorES5debuggenericsawaitvalidationtouchflatMapwatchbluebirdvalidatewritablesuperagentespreeaccessibilityremoveArrayBuffer#sliceencryptionyupfseventsgraphqldataviewcircularefficientgetterlinewrapflagsmkdirgetestsreducertypescriptObservabletoobjectfind-upmapreducepropcloudsearchopenbrowserslistCSSStyleDeclarationwatchinges8iterationwhichECMAScript 2021comparefile systemwalkingfunctionalindicatorendpointmodulesmodulehardlinkssorteast-asian-widthIteratorassignESmomentES7callboundmake diraccessorfoldercharacterprettyes-abstractdataStyleSheetpushauthclass-validatorrfc4122colourrmoffsetasciipnpm9react-testing-libraryprotobuftoolkitlook-upStreamsredirectprivateECMAScript 2020elasticachehookformcryptohashvaluebounds3namesBigUint64Arraymetadatarm -rfArray.prototype.includestrimStartfast-copyHyBislotjsxperformantcoerciblees-shimsobjkoreanawsrmdirutil$.extendinputbuffersflatrapidES2016fetchvaluesECMAScript 2016jsonpathreduxtimefast-deep-copypackage managerlibphonenumberiecode pointsvalidmatchAllpropertytddlengthnumbertypedarrayES6es6rdstc39logtypedarraysmapregulartakecloneiamhasschemexhrnpmcallsearchsidevpckarmatypesafequerystringprogressmixinsdataViewwatchFileloadingbeanstalktypanionquotestdlibArray.prototype.flattenruntimeio-tsimmerpersistentArray.prototype.containsregular expressionsextensionparenterrorclassnameses2018updropUint8Arraytaskwhatwgpruneomitargscomputed-typesincludesroutinghttpajaxwebhas-ownReflect.getPrototypeOffromastless mixinsECMAScript 7Object.entriesenumerableparsestylingrgbjoiES2015tapethrottlecopymakelistenerspolyfillphonegroupByelmpostcss-plugindirjscollectionutilitiestraversetypedWeakMapfastcopygetintrinsicfindLastIndexlaststreamssettingsmergecallbindrequirewalkoptionArray.prototype.findLastIndexURLSearchParamsoptimizerURLString.prototype.trimunicodelesscssexecnegativereal-timedescriptionjsonescapechaiSymbol.toStringTagcjkstabledynamodbdependenciespostcssmovecloudfrontpasswordtoSortedcreateqscss lesselbstatearraybufferprefixtostringtagrouteserializationdescriptorsisObject.is[[Prototype]]minimalfixed-widthweakmapnegative zeroprivate datafunctionsinferenceconnectlinkansiECMAScript 2018throatforEachstyled-componentsmonorepowgetreact-hookswatcherautoscalingconfigcallbackregexpexpressionECMAScript 5iteratedeleteasyncdom-testing-librarywarningfastclonestatelessweaksetRFC-6455ObjectArrayBufferwordbreakdayjsmobilejwtes5syntaxerrorines2017ECMAScript 6fastifytypesstyleJSONsetflagReactiveExtensionspathelectronhasOwnassertionjsdiffcall-bindarraysinternal slottrimLefthttpsslicecloudformationpromiseformES3mrucompile lesshigher-orderRegExp.prototype.flagsfluxlockfilel10nstylesgroupassertkeyidSymbolroute53deepcloneratelimitflattenMicrosoftapiprototypelook@@toStringTagauthenticationmochashamECMAScript 2019livei18nwordwrapmiddlewarejavascriptbufferjapaneseenderless csstoolsdebuggerloggersns

Readme

GitHub branch checks state codecov Known Vulnerabilities

🌐 Next.js Runtime Environment Configuration

Effortlessly populate your environment at runtime, not just at build time, with @patrtorg/enim-magni-hic.

🌟 Highlights:

  • Isomorphic Design: Works seamlessly on both server and browser, and even in middleware.
  • Next.js 13 & 14 Ready: Fully compatible with the latest Next.js features.
  • .env Friendly: Use .env files during development, just like standard Next.js.

🤔 Why @patrtorg/enim-magni-hic?

In the modern software development landscape, the "Build once, deploy many" philosophy is key. This principle, essential for easy deployment and testability, is a cornerstone of continuous delivery and is embraced by the twelve-factor methodology. However, front-end development, particularly with Next.js, often lacks support for this - requiring separate builds for different environments. @patrtorg/enim-magni-hic is our solution to bridge this gap in Next.js.

📦 Introducing @patrtorg/enim-magni-hic

@patrtorg/enim-magni-hic dynamically injects environment variables into your Next.js application at runtime. This approach adheres to the "build once, deploy many" principle, allowing the same build to be used across various environments without rebuilds.

🤝 Compatibility Notes

🔖 Version Guide

  • 1.x: Next.js 12/13 Page Router
  • 2.x: Next.js 13 App Router
  • 3.x: Next.js 14 with advanced caching

🚀 Getting Started

In your app/layout.tsx, add:

// app/layout.tsx
import { PublicEnvScript } from '@patrtorg/enim-magni-hic';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <PublicEnvScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

The PublicEnvScript component automatically exposes all environment variables prefixed with NEXT_PUBLIC_ to the browser. For custom variable exposure, refer to EXPOSING_CUSTOM_ENV.md.

🧑‍💻 Usage

Access your environment variables easily:

// app/client-page.tsx
'use client';
import { env } from '@patrtorg/enim-magni-hic';

export default function SomePage() {
  const NEXT_PUBLIC_FOO = env('NEXT_PUBLIC_FOO');
  return <main>NEXT_PUBLIC_FOO: {NEXT_PUBLIC_FOO}</main>;
}

🛠 Utilities

Need to expose non-prefixed environment variables to the browser? Check out MAKING_ENV_PUBLIC.md.

👷 Maintenance

@patrtorg/enim-magni-hic is proudly maintained by Expatfile.tax, the leading US expat tax e-filing software.

📚 Acknowledgments

Kudos to the react-env project for the inspiration, and a shoutout to @andonirdgz for the innovative context provider idea!