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

babel-plugin-intlized-components

v0.2.4

Published

Babel plugin for intlized-components

Downloads

7

Readme

🌎 babel-plugin-intlized-components

Babel plugin for package intlized-components. The primary use case for this plugin is to extract message ids and default messages from all files of a project.

Installation

npm install babel-plugin-intlized-components
# or
yarn add babel-plugin-intlized-components

Usage

Add the plugin to your babel configuration:

{
  "plugins": ["babel-plugin-styled-components"]
}

Message extraction

import babel from '@babel/core';

// Define fileName and babelConfig variables here.

const { metadata: result } = babel.transformFileSync(fileName, babelConfig);
const { translations } = result['intlized-components'];

// Do something with the translations, e.g. save them in file.

Docs

Options

customImportKey

If you don't import createDict from intlized-components directly, you can set a custom import key in the babel plugin, so that createDict is detected anyway.

Example:

In babel configuration:

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      { "customImportKey": "my-custom-import" }
    ]
  ]
}

In a file:

import { createDict } from 'my-custom-import';

const dict = createDict(...);

ignoreImport

If this option is set to true, imports will not be verified. This means that all functions named createDict will be transformed no matter what the import is. While this option might be helpful in some cases, you need to be careful as you should not name other functions createDict.

autoResolveKey

Normally you have to set a key as the first parameter and a message object as the second parameter for createDict. If you set this option to the base path of your application, the babel plugin will derive the first parameter from the file name, so that you can call createDict with a message object only.

Example:

Without autoResolveKey option:

const dict = createDict('welcome.Welcome', {
  hello: 'Hello',
});

With autoResolveKey option:

In babel configuration:

{
  "plugins": [
    ["babel-plugin-styled-components", { "autoResolveKey": "path-to-my-app" }]
  ]
}

In file welcome/Welcome.js:

// Babel will transform createDict and will add the key "welcome.Welcome" as first parameter to the function call.
const dict = createDict({
  hello: 'Hello',
});

Hint: You can even set a key manually if this option is on, so you can mix up auto resolved and manually set keys.

License

This package is released under the MIT License.