feat: add SolidJS support

.eslintignore

@@ -7,3 +7,4 @@ examples/*
 README.md
 **/npm/*
 /packages/*/build/**
+/packages/solid/babel.config.js

jest.config.js

@@ -41,6 +41,16 @@ module.exports = {
       moduleNameMapper: tsConfigPathMapping,
       roots: ["<rootDir>/packages/react"],
     },
+    {
+      displayName: "web",
+      testEnvironment: "jsdom",
+      testMatch,
+      moduleNameMapper: tsConfigPathMapping,
+      roots: ["<rootDir>/packages/solid"],
+      transform: {
+        "\\.[jt]sx?$": ["babel-jest", { configFile: "./packages/solid/babel.config.js" }]
+      },
+    },
     {
       displayName: "universal",
       testEnvironment: "jest-environment-node-single-context",

package.json

@@ -15,7 +15,7 @@
     "test:e2e": "yarn workspaces foreach -p run test:e2e",
     "test:tsd": "jest -c jest.config.types.js",
     "test:all": "yarn test && yarn test:integration && yarn test:e2e && yarn test:tsd",
-    "lint:types": "tsc",
+    "lint:types": "tsc && tsc -p packages/solid/",
     "lint:eslint": "eslint './packages/**/*.{ts,tsx,js,jsx}'",
     "lint:all": "yarn lint:eslint && yarn lint:types",
     "prettier": "prettier --write '**/*.{ts,tsx,js,jsx}'",

packages/babel-plugin-extract-messages/src/index.ts

