@keycloakify/svelte 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -415,8 +415,6 @@
     "src",
     "!src/**/*.test.*",
     "!src/**/*.spec.*",
-    "!src/bin",
-    "!src/tools",
     "package.json",
     "README.md",
     "LICENSE"
@@ -429,39 +427,43 @@
     "svelte:check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "_format": "prettier '**/*.{ts,html,json,md,svelte}'",
     "format": "yarn _format --write",
-    "lint": "yarn format && eslint . --fix"
+    "lint": "yarn format && eslint . --fix",
+    "changelog": "npx conventional-changelog -t -p angular -i CHANGELOG.md -s -r 0",
+    "release": "sh scripts/release.sh"
   },
   "peerDependencies": {
     "keycloakify": "^11.7.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.8.3",
-    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.2",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.9.3",
+    "@types/node": "^22.10.7",
     "@vercel/ncc": "^0.38.3",
+    "conventional-changelog-cli": "^5.0.0",
+    "cz-conventional-changelog": "^3.3.0",
     "cli-select": "^1.1.2",
-    "eslint": "9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-svelte": "^2.46.0",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-svelte": "^2.46.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^15.12.0",
-    "keycloakify": "^11.7.0",
-    "npm-check-updates": "^17.1.11",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.3.2",
-    "publint": "^0.2.12",
-    "svelte": "^5.2.8",
-    "svelte-check": "^4.1.0",
+    "globals": "^15.14.0",
+    "keycloakify": "^11.8.9",
+    "npm-check-updates": "^17.1.14",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "0.2.12",
+    "svelte": "^5.19.1",
+    "svelte-check": "^4.1.4",
     "tsx": "^4.19.2",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "vite": "^5.4.11",
-    "zod": "^3.23.8"
+    "typescript-eslint": "^8.21.0",
+    "vite": "^6.0.11",
+    "zod": "^3.24.1"
   },
   "bin": {
     "_keycloakify-custom-handler": "keycloakify-svelte/bin/index.js"

package/src/bin/add-story.ts

@@ -0,0 +1,117 @@
+import chalk from 'chalk';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { dirname as pathDirname, join as pathJoin, relative as pathRelative } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import { capitalize } from 'tsafe/capitalize';
+import {
+  ACCOUNT_THEME_PAGE_IDS,
+  type AccountThemePageId,
+  type BuildContext,
+  LOGIN_THEME_PAGE_IDS,
+  type LoginThemePageId,
+  THEME_TYPES,
+} from './core';
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  console.log(chalk.cyan('Theme type:'));
+
+  const themeType = await (async () => {
+    const values = THEME_TYPES.filter((themeType) => {
+      switch (themeType) {
+        case 'account':
+          return buildContext.implementedThemeTypes.account.isImplemented;
+        case 'login':
+          return buildContext.implementedThemeTypes.login.isImplemented;
+        case 'admin':
+          return false;
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    });
+
+    assert(values.length > 0, 'No theme is implemented in this project');
+
+    if (values.length === 1) {
+      return values[0];
+    }
+
+    const { value } = await cliSelect({
+      values,
+    }).catch(() => {
+      process.exit(-1);
+    });
+
+    return value;
+  })();
+
+  console.log(`→ ${themeType}`);
+
+  console.log(chalk.cyan('Select the page you want to create a Storybook for:'));
+
+  const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+    values: (() => {
+      switch (themeType) {
+        case 'login':
+          return [...LOGIN_THEME_PAGE_IDS];
+        case 'account':
+          return [...ACCOUNT_THEME_PAGE_IDS];
+        case 'admin':
+          return [];
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    })(),
+  }).catch(() => {
+    process.exit(-1);
+  });
+
+  console.log(`→ ${pageId}`);
+
+  const componentBasename = capitalize(kebabCaseToCamelCase(pageId.replace(/ftl$/, ''))) + 'stories.svelte';
+
+  const targetFilePath = pathJoin(buildContext.themeSrcDirPath, themeType, 'pages', componentBasename);
+
+  if (fs.existsSync(targetFilePath)) {
+    console.log(`${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+    process.exit(-1);
+  }
+
+  let sourceCode = fs
+    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), 'stories', themeType, 'pages', componentBasename))
+    .toString('utf8');
+
+  run_prettier: {
+    if (!(await getIsPrettierAvailable())) {
+      break run_prettier;
+    }
+
+    sourceCode = await runPrettier({
+      filePath: targetFilePath,
+      sourceCode: sourceCode,
+    });
+  }
+
+  {
+    const targetDirPath = pathDirname(targetFilePath);
+
+    if (!fs.existsSync(targetDirPath)) {
+      fs.mkdirSync(targetDirPath, { recursive: true });
+    }
+  }
+
+  fs.writeFileSync(targetFilePath, Buffer.from(sourceCode, 'utf8'));
+
+  console.log(
+    [
+      `${chalk.green('✓')} ${chalk.bold(
+        pathJoin('.', pathRelative(process.cwd(), targetFilePath)),
+      )} copy pasted from the Keycloakify source code into your project`,
+      `You can start storybook with ${chalk.bold('yarn run storybook')}`,
+    ].join('\n'),
+  );
+}

package/src/bin/core.ts

@@ -0,0 +1,10 @@
+export type { BuildContext } from 'keycloakify/bin/shared/buildContext';
+export {
+  ACCOUNT_THEME_PAGE_IDS,
+  LOGIN_THEME_PAGE_IDS,
+  THEME_TYPES,
+  type AccountThemePageId,
+  type LoginThemePageId,
+  type ThemeType,
+} from 'keycloakify/bin/shared/constants';
+export { BIN_NAME, NOT_IMPLEMENTED_EXIT_CODE, readParams } from 'keycloakify/bin/shared/customHandler';

package/src/bin/eject-page.ts

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { dirname as pathDirname, join as pathJoin, relative as pathRelative } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import { capitalize } from 'tsafe/capitalize';
+import {
+  ACCOUNT_THEME_PAGE_IDS,
+  type AccountThemePageId,
+  type BuildContext,
+  LOGIN_THEME_PAGE_IDS,
+  type LoginThemePageId,
+  THEME_TYPES,
+} from './core';
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  console.log(chalk.cyan('Theme type:'));
+
+  const themeType = await (async () => {
+    const values = THEME_TYPES.filter((themeType) => {
+      switch (themeType) {
+        case 'account':
+          return buildContext.implementedThemeTypes.account.isImplemented;
+        case 'login':
+          return buildContext.implementedThemeTypes.login.isImplemented;
+        case 'admin':
+          return buildContext.implementedThemeTypes.admin.isImplemented;
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    });
+
+    assert(values.length > 0, 'No theme is implemented in this project');
+
+    if (values.length === 1) {
+      return values[0];
+    }
+
+    const { value } = await cliSelect({
+      values,
+    }).catch(() => {
+      process.exit(-1);
+    });
+
+    return value;
+  })();
+
+  console.log(`→ ${themeType}`);
+
+  console.log(chalk.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 cliSelect<
+    | LoginThemePageId
+    | AccountThemePageId
+    | typeof templateValue
+    | typeof userProfileFormFieldsValue
+    | typeof otherPageValue
+  >({
+    values: (() => {
+      switch (themeType) {
+        case 'login':
+          return [templateValue, userProfileFormFieldsValue, ...LOGIN_THEME_PAGE_IDS, otherPageValue];
+        case 'account':
+          return [templateValue, ...ACCOUNT_THEME_PAGE_IDS, otherPageValue];
+        case 'admin':
+          return [];
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    })(),
+  }).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) {
+      return 'Template.svelte';
+    }
+
+    if (pageIdOrComponent === userProfileFormFieldsValue) {
+      return 'UserProfileFormFields.svelte';
+    }
+
+    return capitalize(kebabCaseToCamelCase(pageIdOrComponent)).replace(/ftl$/, 'svelte');
+  })();
+
+  const pagesOrDot = (() => {
+    if (pageIdOrComponent === templateValue || pageIdOrComponent === userProfileFormFieldsValue) {
+      return '.';
+    }
+
+    return 'pages';
+  })();
+
+  const targetFilePath = pathJoin(buildContext.themeSrcDirPath, themeType, pagesOrDot, componentBasename);
+
+  if (fs.existsSync(targetFilePath)) {
+    console.log(
+      `${pageIdOrComponent} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`,
+    );
+
+    process.exit(-1);
+  }
+
+  let componentCode = fs
+    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), 'src', themeType, pagesOrDot, componentBasename))
+    .toString('utf8');
+
+  run_prettier: {
+    if (!(await getIsPrettierAvailable())) {
+      break run_prettier;
+    }
+
+    componentCode = await runPrettier({
+      filePath: targetFilePath,
+      sourceCode: componentCode,
+    });
+  }
+
+  {
+    const targetDirPath = pathDirname(targetFilePath);
+
+    if (!fs.existsSync(targetDirPath)) {
+      fs.mkdirSync(targetDirPath, { recursive: true });
+    }
+  }
+
+  fs.writeFileSync(targetFilePath, Buffer.from(componentCode, 'utf8'));
+
+  console.log(
+    `${chalk.green('✓')} ${chalk.bold(
+      pathJoin('.', pathRelative(process.cwd(), targetFilePath)),
+    )} copy pasted from the Keycloakify source code into your project`,
+  );
+
+  edit_KcPage: {
+    if (pageIdOrComponent !== templateValue && pageIdOrComponent !== userProfileFormFieldsValue) {
+      break edit_KcPage;
+    }
+
+    const kcAppSveltePath = pathJoin(buildContext.themeSrcDirPath, themeType, 'KcPage.svelte');
+
+    const kcAppSvelteCode = fs.readFileSync(kcAppSveltePath).toString('utf8');
+
+    const modifiedKcAppSvelteCode = (() => {
+      switch (pageIdOrComponent) {
+        case templateValue:
+          return kcAppSvelteCode.replace(`@keycloakify/svelte/${themeType}/Template`, './Template');
+        case userProfileFormFieldsValue:
+          return kcAppSvelteCode.replace(`@keycloakify/svelte/login/UserProfileFormFields`, './UserProfileFormFields');
+      }
+      assert<Equals<typeof pageIdOrComponent, never>>(false);
+    })();
+
+    if (kcAppSvelteCode === modifiedKcAppSvelteCode) {
+      console.log(chalk.red('Unable to automatically update KcPage.svelte, please update it manually'));
+      return;
+    }
+
+    fs.writeFileSync(kcAppSveltePath, Buffer.from(modifiedKcAppSvelteCode, 'utf8'));
+
+    console.log(
+      `${chalk.green('✓')} ${chalk.bold(pathJoin('.', pathRelative(process.cwd(), kcAppSveltePath)))} Updated`,
+    );
+
+    return;
+  }
+
+  console.log(
+    [
+      ``,
+      `You now need to update your page router:`,
+      ``,
+      `${chalk.bold(
+        pathJoin('.', pathRelative(process.cwd(), buildContext.themeSrcDirPath), themeType, 'KcPage.svelte'),
+      )}:`,
+      chalk.grey('```'),
+      `// ...`,
+      ``,
+      ...(() => {
+        let inGreenBlock = false;
+        return [
+          ` const page = async () => {`,
+          `   switch (kcContext.pageId) {`,
+          `+`,
+          `    case '${pageIdOrComponent}':`,
+          `      return import('./pages/${componentBasename}"');`,
+          `+`,
+          `     //...`,
+          `     default:`,
+          `       return import('@keycloakify/svelte/login/DefaultPage.svelte');`,
+          `   }`,
+          ` }`,
+        ].map((line) => {
+          if (line === `+`) {
+            inGreenBlock = !inGreenBlock;
+          }
+          if (inGreenBlock || line.startsWith('+')) {
+            return chalk.green(line);
+          }
+          if (line.startsWith('-')) {
+            return chalk.red(line);
+          }
+          return chalk.grey(line);
+        });
+      })(),
+      chalk.grey('```'),
+    ].join('\n'),
+  );
+}

