Ship /src/lib in ESM for enabeling dynamic imports

.gitignore

@@ -41,6 +41,7 @@ jspm_packages
 .DS_Store
 
 /dist
+/dist_test
 
 /sample_react_project/
 /.yarn_home/

package.json

@@ -9,11 +9,11 @@
     "main": "dist/lib/index.js",
     "types": "dist/lib/index.d.ts",
     "scripts": {
-        "clean": "rimraf dist/",
-        "build": "yarn clean && tsc && yarn grant-exec-perms && yarn copy-files",
+        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src/lib && yarn grant-exec-perms && yarn copy-files dist/",
+        "build:test": "rimraf dist_test/ && tsc -p src/test && yarn copy-files dist_test/",
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
-        "test": "node dist/test/bin && node dist/test/lib",
-        "copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
+        "copy-files": "copyfiles -u 1 src/**/*.ftl",
+        "test": "yarn build:test && node dist_test/test/bin && node dist_test/test/lib",
         "generate-messages": "node dist/bin/generate-i18n-messages.js",
         "link_in_test_app": "node dist/bin/link_in_test_app.js",
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
@@ -39,9 +39,7 @@
     "license": "MIT",
     "files": [
         "src/",
-        "!src/test/",
         "dist/",
-        "!dist/test/",
         "!dist/tsconfig.tsbuildinfo"
     ],
     "keywords": [
@@ -71,7 +69,8 @@
         "properties-parser": "^0.3.1",
         "react": "18.1.0",
         "rimraf": "^3.0.2",
-        "typescript": "^4.2.3"
+        "typescript": "^4.2.3",
+        "ts-node": "^10.9.1"
     },
     "dependencies": {
         "@octokit/rest": "^18.12.0",

src/bin/build-keycloak-theme/generateFtl/generateFtl.ts

@@ -1,6 +1,6 @@
 import cheerio from "cheerio";
 import { replaceImportsFromStaticInJsCode, replaceImportsInInlineCssCode, generateCssCodeToDefineGlobals } from "../replaceImportFromStatic";
-import fs from "fs";
+import * as fs from "fs";
 import { join as pathJoin } from "path";
 import { objectKeys } from "tsafe/objectKeys";
 import { ftlValuesGlobalName } from "../ftlValuesGlobalName";

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -5,7 +5,7 @@ import { replaceImportsInCssCode, replaceImportsFromStaticInJsCode } from "./rep
 import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
 import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
 import * as child_process from "child_process";
-import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/getKcContext/kcContextMocks/urlResourcesPath";
+import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../urlResourcesPath";
 import { isInside } from "../tools/isInside";
 
 export function generateKeycloakThemeResources(params: {

src/bin/generate-i18n-messages.ts

@@ -6,6 +6,9 @@ import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme"
 import { getProjectRoot } from "./tools/getProjectRoot";
 import { rm_rf, rm_r } from "./tools/rm";
 
+//NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
+// update the version array for generating for newer version.
+
 //@ts-ignore
 const propertiesParser = require("properties-parser");
 

src/bin/tools/downloadAndUnzip.ts

@@ -1,6 +1,6 @@
 import { basename as pathBasename, join as pathJoin } from "path";
 import { execSync } from "child_process";
-import fs from "fs";
+import * as fs from "fs";
 import { transformCodebase } from "./transformCodebase";
 import { rm_rf, rm, rm_r } from "./rm";
 

src/bin/tools/getProjectRoot.ts

@@ -2,7 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 
 function getProjectRootRec(dirPath: string): string {
-    if (fs.existsSync(path.join(dirPath, "tsconfig.json"))) {
+    if (fs.existsSync(path.join(dirPath, "package.json"))) {
         return dirPath;
     }
     return getProjectRootRec(path.join(dirPath, ".."));

src/bin/tools/grant-exec-perms.ts

@@ -1,6 +1,6 @@
 import { getProjectRoot } from "./getProjectRoot";
 import { join as pathJoin } from "path";
-import child_process from "child_process";
+import * as child_process from "child_process";
 import * as fs from "fs";
 
 Object.entries<string>(JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["bin"]).forEach(([, scriptPath]) =>

src/bin/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "module": "CommonJS",
+        "target": "ES5",
+        "lib": ["es2015", "DOM", "ES2019.Object"],
+        "outDir": "../../dist/bin",
+        "rootDir": "."
+    }
+}

src/bin/urlResourcesPath.ts

@@ -1,4 +1,4 @@
-import { pathJoin } from "../../tools/pathJoin";
+import { pathJoin } from "./tools/pathJoin";
 
 export const subDirOfPublicDirBasename = "keycloak_static";
 export const resourcesPath = pathJoin(subDirOfPublicDirBasename, "resources");

src/lib/components/LoginOtp.tsx

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

src/lib/components/Template.tsx

@@ -6,7 +6,7 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
 import { useCssAndCx } from "tss-react";

src/lib/getKcContext/getKcContext.ts

@@ -7,9 +7,9 @@ import { exclude } from "tsafe/exclude";
 import { assert } from "tsafe/assert";
 import type { ExtendsKcContextBase } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
-import { pathJoin } from "../tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 import { pathBasename } from "../tools/pathBasename";
-import { resourcesCommonPath } from "./kcContextMocks/urlResourcesPath";
+import { resourcesCommonPath } from "../../bin/urlResourcesPath";
 
 export function getKcContext<KcContextExtended extends { pageId: string } = never>(params?: {
     mockPageId?: ExtendsKcContextBase<KcContextExtended>["pageId"];

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -1,9 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
 import type { KcContextBase, Attribute } from "../KcContextBase";
 //NOTE: Aside because we want to be able to import them from node
-import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
+import { resourcesCommonPath, resourcesPath } from "../../../bin/urlResourcesPath";
 import { id } from "tsafe/id";
-import { pathJoin } from "../../tools/pathJoin";
+import { pathJoin } from "../../../bin/tools/pathJoin";
 
 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 

src/lib/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "extends": "../../tsproject.json",
+    "compilerOptions": {
+        "outDir": "../../dist/lib",
+        "rootDir": ".",
+        "module": "ES2020",
+        "target": "ES2020",
+        "lib": ["es2015", "DOM", "ES2019.Object"],
+        "moduleResolution": "node",
+        "jsx": "react-jsx",
+        "allowSyntheticDefaultImports": true
+    },
+    "references": [
+        {
+            "path": "../bin"
+        }
+    ]
+}

src/test/bin/main.ts

@@ -6,7 +6,7 @@ import { getProjectRoot } from "../../bin/tools/getProjectRoot.js";
 
 setupSampleReactProject();
 
-const binDirPath = pathJoin(getProjectRoot(), "dist", "bin");
+const binDirPath = pathJoin(getProjectRoot(), "dist_test", "bin");
 
 st.execSyncTrace(
     //`node ${pathJoin(binDirPath, "build-keycloak-theme")} --external-assets`,

src/test/tsconfig.json

@@ -1,12 +1,11 @@
 {
     "compilerOptions": {
-        "module": "ES2020",
-        "target": "ES2020",
+        "module": "CommonJS",
+        "target": "es5",
         "lib": ["es2015", "DOM", "ES2019.Object"],
-        "moduleResolution": "node",
         "esModuleInterop": true,
         "declaration": true,
-        "outDir": "./dist",
+        "outDir": "../../dist_test",
         "sourceMap": true,
         "newLine": "LF",
         "noUnusedLocals": true,
@@ -17,5 +16,5 @@
         "jsx": "react-jsx",
         "noFallthroughCasesInSwitch": true
     },
-    "include": ["src"]
+    "include": [".."]
 }

tsproject.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "sourceMap": true,
+        "newLine": "LF",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "incremental": true,
+        "strict": true,
+        "downlevelIteration": true,
+        "noFallthroughCasesInSwitch": true,
+        "composite": true
+    }
+}