Skip to content

feat: added maskTranslationText option to enable ZWSP masking on jsdo… #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benjaminstrasser wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: added maskTranslationText option to enable ZWSP masking on jsdo… #779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/config/src/core.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const applyDefaultValues = async (
adapter: undefined,

generateOnlyTypes: false,
maskTranslationText: true,
banner: '/* eslint-disable */',
runAfterGenerator: undefined,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down
2 changes: 2 additions & 0 deletions packages/config/src/types.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export type GeneratorConfig = {

adapterFileName?: string
generateOnlyTypes?: boolean
maskTranslationText?: boolean

banner?: string
runAfterGenerator?: string | undefined
Expand All @@ -57,6 +58,7 @@ export type GeneratorConfigWithDefaultValues = GeneratorConfig & {
esmImports: EsmImportsOption

generateOnlyTypes: boolean
maskTranslationText: boolean
banner: string
runAfterGenerator: string | undefined
}
45 changes: 28 additions & 17 deletions packages/generator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,23 +205,24 @@ You can set options for the generator inside a `.typesafe-i18n.json`-file in you

The available options are:

| key | type | default value |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------- |
| [adapter](#adapter) | `'angular' \| 'node' \| 'react' \| 'solid' \| 'svelte' \| 'vue' \| undefined` | `undefined` |
| [adapters](#adapters) | `Array<'angular' \| 'node' \| 'react' \| 'solid' \| 'svelte' \| 'vue'> \| undefined` | `undefined`
| [baseLocale](#baselocale) | `string` | `'en'` |
| [outputFormat](#outputformat) | `'TypeScript'` &#124; `'JavaScript'` | `'TypeScript'` |
| [esmImports](#esmimports) | `boolean | '.js' | 'fileEnding' | `false` |
| [generateOnlyTypes](#generateonlytypes) | `boolean` | `false` |
| [runAfterGenerator](#runaftergenerator) | `string` &#124; `undefined` | `undefined` |
| [banner](#banner) | `string` | `'/* eslint-disable */'` |
| [outputPath](#outputpath) | `string` | `'./src/i18n/'` |
| [typesFileName](#typesfilename) | `string` | `'i18n-types'` |
| [utilFileName](#utilfilename) | `string` | `'i18n-util'` |
| [formattersTemplateFileName](#formatterstemplatefilename) | `string` | `'formatters'` |
| [typesTemplateFileName](#typestemplatefilename) | `string` | `'custom-types'` |
| [adapterFileName](#adapterfilename) | `string` &#124; `undefined` | `undefined` |
| [tempPath](#temppath) | `string` | `'./node_modules/typesafe-i18n/temp-output/'` |
| key | type | default value |
| --------------------------------------------------------- |--------------------------------------------------------------------------------------| --------------------------------------------- |
| [adapter](#adapter) | `'angular' \| 'node' \| 'react' \| 'solid' \| 'svelte' \| 'vue' \| undefined` | `undefined` |
| [adapters](#adapters) | `Array<'angular' \| 'node' \| 'react' \| 'solid' \| 'svelte' \| 'vue'> \| undefined` | `undefined`
| [baseLocale](#baselocale) | `string` | `'en'` |
| [outputFormat](#outputformat) | `'TypeScript'` &#124; `'JavaScript'` | `'TypeScript'` |
| [esmImports](#esmimports) | `boolean` \| `'.js'` \| `'fileEnding'` | `false` |
| [generateOnlyTypes](#generateonlytypes) | `boolean` | `false` |
| [maskTranslationText](#masktranslationtext) | `boolean` | `true` |
| [runAfterGenerator](#runaftergenerator) | `string` &#124; `undefined` | `undefined` |
| [banner](#banner) | `string` | `'/* eslint-disable */'` |
| [outputPath](#outputpath) | `string` | `'./src/i18n/'` |
| [typesFileName](#typesfilename) | `string` | `'i18n-types'` |
| [utilFileName](#utilfilename) | `string` | `'i18n-util'` |
| [formattersTemplateFileName](#formatterstemplatefilename) | `string` | `'formatters'` |
| [typesTemplateFileName](#typestemplatefilename) | `string` | `'custom-types'` |
| [adapterFileName](#adapterfilename) | `string` &#124; `undefined` | `undefined` |
| [tempPath](#temppath) | `string` | `'./node_modules/typesafe-i18n/temp-output/'` |


#### `adapter`
Expand Down Expand Up @@ -252,6 +253,16 @@ Set this option to `'fileEnding'` if the module import needs to be done with a `

If you don't want to use the auto-generated helpers and instead write your own wrappers, you can set this option to `true`.

#### `maskTranslationText`

Controls whether zero-width space characters (U+200B) are inserted between characters in JSDoc comments for Translation types.

When enabled (default), this prevents code search tools from matching the generated type file JSDoc comments when searching for translation text, directing you instead to the actual translation source files. The zero-width spaces are invisible but keep the text readable in IDE tooltips.

Some code analysis tools may have issues with these invisible characters. If you encounter problems, you can disable this feature by setting this option to `false`.

**Note**: This only affects the `Translation` type JSDoc comments in generated type files, not the `TranslationFunctions` type.

#### `runAfterGenerator`

This hook allows you to e.g. run a code formatting/linting command after the generator completes. When a command is provided, a [`child_process`](https://nodejs.org/api/child_process.html#child_processexeccommand-options-callback) gets spawned with that command e.g. `npm run prettier --write "src/i18n"`
Expand Down
18 changes: 16 additions & 2 deletions packages/generator/src/files/generate-types.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,15 @@ const doesATranslationContainParams = (p: ParsedResult[]): boolean =>
)

const getTypes = (
{ translations, baseLocale, locales, typesTemplateFileName, banner, namespaces }: GenerateTypesType,
{
translations,
baseLocale,
locales,
typesTemplateFileName,
banner,
namespaces,
maskTranslationText,
}: GenerateTypesType,
logger: Logger,
) => {
const usesNamespaces = !!namespaces.length
Expand All @@ -69,7 +77,13 @@ const getTypes = (

const jsDocsInfo = createJsDocsMapping(parsedTranslations)

const translationType = createTranslationType(parsedTranslations, jsDocsInfo, 'RootTranslation', namespaces)
const translationType = createTranslationType(
parsedTranslations,
jsDocsInfo,
'RootTranslation',
namespaces,
maskTranslationText,
)

const shouldImportRequiredParamsType =
supportsTemplateLiteralTypes && doesATranslationContainParams(parsedTranslations)
Expand Down
15 changes: 11 additions & 4 deletions packages/generator/src/files/generate-types/translations.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const createTranslationType = (
jsDocInfo: JsDocInfos,
nameOfType: string,
namespaces: string[] = [],
maskTranslationText = true,
): string => {
const parsedTranslationsWithoutNamespaces = parsedTranslations.filter((parsedResult) => {
const keys = Object.keys(parsedResult)
Expand All @@ -24,7 +25,7 @@ export const createTranslationType = (

const translationType = `type ${nameOfType} = ${wrapObjectType(parsedTranslationsWithoutNamespaces, () =>
mapToString(parsedTranslationsWithoutNamespaces, (parsedResultEntry) =>
createTranslationTypeEntry(parsedResultEntry, jsDocInfo),
createTranslationTypeEntry(parsedResultEntry, jsDocInfo, maskTranslationText),
),
)}`

Expand All @@ -46,6 +47,8 @@ export const createTranslationType = (
isArray(parsedTranslations) ? parsedTranslations : [parsedTranslations],
jsDocInfo,
getTypeNameForNamespace(namespace),
[],
maskTranslationText,
)
)
})
Expand All @@ -55,20 +58,24 @@ export const createTranslationType = (
${namespaceTranslationsTypes.join(NEW_LINE + NEW_LINE)}`
}

const createTranslationTypeEntry = (resultEntry: ParsedResult, jsDocInfo: JsDocInfos): string => {
const createTranslationTypeEntry = (
resultEntry: ParsedResult,
jsDocInfo: JsDocInfos,
maskTranslationText: boolean,
): string => {
if (isParsedResultEntry(resultEntry)) {
const { key, args, parentKeys } = resultEntry

const nestedKey = getNestedKey(key, parentKeys)
const jsDocString = createJsDocsString(jsDocInfo[nestedKey] as JsDocInfo, true, false, true)
const jsDocString = createJsDocsString(jsDocInfo[nestedKey] as JsDocInfo, true, false, maskTranslationText)
const translationType = generateTranslationType(args)

return `
${jsDocString}${wrapObjectKeyIfNeeded(key)}: ${translationType}`
}

return processNestedParsedResult(resultEntry, (parsedResultEntry) =>
createTranslationTypeEntry(parsedResultEntry, jsDocInfo),
createTranslationTypeEntry(parsedResultEntry, jsDocInfo, maskTranslationText),
)
}

Expand Down
13 changes: 13 additions & 0 deletions packages/generator/test/generated/mask-translation-text-disabled/de/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 13 additions & 0 deletions packages/generator/test/generated/mask-translation-text-disabled/en/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 20 additions & 0 deletions ...s/generator/test/generated/mask-translation-text-disabled/formatters-template.expected.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ...ages/generator/test/generated/mask-translation-text-disabled/types-template.expected.d.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 41 additions & 0 deletions packages/generator/test/generated/mask-translation-text-disabled/types.expected.d.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 49 additions & 0 deletions packages/generator/test/generated/mask-translation-text-disabled/util.expected.async.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

69 changes: 69 additions & 0 deletions packages/generator/test/generated/mask-translation-text-disabled/util.expected.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading