keycloakify 6.0.0-beta.7 → 6.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.0.0-beta.7",
+    "version": "6.0.0-beta.8",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -320,6 +320,7 @@
         "src/lib/tools/emailRegExp.ts",
         "src/lib/tools/headInsert.ts",
         "src/lib/tools/pathBasename.ts",
+        "src/lib/tools/useCssAndCx.ts",
         "src/lib/tsconfig.json",
         "src/lib/useFormValidationSlice.tsx",
         "src/test/bin/generateKeycloakThemeResources.ts",
@@ -1210,6 +1211,9 @@
         "lib/tools/pathBasename.d.ts",
         "lib/tools/pathBasename.js",
         "lib/tools/pathBasename.js.map",
+        "lib/tools/useCssAndCx.d.ts",
+        "lib/tools/useCssAndCx.js",
+        "lib/tools/useCssAndCx.js.map",
         "lib/tsconfig.tsbuildinfo",
         "lib/useFormValidationSlice.d.ts",
         "lib/useFormValidationSlice.js",
@@ -1248,15 +1252,15 @@
         "@octokit/rest": "^18.12.0",
         "cheerio": "^1.0.0-rc.5",
         "cli-select": "^1.1.2",
-        "evt": "^2.3.1",
+        "evt": "^2.4.0",
         "memoizee": "^0.4.15",
-        "minimal-polyfills": "^2.2.1",
+        "minimal-polyfills": "^2.2.2",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.10",
+        "powerhooks": "^0.20.15",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tsafe": "^0.10.1",
-        "tss-react": "^3.7.1",
+        "tsafe": "^1.0.1",
+        "tss-react": "^4.0.0",
         "zod": "^3.17.10"
     }
 }

package/src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -44,6 +44,8 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; build
         new RegExp(`([a-zA-Z]+)\\.([a-zA-Z]+)=function\\(([a-zA-Z]+)\\){return"static\\/${language}\\/"`, "g"),
         (...[, n, u, e]) => `
 			${n}[(function(){
+                var pd= Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
                 ${
                     buildOptions.isStandalone
                         ? `
@@ -59,6 +61,7 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string; build
                         set: function (value){ p = value;}
                     });
                     `
+                }
                 }
 				return "${u}";
 			})()] = function(${e}) { return "${buildOptions.isStandalone ? "/build/" : ""}static/${language}/"`

package/src/bin/link_in_test_app.ts

@@ -1,5 +1,6 @@
 import { execSync } from "child_process";
 import { join as pathJoin, relative as pathRelative } from "path";
+import { exclude } from "tsafe/exclude";
 import * as fs from "fs";
 
 const keycloakifyDirPath = pathJoin(__dirname, "..", "..");
@@ -60,11 +61,34 @@ const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
     });
 };
 
-const testAppNames = [process.argv[2] ?? "keycloakify-demo-app"] as const;
+const testAppPaths = (() => {
+    const arg = process.argv[2];
 
-const getTestAppPath = (testAppName: typeof testAppNames[number]) => pathJoin(keycloakifyDirPath, "..", testAppName);
+    const testAppNames = arg !== undefined ? [arg] : ["keycloakify-starter", "keycloakify-advanced-starter"];
 
-testAppNames.forEach(testAppName => execSync("yarn install", { "cwd": getTestAppPath(testAppName) }));
+    return testAppNames
+        .map(testAppName => {
+            const testAppPath = pathJoin(keycloakifyDirPath, "..", testAppName);
+
+            if (fs.existsSync(testAppPath)) {
+                return testAppPath;
+            }
+
+            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
+
+            return undefined;
+        })
+        .filter(exclude(undefined));
+})();
+
+console.log(testAppPaths);
+
+if (testAppPaths.length === 0) {
+    console.error("No test app to link into!");
+    process.exit(-1);
+}
+
+testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
 
 console.log("=== Linking common dependencies ===");
 
@@ -81,22 +105,24 @@ commonThirdPartyDeps.forEach(commonThirdPartyDep => {
     );
 
     execYarnLink({ "cwd": localInstallPath });
+});
 
-    testAppNames.forEach(testAppName =>
+commonThirdPartyDeps.forEach(commonThirdPartyDep =>
+    testAppPaths.forEach(testAppPath =>
         execYarnLink({
-            "cwd": getTestAppPath(testAppName),
+            "cwd": testAppPath,
             "targetModuleName": commonThirdPartyDep
         })
-    );
-});
+    )
+);
 
 console.log("=== Linking in house dependencies ===");
 
 execYarnLink({ "cwd": pathJoin(keycloakifyDirPath, "dist") });
 
