@keycloakify/svelte 0.1.0 → 0.1.2

package/keycloakify-svelte/bin/818.index.js

@@ -631,13 +631,14 @@ async function command(params) {
     console.log(chalk__WEBPACK_IMPORTED_MODULE_0___default().cyan('Select the page you want to customize:'));
     const templateValue = 'Template.svelte (Layout common to every page)';
     const userProfileFormFieldsValue = 'UserProfileFormFields.svelte (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)';
+    const otherPageValue = "The page you're looking for isn't listed here";
     const { value: pageIdOrComponent } = await cli_select__WEBPACK_IMPORTED_MODULE_1___default()({
         values: (() => {
             switch (themeType) {
                 case 'login':
-                    return [templateValue, userProfileFormFieldsValue, ..._core__WEBPACK_IMPORTED_MODULE_5__/* .LOGIN_THEME_PAGE_IDS */ .hz];
+                    return [templateValue, userProfileFormFieldsValue, ..._core__WEBPACK_IMPORTED_MODULE_5__/* .LOGIN_THEME_PAGE_IDS */ .hz, otherPageValue];
                 case 'account':
-                    return [templateValue, ..._core__WEBPACK_IMPORTED_MODULE_5__/* .ACCOUNT_THEME_PAGE_IDS */ .Hp];
+                    return [templateValue, ..._core__WEBPACK_IMPORTED_MODULE_5__/* .ACCOUNT_THEME_PAGE_IDS */ .Hp, otherPageValue];
                 case 'admin':
                     return [];
             }
@@ -646,6 +647,13 @@ async function command(params) {
     }).catch(() => {
         process.exit(-1);
     });
+    if (pageIdOrComponent === otherPageValue) {
+        console.log([
+            'To style a page not included in the base Keycloak, such as one added by a third-party Keycloak extension,',
+            'refer to the documentation: https://docs.keycloakify.dev/features/styling-a-custom-page-not-included-in-base-keycloak',
+        ].join(' '));
+        process.exit(0);
+    }
     console.log(`→ ${pageIdOrComponent}`);
     const componentBasename = (() => {
         if (pageIdOrComponent === templateValue) {

package/keycloakify-svelte/login/i18n/useI18n.js

@@ -10,7 +10,19 @@ export function createUseI18n(params) {
         function renderHtmlString(params) {
             const { htmlString, msgKey } = params;
             return createRawSnippet(() => ({
-                render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+                render: () => {
+                    const elementName = (() => {
+                        if (htmlString.includes('<') && htmlString.includes('>')) {
+                            for (const tagName of ['div', 'section', 'article', 'ul', 'ol']) {
+                                if (htmlString.includes(`<${tagName}`)) {
+                                    return 'div';
+                                }
+                            }
+                        }
+                        return 'span';
+                    })();
+                    return `<${elementName} data-kc-msg="${msgKey}">${htmlString}</${elementName}>`;
+                },
             }));
         }
         function withSvelte(i18n_noJsx) {
@@ -39,7 +51,7 @@ export function createUseI18n(params) {
         }
         const styleElement = document.createElement('style');
         styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
-        styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+        styleElement.textContent = `div[${attributeName}] { display: inline-block; }`;
         document.head.prepend(styleElement);
     }
     const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",

package/src/login/i18n/useI18n.ts

@@ -64,7 +64,20 @@ export function createUseI18n<
     function renderHtmlString(params: { htmlString: string; msgKey: string }): Snippet {
       const { htmlString, msgKey } = params;
       return createRawSnippet(() => ({
-        render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+        render: () => {
+          const elementName = (() => {
+            if (htmlString.includes('<') && htmlString.includes('>')) {
+              for (const tagName of ['div', 'section', 'article', 'ul', 'ol']) {
+                if (htmlString.includes(`<${tagName}`)) {
+                  return 'div';
+                }
+              }
+            }
+            return 'span';
+          })();
+
+          return `<${elementName} data-kc-msg="${msgKey}">${htmlString}</${elementName}>`;
+        },
       }));
     }
 
@@ -104,7 +117,7 @@ export function createUseI18n<
 
     const styleElement = document.createElement('style');
     styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
-    styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+    styleElement.textContent = `div[${attributeName}] { display: inline-block; }`;
     document.head.prepend(styleElement);
   }