ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: split up validate-messages per entrypoint for smarter bundling

Browse source
This commit is contained in:
Thijs Louisse 2024-02-09 17:49:08 +01:00 committed by Thijs Louisse
parent 38c495ba1f
commit 5073ea4760
8 changed files with 299 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
.changeset/swift-deers-taste.md Normal file
View file

@ -0,0 +1,22 @@
---
'@lion/ui': patch
---
feat: split validate-messages-no-side-effects methods, so they can be bundled along with entrypoints.
For optimized bundling, it's reccommended to load feedback messages per entrypoint. For instance, when you only use form-core in your app:
```js
import { LionInputTel } from '@lion/ui/input-tel.js';
import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
import { loadInputTelMessagesNoSideEffects } from '@lion/ui/validate-messages-no-side-effects.js';
export class MyInputTel extends LionInputTel {
constructor() {
super();
loadInputTelMessagesNoSideEffects({ localize: getLocalizeManager() });
}
}
```
This prevents you from loading unused entrypoints like input-tel (which loads a full phone validation library) etc.

111
packages/ui/components/validate-messages/src/getLocalizedMessage.js Normal file
View file

@ -0,0 +1,111 @@
/**
* @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
* @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
*/
/** @type {Promise<void | object>} */
let pendingPromise;
/**
* @param {{localize: LocalizeManager}} opts
*/
export async function loadValidateNamespace({ localize }) {
if (pendingPromise) {
return pendingPromise;
}
pendingPromise = localize.loadNamespace(
{
'lion-validate': /** @param {string} locale */ locale => {
switch (locale) {
case 'bg-BG':
return import('@lion/ui/validate-messages-translations/bg-BG.js');
case 'bg':
return import('@lion/ui/validate-messages-translations/bg.js');
case 'cs-CZ':
return import('@lion/ui/validate-messages-translations/cs-CZ.js');
case 'cs':
return import('@lion/ui/validate-messages-translations/cs.js');
case 'de-DE':
return import('@lion/ui/validate-messages-translations/de-DE.js');
case 'de':
return import('@lion/ui/validate-messages-translations/de.js');
case 'en-AU':
return import('@lion/ui/validate-messages-translations/en-AU.js');
case 'en-GB':
return import('@lion/ui/validate-messages-translations/en-GB.js');
case 'en-US':
return import('@lion/ui/validate-messages-translations/en-US.js');
case 'en-PH':
return import('@lion/ui/validate-messages-translations/en-PH.js');
case 'en':
return import('@lion/ui/validate-messages-translations/en.js');
case 'es-ES':
return import('@lion/ui/validate-messages-translations/es-ES.js');
case 'es':
return import('@lion/ui/validate-messages-translations/es.js');
case 'fr-FR':
return import('@lion/ui/validate-messages-translations/fr-FR.js');
case 'fr-BE':
return import('@lion/ui/validate-messages-translations/fr-BE.js');
case 'fr':
return import('@lion/ui/validate-messages-translations/fr.js');
case 'hu-HU':
return import('@lion/ui/validate-messages-translations/hu-HU.js');
case 'hu':
return import('@lion/ui/validate-messages-translations/hu.js');
case 'it-IT':
return import('@lion/ui/validate-messages-translations/it-IT.js');
case 'it':
return import('@lion/ui/validate-messages-translations/it.js');
case 'nl-BE':
return import('@lion/ui/validate-messages-translations/nl-BE.js');
case 'nl-NL':
return import('@lion/ui/validate-messages-translations/nl-NL.js');
case 'nl':
return import('@lion/ui/validate-messages-translations/nl.js');
case 'pl-PL':
return import('@lion/ui/validate-messages-translations/pl-PL.js');
case 'pl':
return import('@lion/ui/validate-messages-translations/pl.js');
case 'ro-RO':
return import('@lion/ui/validate-messages-translations/ro-RO.js');
case 'ro':
return import('@lion/ui/validate-messages-translations/ro.js');
case 'ru-RU':
return import('@lion/ui/validate-messages-translations/ru-RU.js');
case 'ru':
return import('@lion/ui/validate-messages-translations/ru.js');
case 'sk-SK':
return import('@lion/ui/validate-messages-translations/sk-SK.js');
case 'sk':
return import('@lion/ui/validate-messages-translations/sk.js');
case 'uk-UA':
return import('@lion/ui/validate-messages-translations/uk-UA.js');
case 'uk':
return import('@lion/ui/validate-messages-translations/uk.js');
case 'zh-CN':
case 'zh':
return import('@lion/ui/validate-messages-translations/zh.js');
default:
return import('@lion/ui/validate-messages-translations/en.js');
}
},
},
{ locale: localize.locale },
);
return pendingPromise;
}
/**
* @param {{data:FeedbackMessageData; localize: LocalizeManager}} opts
* @returns {Promise<string|Element>}
*/
export const getLocalizedMessage = async ({ data, localize }) => {
await loadValidateNamespace({ localize });
if (data) {
return localize.msg(`lion-validate:${data.type}.${data.name}`, data);
}
return '';
};