-testAppNames.forEach(testAppName =>
+testAppPaths.forEach(testAppPath =>
     execYarnLink({
-        "cwd": getTestAppPath(testAppName),
+        "cwd": testAppPath,
         "targetModuleName": "keycloakify"
     })
 );

package/src/lib/components/Login.tsx

@@ -2,7 +2,7 @@ import React, { useState, memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { FormEventHandler } from "react";
 import type { I18n } from "../i18n";

package/src/lib/components/LoginConfigTotp.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n } & KcProps) => {

package/src/lib/components/LoginIdpLinkConfirm.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n } & KcProps) => {

package/src/lib/components/LoginOtp.tsx

@@ -4,7 +4,7 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { headInsert } from "../tools/headInsert";
 import { pathJoin } from "../../bin/tools/pathJoin";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginOtp; i18n: I18n } & KcProps) => {

package/src/lib/components/LoginResetPassword.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n } & KcProps) => {

package/src/lib/components/LoginUpdatePassword.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n } & KcProps) => {

package/src/lib/components/LoginUpdateProfile.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n } & KcProps) => {

package/src/lib/components/LogoutConfirm.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from "react";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";

package/src/lib/components/Register.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Register; i18n: I18n } & KcProps) => {

package/src/lib/components/RegisterUserProfile.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, memo, useEffect, useState, Fragment } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase, Attribute } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { ReactComponent } from "../tools/ReactComponent";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { useFormValidationSlice } from "../useFormValidationSlice";

package/src/lib/components/Template.tsx

@@ -7,7 +7,7 @@ import { headInsert } from "../tools/headInsert";
 import { pathJoin } from "../../bin/tools/pathJoin";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
 export type TemplateProps = {

package/src/lib/components/Terms.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, memo } from "react";
 import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import { Evt } from "evt";
 import { useRerenderOnStateChange } from "evt/hooks";
 import { assert } from "tsafe/assert";

package/src/lib/tools/useCssAndCx.ts

@@ -0,0 +1,11 @@
+import { createMakeStyles } from "tss-react";
+
+const { useStyles } = createMakeStyles({
+    "useTheme": () => ({})
+});
+
+export function useCssAndCx() {
+    const { css, cx } = useStyles();
+
+    return { css, cx };
+}

package/src/test/bin/replaceImportFromStatic.ts

@@ -55,10 +55,13 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
             }
 
             n[(function (){
-                Object.defineProperty(n, "p", {
-                    get: function() { return window.kcContext.url.resourcesPath; },
-                    set: function (){}
-                });
+                var pd= Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
+                    Object.defineProperty(n, "p", {
+                        get: function() { return window.kcContext.url.resourcesPath; },
+                        set: function (){}
+                    });
+                }
                 return "u";
             })()] = function(e) {
                 return "/build/static/js/" + e + "." + {
@@ -69,10 +72,13 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
             }
 
             t[(function (){
-                Object.defineProperty(t, "p", {
-                    get: function() { return window.kcContext.url.resourcesPath; },
-                    set: function (){}
-                });
+                var pd= Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
+                    Object.defineProperty(t, "p", {
+                        get: function() { return window.kcContext.url.resourcesPath; },
+                        set: function (){}
+                    });
+                }
                 return "miniCssF";
             })()] = function(e) {
                 return "/build/static/css/" + e + "." + {
@@ -109,11 +115,14 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
             }
 
             n[(function (){
-                var p= "";
-                Object.defineProperty(n, "p", {
-                    get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
-                    set: function (value){ p = value; }
-                });
+                var pd= Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
+                    var p= "";
+                    Object.defineProperty(n, "p", {
+                        get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
+                        set: function (value){ p = value; }
+                    });
+                }
                 return "u";
             })()] = function(e) {
                 return "static/js/" + e + "." + {
@@ -124,11 +133,14 @@ import { assetIsSameCode } from "../tools/assertIsSameCode";
             }
 
             t[(function (){
-                var p= "";
-                Object.defineProperty(t, "p", {
-                    get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
-                    set: function (value){ p = value; }
-                });
+                var pd= Object.getOwnPropertyDescriptor(n, "p");
+                if( pd === undefined || pd.configurable ){
+                    var p= "";
+                    Object.defineProperty(t, "p", {
+                        get: function() { return ("kcContext" in window ? "https://demo-app.keycloakify.dev" : "") + p; },
+                        set: function (value){ p = value; }
+                    });
+                }
                 return "miniCssF";
             })()] = function(e) {
                 return "static/css/" + e + "." + {