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

steal-lp

v0.1.1

Published

L-packs for StealJS apps.

Downloads

5

Readme

#Steal-LP.

Frictionless language packs for apps loaded and built with StealJS
L actually may stand for Language, Locale, Label, Lemming, Lenin, etc...

js-standard-style

##What it does

StealJS is a great loader on top of System.js that allows you to load ES6/CJS/AMD modules right inside your browser while working with NPM packages too, as well it has nice build tools that bundle you app for production use.

Steal-LP allows you to tunes loading and usage of dictionaries for your app. It loads your L-dictionary as function that takes L-name and returns promise to fulfil with dictionary data.

##When you need this

Well, for example if your project needs i18n, l10n and you want to have simple, flexible and frictionless language packs configuration and loading on demand at runtime as in development and production. Other use cases possible if you have some message/labels/entries dictionaries and you need to load them dynamically.

##Usage

Dictionaries are stored as separate CJS modules for every language usually per component:

my-component/dict/en.js:

module.exports = {
  name: 'name'
}

my-component/dict/es.js:

module.exports = {
  name: 'nombre'
}

other formats of storing dictionaries may be added pretty easy

Plain use in code:

import dict from './dict!lp'

dict('es').then(esDictData => {
  console.log(esDictData.name) // -> nombre
})

Just install it from npm npm install steal-lp for simple use map in system config:

"map": {
  "./lp": "steal-lp"
}

If you want to use another type name just map it (and use for import):

"map": {
  "./language.pack": "steal-lp"
}

While build steal-tools will create language-packs with (for example) app-bundle.en-us.lp extension (for every L-name) per bundle. So particular language bundle loads in production when it is only needed.

##Try the demo app

git clone http://github.com/whitecolor/steal-lp
npm install # please, use NPM 3, otherwice remove system.npmAlgorithm in package.json
npm build
npm start # app will run on 7000, to use other port: npm run start -- --port your_port

Open in your browser http://localhost:7000 And you will see demo app. Open the console with network to see how files are loading, then change languages.

To see how it works with dist (built) version open your browser http://localhost:7000/dist

Demo app's code be found in repo's app folder.