feat: solidjs integration

Author: Huliiiiii

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

@@ -202,10 +202,12 @@ export default function ({ types: t }: { types: BabelTypes }): PluginObj {
   function isTransComponent(path: NodePath) {
     return (
       path.isJSXElement() &&
-      path
-        .get("openingElement")
-        .get("name")
-        .referencesImport("@lingui/react", "Trans")
+      ["@lingui/react", "@lingui/solid"].some((moduleName) =>
+        path
+          .get("openingElement")
+          .get("name")
+          .referencesImport(moduleName, "Trans"),
+      )
     )
   }
 

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

@@ -5,6 +5,7 @@ import { MacroJSX } from "./macroJsx"
 import type { NodePath } from "@babel/traverse"
 import { MacroJs } from "./macroJs"
 import { JsMacroName } from "./constants"
+import { wrapJsxElementAsComponent } from "./messageDescriptorUtils"
 import {
   type LinguiConfigNormalized,
   getConfig as loadConfig,
@@ -242,6 +243,10 @@ export default function ({
                     stripMessageProp: shouldStripMessageProp(
                       state.opts as LinguiPluginOpts,
                     ),
+                    transformElement:
+                      config.macro.jsxRuntime === "solid"
+                        ? wrapJsxElementAsComponent
+                        : undefined,
                     isLinguiIdentifier: (node: Identifier, macro) =>
                       isLinguiIdentifier(path, node, macro),
                   },

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

@@ -55,6 +55,7 @@ export type MacroJsxOpts = {
   stripNonEssentialProps: boolean
   stripMessageProp: boolean
   transImportName: string
+  transformElement?: (value: Expression) => Expression
   isLinguiIdentifier: (node: Identifier, macro: JsMacroName) => boolean
 }
 
@@ -74,9 +75,11 @@ const choiceComponentAttributesWhitelist = [
 export class MacroJSX {
   types: typeof babelTypes
   ctx: MacroJsxContext
+  transformElement?: (value: Expression) => Expression
 
   constructor({ types }: { types: typeof babelTypes }, opts: MacroJsxOpts) {
     this.types = types
+    this.transformElement = opts.transformElement
 
     this.ctx = {
       ...createMacroJsContext(
@@ -118,6 +121,9 @@ export class MacroJSX {
         context,
         comment,
       },
+      {
+        transformElement: this.transformElement,
+      },
     )
 
     attributes.push(this.types.jsxSpreadAttribute(messageDescriptor))

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

@@ -19,6 +19,10 @@ type TextWithLoc = {
   loc?: SourceLocation
 }
 
+type MessageDescriptorElementTransforms = {
+  transformElement?: (value: Expression) => Expression
+}
+
 function isObjectProperty(
   node: TextWithLoc | ObjectProperty,
 ): node is ObjectProperty {
@@ -35,9 +39,21 @@ export function createMessageDescriptorFromTokens(
     context?: TextWithLoc | ObjectProperty
     comment?: TextWithLoc | ObjectProperty
   } = {},
+  transforms: MessageDescriptorElementTransforms = {},
 ) {
+  const result = buildICUFromTokens(tokens)
+
+  if (result.elements && transforms.transformElement) {
+    result.elements = Object.fromEntries(
+      Object.entries(result.elements).map(([key, value]) => [
+        key,
+        transforms.transformElement(value),
+      ]),
+    )
+  }
+
   return createMessageDescriptor(
-    buildICUFromTokens(tokens),
+    result,
     oldLoc,
     stripNonEssentialProps,
     stripMessageProp,
@@ -150,6 +166,33 @@ function createValuesProperty(key: string, values: Record<string, Expression>) {
   )
 }
 
+export function wrapJsxElementAsComponent(value: Expression): Expression {
+  if (!types.isJSXElement(value)) {
+    return value
+  }
+
+  const props = types.identifier("props")
+
+  return types.arrowFunctionExpression(
+    [props],
+    types.jsxElement(
+      types.jsxOpeningElement(
+        types.cloneNode(value.openingElement.name),
+        [
+          ...value.openingElement.attributes.map((attribute) =>
+            types.cloneNode(attribute),
+          ),
+          types.jsxSpreadAttribute(props),
+        ],
+        true,
+      ),
+      null,
+      [],
+      true,
+    ),
+  )
+}
+
 export function createStringObjectProperty(
   key: string,
   value: string,

packages/babel-plugin-lingui-macro/test/__snapshots__/jsx-trans.test.ts.snap

@@ -1003,6 +1003,30 @@ import { Trans as _Trans } from "@lingui/react";
 
 `;
 
+exports[`should generate Solid components 1`] = `
+import { Trans } from "@lingui/solid/macro";
+<Trans>
+  Hello <a href="/docs">docs</a>.
+</Trans>;
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+import { Trans as _Trans } from "@lingui/solid";
+<_Trans
+  {
+    /*i18n*/
+    ...{
+      id: "lqG909",
+      message: "Hello <0>docs</0>.",
+      components: {
+        0: (props) => <a href="/docs" {...props} />,
+      },
+    }
+  }
+/>;
+
+`;
+
 exports[`should respect runtimeConfigModule 1`] = `
 import { Trans } from "@lingui/react/macro";
 <Trans>Hello World</Trans>;

packages/babel-plugin-lingui-macro/test/jsx-trans.test.ts

@@ -364,6 +364,27 @@ macroTester({
         <Trans>Hello World</Trans>;
       `,
     },
+    {
+      name: "should generate Solid components",
+      macroOpts: {
+        linguiConfig: makeConfig(
+          {
+            macro: {
+              jsxPackage: ["@lingui/solid/macro"],
+              jsxRuntime: "solid",
+            },
+            runtimeConfigModule: {
+              Trans: ["@lingui/solid", "Trans"],
+            },
+          },
+          { skipValidation: true },
+        ),
+      },
+      code: `
+        import { Trans } from '@lingui/solid/macro';
+        <Trans>Hello <a href="/docs">docs</a>.</Trans>;
+      `,
+    },
     {
       name: "should detects macro imported from config.macro.jsxPackage",
       macroOpts: {

packages/conf/src/makeConfig.ts

@@ -81,6 +81,10 @@ export const defaultConfig = {
 
 export const exampleConfig = {
   ...defaultConfig,
+  macro: {
+    ...defaultConfig.macro,
+    jsxRuntime: multipleValidOptions("react", "solid"),
+  },
   format: multipleValidOptions({}, {}),
   extractors: multipleValidOptions([], ["babel"], [Object]),
   runtimeConfigModule: multipleValidOptions(

packages/conf/src/types.ts

@@ -364,6 +364,12 @@ export type LinguiConfig = {
      * @default ["@lingui/react/macro"]
      */
     jsxPackage?: string[]
+    /**
+     * Controls which JSX runtime semantics the Lingui JSX macro emit.
+     *
+     * @default undefined
+     */
+    jsxRuntime?: "react" | "solid"
   }
   experimental?: {
     extractor?: ExperimentalExtractorOptions

packages/solid/README.md

@@ -0,0 +1,25 @@
+[![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 & Usage
+
+See the [documentation][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
+[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/build.config.ts

@@ -0,0 +1,27 @@
+import { babel } from "@rollup/plugin-babel"
+import { defineBuildConfig } from "unbuild"
+
+export default defineBuildConfig({
+  entries: ["src/index.ts", "src/config.ts"],
+  declaration: "node16",
+  rollup: {
+    commonjs: false,
+    esbuild: {
+      jsx: "preserve",
+    },
+  },
+  hooks: {
+    "rollup:options": (_, options) => {
+      options.plugins.push(
+        babel({
+          babelHelpers: "bundled",
+          babelrc: false,
+          configFile: false,
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+          include: ["src/**/*"],
+          presets: [["babel-preset-solid", { generate: "dom" }]],
+        }),
+      )
+    },
+  },
+})