package/src/bin/initialize-account-theme/boilerplate/KcContext.ts

@@ -0,0 +1,11 @@
+import type { ExtendKcContext } from 'keycloakify/account';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+  themeName: ThemeName;
+  properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = Record<string, Record<string, unknown>>;
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/src/bin/initialize-account-theme/boilerplate/KcPage.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Template from '@keycloakify/svelte/account/Template.svelte';
+  import type { KcContext } from 'keycloakify/account/KcContext';
+  import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+  import { useI18n } from './i18n';
+
+  const { kcContext }: { kcContext: KcContext } = $props();
+
+  const { i18n } = useI18n({ kcContext });
+  const page = async () => {
+    switch (kcContext.pageId) {
+      default:
+        return import('@keycloakify/svelte/account/DefaultPage.svelte');
+    }
+  };
+
+  const classes = {} satisfies { [key in ClassKey]?: string };
+</script>
+
+{#await page() then { default: Page }}
+  <Page
+    {kcContext}
+    {i18n}
+    {classes}
+    {Template}
+    doUseDefaultCss={true}
+  ></Page>
+{/await}

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import KcPage from './KcPage.svelte';
+  import { getKcContextMock, type KcPageStoryProps } from './KcPageStory';
+
+  const { pageId, kcContext }: KcPageStoryProps = $props();
+  const kcContextMock = getKcContextMock({ pageId, overrides: kcContext });
+</script>
+
+<KcPage kcContext={kcContextMock} />

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.ts

@@ -0,0 +1,22 @@
+import { createGetKcContextMock } from 'keycloakify/account/KcContext';
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContext, KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+  themeName: themeNames[0],
+  properties: {
+    ...kcEnvDefaults,
+  },
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+  kcContextExtension,
+  kcContextExtensionPerPage,
+  overrides: {},
+  overridesPerPage: {},
+});
+
+type PageId = KcContext['pageId'];
+export type KcPageStoryProps = { pageId: PageId; kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> };

