@keycloakify/angular 0.0.11 → 0.1.0

package/bin/main.js

@@ -102,6 +102,13 @@ module.exports = require("fs");
 
 /***/ }),
 
+/***/ 943:
+/***/ ((module) => {
+
+module.exports = require("fs/promises");
+
+/***/ }),
+
 /***/ 161:
 /***/ ((module) => {
 
@@ -130,6 +137,13 @@ module.exports = require("path");
 
 /***/ }),
 
+/***/ 824:
+/***/ ((module) => {
+
+module.exports = require("prettier");
+
+/***/ }),
+
 /***/ 785:
 /***/ ((module) => {
 
@@ -319,6 +333,36 @@ const assertIsRefWrapper = {
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/create fake namespace object */
+/******/ 	(() => {
+/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
+/******/ 		var leafPrototypes;
+/******/ 		// create a fake namespace object
+/******/ 		// mode & 1: value is a module id, require it
+/******/ 		// mode & 2: merge all properties of value into the ns
+/******/ 		// mode & 4: return value when already ns object
+/******/ 		// mode & 16: return value when it's Promise-like
+/******/ 		// mode & 8|1: behave like require
+/******/ 		__nccwpck_require__.t = function(value, mode) {
+/******/ 			if(mode & 1) value = this(value);
+/******/ 			if(mode & 8) return value;
+/******/ 			if(typeof value === 'object' && value) {
+/******/ 				if((mode & 4) && value.__esModule) return value;
+/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
+/******/ 			}
+/******/ 			var ns = Object.create(null);
+/******/ 			__nccwpck_require__.r(ns);
+/******/ 			var def = {};
+/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
+/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
+/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
+/******/ 			}
+/******/ 			def['default'] = () => (value);
+/******/ 			__nccwpck_require__.d(ns, def);
+/******/ 			return ns;
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -358,6 +402,17 @@ const assertIsRefWrapper = {
 /******/ 		__nccwpck_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__nccwpck_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/compat */
 /******/ 	
 /******/ 	if (typeof __nccwpck_require__ !== 'undefined') __nccwpck_require__.ab = __dirname + "/";
@@ -439,19 +494,19 @@ const { buildContext, commandName } = readParams({ apiVersion: 'v1' });
     switch (commandName) {
         case 'add-story':
             {
-                console.log("Not yet supported by @keycloakify/angular, we're working on it!");
-                process.exit(-1);
+                const { command } = await Promise.all(/* import() */[__nccwpck_require__.e(402), __nccwpck_require__.e(108)]).then(__nccwpck_require__.bind(__nccwpck_require__, 108));
+                command({ buildContext });
             }
             return;
         case 'eject-page':
             {
-                const { command } = await Promise.all(/* import() */[__nccwpck_require__.e(603), __nccwpck_require__.e(925)]).then(__nccwpck_require__.bind(__nccwpck_require__, 925));
+                const { command } = await Promise.all(/* import() */[__nccwpck_require__.e(402), __nccwpck_require__.e(84)]).then(__nccwpck_require__.bind(__nccwpck_require__, 84));
                 command({ buildContext });
             }
             return;
         case 'update-kc-gen':
             {
-                const { command } = await Promise.all(/* import() */[__nccwpck_require__.e(603), __nccwpck_require__.e(758)]).then(__nccwpck_require__.bind(__nccwpck_require__, 758));
+                const { command } = await __nccwpck_require__.e(/* import() */ 758).then(__nccwpck_require__.bind(__nccwpck_require__, 758));
                 command({ buildContext });
             }
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/angular",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "peerDependencies": {
     "keycloakify": "^11.3.16",
     "@angular/core": "^18.0.0",

package/src/bin/add-story.ts

@@ -0,0 +1,126 @@
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import chalk from 'chalk';
+import { runPrettier, getIsPrettierAvailable } from './tools/runPrettier';
+import {
+    type BuildContext,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES
+} from './core';
+
+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;
+            }
+            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];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentBasename = pageId.replace(/ftl$/, 'stories.ts');
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        'pages',
+        pageId.replace(/\.ftl$/, ''),
+        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')
+        .replace(/["']\.\.\/KcPageStory["']/, "'../../KcPageStory'");
+
+    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('npm run storybook')}`
+        ].join('\n')
+    );
+}

package/src/bin/eject-page.ts

@@ -21,11 +21,11 @@ import {
 } from 'path';
 import { assert, Equals } from 'tsafe/assert';
 import chalk from 'chalk';
-import { transformCodebase } from './tools/transformCodebase';
+import { transformCodebase } from './tools/transformCodebase_async';
 import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
 import { replaceAll } from './tools/String.prototype.replaceAll';
 import { capitalize } from 'tsafe/capitalize';
-import { runFormat } from './tools/runFormat';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
 
 export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
@@ -149,15 +149,33 @@ export async function command(params: { buildContext: BuildContext }) {
                 themeType
             );
 
-            transformCodebase({
+            await transformCodebase({
                 srcDirPath: pathJoin(
                     localThemeTypeDirPath,
                     componentDirRelativeToThemeTypePath_i
                 ),
                 destDirPath,
-                transformSourceCode: ({ filePath, sourceCode }) => {
+                transformSourceCode: async ({ filePath, sourceCode }) => {
                     if (!filePath.endsWith('.ts')) {
-                        return { modifiedSourceCode: sourceCode };
+                        let modifiedSourceCode_str = sourceCode.toString('utf8');
+
+                        run_prettier: {
+                            if (!(await getIsPrettierAvailable())) {
+                                break run_prettier;
+                            }
+
+                            modifiedSourceCode_str = await runPrettier({
+                                filePath,
+                                sourceCode: modifiedSourceCode_str
+                            });
+                        }
+
+                        return {
+                            modifiedSourceCode: Buffer.from(
+                                modifiedSourceCode_str,
+                                'utf8'
+                            )
+                        };
                     }
 
                     if (filePath.endsWith('index.ts')) {
@@ -229,6 +247,17 @@ export async function command(params: { buildContext: BuildContext }) {
                         }
                     );
 
+                    run_prettier: {
+                        if (!(await getIsPrettierAvailable())) {
+                            break run_prettier;
+                        }
+
+                        modifiedSourceCode_str = await runPrettier({
+                            filePath,
+                            sourceCode: modifiedSourceCode_str
+                        });
+                    }
+
                     return {
                         modifiedSourceCode: Buffer.from(modifiedSourceCode_str, 'utf8')
                     };
@@ -243,10 +272,6 @@ export async function command(params: { buildContext: BuildContext }) {
         }
     }
 
-    runFormat({
-        packageJsonFilePath: buildContext.packageJsonFilePath
-    });
-
     edit_KcPage: {
         if (
             pageIdOrComponent !== templateValue &&
@@ -263,17 +288,30 @@ export async function command(params: { buildContext: BuildContext }) {
 
         const kcAppTsCode = fs.readFileSync(kcAppTsFilePath).toString('utf8');
 
-        const modifiedKcAppTsCode = (() => {
+        const modifiedKcAppTsCode = await (async () => {
             const componentRelativeDirPath_posix = componentDirRelativeToThemeTypePath
                 .split(pathSep)
                 .join('/');
 
-            return kcAppTsCode.replace(
+            let sourceCode = kcAppTsCode.replace(
                 `@keycloakify/angular/${themeType}/${componentRelativeDirPath_posix}`,
                 componentRelativeDirPath_posix_to_componentRelativeFilePath_posix({
                     componentRelativeDirPath_posix: `./${componentRelativeDirPath_posix}`
                 })
             );
+
+            run_prettier: {
+                if (!(await getIsPrettierAvailable())) {
+                    break run_prettier;
+                }
+
+                sourceCode = await runPrettier({
+                    filePath: kcAppTsFilePath,
+                    sourceCode
+                });
+            }
+
+            return sourceCode;
         })();
 
         if (modifiedKcAppTsCode === kcAppTsCode) {

package/src/bin/main.ts

@@ -8,10 +8,8 @@ const { buildContext, commandName } = readParams({ apiVersion: 'v1' });
     switch (commandName) {
         case 'add-story':
             {
-                console.log(
-                    "Not yet supported by @keycloakify/angular, we're working on it!"
-                );
-                process.exit(-1);
+                const { command } = await import('./add-story');
+                command({ buildContext });
             }
             return;
         case 'eject-page':

package/src/bin/tools/nodeModulesBinDirPath.ts

@@ -0,0 +1,38 @@
+import { sep as pathSep } from 'path';
+
+let cache: string | undefined = undefined;
+
+export function getNodeModulesBinDirPath() {
+    if (cache !== undefined) {
+        return cache;
+    }
+
+    const binPath = process.argv[1];
+
+    const segments: string[] = ['.bin'];
+
+    let foundNodeModules = false;
+
+    for (const segment of binPath.split(pathSep).reverse()) {
+        skip_segment: {
+            if (foundNodeModules) {
+                break skip_segment;
+            }
+
+            if (segment === 'node_modules') {
+                foundNodeModules = true;
+                break skip_segment;
+            }
+
+            continue;
+        }
+
+        segments.unshift(segment);
+    }
+
+    const nodeModulesBinDirPath = segments.join(pathSep);
+
+    cache = nodeModulesBinDirPath;
+
+    return nodeModulesBinDirPath;
+}

package/src/bin/tools/runPrettier.ts

@@ -0,0 +1,89 @@
+import { getNodeModulesBinDirPath } from './nodeModulesBinDirPath';
+import { join as pathJoin } from 'path';
+import * as fsPr from 'fs/promises';
+import { id } from 'tsafe/id';
+import { assert } from 'tsafe/assert';
+import chalk from 'chalk';
+
+getIsPrettierAvailable.cache = id<boolean | undefined>(undefined);
+
+export async function getIsPrettierAvailable(): Promise<boolean> {
+    if (getIsPrettierAvailable.cache !== undefined) {
+        return getIsPrettierAvailable.cache;
+    }
+
+    const nodeModulesBinDirPath = getNodeModulesBinDirPath();
+
+    const prettierBinPath = pathJoin(nodeModulesBinDirPath, 'prettier');
+
+    const stats = await fsPr.stat(prettierBinPath).catch(() => undefined);
+
+    const isPrettierAvailable = stats?.isFile() ?? false;
+
+    getIsPrettierAvailable.cache = isPrettierAvailable;
+
+    return isPrettierAvailable;
+}
+
+type PrettierAndConfig = {
+    prettier: typeof import('prettier');
+    config: import('prettier').Options | null;
+};
+
+getPrettierAndConfig.cache = id<PrettierAndConfig | undefined>(undefined);
+
+export async function getPrettierAndConfig(): Promise<PrettierAndConfig> {
+    assert(getIsPrettierAvailable());
+
+    if (getPrettierAndConfig.cache !== undefined) {
+        return getPrettierAndConfig.cache;
+    }
+
+    const prettier = await import('prettier');
+
+    const prettierAndConfig: PrettierAndConfig = {
+        prettier,
+        config: await prettier.resolveConfig(pathJoin(getNodeModulesBinDirPath(), '..'))
+    };
+
+    getPrettierAndConfig.cache = prettierAndConfig;
+
+    return prettierAndConfig;
+}
+
+export async function runPrettier(params: {
+    sourceCode: string;
+    filePath: string;
+}): Promise<string> {
+    const { sourceCode, filePath } = params;
+
+    let formattedSourceCode: string;
+
+    try {
+        const { prettier, config } = await getPrettierAndConfig();
+
+        const { ignored, inferredParser } = await prettier.getFileInfo(filePath, {
+            resolveConfig: true
+        });
+
+        if (ignored) {
+            return sourceCode;
+        }
+
+        formattedSourceCode = await prettier.format(sourceCode, {
+            ...config,
+            filePath,
+            parser: inferredParser ?? undefined
+        });
+    } catch (error) {
+        console.log(
+            chalk.red(
+                `You probably need to upgrade the version of prettier in your project`
+            )
+        );
+
+        throw error;
+    }
+
+    return formattedSourceCode;
+}

package/src/bin/tools/transformCodebase_async.ts

@@ -0,0 +1,89 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { crawl } from './crawl';
+import { rmSync } from '../tools/fs.rmSync';
+
+type TransformSourceCode = (params: {
+    sourceCode: Buffer;
+    filePath: string;
+    fileRelativePath: string;
+}) => Promise<
+    | {
+          modifiedSourceCode: Buffer;
+          newFileName?: string;
+      }
+    | undefined
+>;
+
+/**
+ * Apply a transformation function to every file of directory
+ * If source and destination are the same this function can be used to apply the transformation in place
+ * like filtering out some files or modifying them.
+ * */
+export async function transformCodebase(params: {
+    srcDirPath: string;
+    destDirPath: string;
+    transformSourceCode?: TransformSourceCode;
+}) {
+    const { srcDirPath, transformSourceCode } = params;
+
+    const isTargetSameAsSource = path.relative(srcDirPath, params.destDirPath) === '';
+
+    const destDirPath = isTargetSameAsSource
+        ? path.join(srcDirPath, '..', 'tmp_xOsPdkPsTdzPs34sOkHs')
+        : params.destDirPath;
+
+    fs.mkdirSync(destDirPath, {
+        recursive: true
+    });
+
+    for (const fileRelativePath of crawl({
+        dirPath: srcDirPath,
+        returnedPathsType: 'relative to dirPath'
+    })) {
+        const filePath = path.join(srcDirPath, fileRelativePath);
+        const destFilePath = path.join(destDirPath, fileRelativePath);
+
+        // NOTE: Optimization, if we don't need to transform the file, just copy
+        // it using the lower level implementation.
+        if (transformSourceCode === undefined) {
+            fs.mkdirSync(path.dirname(destFilePath), {
+                recursive: true
+            });
+
+            fs.copyFileSync(filePath, destFilePath);
+
+            continue;
+        }
+
+        const transformSourceCodeResult = await transformSourceCode({
+            sourceCode: fs.readFileSync(filePath),
+            filePath,
+            fileRelativePath
+        });
+
+        if (transformSourceCodeResult === undefined) {
+            continue;
+        }
+
+        fs.mkdirSync(path.dirname(destFilePath), {
+            recursive: true
+        });
+
+        const { newFileName, modifiedSourceCode } = transformSourceCodeResult;
+
+        fs.writeFileSync(
+            path.join(
+                path.dirname(destFilePath),
+                newFileName ?? path.basename(destFilePath)
+            ),
+            modifiedSourceCode
+        );
+    }
+
+    if (isTargetSameAsSource) {
+        rmSync(srcDirPath, { recursive: true });
+
+        fs.renameSync(destDirPath, srcDirPath);
+    }
+}

package/src/bin/update-kc-gen.ts

@@ -1,10 +1,10 @@
 import type { BuildContext } from './core';
 import * as fs from 'fs';
 import { join as pathJoin } from 'path';
-import { runFormat } from './tools/runFormat';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
 import * as crypto from 'crypto';
 
-export function command(params: { buildContext: BuildContext }) {
+export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
 
     const filePath = pathJoin(buildContext.themeSrcDirPath, 'kc.gen.ts');
@@ -149,18 +149,23 @@ export function command(params: { buildContext: BuildContext }) {
         return;
     }
 
-    fs.writeFileSync(
-        filePath,
-        Buffer.from(
-            [
-                `// This file is auto-generated by keycloakify. Do not edit it manually.`,
-                `// Hash: ${hash}`,
-                ``,
-                newContent
-            ].join('\n'),
-            'utf8'
-        )
-    );
+    let sourceCode = [
+        `// This file is auto-generated by keycloakify. Do not edit it manually.`,
+        `// Hash: ${hash}`,
+        ``,
+        newContent
+    ].join('\n');
+
+    run_prettier: {
+        if (!(await getIsPrettierAvailable())) {
+            break run_prettier;
+        }
+
+        sourceCode = await runPrettier({
+            filePath,
+            sourceCode
+        });
+    }
 
-    runFormat({ packageJsonFilePath: buildContext.packageJsonFilePath });
+    fs.writeFileSync(filePath, Buffer.from(sourceCode, 'utf8'));
 }