Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add i18next-shopify framework #3

Merged
merged 1 commit into from
Jul 10, 2023
Merged

Add i18next-shopify framework #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions examples/by-frameworks/i18next-shopify/.vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"i18n-ally.localesPaths": "public/locales",
"i18n-ally.enabledFrameworks": ["i18next-shopify"],
"i18n-ally.namespace": true,
trishrempel marked this conversation as resolved.
Show resolved Hide resolved
"i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
"i18n-ally.keystyle": "nested",
"i18n-ally.keysInUse": ["description.part2_whatever"]
}
21 changes: 21 additions & 0 deletions examples/by-frameworks/i18next-shopify/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "react_usinghooks",
"version": "0.1.0",
"private": true,
"dependencies": {
"i18next": "20.3.0",
"i18next-browser-languagedetector": "6.1.1",
"i18next-xhr-backend": "3.2.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-i18next": "11.9.0",
"@shopify/i18next-shopify": "0.2.3",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
15 changes: 15 additions & 0 deletions examples/by-frameworks/i18next-shopify/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
3 changes: 3 additions & 0 deletions examples/by-frameworks/i18next-shopify/public/locales/de/pages/home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"title": "Zuhause"
}
11 changes: 11 additions & 0 deletions examples/by-frameworks/i18next-shopify/public/locales/de/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"title": "Willkommen zu react und react-i18next",
"description": {
"part1": "Um loszulegen, ändere <1>src/App(DE).js</1> speicheren und neuladen.",
"part2": "Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Schalter."
},
"count": {
"one": "{{count}} Satz übersetzt!",
"other": "{{count}} Sätze übersetzt!"
}
}
3 changes: 3 additions & 0 deletions examples/by-frameworks/i18next-shopify/public/locales/en/pages/home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"title": "Home"
}
15 changes: 15 additions & 0 deletions examples/by-frameworks/i18next-shopify/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"title": "hello",
"description": {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please add a pluralization key to one of these example files? That's where i18next-shopify diverges most from react-i18next, and it will be good to have for demoing and testing feature improvements.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! See "count.one", "count.other" below, and there's usage in App.jsx

"part1": "To get started, edit <1>src/App.js</1> and save to reload.",
"part2": "Switch language between english and german using buttons above."
},
"titlew": "ok",
"foo": {
"bar": "foobar"
},
"count": {
"one": "{{count}} phrase translated!",
"other": "{{count}} phrases translated!"
}
}
10 changes: 10 additions & 0 deletions examples/by-frameworks/i18next-shopify/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.App {
text-align: center;
}

.App-header {
background-color: #222;
height: 100px;
padding: 20px;
color: white;
}
101 changes: 101 additions & 0 deletions examples/by-frameworks/i18next-shopify/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-unused-vars */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React, { Component } from "react";
import { useTranslation, withTranslation, Trans } from "react-i18next";
import "./App.css";

// use hoc for class based components
class LegacyWelcomeClass extends Component {
render() {
const { t } = this.props;
return (
<div>
<h2>Plain Text</h2>
<h2>{t("translation.title")}</h2>
</div>
);
}
}
const Welcome = withTranslation()(LegacyWelcomeClass);

// Component using the Trans component
function MyComponent() {
return (
<Trans i18nKey="translation:description.part1">
To get started, edit <code>src/App.js</code> and save to reload.
</Trans>
);
}

// page uses the hook
function Page() {
const { t, i18n } = useTranslation();

const changeLanguage = lng => {
i18n.changeLanguage(lng);
};

return (
<div className="App">
<div className="App-header">
<Welcome />
<button onClick={() => changeLanguage("de")}>de</button>
<button onClick={() => changeLanguage("en")}>en</button>
</div>
<div className="App-intro">
<MyComponent />
</div>
<div>{t("translation.description.part2")}</div>
{/* plain <Trans>, #423 */}
<Trans i18nKey="translation.description.part2">Fallback text</Trans>
<p>{t("translation.count", { count: 1 })}</p>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Until the pluralization PR is merged, this will still render as "{...}"

</div>
);
}

// hook with scope
function Page2() {
const { t } = useTranslation(["translation.foo"]);

// inside default namespace ("foo.bar")
t("bar");

// explicit namespace
t("pages.home:title");
t("pages/home:title");
}

// hook with another scope
function Page3() {
const { t } = useTranslation("pages/home");

t("title");

// explicit namespace
t("translation:title");
}

// hook with scope in options
function Page4() {
const { t } = useTranslation("pages/home");

t("title");

// explicit namespace
t("title", { ns: "translation" });
}

// component with scope in props
function Page5() {
const { t } = useTranslation("pages/home");

return (
<div className="App">
<Trans t={t} i18nKey="title"></Trans>
{/* explicit namespace */}
<Trans t={t} i18nKey="title" ns="translation"></Trans>
</div>
);
}
31 changes: 31 additions & 0 deletions examples/by-frameworks/i18next-shopify/src/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from "react";
import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import ShopifyFormat from "@shopify/i18next-shopify";

i18n
// load translation using xhr -> see /public/locales
// learn more: https://github.com/i18next/i18next-xhr-backend
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
trishrempel marked this conversation as resolved.
Show resolved Hide resolved
// configure with Shopify-specific formats
.use(ShopifyFormat)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
fallbackLng: "en",
debug: true,

interpolation: {
escapeValue: false // not needed for react as it escapes by default
}
});

export default i18n;
5 changes: 5 additions & 0 deletions examples/by-frameworks/i18next-shopify/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
10 changes: 10 additions & 0 deletions examples/by-frameworks/i18next-shopify/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

// import i18n (needs to be bundled ;))
import './i18n'

ReactDOM.render(<App />, document.getElementById('root'))
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -813,6 +813,7 @@
"ngx-translate",
"i18next",
"react-i18next",
"i18next-shopify",
trishrempel marked this conversation as resolved.
Show resolved Hide resolved
"i18n-tag",
"flutter",
"vue-sfc",
Expand Down
18 changes: 18 additions & 0 deletions src/frameworks/i18next-shopify.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import ReactI18nextFramework from './react-i18next'
import { DirStructure, KeyStyle } from '~/core'

class ShopifyI18nextFramework extends ReactI18nextFramework {
id = 'i18next-shopify'
display = 'Shopify I18next'

perferredKeystyle?: KeyStyle = 'nested'
perferredDirStructure?: DirStructure = 'file'

detection = {
packageJSON: [
'@shopify/i18next-shopify',
],
}
}

export default ShopifyI18nextFramework
2 changes: 2 additions & 0 deletions src/frameworks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import FluentVueFramework from './fluent-vue'
import ReactFramework from './react-intl'
import I18nextFramework from './i18next'
import ReactI18nextFramework from './react-i18next'
import ShopifyI18nextFramework from './i18next-shopify'
import VSCodeFramework from './vscode'
import NgxTranslateFramework from './ngx-translate'
import I18nTagFramework from './i18n-tag'
Expand Down Expand Up @@ -46,6 +47,7 @@ export const frameworks: Framework[] = [
new FlutterFramework(),
new EmberFramework(),
new I18nextFramework(),
new ShopifyI18nextFramework(),
new ReactI18nextFramework(),
new I18nTagFramework(),
new FluentVueFramework(),
Expand Down
Loading