package/src/bin/initialize-account-theme/boilerplate/i18n.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { i18nBuilder } from '@keycloakify/svelte/account';
+import type { ThemeName } from '../kc.gen';
+
+/** @see: https://docs.keycloakify.dev/features/i18n */
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build();
+
+type I18n = typeof ofTypeI18n;
+export { useI18n, type I18n };

package/src/bin/initialize-account-theme/index.ts

@@ -0,0 +1 @@
+export * from './initialize-account-theme';

package/src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -0,0 +1,87 @@
+import chalk from 'chalk';
+import child_process from 'child_process';
+import * as fs from 'fs';
+import { join as pathJoin, relative as pathRelative } from 'path';
+import type { BuildContext } from '../core';
+import { getThisCodebaseRootDirPath } from '../tools/getThisCodebaseRootDirPath';
+import { command as updateKcGenCommand } from '../update-kc-gen';
+import { updateAccountThemeImplementationInConfig } from './updateAccountThemeImplementationInConfig';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  const accountThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, 'account');
+
+  if (fs.existsSync(accountThemeSrcDirPath) && fs.readdirSync(accountThemeSrcDirPath).length > 0) {
+    console.warn(
+      chalk.red(
+        `There is already a ${pathRelative(
+          process.cwd(),
+          accountThemeSrcDirPath,
+        )} directory in your project. Aborting.`,
+      ),
+    );
+
+    process.exit(-1);
+  }
+
+  exit_if_uncommitted_changes: {
+    let hasUncommittedChanges: boolean | undefined = undefined;
+
+    try {
+      hasUncommittedChanges =
+        child_process
+          .execSync(`git status --porcelain`, {
+            cwd: buildContext.projectDirPath,
+          })
+          .toString()
+          .trim() !== '';
+    } catch {
+      // Probably not a git repository
+      break exit_if_uncommitted_changes;
+    }
+
+    if (!hasUncommittedChanges) {
+      break exit_if_uncommitted_changes;
+    }
+    console.warn(
+      [
+        chalk.red('Please commit or stash your changes before running this command.\n'),
+        "This command will modify your project's files so it's better to have a clean working directory",
+        'so that you can easily see what has been changed and revert if needed.',
+      ].join(' '),
+    );
+
+    process.exit(-1);
+  }
+
+  const accountThemeType = 'Multi-Page';
+
+  fs.cpSync(
+    pathJoin(getThisCodebaseRootDirPath(), 'src', 'bin', 'initialize-account-theme', 'boilerplate'),
+    accountThemeSrcDirPath,
+    { recursive: true },
+  );
+
+  updateAccountThemeImplementationInConfig({ buildContext, accountThemeType });
+
+  updateKcGenCommand({
+    buildContext: {
+      ...buildContext,
+      implementedThemeTypes: {
+        ...buildContext.implementedThemeTypes,
+        account: {
+          isImplemented: true,
+          type: accountThemeType,
+        },
+      },
+    },
+  });
+
+  console.log(
+    [
+      chalk.green(`The ${accountThemeType} account theme has been initialized.`),
+      `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`,
+    ].join('\n'),
+  );
+}