sanichkotikov / solid-i18n

Tiny internationalization library for SolidJS.

solid-i18n

Tiny internationalization library for SolidJS.

There is no goal to cover every possible cases. The library supports only basic functionality:

• String formatting with variables and markup
• Number formatting, including strings with plurals
• Date formatting
• Customization of number and date formatting presets (including defaults)

Usage

This library uses Intl APIs (NumberFormat, DateTimeFormat and PluralRules), so you have to use polyfills for some outdated browsers.

npm i solid-i18n

Displaying Messages

import { createI18n, I18nProvider, Text } from 'solid-i18n';

const i18n = createI18n({ language: 'en' });

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <Text
        message="Read the <link>documentation</link> for more info."
        link={(text) => <a href="https://github.com/SanichKotikov/solid-i18n">{text}</a>}
      />
    </I18nProvider>
  )
}

Plural Formatting

<Text
  message="{count, plural, =0 {No items} one {One item} other {{count} items}}."
  count={19999}
/>

Date Formatting

<Text
  message="Last login {datetime}"
  datetime={new Date()}
/>

<DateTime
  date={new Date()}
  day="numeric"
  month="long"
  weekday="long"
  year="numeric"
/>

Note: use {datetime, date} for number or string values.

Number Formatting

<Numeric
  value={9.99}
  numberStyle="currency"
  currency="EUR"
/>

useI18n

import { useI18n } from 'solid-i18n';

function SomeComp() {
  const i18n = useI18n();

  return (
    <div>
      <h1>{i18n.t('Page title')}</h1>
      <div>{i18n.formatNumber(99999.9, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
      <div>{i18n.formatDateTime(new Date(), { day: '2-digit', month: 'short' })}</div>
    </div>
  );
}

Define Messages

import { useI18n, defineMessages } from 'solid-i18n';

const messages = defineMessages({
  title: { message: 'Page title' },
});

function SomeComp() {
  const i18n = useI18n();
  return <h1>{i18n.t(messages.title)}</h1>;
}

Using Presets

import { createI18n, I18nProvider, Text } from 'solid-i18n';

const i18n = createI18n({
  language: 'en',
  presets: {
    number: {
      default: { minimumFractionDigits: 0, maximumFractionDigits: 0 },
      fraction: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
    },
    dateTime: {
      default: { day: 'numeric', month: 'short', year: 'numeric' },
      full: { day: 'numeric', month: 'long', year: 'numeric' },
      simple: { day: 'numeric', month: 'short' },
    },
  },
});

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <Text
        message="Some value: {count, number, fraction}"
        count={999}
      />
    </I18nProvider>
  )
}

<div>{i18n.formatNumber(9999, 'fraction')}</div>
<DateTime date={new Date()} preset="simple" />

Extracting messages

Use react-i18n-mini-parser for extracting default messages.

Contributing

Please read this documentation before contributing.

solid-i18n's Issues

An unhandler error occured: SyntaxError: Cannot use import statement outside a module

Hello,
I'm new to SolidJS so maybe I'm doing something wrong (but I didn't do much!). Trying to use this library by following the basic example :

import { createI18n, I18nProvider, Text } from 'solid-i18n';

const i18n = createI18n({ language: 'en' });

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <Text
        message="Read the <link>documentation</link> for more info."
        link={(text) => <a href="https://github.com/SanichKotikov/solid-i18n">{text}</a>}
      />
    </I18nProvider>
  )
}

I created a new SolidStart project (just the bare template) and added solid-i18n. Then I wrapped the in the root with the I18Provider just like in the example. Even without adding a element I am getting this error:
An unhandler error occured: SyntaxError: Cannot use import statement outside a module

Also, when I start the project, the following warning appears in the console:
solid-i18n doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
Maybe the problem is related to this?

`MD001/heading-increment/header-increment`: Heading levels should only increment by one level at a time

I noticed that some of the headings in the document are not following the MD001/heading-increment/header-increment rule. This rule states that heading levels should only increment by one level at a time, for example, from H2 to H3, instead of H4. This helps to maintain a clear and consistent structure of the document.

The following lines have headings that violate this rule:

• Line 12 - H2
• Lines 21, 40, 49, 68, 78, 96 and 111 - H4

I suggest changing the H4 headings to H3 headings to comply with the rule. Alternatively, you can add intermediate H3 headings between the H2 and H4 headings to create a logical hierarchy.

Add `index.ts` to `components` folder and refactor imports

I noticed that the components folder does not have an index.ts file that exports all the components. This makes importing them in other files more tedious and verbose. I suggest adding an index.ts file to the components folder that exports all the components.

Then, we can refactor the libraries index.ts file to import from the components folder instead of each individual component file, like this:

export * from './components';

This will simplify the imports and make the code more consistent and maintainable. What do you think?

Add Prettier to the project

Based on the discussion we had in my recent Pull Request, I would like to suggest adding Prettier to the project. Prettier is an opinionated code formatter that can help maintain a consistent code style and improve readability.

By using Prettier, we can save time and effort in code reviews by automatically formatting our code according to a set of rules. This will also help us avoid unnecessary discussions about code style and focus on more important aspects of the code.

I believe that adding Prettier to the project will be beneficial for all contributors and I would love to hear your thoughts on this.