feat: custom Triton placeholders as output type (#35)

Author: HappyAreaBean

src/components/form/InputForm.jsx

@@ -19,6 +19,10 @@ const outputTypeOptions = [
     name: 'Triton Placeholders ([lang] tags)',
     value: 'triton_placeholders',
   },
+  {
+    name: 'Triton Placeholders (Custom Tags)',
+    value: 'triton_placeholders_custom',
+  },
   {
     name: 'Placeholder API',
     value: 'papi',
@@ -31,9 +35,14 @@ const InputForm = () => {
   const [variableRegex, setVariableRegex] = useState('');
   const [outputType, setOutputType] = useState('triton_placeholders');
   const [ignoredKeys, setIgnoredKeys] = useState('');
+  const [langSyntax, setLangSyntax] = useState('lang');
+  const [argSyntax, setArgSyntax] = useState('arg');
+  const [argsSyntax, setArgsSyntax] = useState('args');
   const [levelDelimiter, setLevelDelimiter] = useState('.');
   const [files, setFiles] = useState([]);
 
+  const isCustomPlaceholders = outputType === 'triton_placeholders_custom';
+
   return (
     <form className={classes.root} noValidate autoComplete='off'>
       <TextField
@@ -61,6 +70,40 @@ const InputForm = () => {
         value={outputType}
         onChange={handleFieldChange(setOutputType)}
       />
+      {isCustomPlaceholders && (
+        <>
+          <TextField
+            label='Lang Syntax'
+            value={langSyntax}
+            onChange={handleFieldChange(setLangSyntax)}
+            placeholder='lang'
+            helperText={`Custom lang tag you want to use. Start tag [${langSyntax}] and end tags [/${langSyntax}] are added automatically.`}
+            margin='normal'
+            variant='outlined'
+            fullWidth
+          />
+          <TextField
+            label='Args Syntax'
+            value={argsSyntax}
+            onChange={handleFieldChange(setArgsSyntax)}
+            placeholder='args'
+            helperText={`Custom args tag you want to use. Start tag [${argsSyntax}] and end tags [/${argsSyntax}] are added automatically.`}
+            margin='normal'
+            variant='outlined'
+            fullWidth
+          />
+          <TextField
+            label='Arg Syntax'
+            value={argSyntax}
+            onChange={handleFieldChange(setArgSyntax)}
+            placeholder='arg'
+            helperText={`Custom arg tag you want to use. Start tag [${argSyntax}] and end tags [/${argSyntax}] are added automatically.`}
+            margin='normal'
+            variant='outlined'
+            fullWidth
+          />
+        </>
+      )}
       <TextField
         label='Level Delimiter'
         value={levelDelimiter}
@@ -85,6 +128,9 @@ const InputForm = () => {
         prefix={prefix}
         variableRegex={variableRegex}
         outputType={outputType}
+        langSyntax={langSyntax}
+        argsSyntax={argsSyntax}
+        argSyntax={argsSyntax}
         ignoredKeys={ignoredKeys}
         levelDelimiter={levelDelimiter}
         files={files}

src/components/form/SubmitButton.jsx

@@ -9,6 +9,9 @@ const SubmitButton = ({
   prefix,
   variableRegex,
   outputType,
+  langSyntax,
+  argsSyntax,
+  argSyntax,
   ignoredKeys,
   levelDelimiter,
   files,
@@ -20,6 +23,9 @@ const SubmitButton = ({
       prefix,
       variableRegex,
       outputType,
+      langSyntax,
+      argsSyntax,
+      argSyntax,
       ignoredKeys,
       levelDelimiter,
       files: fileContents,
@@ -44,6 +50,9 @@ SubmitButton.propTypes = {
   prefix: PropTypes.string,
   variableRegex: PropTypes.string,
   outputType: PropTypes.string,
+  langSyntax: PropTypes.string,
+  argsSyntax: PropTypes.string,
+  argSyntax: PropTypes.string,
   ignoredKeys: PropTypes.string,
   files: PropTypes.arrayOf(PropTypes.any),
 };
@@ -52,6 +61,9 @@ SubmitButton.defaultProps = {
   prefix: '',
   variableRegex: '',
   outputType: '',
+  langSyntax: 'lang',
+  argsSyntax: 'args',
+  argSyntax: 'arg',
   ignoredKeys: '',
   files: [],
 };

src/lib/converter.js

@@ -2,10 +2,23 @@ import { getFormatManager, json } from './formats';
 import { getOutputTypeManager } from './outputType';
 
 class Converter {
-  constructor({ prefix, variableRegex, outputType, ignoredKeys, levelDelimiter, files }) {
+  constructor({
+    prefix,
+    variableRegex,
+    outputType,
+    langSyntax,
+    argSyntax,
+    argsSyntax,
+    ignoredKeys,
+    levelDelimiter,
+    files,
+  }) {
     this.prefix = prefix;
     this.variableRegex = variableRegex;
     this.outputType = outputType;
+    this.langSyntax = langSyntax;
+    this.argSyntax = argSyntax;
+    this.argsSyntax = argsSyntax;
     this.ignoredKeys = ignoredKeys;
     this.levelDelimiter = levelDelimiter;
     this.files = files;
@@ -39,8 +52,15 @@ class Converter {
         variables,
       });
       translations.forEach((translation) => this.addTranslation(language, translation));
-      if (target[key] === undefined)
-        target[key] = outputTypeManager.convertOriginalMessage(fullKey, variables);
+      if (target[key] === undefined) {
+        target[key] = outputTypeManager.convertOriginalMessage(
+          fullKey,
+          variables,
+          this.langSyntax,
+          this.argsSyntax,
+          this.argSyntax
+        );
+      }
     });
   }
 
@@ -88,6 +108,9 @@ export const handleConversion = ({
   prefix = '',
   variableRegex,
   outputType = 'triton_placeholders',
+  langSyntax = 'lang',
+  argsSyntax = 'args',
+  argSyntax = 'arg',
   ignoredKeys = '',
   levelDelimiter = '.',
   files = {},
@@ -96,6 +119,9 @@ export const handleConversion = ({
     prefix,
     variableRegex: variableRegex ? new RegExp(variableRegex, 'g') : /.^/g,
     outputType,
+    langSyntax,
+    argsSyntax,
+    argSyntax,
     ignoredKeys: ignoredKeys
       .split('\n')
       .filter((value) => !!value)

src/lib/outputType/index.js

@@ -3,6 +3,7 @@ import * as tritonPlaceholders from './tritonPlaceholders';
 
 export const getOutputTypeManager = (outputType) => {
   if (outputType === 'triton_placeholders') return tritonPlaceholders;
+  if (outputType === 'triton_placeholders_custom') return tritonPlaceholders;
   if (outputType === 'papi') return placeholderApi;
   throw new Error(`Output type manager not available for ${outputType}`);
 };

src/lib/outputType/tritonPlaceholders.js

@@ -1,6 +1,6 @@
-export const convertOriginalMessage = (key, variables) => {
-  if (!variables) return `[lang]${key}[/lang]`;
-  return `[lang]${key}[args]${variables.map((v) => `[arg]${v}[/arg]`).join('')}[/args][/lang]`;
+export const convertOriginalMessage = (key, variables, lang, args, arg) => {
+  if (!variables) return `[${lang}]${key}[/${lang}]`;
+  return `[${lang}]${key}[${args}]${variables.map((v) => `[${arg}]${v}[/${arg}]`).join('')}[/${args}][/${lang}]`;
 };
 
 export const getTranslations = ({ text, key, variables }) => {