-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(): add vite-react-babel example (#1558)
* fix(conf): support cjs extension for config and process ESM in js file by Jiti * docs(): add vite-react-babel example
- Loading branch information
1 parent
876ba26
commit d98f9dd
Showing
20 changed files
with
3,450 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? | ||
|
||
|
||
.pnp.* | ||
.yarn/* | ||
!.yarn/patches | ||
!.yarn/plugins | ||
!.yarn/releases | ||
!.yarn/sdks | ||
!.yarn/versions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React + TS</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.tsx"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import type { LinguiConfig } from "@lingui/conf" | ||
|
||
const config: LinguiConfig = { | ||
locales: ["en", "pl"], | ||
catalogs: [ | ||
{ | ||
path: "src/locales/{locale}", | ||
include: ["src"], | ||
}, | ||
], | ||
} | ||
|
||
export default config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
{ | ||
"name": "vite-project", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "tsc && vite build", | ||
"messages:extract": "lingui extract", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"@lingui/macro": "^4.0.0-next.3", | ||
"@lingui/react": "^4.0.0-next.3", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@lingui/cli": "^4.0.0-next.3", | ||
"@lingui/vite-plugin": "^4.0.0-next.3", | ||
"@types/react": "^18.0.28", | ||
"@types/react-dom": "^18.0.11", | ||
"@vitejs/plugin-react": "^3.1.0", | ||
"babel-plugin-macros": "^3.1.0", | ||
"typescript": "^4.9.3", | ||
"vite": "^4.2.0" | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
#root { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
|
||
.logo { | ||
height: 6em; | ||
padding: 1.5em; | ||
will-change: filter; | ||
transition: filter 300ms; | ||
} | ||
.logo:hover { | ||
filter: drop-shadow(0 0 2em #646cffaa); | ||
} | ||
.logo.react:hover { | ||
filter: drop-shadow(0 0 2em #61dafbaa); | ||
} | ||
|
||
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
.read-the-docs { | ||
color: #888; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { useEffect, useState } from "react" | ||
import reactLogo from "./assets/react.svg" | ||
import linguiLogo from "./assets/lingui-logo.svg" | ||
import viteLogo from "/vite.svg" | ||
import "./App.css" | ||
import { Plural, Trans } from "@lingui/macro" | ||
import { I18nProvider } from "@lingui/react" | ||
import { i18n } from "@lingui/core" | ||
import { loadCatalog } from "./i18n" | ||
|
||
function App() { | ||
const [count, setCount] = useState(0) | ||
|
||
useEffect(() => { | ||
loadCatalog("en") | ||
}, []) | ||
|
||
return ( | ||
<I18nProvider i18n={i18n}> | ||
<div className="App"> | ||
<div> | ||
<a href="https://vitejs.dev" target="_blank"> | ||
<img src={viteLogo} className="logo" alt="Vite logo" /> | ||
</a> | ||
<a href="https://reactjs.org" target="_blank"> | ||
<img src={reactLogo} className="logo react" alt="React logo" /> | ||
</a> | ||
<a href="https://lingui.dev" target="_blank"> | ||
<img src={linguiLogo} className="logo react" alt="Lingui logo" /> | ||
</a> | ||
</div> | ||
<h1>Vite + React + Lingui</h1> | ||
<div className="card"> | ||
<button onClick={() => setCount((count) => count + 1)}> | ||
<Plural value={count} one="# month" other="# months" /> | ||
</button> | ||
<p> | ||
<Trans> | ||
Edit <code>src/App.tsx</code> and save to test HMR | ||
</Trans> | ||
</p> | ||
<p> | ||
<button | ||
style={{ marginRight: "20px" }} | ||
onClick={() => loadCatalog("pl")} | ||
> | ||
Polish | ||
</button> | ||
<button onClick={() => loadCatalog("en")}>English</button> | ||
</p> | ||
</div> | ||
<p className="read-the-docs"> | ||
<Trans>Click on the Vite and React logos to learn more</Trans> | ||
</p> | ||
</div> | ||
</I18nProvider> | ||
) | ||
} | ||
|
||
export default App |
11 changes: 11 additions & 0 deletions
11
examples/vite-project-react-babel/src/assets/lingui-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { i18n } from "@lingui/core" | ||
|
||
/** | ||
* Load messages for requested locale and activate it. | ||
* This function isn't part of the LinguiJS library because there are | ||
* many ways how to load messages — from REST API, from file, from cache, etc. | ||
*/ | ||
export async function loadCatalog(locale: string) { | ||
const catalog = await import(`./locales/${locale}.po`) | ||
i18n.loadAndActivate(locale, catalog.messages) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
:root { | ||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | ||
line-height: 1.5; | ||
font-weight: 400; | ||
|
||
color-scheme: light dark; | ||
color: rgba(255, 255, 255, 0.87); | ||
background-color: #242424; | ||
|
||
font-synthesis: none; | ||
text-rendering: optimizeLegibility; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
-webkit-text-size-adjust: 100%; | ||
} | ||
|
||
a { | ||
font-weight: 500; | ||
color: #646cff; | ||
text-decoration: inherit; | ||
} | ||
a:hover { | ||
color: #535bf2; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
display: flex; | ||
place-items: center; | ||
min-width: 320px; | ||
min-height: 100vh; | ||
} | ||
|
||
h1 { | ||
font-size: 3.2em; | ||
line-height: 1.1; | ||
} | ||
|
||
button { | ||
border-radius: 8px; | ||
border: 1px solid transparent; | ||
padding: 0.6em 1.2em; | ||
font-size: 1em; | ||
font-weight: 500; | ||
font-family: inherit; | ||
background-color: #1a1a1a; | ||
cursor: pointer; | ||
transition: border-color 0.25s; | ||
} | ||
button:hover { | ||
border-color: #646cff; | ||
} | ||
button:focus, | ||
button:focus-visible { | ||
outline: 4px auto -webkit-focus-ring-color; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { | ||
:root { | ||
color: #213547; | ||
background-color: #ffffff; | ||
} | ||
a:hover { | ||
color: #747bff; | ||
} | ||
button { | ||
background-color: #f9f9f9; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
msgid "" | ||
msgstr "" | ||
"POT-Creation-Date: 2023-03-23 12:19+0100\n" | ||
"MIME-Version: 1.0\n" | ||
"Content-Type: text/plain; charset=utf-8\n" | ||
"Content-Transfer-Encoding: 8bit\n" | ||
"X-Generator: @lingui/cli\n" | ||
"Language: en\n" | ||
"Project-Id-Version: \n" | ||
"Report-Msgid-Bugs-To: \n" | ||
"PO-Revision-Date: \n" | ||
"Last-Translator: \n" | ||
"Language-Team: \n" | ||
"Plural-Forms: \n" | ||
|
||
#: src/App.tsx:27 | ||
#~ msgid "{count, plural, one {# message} other {# messages}}" | ||
#~ msgstr "" | ||
|
||
#: src/App.tsx:35 | ||
msgid "{count, plural, one {# month} other {# months}}" | ||
msgstr "" | ||
|
||
#: src/App.tsx:27 | ||
#~ msgid "{count, plural, other {count is #}}" | ||
#~ msgstr "" | ||
|
||
#: src/App.tsx:53 | ||
msgid "Click on the Vite and React logos to learn more" | ||
msgstr "" | ||
|
||
#: src/App.tsx:38 | ||
msgid "Edit <0>src/App.tsx</0> and save to test HMR" | ||
msgstr "" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
msgid "" | ||
msgstr "" | ||
"POT-Creation-Date: 2023-03-23 14:43+0100\n" | ||
"MIME-Version: 1.0\n" | ||
"Content-Type: text/plain; charset=utf-8\n" | ||
"Content-Transfer-Encoding: 8bit\n" | ||
"X-Generator: @lingui/cli\n" | ||
"Language: pl\n" | ||
"Project-Id-Version: \n" | ||
"Report-Msgid-Bugs-To: \n" | ||
"PO-Revision-Date: \n" | ||
"Last-Translator: \n" | ||
"Language-Team: \n" | ||
"Plural-Forms: \n" | ||
|
||
#: src/App.tsx:35 | ||
msgid "{count, plural, one {# month} other {# months}}" | ||
msgstr "{count, plural, one {# miesiąc} few {# miesiące} many {# miesięcy} other {# miesiąca}}" | ||
|
||
#: src/App.tsx:53 | ||
msgid "Click on the Vite and React logos to learn more" | ||
msgstr "Kliknij na logo Vite i React, aby dowiedzieć się więcej" | ||
|
||
#: src/App.tsx:38 | ||
msgid "Edit <0>src/App.tsx</0> and save to test HMR" | ||
msgstr "Edytuj <0>src/App.tsx</0> i zapisz, aby przetestować HMR" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import ReactDOM from 'react-dom/client' | ||
import App from './App' | ||
import './index.css' | ||
|
||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode>, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "ESNext", | ||
"useDefineForClassFields": true, | ||
"lib": ["DOM", "DOM.Iterable", "ESNext"], | ||
"allowJs": false, | ||
"skipLibCheck": true, | ||
"esModuleInterop": false, | ||
"allowSyntheticDefaultImports": true, | ||
"strict": true, | ||
"forceConsistentCasingInFileNames": true, | ||
"module": "ESNext", | ||
"moduleResolution": "Node", | ||
"resolveJsonModule": true, | ||
"isolatedModules": true, | ||
"noEmit": true, | ||
"jsx": "react-jsx" | ||
}, | ||
"include": ["src"], | ||
"references": [{ "path": "./tsconfig.node.json" }] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"compilerOptions": { | ||
"composite": true, | ||
"module": "ESNext", | ||
"moduleResolution": "Node", | ||
"allowSyntheticDefaultImports": true | ||
}, | ||
"include": ["vite.config.ts"] | ||
} |
Oops, something went wrong.