@andreyyolkin/keycloakify-vue 0.2.0 → 0.2.2

package/README.md

@@ -22,7 +22,7 @@ packaging unchanged.
 npm install --save-dev @andreyyolkin/keycloakify-vue
 ```
 
-**Peer dependencies:** `keycloakify ^11.15.1` and `vue ^3.5.0` must be installed in your project.
+**Peer dependencies:** `keycloakify ^11.15.1` and `vue ^3.5.44` must be installed in your project.
 
 The easiest way to get started is the official starter template:
 
@@ -41,6 +41,14 @@ The easiest way to get started is the official starter template:
   and `IdpReviewUserProfile`.
 - **`i18nBuilder`** — factory for wiring Keycloakify's `noJsx` i18n engine into Vue (returns `msg()` /
   `advancedMsg()` that produce sanitized `VNode`s).
+  > **`withCustomTranslations` must be called from a plain `.ts`/`.tsx`/`.js` file, never from a `.vue` SFC.**
+  > At build time, `keycloakify`'s `generateMessageProperties` step statically scans your theme source for a
+  > `withCustomTranslations({...})` call to produce the server-side `messages_<lang>.properties` bundle — but
+  > it only scans files matching `/\.(js|ts|tsx)$/`, so a call placed inside a `<script setup>` block of a
+  > `.vue` file is silently skipped and those keys never reach the server bundle (client-side `msg()` still
+  > works, which can make the gap easy to miss). Keep your `i18nBuilder(...).withCustomTranslations(...)`
+  > call in a dedicated `i18n.ts` (as in this repo's `stories/login/i18n.ts`) and import it from your `.vue`
+  > components instead.
 - **Account theme** — importable from `@andreyyolkin/keycloakify-vue/account`: its own `DefaultPage` + `Template`,
   the 7 account pages at `@andreyyolkin/keycloakify-vue/account/pages/*.vue`, and an account `i18nBuilder`.
 - **`bin` handlers** — `_keycloakify-custom-handler` delegates `update-kc-gen`, `eject-page`,

package/keycloakify-vue/account/pages/PageProps.d.ts

@@ -1,7 +1,7 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 export type PageProps<NarrowedKcContext, I18n> = {
-    Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+    Template: Component;
     kcContext: NarrowedKcContext;
     i18n: I18n;
     doUseDefaultCss: boolean;

package/keycloakify-vue/login/lib/useUserProfileForm.d.ts

@@ -18,7 +18,11 @@ export declare namespace FormFieldError {
         };
         type PasswordPolicy = {
             type: 'passwordPolicy';
-            name: keyof PasswordPolicies;
+            /**
+             * passwordHistory and forceExpiredPasswordChange can't be validated client side
+             * (they require the stored credentials), they are only informative.
+             */
+            name: Exclude<keyof PasswordPolicies, 'passwordHistory' | 'forceExpiredPasswordChange'>;
         };
         type Server = {
             type: 'server';

package/keycloakify-vue/login/pages/PageProps.d.ts

@@ -1,7 +1,7 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 export type PageProps<NarrowedKcContext, I18n> = {
-    Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+    Template: Component;
     kcContext: NarrowedKcContext;
     i18n: I18n;
     doUseDefaultCss: boolean;

package/package.json

@@ -16,7 +16,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "files": [
     "keycloakify-vue",
@@ -48,8 +48,8 @@
     "_keycloakify-custom-handler": "keycloakify-vue/bin/index.js"
   },
   "peerDependencies": {
-    "keycloakify": "^11.16.0",
-    "vue": "^3.5.0"
+    "keycloakify": "^11.16.4",
+    "vue": "^3.5.44"
   },
   "dependencies": {
     "tsafe": "^1.8.12"
@@ -72,7 +72,7 @@
     "eslint-plugin-vue": "^10.2.0",
     "globals": "^17.6.0",
     "jsdom": "^29.1.1",
-    "keycloakify": "^11.16.0",
+    "keycloakify": "^11.16.4",
     "prettier": "^3.8.3",
     "publint": "^0.3.21",
     "storybook": "^10",
@@ -81,7 +81,7 @@
     "typescript-eslint": "^8.60.1",
     "vite": "^8.0.16",
     "vitest": "^4.1.9",
-    "vue": "^3.5.38",
+    "vue": "^3.5.44",
     "vue-eslint-parser": "^10.1.3",
     "vue-tsc": "^3.3.5"
   },

package/src/account/pages/PageProps.ts

@@ -1,8 +1,15 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 
 export type PageProps<NarrowedKcContext, I18n> = {
-  Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+  // Template — это общий shell, который host прокидывает в страницу как есть (импортированный
+  // Template.vue). Его тип — `__VLS_WithSlots<DefineComponent<...>>`, и он структурно НЕ
+  // присваивается к `Component<TemplateProps<...>>`: расходятся и форма пропсов SFC, и параметр
+  // I18n (у host-темы I18n может быть расширен своими message-ключами). В keycloakify-react это
+  // не всплывает — там компонент это функция, а функции контравариантны по пропсам. В Vue же
+  // строгий чекер (vize) такое присваивание роняет. Страница Template не типизирует (только
+  // прокидывает во враппер), поэтому берём непараметризованный `Component`.
+  Template: Component;
   kcContext: NarrowedKcContext;
   i18n: I18n;
   doUseDefaultCss: boolean;

package/src/login/lib/useUserProfileForm.ts

@@ -25,7 +25,11 @@ export namespace FormFieldError {
     export type Validator = { type: 'validator'; name: keyof Validators };
     export type PasswordPolicy = {
       type: 'passwordPolicy';
-      name: keyof PasswordPolicies;
+      /**
+       * passwordHistory and forceExpiredPasswordChange can't be validated client side
+       * (they require the stored credentials), they are only informative.
+       */
+      name: Exclude<keyof PasswordPolicies, 'passwordHistory' | 'forceExpiredPasswordChange'>;
     };
     export type Server = { type: 'server' };
     export type Other = {

package/src/login/pages/PageProps.ts

@@ -1,8 +1,15 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 
 export type PageProps<NarrowedKcContext, I18n> = {
-  Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+  // Template — это общий shell, который host прокидывает в страницу как есть (импортированный
+  // Template.vue). Его тип — `__VLS_WithSlots<DefineComponent<...>>`, и он структурно НЕ
+  // присваивается к `Component<TemplateProps<...>>`: расходятся и форма пропсов SFC, и параметр
+  // I18n (у host-темы I18n может быть расширен своими message-ключами). В keycloakify-react это
+  // не всплывает — там компонент это функция, а функции контравариантны по пропсам. В Vue же
+  // строгий чекер (vize) такое присваивание роняет. Страница Template не типизирует (только
+  // прокидывает во враппер), поэтому берём непараметризованный `Component`.
+  Template: Component;
   kcContext: NarrowedKcContext;
   i18n: I18n;
   doUseDefaultCss: boolean;