@keycloakify/svelte 0.0.1-rc.7 → 0.1.1

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.0.1-rc.7",
+  "version": "0.1.1",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -432,7 +432,7 @@
     "lint": "yarn format && eslint . --fix"
   },
   "peerDependencies": {
-    "keycloakify": "^11.3.19",
+    "keycloakify": "^11.7.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
@@ -450,7 +450,7 @@
     "eslint-plugin-svelte": "^2.46.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^15.12.0",
-    "keycloakify": "^11.3.32",
+    "keycloakify": "^11.7.0",
     "npm-check-updates": "^17.1.11",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.3.2",

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);
   }