@@ -200,10 +200,16 @@ export default function ({ types: t }: { types: BabelTypes }): PluginObj {
   function isTransComponent(path: NodePath) {
     return (
       path.isJSXElement() &&
-      path
-        .get("openingElement")
-        .get("name")
-        .referencesImport("@lingui/react", "Trans")
+      (
+        path
+          .get("openingElement")
+          .get("name")
+          .referencesImport("@lingui/react", "Trans") ||
+        path
+          .get("openingElement")
+          .get("name")
+          .referencesImport("lingui-solid", "Trans")
+      )
     )
   }
 

packages/babel-plugin-lingui-macro/src/constants.ts

@@ -2,6 +2,7 @@ export const EXTRACT_MARK = "i18n"
 export const MACRO_LEGACY_PACKAGE = "@lingui/macro"
 export const MACRO_CORE_PACKAGE = "@lingui/core/macro"
 export const MACRO_REACT_PACKAGE = "@lingui/react/macro"
+export const MACRO_SOLID_PACKAGE = "@lingui/solid/macro"
 
 export enum MsgDescriptorPropKey {
   id = "id",

packages/babel-plugin-lingui-macro/src/index.ts

@@ -7,6 +7,7 @@ import { MacroJs } from "./macroJs"
 import {
   MACRO_CORE_PACKAGE,
   MACRO_REACT_PACKAGE,
+  MACRO_SOLID_PACKAGE,
   MACRO_LEGACY_PACKAGE,
   JsMacroName,
 } from "./constants"
@@ -116,6 +117,7 @@ export default function ({
         [
           MACRO_CORE_PACKAGE,
           MACRO_REACT_PACKAGE,
+          MACRO_SOLID_PACKAGE,
           MACRO_LEGACY_PACKAGE,
         ].includes(statement.get("source").node.value)
       )
@@ -142,6 +144,10 @@ export default function ({
           MACRO_REACT_PACKAGE,
           JsMacroName.useLingui
         ) ||
+        identPath.referencesImport(
+          MACRO_SOLID_PACKAGE,
+          JsMacroName.useLingui
+        ) ||
         identPath.referencesImport(MACRO_LEGACY_PACKAGE, JsMacroName.useLingui)
       ) {
         return true

packages/babel-plugin-lingui-macro/src/macro.ts

@@ -43,7 +43,7 @@ function macro({ state, babel, config }: MacroParams) {
   Object.defineProperty(module.exports, name, {
     get() {
       throw new Error(
-        `The macro you imported from "@lingui/core/macro" or "@lingui/react/macro" is being executed outside the context of compilation with babel-plugin-macros. ` +
+        `The macro you imported from "@lingui/core/macro" or "@lingui/react/macro" or "@lingui/solid/macro" is being executed outside the context of compilation with babel-plugin-macros. ` +
           `This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. ` +
           `Please see the documentation for how to configure babel-plugin-macros properly: ` +
           "https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/user.md"

packages/babel-plugin-lingui-macro/src/macroJsx.ts

@@ -20,6 +20,7 @@ import { makeCounter } from "./utils"
 import {
   JsxMacroName,
   MACRO_REACT_PACKAGE,
+  MACRO_SOLID_PACKAGE,
   MACRO_LEGACY_PACKAGE,
   MsgDescriptorPropKey,
 } from "./constants"
@@ -412,6 +413,7 @@ export class MacroJSX {
 
     return (
       identifier.referencesImport(MACRO_REACT_PACKAGE, name) ||
+      identifier.referencesImport(MACRO_SOLID_PACKAGE, name) ||
       identifier.referencesImport(MACRO_LEGACY_PACKAGE, name)
     )
   }

packages/solid/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["solid"],
+  "extends": ["../../.eslintrc", "plugin:solid/typescript"]
+}

packages/solid/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/solid/README.md

@@ -0,0 +1,34 @@
+[![License][badge-license]][license]
+[![Version][badge-version]][package]
+[![Downloads][badge-downloads]][package]
+
+# @lingui/solid
+
+> SolidJS components for internationalization
+
+`@lingui/solid` is part of [LinguiJS][linguijs]. See the [documentation][documentation] for all information, tutorials and examples.
+
+## Installation
+
+```sh
+npm install --save @lingui/solid
+# yarn add @lingui/solid
+```
+
+## Usage
+
+See the [tutorial][tutorial] or [reference][reference] documentation.
+
+## License
+
+[MIT][license]
+
+[license]: https://github.com/lingui/js-lingui/blob/main/LICENSE
+[linguijs]: https://github.com/lingui/js-lingui
+[documentation]: https://lingui.dev
+[tutorial]: https://lingui.dev/tutorials/solid
+[reference]: https://lingui.dev/ref/solid
+[package]: https://www.npmjs.com/package/@lingui/solid
+[badge-downloads]: https://img.shields.io/npm/dw/@lingui/solid.svg
+[badge-version]: https://img.shields.io/npm/v/@lingui/solid.svg
+[badge-license]: https://img.shields.io/npm/l/@lingui/solid.svg

packages/solid/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: 16,
+        },
+        modules: "commonjs",
+      },
+    ],
+    "@babel/preset-typescript",
+    "babel-preset-solid",
+  ],
+}

packages/solid/macro/__typetests__/index.test-d.tsx

@@ -0,0 +1,130 @@
+import { expectType } from "tsd"
+import type { I18n } from "@lingui/core"
+
+import {
+  Trans,
+  Plural,
+  Select,
+  SelectOrdinal,
+  useLingui,
+} from "@lingui/solid/macro"
+
+const gender = "male"
+let m: any
+
+///////////////////
+//// JSX Trans
+///////////////////
+
+m = <Trans>Message</Trans>
+m = (
+  <Trans id="custom.id" comment="comment" context="context">
+    Message
+  </Trans>
+)
+
+// @ts-expect-error: children are required here
+m = <Trans id="custom.id" comment="comment" context="context" />
+
+///////////////////
+//// JSX Plural
+///////////////////
+m = (
+  // @ts-expect-error: children are not allowed
+  <Plural value={5} other={"..."}>
+    Message
+  </Plural>
+)
+
+// @ts-expect-error: value is required
+m = <Plural />
+
+m = <Plural value={5} offset={1} one={"..."} other={"..."} _0="" _1={"..."} />
+
+//  @ts-expect-error: offset could be number only
+m = <Plural value={5} offset={"1"} one={"..."} other={"..."} />
+
+// @ts-expect-error: not allowed prop is passed
+m = <Plural value={5} unsupported={"should be error"} />
+
+// should support JSX element as Props
+m = <Plural value={5} one={<Trans>...</Trans>} other={<Trans>...</Trans>} />
+
+// value as string
+m = <Plural value={"5"} one={"..."} other={"..."} />
+
+// @ts-expect-error: `other` should always be present
+m = <Plural value={"5"} one={"..."} />
+
+// additional properties
+m = (
+  <Plural
+    value={5}
+    comment={"Comment"}
+    context={"Context"}
+    id={"custom.id"}
+    one={"..."}
+    other={"..."}
+  />
+)
+
+///////////////////
+//// JSX SelectOrdinal is the same s Plural, so just smoke test it
+///////////////////
+m = (
+  <SelectOrdinal
+    value={5}
+    offset={1}
+    one={"..."}
+    other={"..."}
+    _0=""
+    _1={"..."}
+  />
+)
+
+///////////////////
+//// JSX Select
+///////////////////
+m = (
+  // @ts-expect-error: children are not allowed here
+  <Select value={gender} other={"string"}>
+    Message
+  </Select>
+)
+
+// @ts-expect-error: `value` could be string only
+m = <Select value={5} other={"string"} />
+
+// @ts-expect-error: `other` required
+m = <Select value={"male"} />
+
+// @ts-expect-error: `value` required
+m = <Select other={"male"} />
+
+m = <Select value={gender} _male="..." _female="..." other={"..."} />
+
+// @ts-expect-error: exact cases should be prefixed with underscore
+m = <Select value={gender} male="..." female=".." other={"..."} />
+
+// should support JSX in props
+m = (
+  <Select
+    value={"male"}
+    _male={<Trans>...</Trans>}
+    other={<Trans>...</Trans>}
+  />
+)
+
+////////////////////////
+//// SolidJS useLingui()
+////////////////////////
+function MyComponent() {
+  const { t, i18n } = useLingui()
+
+  expectType<string>(t`Hello world`)
+  expectType<string>(t({ message: "my message" }))
+  // @ts-expect-error: you could not pass a custom instance here
+  t(i18n())({ message: "my message" })
+
+  expectType<I18n>(i18n())
+}

packages/solid/macro/__typetests__/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "paths": {}
+}