feat: simple-vite fixture (#279)

seek-oss · Oct 9, 2024 · 15c0c16 · 15c0c16
1 parent 533c69f
commit 15c0c16
Show file tree

Hide file tree

Showing 10 changed files with 659 additions and 0 deletions.
diff --git a/fixtures/simple-vite/index.html b/fixtures/simple-vite/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vocab simple-vite plugin test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client.tsx"></script>
+  </body>
+</html>
diff --git a/fixtures/simple-vite/package.json b/fixtures/simple-vite/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@vocab-fixtures/simple-vite",
+  "version": "1.0.0",
+  "author": "SEEK",
+  "private": true,
+  "scripts": {
+    "compile": "vocab compile",
+    "start": "vocab compile --watch & vite",
+    "build": "vocab compile && vite build"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@vocab/cli": "workspace:*",
+    "@vocab/core": "workspace:*",
+    "@vocab/pseudo-localize": "workspace:*",
+    "@vocab/react": "workspace:*",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/fixtures/simple-vite/src/.vocab/fr.translations.json b/fixtures/simple-vite/src/.vocab/fr.translations.json
@@ -0,0 +1,8 @@
+{
+  "hello": {
+    "message": "Bonjour"
+  },
+  "world": {
+    "message": "monde"
+  }
+}
diff --git a/fixtures/simple-vite/src/.vocab/translations.json b/fixtures/simple-vite/src/.vocab/translations.json
@@ -0,0 +1,8 @@
+{
+  "hello": {
+    "message": "Hello"
+  },
+  "world": {
+    "message": "world"
+  }
+}
diff --git a/fixtures/simple-vite/src/client.tsx b/fixtures/simple-vite/src/client.tsx
@@ -0,0 +1,83 @@
+import { VocabProvider, useTranslations } from '@vocab/react';
+import type { TranslationKeys } from '@vocab/core';
+import React, { type ReactNode, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import commonTranslations from './.vocab';
+import clientTranslations from './client.vocab';
+
+type CommonTranslationKeys = TranslationKeys<typeof commonTranslations>;
+
+const useCommonTranslation = (key: CommonTranslationKeys) => {
+  const { t } = useTranslations(commonTranslations);
+
+  return t(key);
+};
+
+function Content() {
+  const common = useTranslations(commonTranslations);
+  const client = useTranslations(clientTranslations);
+  const message = `${common.t('hello')} ${useCommonTranslation('world')}`;
+  const specialCharacterResult = client.t(
+    'specialCharacters - \'‘’“”"!@#$%^&*()_+\\/`~\\\\',
+  );
+  const vocabPublishNode = client.t('vocabPublishDate', {
+    publishDate: 1605847714000,
+    strong: (children: ReactNode) => <strong>{children}</strong>,
+  });
+
+  return (
+    <>
+      <div id="message">{message}</div>
+      <div id="publish-date">{vocabPublishNode}</div>
+      <div id="special-characters">
+        Special Characters: {specialCharacterResult}
+      </div>
+    </>
+  );
+}
+
+function App({ children }: { children: ReactNode }) {
+  const [lang, setLang] = useState('en');
+  const [locale, setLocale] = useState('en-AU');
+
+  const theLocale = lang === 'en' ? locale : undefined;
+
+  return (
+    <VocabProvider language={lang} locale={theLocale}>
+      {children}
+      <label htmlFor="languages">Language:</label>
+      <select
+        name="languages"
+        id="language-select"
+        onChange={(event) => {
+          setLang(event.currentTarget.value);
+        }}
+      >
+        <option value="en">en</option>
+        <option value="fr">fr</option>
+        <option value="pseudo">pseudo</option>
+      </select>
+      {lang === 'en' ? (
+        <button
+          id="toggle-locale"
+          onClick={() =>
+            setLocale((curr) => (curr === 'en-AU' ? 'en-US' : 'en-AU'))
+          }
+        >
+          Toggle locale: {locale}
+        </button>
+      ) : null}
+    </VocabProvider>
+  );
+}
+
+const node = document.createElement('div');
+
+document.body.appendChild(node);
+
+createRoot(node).render(
+  <App>
+    <Content />
+  </App>,
+);
diff --git a/fixtures/simple-vite/src/client.vocab/fr.translations.json b/fixtures/simple-vite/src/client.vocab/fr.translations.json
@@ -0,0 +1,8 @@
+{
+  "specialCharacters - '‘’“”\"!@#$%^&*()_+\\/`~\\\\": {
+    "message": "‘’“”'\"!@#$%^&*()_+\\/`~\\\\"
+  },
+  "vocabPublishDate": {
+    "message": "Vocab a été publié le {publishDate, date, medium}"
+  }
+}
diff --git a/fixtures/simple-vite/src/client.vocab/translations.json b/fixtures/simple-vite/src/client.vocab/translations.json
@@ -0,0 +1,8 @@
+{
+  "specialCharacters - '‘’“”\"!@#$%^&*()_+\\/`~\\\\": {
+    "message": "‘’“”'\"!@#$%^&*()_+\\/`~\\\\"
+  },
+  "vocabPublishDate": {
+    "message": "<strong>Vocab</strong> was published on {publishDate, date, small}"
+  }
+}
diff --git a/fixtures/simple-vite/vite.config.js b/fixtures/simple-vite/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [],
+  build: {},
+});
diff --git a/fixtures/simple-vite/vocab.config.cjs b/fixtures/simple-vite/vocab.config.cjs
@@ -0,0 +1,13 @@
+const { generator } = require('@vocab/pseudo-localize');
+
+module.exports = {
+  devLanguage: 'en',
+  languages: [{ name: 'en' }, { name: 'fr' }],
+  generatedLanguages: [
+    {
+      name: 'pseudo',
+      extends: 'en',
+      generator,
+    },
+  ],
+};