@bottlebooks/valid-values 1.1.0 → 1.2.0

package/src/main.ts

@@ -1,6 +1,8 @@
 import createValidValues from './validValues/utils/createValidValues.js';
 import './style.css';
 import * as validValues from './validValues.js';
+import { translate } from './core/translate';
+import { MessageDescriptor } from '@lingui/core';
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
@@ -12,27 +14,32 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
             typeof createValidValues
           >['list'];
           return `<h2>${key}</h2>
-            <pre>${list().map((item, i) =>
-              i === 0
-                ? JSON.stringify(
-                    {
-                      // @ts-ignore
-                      id: item.id,
-                      'title(en)': item.getTitle('en'),
-                      'title(de)': item.getTitle('de'),
-                      titles: item.getTitles(['de', 'en', 'es', 'fr']),
-                      ...item,
-                      form: item.form && {
-                        ...item.form,
-                        // 'description(en)': item.form?.getDescription('en'),
-                        // 'description(de)': item.form?.getDescription('de'),
-                      },
-                    },
-                    undefined,
-                    2
-                  )
-                : ''
-            )}</pre>
+          <pre>${list.map((item, i) => {
+            const message = { id: item.id } as MessageDescriptor;
+            return i === 0
+              ? JSON.stringify(
+                  {
+                    // @ts-ignore
+                    id: item.id,
+                    'title(en)':
+                      translate(message, 'en') || item.getTitle?.('en'),
+                    'title(de)':
+                      translate(message, 'de') || item.getTitle?.('de'),
+                    // titles: item.getTitles(['de', 'en', 'es', 'fr']),
+                    ...item,
+                    form: item.form
+                      ? item.form && {
+                          ...item.form,
+                          // 'description(en)': item.form?.getDescription('en'),
+                          // 'description(de)': item.form?.getDescription('de'),
+                        }
+                      : null,
+                  },
+                  undefined,
+                  2
+                )
+              : '';
+          })}</pre>
           `;
         }
         return `<h2>${key}</h2>