feat: add astro integration --> initialize i18next upon astro:config:…

…setup

- update src structure to split integration from components
- update package.json to export subpath
for components
- bundle project using esbuild
- add typescript type declarations to package
- add
baseLanguage property to LanguageSelector + update readme docs

README.md

@@ -62,9 +62,10 @@ import { LanguageSelector } from "astro-i18next";
 
 #### LanguageSelector Props
 
-| Propname  | Type   | Description                            |
-| --------- | ------ | -------------------------------------- |
-| className | string | class attribute for the `<select>` tag |
+| Propname     | Type   | Description                                                                                           |
+| ------------ | ------ | ----------------------------------------------------------------------------------------------------- |
+| baseLanguage | string | language code that translations are based off of (will redirect to `/` instead of `/[language-code]`) |
+| className    | string | class attribute for the `<select>` tag to customize it                                                |
 
 ## License
 

build.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+require("esbuild")
+  .build({
+    bundle: true,
+    entryPoints: ["src/index.mts", "src/utils.ts", "src/components/index.mts"],
+    outdir: "dist",
+    outExtension: {
+      ".js": ".mjs",
+    },
+    external: ["i18next", "country-code-to-flag-emoji"],
+    minify: false,
+    format: "esm",
+    platform: "node",
+    target: "node14",
+    sourcemap: "inline",
+    sourcesContent: false,
+    loader: {
+      ".astro": "file",
+    },
+    assetNames: "[dir]/[name]",
+  })
+  .catch(() => process.exit(1));

package.json

@@ -6,10 +6,12 @@
     "test": "jest",
     "dev": "astro dev",
     "preview": "astro preview",
+    "build": "./build.js && npm run typecheck:emit",
     "lint": "eslint --ext js,ts,mts src",
     "prettier": "prettier --check --ignore-path .gitignore .",
     "prettier:fix": "prettier --write --ignore-path .gitignore .",
     "typecheck": "tsc --noEmit",
+    "typecheck:emit": "tsc --declaration --emitDeclarationOnly --outDir dist",
     "commit": "cz",
     "prepare": "husky install",
     "semantic-release": "semantic-release"
@@ -19,12 +21,16 @@
     "url": "https://github.com/yassinedoghri/astro-i18next.git"
   },
   "files": [
-    "src/index.mts",
-    "src/Trans.astro",
-    "src/LanguageSelector.astro",
-    "src/utils.ts"
+    "src",
+    "!src/index.d.ts",
+    "!src/**/*.test.ts",
+    "dist"
   ],
-  "exports": "./src/index.mts",
+  "main": "./dist/index.mjs",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components": "./dist/components/index.d.mts"
+  },
   "keywords": [
     "astro",
     "i18next",
@@ -61,6 +67,7 @@
     "@typescript-eslint/parser": "^5.21.0",
     "astro": "^1.0.0-beta.19",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.14.38",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",

src/LanguageSelector.astro → src/components/LanguageSelector.astro

@@ -4,14 +4,14 @@ import ISO6391 from "iso-639-1";
 import countryCodeToFlagEmoji from "country-code-to-flag-emoji";
 
 export interface Props {
+  baseLanguage: string;
   className?: string;
 }
 
 const supportedLanguages = i18next.languages;
 const currentLanguage = i18next.language;
-const baseLanguage = "en";
 
-const { className } = Astro.props;
+const { baseLanguage, className } = Astro.props;
 ---
 
 <select onchange="location = this.value;" class={className}>

src/Trans.astro → src/components/Trans.astro

@@ -1,6 +1,6 @@
 ---
 import { t } from "i18next";
-import { interpolate } from "./utils";
+import { interpolate } from "../utils";
 export interface Props {
   i18nKey: string;
 }

src/components/index.mts

@@ -0,0 +1,2 @@
+export { default as Trans } from "./Trans.astro";
+export { default as LanguageSelector } from "./LanguageSelector.astro";

src/index.mts

@@ -1,2 +1,20 @@
-export { default as Trans } from "./Trans.astro";
-export { default as LanguageSelector } from "./LanguageSelector.astro";
+import { AstroIntegration } from "astro";
+import { InitOptions } from "i18next";
+
+export default (options: InitOptions): AstroIntegration => {
+  return {
+    name: "astro-i18next",
+    hooks: {
+      "astro:config:setup": async ({ config, injectScript }) => {
+        // TODO: include other options? Abstract translation files loading?
+
+        // init i18next
+        injectScript(
+          "page-ssr",
+          `import i18next from "i18next";
+           i18next.init(${JSON.stringify(options)});`
+        );
+      },
+    },
+  };
+};

src/utils.ts

@@ -13,7 +13,7 @@ export const interpolate = (
     tagsRegex.exec("");
   });
 
-  if (referenceTags === []) {
+  if (referenceTags.length === 0) {
     console.warn(
       "WARNING(astro-i18next): The default slot does not include any html tag to interpolate!"
     );

tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "baseUrl": "src",
     "lib": ["ES2021"]
   },
-  "include": ["src/**/*.ts", "src/**/*.mts", "src/**/*.astro", "src/index.mjs"],
-  "exclude": []
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"]
 }