188
packages/ui/components/validate-messages/src/loadDefaultFeedbackMessagesNoSideEffects.js
View file

@ -1,197 +1,27 @@
/* eslint-disable import/no-extraneous-dependencies */
import { MatchesOption } from '@lion/ui/combobox.js';
import {
DefaultSuccess,
EqualsLength,
IsDate,
IsDateDisabled,
IsEmail,
IsNumber,
MaxDate,
MaxLength,
MaxNumber,
MinDate,
MinLength,
MinMaxDate,
MinMaxLength,
MinMaxNumber,
MinNumber,
Pattern,
Required,
} from '@lion/ui/form-core.js';
import { PhoneNumber } from '@lion/ui/input-tel.js';
import { loadComboboxMessagesNoSideEffects } from './per-entrypoint/loadComboboxMessagesNoSideEffects.js';
import { loadFormCoreMessagesNoSideEffects } from './per-entrypoint/loadFormCoreMessagesNoSideEffects.js';
import { loadInputTelMessagesNoSideEffects } from './per-entrypoint/loadInputTelMessagesNoSideEffects.js';
/**
* @typedef {import('../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
* @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
*/
let loaded = false;
let isLoaded = false;
/**
* @param {{localize: LocalizeManager}} opts allow multiple lion/extension lib versions to provide their deduped instance of LocalizeManager
* @returns
*/
export function loadDefaultFeedbackMessagesNoSideEffects({ localize }) {
if (loaded === true) {
if (isLoaded === true) {
return;
}
const forMessagesToBeReady = () =>
localize.loadNamespace(
{
'lion-validate': /** @param {string} locale */ locale => {
switch (locale) {
case 'bg-BG':
return import('@lion/ui/validate-messages-translations/bg-BG.js');
case 'bg':
return import('@lion/ui/validate-messages-translations/bg.js');
case 'cs-CZ':
return import('@lion/ui/validate-messages-translations/cs-CZ.js');
case 'cs':
return import('@lion/ui/validate-messages-translations/cs.js');
case 'de-DE':
return import('@lion/ui/validate-messages-translations/de-DE.js');
case 'de':
return import('@lion/ui/validate-messages-translations/de.js');
case 'en-AU':
return import('@lion/ui/validate-messages-translations/en-AU.js');
case 'en-GB':
return import('@lion/ui/validate-messages-translations/en-GB.js');
case 'en-US':
return import('@lion/ui/validate-messages-translations/en-US.js');
case 'en-PH':
return import('@lion/ui/validate-messages-translations/en-PH.js');
case 'en':
return import('@lion/ui/validate-messages-translations/en.js');
case 'es-ES':
return import('@lion/ui/validate-messages-translations/es-ES.js');
case 'es':
return import('@lion/ui/validate-messages-translations/es.js');
case 'fr-FR':
return import('@lion/ui/validate-messages-translations/fr-FR.js');
case 'fr-BE':
return import('@lion/ui/validate-messages-translations/fr-BE.js');
case 'fr':
return import('@lion/ui/validate-messages-translations/fr.js');
case 'hu-HU':
return import('@lion/ui/validate-messages-translations/hu-HU.js');
case 'hu':
return import('@lion/ui/validate-messages-translations/hu.js');
case 'it-IT':
return import('@lion/ui/validate-messages-translations/it-IT.js');
case 'it':
return import('@lion/ui/validate-messages-translations/it.js');
case 'nl-BE':
return import('@lion/ui/validate-messages-translations/nl-BE.js');
case 'nl-NL':
return import('@lion/ui/validate-messages-translations/nl-NL.js');
case 'nl':
return import('@lion/ui/validate-messages-translations/nl.js');
case 'pl-PL':
return import('@lion/ui/validate-messages-translations/pl-PL.js');
case 'pl':
return import('@lion/ui/validate-messages-translations/pl.js');
case 'ro-RO':
return import('@lion/ui/validate-messages-translations/ro-RO.js');
case 'ro':
return import('@lion/ui/validate-messages-translations/ro.js');
case 'ru-RU':
return import('@lion/ui/validate-messages-translations/ru-RU.js');
case 'ru':
return import('@lion/ui/validate-messages-translations/ru.js');
case 'sk-SK':
return import('@lion/ui/validate-messages-translations/sk-SK.js');
case 'sk':
return import('@lion/ui/validate-messages-translations/sk.js');
case 'uk-UA':
return import('@lion/ui/validate-messages-translations/uk-UA.js');
case 'uk':
return import('@lion/ui/validate-messages-translations/uk.js');
case 'zh-CN':
case 'zh':
return import('@lion/ui/validate-messages-translations/zh.js');
default:
return import('@lion/ui/validate-messages-translations/en.js');
}
},
},
{ locale: localize.locale },
);
loadComboboxMessagesNoSideEffects({ localize });
loadFormCoreMessagesNoSideEffects({ localize });
loadInputTelMessagesNoSideEffects({ localize });
/**
* @param {FeedbackMessageData} data
* @returns {Promise<string|Element>}
*/
const getLocalizedMessage = async data => {
await forMessagesToBeReady();
if (data) {
return localize.msg(`lion-validate:${data.type}.${data.name}`, data);
}
return '';
};
/** @param {FeedbackMessageData} data */
Required.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
EqualsLength.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinLength.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MaxLength.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinMaxLength.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
Pattern.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
IsEmail.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
IsNumber.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinNumber.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MaxNumber.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinMaxNumber.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
IsDate.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinDate.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MaxDate.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MinMaxDate.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
IsDateDisabled.getMessage = async data => getLocalizedMessage(data);
/** @param {FeedbackMessageData} data */
MatchesOption.getMessage = async data => getLocalizedMessage(data);
DefaultSuccess.getMessage = async data => {
await forMessagesToBeReady();
const randomKeys = localize.msg('lion-validate:success.RandomOk').split(',');
const key = randomKeys[Math.floor(Math.random() * randomKeys.length)].trim();
return localize.msg(`lion-validate:${key}`, data);
};
/** @param {FeedbackMessageData} data */
// @ts-ignore
PhoneNumber.getMessage = async data => {
await forMessagesToBeReady();
const { type, outcome } = data;
if (outcome === 'too-long') {
// TODO: get max-length of country and use MaxLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
if (outcome === 'too-short') {
// TODO: get min-length of country and use MinLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
// TODO: add a more specific message here
if (outcome === 'invalid-country-code') {
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
return localize.msg(`lion-validate:${type}.Pattern`, data);
};
loaded = true;
isLoaded = true;
}

16
packages/ui/components/validate-messages/src/per-entrypoint/README.md Normal file
View file

@ -0,0 +1,16 @@
For optimized bundling, it's reccommended to load feedback messages per entrypoint. For instance, when you only use form-core in your app:
```js
import { LionInputTel } from '@lion/ui/input-tel.js';
import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
import { loadInputTelMessagesNoSideEffects } from '@lion/ui/validate-messages-no-side-effects.js';
export class MyInputTel extends LionInputTel {
constructor() {
super();
loadInputTelMessagesNoSideEffects({ localize: getLocalizeManager() });
}
}
```
This prevents you from loading unused entrypoints like input-tel (which loads a full phone validation library) etc.

22
packages/ui/components/validate-messages/src/per-entrypoint/loadComboboxMessagesNoSideEffects.js Normal file
View file

@ -0,0 +1,22 @@
/* eslint-disable import/no-extraneous-dependencies */
import { MatchesOption } from '@lion/ui/combobox.js';
import { getLocalizedMessage } from '../getLocalizedMessage.js';
/**
* @typedef {import('../../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
* @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
*/
let isLoaded = false;
/**
* @param {{localize: LocalizeManager}} opts allow multiple lion/extension lib versions to provide their deduped instance of LocalizeManager
*/
export function loadComboboxMessagesNoSideEffects({ localize }) {
if (isLoaded === true) return;
/** @param {FeedbackMessageData} data */
MatchesOption.getMessage = async data => getLocalizedMessage({ data, localize });
isLoaded = true;
}

77
packages/ui/components/validate-messages/src/per-entrypoint/loadFormCoreMessagesNoSideEffects.js Normal file
View file

@ -0,0 +1,77 @@
/* eslint-disable import/no-extraneous-dependencies */
import {
DefaultSuccess,
EqualsLength,
IsDate,
IsDateDisabled,
IsEmail,
IsNumber,
MaxDate,
MaxLength,
MaxNumber,
MinDate,
MinLength,
MinMaxDate,
MinMaxLength,
MinMaxNumber,
MinNumber,
Pattern,
Required,
} from '@lion/ui/form-core.js';
import { getLocalizedMessage, loadValidateNamespace } from '../getLocalizedMessage.js';
/**
* @typedef {import('../../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
* @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
*/
let isLoaded = false;
/**
* @param {{localize: LocalizeManager}} opts allow multiple lion/extension lib versions to provide their deduped instance of LocalizeManager
*/
export function loadFormCoreMessagesNoSideEffects({ localize }) {
if (isLoaded === true) return;
/** @param {FeedbackMessageData} data */
Required.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
EqualsLength.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinLength.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MaxLength.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinMaxLength.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
Pattern.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
IsEmail.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
IsNumber.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinNumber.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MaxNumber.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinMaxNumber.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
IsDate.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinDate.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MaxDate.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
MinMaxDate.getMessage = async data => getLocalizedMessage({ data, localize });
/** @param {FeedbackMessageData} data */
IsDateDisabled.getMessage = async data => getLocalizedMessage({ data, localize });
DefaultSuccess.getMessage = async data => {
await loadValidateNamespace({ localize });
const randomKeys = localize.msg('lion-validate:success.RandomOk').split(',');
const key = randomKeys[Math.floor(Math.random() * randomKeys.length)].trim();
return localize.msg(`lion-validate:${key}`, data);
};
isLoaded = true;
}

39
packages/ui/components/validate-messages/src/per-entrypoint/loadInputTelMessagesNoSideEffects.js Normal file
View file

@ -0,0 +1,39 @@
/* eslint-disable import/no-extraneous-dependencies */
import { PhoneNumber } from '@lion/ui/input-tel.js';
import { loadValidateNamespace } from '../getLocalizedMessage.js';
/**
* @typedef {import('../../../form-core/types/validate/validate.js').FeedbackMessageData} FeedbackMessageData
* @typedef {import('@lion/ui/localize.js').LocalizeManager} LocalizeManager
*/
let isLoaded = false;
/**
* @param {{localize: LocalizeManager}} opts allow multiple lion/extension lib versions to provide their deduped instance of LocalizeManager
*/
export function loadInputTelMessagesNoSideEffects({ localize }) {
if (isLoaded === true) return;
/** @param {FeedbackMessageData} data */
// @ts-ignore
PhoneNumber.getMessage = async data => {
await loadValidateNamespace({ localize });
const { type, outcome } = data;
if (outcome === 'too-long') {
// TODO: get max-length of country and use MaxLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
if (outcome === 'too-short') {
// TODO: get min-length of country and use MinLength validator
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
// TODO: add a more specific message here
if (outcome === 'invalid-country-code') {
return localize.msg(`lion-validate:${type}.Pattern`, data);
}
return localize.msg(`lion-validate:${type}.Pattern`, data);
};
isLoaded = true;
}

3
packages/ui/exports/validate-messages-no-side-effects.js
View file

@ -1 +1,4 @@
export { loadDefaultFeedbackMessagesNoSideEffects } from '../components/validate-messages/src/loadDefaultFeedbackMessagesNoSideEffects.js';
export { loadComboboxMessagesNoSideEffects } from '../components/validate-messages/src/per-entrypoint/loadComboboxMessagesNoSideEffects.js';
export { loadFormCoreMessagesNoSideEffects } from '../components/validate-messages/src/per-entrypoint/loadFormCoreMessagesNoSideEffects.js';
export { loadInputTelMessagesNoSideEffects } from '../components/validate-messages/src/per-entrypoint/loadInputTelMessagesNoSideEffects.js';