import { replaceImportsInJsCode_vite } from "keycloakify/bin/keycloakify/replacers/replaceImportsInJsCode/vite"; import { replaceImportsInJsCode_webpack } from "keycloakify/bin/keycloakify/replacers/replaceImportsInJsCode/webpack"; import { replaceImportsInCssCode } from "keycloakify/bin/keycloakify/replacers/replaceImportsInCssCode"; import { expect, it, describe } from "vitest"; import { basenameOfTheKeycloakifyResourcesDir } from "keycloakify/bin/shared/constants"; describe("js replacer - vite", () => { it("replaceImportsInJsCode_vite - 1", () => { const before = `Uv="modulepreload",`; const after = `,Wc={},`; const jsCodeUntransformed = `${before}Hv=function(e){return"/foo-bar-baz/"+e}${after}`; const { fixedJsCode } = replaceImportsInJsCode_vite({ jsCode: jsCodeUntransformed, basenameOfAssetsFiles: [], buildContext: { projectBuildDirPath: "/Users/someone/github/keycloakify-starter/dist/", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/assets/", urlPathname: "/foo-bar-baz/" } }); const fixedJsCodeExpected = `${before}Hv=function(e){return"/"+e}${after}`; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); }); it("replaceImportsInJsCode_vite - 2", () => { const before = `Uv="modulepreload",`; const after = `,Wc={},`; const jsCodeUntransformed = `${before}Hv=function(e){return"/foo/bar/baz/"+e}${after}`; const { fixedJsCode } = replaceImportsInJsCode_vite({ jsCode: jsCodeUntransformed, basenameOfAssetsFiles: [], buildContext: { projectBuildDirPath: "/Users/someone/github/keycloakify-starter/dist/", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/assets/", urlPathname: "/foo/bar/baz/" } }); const fixedJsCodeExpected = `${before}Hv=function(e){return"/"+e}${after}`; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); }); it("replaceImportsInJsCode_vite - 3", () => { const jsCodeUntransformed = ` S="/assets/keycloakify-logo-mqjydaoZ.png",H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = ["assets/Login-dJpPRzM4.js", "assets/index-XwzrZ5Gu.js"] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; for (const { projectBuildDirPath, assetsDirPath, systemType } of [ { systemType: "posix", projectBuildDirPath: "/Users/someone/github/keycloakify-starter/dist", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/assets" }, { systemType: "win32", projectBuildDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist", assetsDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist\\assets" } ] as const) { const { fixedJsCode } = replaceImportsInJsCode_vite({ jsCode: jsCodeUntransformed, basenameOfAssetsFiles: [ "Login-dJpPRzM4.js", "index-XwzrZ5Gu.js", "keycloakify-logo-mqjydaoZ.png" ], buildContext: { projectBuildDirPath, assetsDirPath, urlPathname: undefined }, systemType }); const fixedJsCodeExpected = ` S=(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/assets/keycloakify-logo-mqjydaoZ.png"),H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = [ (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/assets/Login-dJpPRzM4.js"), (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/assets/index-XwzrZ5Gu.js") ] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); } }); it("replaceImportsInJsCode_vite - 4", () => { const jsCodeUntransformed = ` S="/foo/bar/keycloakify-logo-mqjydaoZ.png",H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = ["foo/bar/Login-dJpPRzM4.js", "foo/bar/index-XwzrZ5Gu.js"] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; for (const { projectBuildDirPath, assetsDirPath, systemType } of [ { systemType: "posix", projectBuildDirPath: "/Users/someone/github/keycloakify-starter/dist", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/foo/bar" }, { systemType: "win32", projectBuildDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist", assetsDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist\\foo\\bar" } ] as const) { const { fixedJsCode } = replaceImportsInJsCode_vite({ jsCode: jsCodeUntransformed, basenameOfAssetsFiles: [ "Login-dJpPRzM4.js", "index-XwzrZ5Gu.js", "keycloakify-logo-mqjydaoZ.png" ], buildContext: { projectBuildDirPath, assetsDirPath, urlPathname: undefined }, systemType }); const fixedJsCodeExpected = ` S=(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/foo/bar/keycloakify-logo-mqjydaoZ.png"),H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = [ (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/foo/bar/Login-dJpPRzM4.js"), (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/foo/bar/index-XwzrZ5Gu.js") ] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); } }); it("replaceImportsInJsCode_vite - 5", () => { const jsCodeUntransformed = ` S="/foo-bar-baz/assets/keycloakify-logo-mqjydaoZ.png",H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = ["assets/Login-dJpPRzM4.js", "assets/index-XwzrZ5Gu.js"] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; for (const { projectBuildDirPath, assetsDirPath, systemType } of [ { systemType: "posix", projectBuildDirPath: "/Users/someone/github/keycloakify-starter/dist", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/assets" }, { systemType: "win32", projectBuildDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist", assetsDirPath: "C:\\\\Users\\someone\\github\\keycloakify-starter\\dist\\assets" } ] as const) { const { fixedJsCode } = replaceImportsInJsCode_vite({ jsCode: jsCodeUntransformed, basenameOfAssetsFiles: [ "Login-dJpPRzM4.js", "index-XwzrZ5Gu.js", "keycloakify-logo-mqjydaoZ.png" ], buildContext: { projectBuildDirPath, assetsDirPath, urlPathname: "/foo-bar-baz/" }, systemType }); const fixedJsCodeExpected = ` S=(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/assets/keycloakify-logo-mqjydaoZ.png"),H=(()=>{ function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = [ (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/assets/Login-dJpPRzM4.js"), (window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/assets/index-XwzrZ5Gu.js") ] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } `; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); } }); }); describe("js replacer - webpack", () => { it("replaceImportsInJsCode_webpack - 1", () => { const jsCodeUntransformed = ` function f() { return a.p+"static/js/" + ({}[e] || e) + "." + { 3: "0664cdc0" }[e] + ".chunk.js" } function sameAsF() { return a.p+"static/js/" + ({}[e] || e) + "." + { 3: "0664cdc0" }[e] + ".chunk.js" } __webpack_require__.u=function(e){return"static/js/" + e + "." + { 147: "6c5cee76", 787: "8da10fcf", 922: "be170a73" } [e] + ".chunk.js" } t.miniCssF=function(e){return"static/css/"+e+"."+{ 164:"dcfd7749", 908:"67c9ed2c" }[e]+".chunk.css" } n.u=e=>"static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js" t.miniCssF=e=>"static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css" `; const { fixedJsCode } = replaceImportsInJsCode_webpack({ jsCode: jsCodeUntransformed, buildContext: { projectBuildDirPath: "/Users/someone/github/keycloakify-starter/build", assetsDirPath: "/Users/someone/github/keycloakify-starter/build/static", urlPathname: undefined } }); const fixedJsCodeExpected = ` function f() { return window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + ({}[e] || e) + "." + { 3: "0664cdc0" }[e] + ".chunk.js" } function sameAsF() { return window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + ({}[e] || e) + "." + { 3: "0664cdc0" }[e] + ".chunk.js" } __webpack_require__[(function (){ var pd = Object.getOwnPropertyDescriptor(__webpack_require__, "p"); if( pd === undefined || pd.configurable ){ Object.defineProperty(__webpack_require__, "p", { get: function() { return window.kcContext.url.resourcesPath; }, set: function() {} }); } return "u"; })()] = function(e) { return "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + e + "." + { 147: "6c5cee76", 787: "8da10fcf", 922: "be170a73" } [e] + ".chunk.js" } t[(function (){ var pd = Object.getOwnPropertyDescriptor(t, "p"); if( pd === undefined || pd.configurable ){ Object.defineProperty(t, "p", { get: function() { return window.kcContext.url.resourcesPath; }, set: function() {} }); } return "miniCssF"; })()] = function(e) { return "/${basenameOfTheKeycloakifyResourcesDir}/static/css/" + e + "." + { 164:"dcfd7749", 908:"67c9ed2c" } [e] + ".chunk.css" } n[(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"; })()] = e => "/${basenameOfTheKeycloakifyResourcesDir}/static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js" t[(function(){ var pd = Object.getOwnPropertyDescriptor(t, "p"); if( pd === undefined || pd.configurable ){ Object.defineProperty(t, "p", { get: function() { return window.kcContext.url.resourcesPath; }, set: function() {} }); } return "miniCssF"; })()] = e => "/${basenameOfTheKeycloakifyResourcesDir}/static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css" `; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); }); it("replaceImportsInJsCode_webpack - 2", () => { const before = `"__esModule",{value:!0})}`; const after = `function(){if("undefined"`; const jsCodeUntransformed = `${before},n.p="/foo-bar/",${after}`; const { fixedJsCode } = replaceImportsInJsCode_webpack({ jsCode: jsCodeUntransformed, buildContext: { projectBuildDirPath: "/Users/someone/github/keycloakify-starter/build", assetsDirPath: "/Users/someone/github/keycloakify-starter/build/static", urlPathname: "/foo-bar/" } }); const fixedJsCodeExpected = `${before},n.p="/",${after}`; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); }); it("replaceImportsInJsCode_webpack - 3", () => { const before = `"__esModule",{value:!0})}`; const after = `function(){if("undefined"`; const jsCodeUntransformed = `${before},n.p="/foo/bar/",${after}`; const { fixedJsCode } = replaceImportsInJsCode_webpack({ jsCode: jsCodeUntransformed, buildContext: { projectBuildDirPath: "/Users/someone/github/keycloakify-starter/build", assetsDirPath: "/Users/someone/github/keycloakify-starter/dist/build/static", urlPathname: "/foo/bar/" } }); const fixedJsCodeExpected = `${before},n.p="/",${after}`; expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true); }); }); describe("css replacer", () => { it("replaceImportsInCssCode - 1", () => { const { fixedCssCode } = replaceImportsInCssCode({ cssCode: ` .my-div { background: url(/background.png) no-repeat center center; } .my-div2 { background: url(/assets/background.png) repeat center center; } .my-div3 { background-image: url(/assets/media/something.svg); } `, cssFileRelativeDirPath: "assets/", isAccountV3: false, buildContext: { urlPathname: undefined } }); const fixedCssCodeExpected = ` .my-div { background: url(../background.png) no-repeat center center; } .my-div2 { background: url(background.png) repeat center center; } .my-div3 { background-image: url(media/something.svg); } `; expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true); }); it("replaceImportsInCssCode - 2", () => { const { fixedCssCode } = replaceImportsInCssCode({ cssCode: ` .my-div { background: url(/a/b/background.png) no-repeat center center; } .my-div2 { background: url(/a/b/assets/background.png) repeat center center; } .my-div3 { background-image: url(/a/b/assets/media/something.svg); } `, cssFileRelativeDirPath: "assets/", isAccountV3: false, buildContext: { urlPathname: "/a/b/" } }); const fixedCssCodeExpected = ` .my-div { background: url(../background.png) no-repeat center center; } .my-div2 { background: url(background.png) repeat center center; } .my-div3 { background-image: url(media/something.svg); } `; expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true); }); it("replaceImportsInCssCode - 3", () => { const { fixedCssCode } = replaceImportsInCssCode({ cssCode: ` .my-div { background: url(/a/b/background.png) no-repeat center center; } .my-div2 { background: url(/a/b/assets/background.png) repeat center center; } .my-div3 { background-image: url(/a/b/assets/media/something.svg); } `, cssFileRelativeDirPath: undefined, isAccountV3: false, buildContext: { urlPathname: "/a/b/" } }); const fixedCssCodeExpected = ` .my-div { background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/background.png) no-repeat center center; } .my-div2 { background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/background.png) repeat center center; } .my-div3 { background-image: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/media/something.svg); } `; expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true); }); it("replaceImportsInCssCode - 4", () => { const { fixedCssCode } = replaceImportsInCssCode({ cssCode: ` .my-div { background: url(/background.png) no-repeat center center; } .my-div2 { background: url(/assets/background.png) repeat center center; } .my-div3 { background-image: url(/assets/media/something.svg); } `, cssFileRelativeDirPath: undefined, isAccountV3: false, buildContext: { urlPathname: undefined } }); const fixedCssCodeExpected = ` .my-div { background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/background.png) no-repeat center center; } .my-div2 { background: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/background.png) repeat center center; } .my-div3 { background-image: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/assets/media/something.svg); } `; expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true); }); }); export function isSameCode(code1: string, code2: string): boolean { const removeSpacesAndNewLines = (code: string) => code.replace(/\s/g, "").replace(/\n/g, ""); return removeSpacesAndNewLines(code1) === removeSpacesAndNewLines(code2); }