hCaptcha · faris-imi · Feb 15, 2024 · Jan 26, 2024 · Jan 26, 2024 · Feb 4, 2024
@@ -9,6 +9,7 @@ This is a JavaScript library to easily configure the loading of the [hCaptcha](h
 1. [Installation](#installation)
 2. [Implementation](#implementation)
 3. [Props](#props)
+3. [Legacy Support](#legacy-support)
 
 ### Installation
 ```
@@ -46,3 +47,56 @@ const { response } = await hcaptcha.execute({ async: true });
 | `reportapi`       | String      | No       | `-`             | See enterprise docs.                                                                                                                                      |
 | `sentry`          | Boolean     | No       | `-`             | See enterprise docs.                                                                                                                                      |
 | `custom`          | Boolean     | No       | `-`             | See enterprise docs.                                                                                                                                      |
+
+
+
+## Legacy Support
+In order to support older browsers, a seperate bundle is generated in which all ES6 code is compiled down to ES5 along with an optional polyfill bundle to extend functionality that is used common to modern browsers.
+
+- `polyfills.js`: Provides polyfills for features not supported in older browsers.
+- `index.es5.js`: **@hcaptcha/loader** package compiled for ES5 environments.
+
+### Import Bundle(s)
+Both bundles generated utilize IIFE format instead of modern importation syntax such as `require` or `esm`.
+
+```js
+// Optional polyfill import
+import '@hCaptcha/loader/dist/polyfills.js';
+// ES5 version of hCaptcha Loader
+import '@hCaptcha/loader/dist/index.es5.js';
+
+hCaptchaLoader.then(function() {
+    var element = document.createElement('div');
+    // hCaptcha API is ready
+    hcaptcha.render(element, {
+        sitekey: 'YOUR_SITE_KEY',
+        // Additional options here
+    });
+});
+
+```
+
+### CDN
+The hCaptcha Loader targetted for older browsers can also be imported via a CDN by leveraging UNPKG](https://www.unpkg.com/), see example below.
+
+
+```html
+<!DOCTYPE html>
+<head>
+    <script type="text/javascript" src="https://unpkg.com/@hcaptcha/loader@latest/dist/polyfills.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@hcaptcha/loader@latest/dist/index.es5.js"></script>
+</head>
+<body>
+    <script type="text/javascript">
+        hCaptchaLoader.then(function() {
+            var element = document.createElement('div');
+            // hCaptcha API is ready
+            hcaptcha.render(element, {
+                sitekey: 'YOUR_SITE_KEY',
+                // Additional options here
+            });
+        });
+    </script>
+</body>
+</html>
+```
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'url';
 
 import { build, context, analyzeMetafile } from 'esbuild';
 import * as dotenv from 'dotenv';
+import swc from '@swc/core';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -44,6 +45,14 @@ const config = {
   sourcemap: BUILD === 'development',
 };
 
+const swcOptions = {
+  minify: true,
+  sourceMaps: true,
+  jsc: {
+    target: 'es5',
+  },
+};
+
 
 if (WATCH) {
   const ctx = await context({
@@ -57,6 +66,7 @@ if (WATCH) {
   });
   await ctx.watch();
 } else {
+  // Transpile TypeScript to ESM
   const resultESM = await build({
     ...config,
     format: 'esm',
@@ -67,11 +77,46 @@ if (WATCH) {
     ]
   });
 
+  // Transpile TypeScript to CommonJS
   const resultCJS = await build({
     ...config,
     format: 'cjs',
     outfile: resolve(DIST, 'index.cjs'),
-    treeShaking: true
+    treeShaking: true,
+  });
+
+  // Transform to ES5
+  const transformedESM = await swc.transformFile(resolve(DIST, 'index.mjs'), swcOptions);
+
+  // Build ES5 bundle
+  const resultES5 = await build({
+    ...config,
+    entryPoints: undefined,
+    globalName: 'hCaptchaLoaderPkg',
+    stdin: {
+      contents: transformedESM.code,
+      resolveDir: DIST,
+      sourcefile: 'index.es5.js',
+    },
+    outfile: resolve(DIST, 'index.es5.js'),
+    footer: {
+      js: 'var hCaptchaLoader = hCaptchaLoaderPkg.hCaptchaLoader;',
+    },
+    treeShaking: true,
+    target: [
+      'es5',
+    ]
+  });
+
+  // Add Polyfills
+  await build({
+    ...config,
+    entryPoints: [resolve(SRC, 'polyfills.ts')],
+    outfile: resolve(DIST, 'polyfills.js'),
+    treeShaking: true,
+    target: [
+      'es5',
+    ]
   });
 
   if (DEBUG) {
@@ -81,7 +126,12 @@ if (WATCH) {
     const analyzeCJS = await analyzeMetafile(resultCJS.metafile, {
       verbose: false
     });
+    const analyzeES5 = await analyzeMetafile(resultES5.metafile, {
+      verbose: false
+    });
+
     console.log(analyzeESM);
     console.log(analyzeCJS);
+    console.log(analyzeES5);
   }
 }
@@ -12,7 +12,8 @@
     "test:unit": "jest"
   },
   "dependencies": {
-    "@sentry/browser": "^7.73.0"
+    "@sentry/browser": "^7.73.0",
+    "core-js": "^3.35.1"
   },
   "devDependencies": {
     "@hcaptcha/types": "^1.0.3",

@@ -0,0 +1,4 @@
+import 'core-js/es/array/find';
+import 'core-js/es/object/assign';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/get-own-property-descriptors';
@@ -13,5 +13,8 @@
 
   "include": [
     "src/**/*"
+  ],
+  "exclude": [
+    "src/polyfills.ts"
   ]
 }
@@ -1,7 +1,7 @@
 {
   "name": "@hcaptcha/loader",
   "description": "This is a JavaScript library to easily configure the loading of the hCaptcha JS client SDK with built-in error handling.",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": "hCaptcha team and contributors",
   "license": "MIT",
   "keywords": [