At the moment I am middle in converting MemberExport to the new Umbraco V14 Backoffice. A few days ago I needed to convert language files from XML to typescript. In this post I show you how I used ChatGPT to convert the files.
The old xml format
The old format was basically some info about the author and the culture and it contains the localization keys per area.
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<creator>
<name>Soeteman software</name>
<link>https://www.soetemansoftware.nl</link>
</creator>
<area alias="treeHeaders">
<key alias="memberexport">Export members</key>
</area>
<area alias="memberExportGeneral">
<key alias="exportButtonCaption">Export</key>
<key alias="exportMemberFieldsCaption">Export properties</key>
<key alias="memberExportTitle">Member Export</key>
<key alias="memberGroupCaption">Select member groups</key>
<key alias="memberIdProperty">Id</key>
<key alias="memberLoginProperty">Login</key>
<key alias="memberNameProperty">Name</key>
<key alias="memberPasswordProperty">Password</key>
<key alias="memberTypeDropDownCaption">Select member type</key>
<key alias="memberExportTreeCaption">Export members</key>
<key alias="memberGroupsProperty">Member groups</key>
<key alias="memberTypeProperty">Member type</key>
</area>
</language>The new TypeScript format
The new TypeScript format is basically an List of Objects (area's) that hold properties for all the translations. The file gets registered in the localization Manifest where you specify the culture info.
import { ManifestLocalization, ManifestTypes } from "@umbraco-cms/backoffice/extension-registry";
const localizations: Array<ManifestLocalization> = [
{
type: 'localization',
alias: 'time.lang.enus',
name: 'English (US)',
weight: 0,
meta: {
culture: 'en-us'
},
js: () => import('./files/en-us')
}
]
export const manifests: Array<ManifestTypes> = [...localizations];
Let ChatGPT do the conversion
The file conversion is very boring. You don't want to do this manually, so in the past I would have written a script to do the conversion. I was about to do this again but then remembered that ChatGPT could easily write a SQL script for me to add test data to an existing database, why not try to let ChatGPT do the conversion.
The only thing you really need to do is make it very clear to ChatGPT what it needs to do and then it will generate a proper response(Disclaimer I am no Prompt engineer).
given this format in Typescript
export default {
memberExportGeneral: {
csvNoTextIndicator: 'No Text Indicator',
exportOptionsCaption: 'Export Options'
}
};
Can you covert this xml document to the Typescript format? Ignore language and creator node all Aria nodes should be included and alias of area node is the propertyname in typescript
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
<creator>
<name>Soeteman software</name>
<link>https://www.soetemansoftware.nl</link>
</creator>
<area alias="treeHeaders">
<key alias="memberexport">Export members</key>
</area>
<area alias="memberExportGeneral">
<key alias="exportButtonCaption">Export</key>
<key alias="exportMemberFieldsCaption">Export properties</key>
<key alias="memberExportTitle">Member Export</key>
<key alias="memberGroupCaption">Select member groups</key>
<key alias="memberIdProperty">Id</key>
<key alias="memberLoginProperty">Login</key>
<key alias="memberNameProperty">Name</key>
<key alias="memberPasswordProperty">Password</key>
<key alias="memberTypeDropDownCaption">Select member type</key>
<key alias="memberExportTreeCaption">Export members</key>
<key alias="memberGroupsProperty">Member groups</key>
<key alias="memberTypeProperty">Member type</key>
</area>
</language>
The result
ChatGPT responded with 'Sure, here's the equivalent TypeScript format based on the provided XML document' and the only thing I needed to do was adding the code to my TypeScript file.
export default {
treeHeaders: {
memberexport: 'Export members'
},
memberExportGeneral: {
exportButtonCaption: 'Export',
exportMemberFieldsCaption: 'Export properties',
memberExportTitle: 'Member Export',
memberGroupCaption: 'Select member groups',
memberIdProperty: 'Id',
memberLoginProperty: 'Login',
memberNameProperty: 'Name',
memberPasswordProperty: 'Password',
memberTypeDropDownCaption: 'Select member type',
memberExportTreeCaption: 'Export members',
memberGroupsProperty: 'Member groups',
memberTypeProperty: 'Member type'
}
};