Updates

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.eslintrc

@@ -1,11 +1,9 @@
 {
   "extends": "airbnb",
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 2017,
-    "ecmaFeatures": {
-      "legacyDecorators": true
-    }
+    "requireConfigFile": false,
+    "ecmaVersion": 2017
   },
   "globals": {
     "window": true,
@@ -18,7 +16,11 @@
     "react/jsx-props-no-spreading": 0,
     "react/jsx-curly-newline": 0,
     "object-curly-newline": 0,
-    "semi": ["error", "never"],
+    "semi": [
+      "error",
+      "never"
+    ],
+    "react/prefer-stateless-function": 0,
     "react/prop-types": 0,
     "no-plusplus": 0
   }

.github/workflows/build-deploy-docs.yml

@@ -0,0 +1,22 @@
+name: Build Docs
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+
+      - name: Install and Build 🔧
+        run: |
+          yarn
+          yarn run docs
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: docs

.gitignore

@@ -1,4 +1,5 @@
 lib
+docs
 
 # Node specific #
 #################

examples/locales/ru.po

@@ -16,25 +16,32 @@ msgstr ""
 "X-Poedit-SourceCharset: UTF-8\n"
 "X-Poedit-SearchPath-0: .\n"
 
-#: ../../examples/src/DecoratedClassComponent.js:12
-#: ../../examples/src/DecoratedFunctionalComponent.js:8
-#: ../../examples/src/HookedComponent.js:10
+#: ../../examples/src/DecoratedClassComponent.js:10
+#: ../../examples/src/DecoratedFunctionalComponent.js:7
+#: ../../examples/src/HookedComponent.js:9
 msgid "%s apple"
 msgid_plural "%s apples"
 msgstr[0] "%s яблоко"
 msgstr[1] "%s яблока"
 msgstr[2] "%s яблок"
 
+#: ../../examples/src/DecoratedFunctionalComponent.js:8
+msgid "%s table"
+msgid_plural "%s tables"
+msgstr[0] "%s стол"
+msgstr[1] "%s стола"
+msgstr[2] "%s столов"
+
 #: ../../examples/src/HookedComponent.js:8
 msgid "Hello, world!"
 msgstr "Привет, мир!"
 
-#: ../../examples/src/DecoratedClassComponent.js:10
+#: ../../examples/src/DecoratedClassComponent.js:9
 #: ../../examples/src/DecoratedFunctionalComponent.js:6
 msgid "My name is %s"
 msgstr "Мое имя %s"
 
-#: ../../examples/src/HookedComponent.js:12
+#: ../../examples/src/HookedComponent.js:10
 msgctxt "Context"
 msgid "Text with context"
-msgstr "Текст с контекстом"
+msgstr "Текст с контекстом"

examples/src/App.js

@@ -6,22 +6,32 @@ import DecoratedClassComponent from './DecoratedClassComponent'
 import locales from '../locales'
 
 export default () => {
-  const [selectedLocale, setSelectedLocale] = useState('en')
-  const toggleLocale = useCallback(() => setSelectedLocale((selected) => (selected === 'en' ? 'ru' : 'en')), [])
+  const [locale, setLocale] = useState('en')
+
+  const toggleLocale = useCallback(() => {
+    setLocale((prev) => (prev === 'en' ? 'ru' : 'en'))
+  }, [])
+
   return (
     <>
-      <button onClick={toggleLocale} type="button">toggle locale</button>
+      <button
+        type="button"
+        onClick={toggleLocale}
+      >
+        Toggle locale
+      </button>
       <hr />
-      <LocalizedProvider locales={locales} selected={selectedLocale}>
-        { ({ localeReady }) => (localeReady
-          ? (
-            <>
-              <HookedComponent />
-              <DecoratedFunctionalComponent />
-              <DecoratedClassComponent />
-            </>
-          )
-          : 'loading locale'
+      <LocalizedProvider locales={locales} selected={locale}>
+        {({ localeReady }) => (
+          localeReady
+            ? (
+              <>
+                <HookedComponent />
+                <DecoratedFunctionalComponent />
+                <DecoratedClassComponent />
+              </>
+            )
+            : 'loading locale'
         )}
       </LocalizedProvider>
     </>

examples/src/DecoratedClassComponent.js

@@ -1,19 +1,17 @@
 import React, { Component } from 'react'
 import { withLocales } from 'react-localized'
 
-@withLocales()
-export default class DecoratedClassComponent extends Component {
+class DecoratedClassComponent extends Component {
   render() {
-    const { gettext, ngettext, formats, formatDate } = this.props
+    const { gettext, formats, formatDate } = this.props
     return (
       <>
-        {gettext('My name is %s', 'Anna')}
-        <br />
-        {ngettext('%s apple', '%s apples', 10, 10)}
-        <br />
-        {formatDate(new Date(), formats.date)}
-        <br />
+        <p>{gettext('My name is %s', 'Anna')}</p>
+        <p>{gettext('My name is %s', 'John')}</p>
+        <p>{formatDate(new Date(), formats.date)}</p>
       </>
     )
   }
 }
+
+export default withLocales()(DecoratedClassComponent)

examples/src/DecoratedFunctionalComponent.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { withLocales } from 'react-localized'
 
-export default withLocales()(({ gettext, ngettext }) => (
+const DecoratedFunctionalComponent = ({ ngettext }) => (
   <>
-    {gettext('My name is %s', 'John')}
-    <br />
-    {ngettext('%s apple', '%s apples', 2, 2)}
-    <br />
-    {ngettext('%s table', '%s tables', 10, 10)}
-    <br />
+    <p>{ngettext('%s apple', '%s apples', 1, 1)}</p>
+    <p>{ngettext('%s apple', '%s apples', 2, 2)}</p>
+    <p>{ngettext('%s apple', '%s apples', 10, 10)}</p>
+    <p>{ngettext('%s table', '%s tables', 5, 5)}</p>
   </>
-))
+)
+
+export default withLocales()(DecoratedFunctionalComponent)

examples/src/HookedComponent.js

@@ -2,15 +2,11 @@ import React from 'react'
 import { useLocales } from 'react-localized'
 
 export default () => {
-  const { gettext, ngettext, pgettext } = useLocales()
+  const { gettext, pgettext } = useLocales()
   return (
     <>
-      {gettext('Hello, world!')}
-      <br />
-      {ngettext('%s apple', '%s apples', 1, 1)}
-      <br />
-      {pgettext('Context', 'Text with context')}
-      <br />
+      <p>{gettext('Hello, world!')}</p>
+      <p>{pgettext('Context', 'Text with context')}</p>
     </>
   )
 }

package.json

@@ -2,37 +2,38 @@
   "name": "root",
   "private": true,
   "scripts": {
+    "dev:extract": "lerna run build && lerna run dev:extract",
+    "dev": "lerna run build && lerna run dev:react",
+    "docs": "lerna run build && lerna run docs:react",
     "preversion": "lerna run lint",
-    "dev": "lerna run dev:react",
     "publish:patch": "lerna version patch --force-publish --no-changelog && lerna publish from-package",
     "publish:minor": "lerna version minor --force-publish --no-changelog && lerna publish from-package",
     "publish:major": "lerna version major --force-publish --no-changelog && lerna publish from-package"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
-    "date-fns": "^2.9.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "html-webpack-plugin": "^3.2.0",
-    "lerna": "^3.20.2",
-    "microbundle": "^0.11.0",
-    "preact": "^10.3.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.13.16",
+    "@babel/eslint-parser": "^7.13.14",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "babel-loader": "^8.2.2",
+    "date-fns": "^2.21.1",
+    "eslint": "^7.24.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "lerna": "^4.0.0",
+    "microbundle": "^0.13.0",
+    "preact": "^10.5.13",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack": "^5.34.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

packages/preact-localized/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Roman Samoylov
+Copyright (c) 2021 Roman Samoylov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal