npm - @internetarchive/recaptcha-manager - Versions diffs - 0.0.1-alpha.1 - Mend

@internetarchive/recaptcha-manager 0.0.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/.editorconfig +29 -0
package/.github/workflows/ci.yml +26 -0
package/.husky/pre-commit +4 -0
package/LICENSE +661 -0
package/README.md +56 -0
package/demo/app-root.ts +53 -0
package/demo/index.html +26 -0
package/dist/demo/app-root.d.ts +9 -0
package/dist/demo/app-root.js +49 -0
package/dist/demo/app-root.js.map +1 -0
package/dist/index.d.ts +1 -0
package/dist/index.js +2 -0
package/dist/index.js.map +1 -0
package/dist/src/recaptcha-manager.d.ts +68 -0
package/dist/src/recaptcha-manager.js +126 -0
package/dist/src/recaptcha-manager.js.map +1 -0
package/dist/test/recaptcha-manager.test.d.ts +0 -0
package/dist/test/recaptcha-manager.test.js +4 -0
package/dist/test/recaptcha-manager.test.js.map +1 -0
package/dist/test/your-webcomponent.test.d.ts +0 -0
package/dist/test/your-webcomponent.test.js +4 -0
package/dist/test/your-webcomponent.test.js.map +1 -0
package/index.ts +1 -0
package/package.json +96 -0
package/src/recaptcha-manager.ts +174 -0
package/test/recaptcha-manager.test.ts +3 -0
package/tsconfig.json +20 -0
package/web-dev-server.config.mjs +28 -0
package/web-test-runner.config.mjs +41 -0

package/README.md ADDED Viewed

@@ -0,0 +1,56 @@
+![Build Status](https://github.com/internetarchive/iaux-recaptcha-manager/actions/workflows/ci.yml/badge.svg)
+# Internet Archive reCaptcha Manager
+A library to lazy load and more easily interact with reCaptcha
+## Local Demo with `web-dev-server`
+```bash
+yarn start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`
+## Testing with Web Test Runner
+To run the suite of Web Test Runner tests, run
+```bash
+yarn run test
+```
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+```bash
+yarn run test:watch
+```
+## Linting with ESLint, Prettier, and Types
+To scan the project for linting errors, run
+```bash
+yarn run lint
+```
+You can lint with ESLint and Prettier individually as well
+```bash
+yarn run lint:eslint
+```
+```bash
+yarn run lint:prettier
+```
+To automatically fix many linting errors, run
+```bash
+yarn run format
+```
+You can format using ESLint and Prettier individually as well
+```bash
+yarn run format:eslint
+```
+```bash
+yarn run format:prettier
+```
+## Tooling configs
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+If you customize the configuration a lot, you can consider moving them to individual files.

package/demo/app-root.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import {
+  RecaptchaManager,
+  RecaptchaManagerInterface,
+} from '../src/recaptcha-manager';
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  @state() result?: string;
+  private recaptchaManager?: RecaptchaManagerInterface;
+  render() {
+    return html`
+      <button @click="${this.loadRecaptcha}">Load Recaptcha</button>
+      <button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
+      <slot name="recaptcha"></slot>
+      ${this.result
+        ? html`<strong
+            >Token:<strong><p>${this.result}</p></strong></strong
+          >`
+        : ''}
+    `;
+  }
+  private async loadRecaptcha() {
+    this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({
+      siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+    });
+    const element = document.querySelector('#recaptcha') as HTMLDivElement;
+    this.recaptchaManager?.setup(element, 0, 'light', 'image');
+  }
+  private async executeRecaptcha() {
+    if (!this.recaptchaManager) {
+      await this.loadRecaptcha();
+    }
+    if (!this.recaptchaManager) {
+      console.error('error loading recaptcha');
+      return;
+    }
+    this.result = await this.recaptchaManager.execute();
+  }
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+}

package/demo/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    html {
+      font-size: 10px; /* This is to match petabox's base font size */
+    }
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <app-root>
+    <!-- recaptcha does not work in the shadowDOM so must be slotted from the top -->
+    <div slot="recaptcha">
+      <div id="recaptcha"></div>
+    </div>
+  </app-root>
+  <script type="module" src="../dist/demo/app-root.js">
+  </script>
+</body>
+</html>

package/dist/demo/app-root.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class AppRoot extends LitElement {
+    result?: string;
+    private recaptchaManager?;
+    render(): import("lit").TemplateResult<1>;
+    private loadRecaptcha;
+    private executeRecaptcha;
+    static styles: import("lit").CSSResult;
+}

package/dist/demo/app-root.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { RecaptchaManager, } from '../src/recaptcha-manager';
+let AppRoot = class AppRoot extends LitElement {
+    render() {
+        return html `
+      <button @click="${this.loadRecaptcha}">Load Recaptcha</button>
+      <button @click="${this.executeRecaptcha}">Execute Recaptcha</button>
+      <slot name="recaptcha"></slot>
+      ${this.result
+            ? html `<strong
+            >Token:<strong><p>${this.result}</p></strong></strong
+          >`
+            : ''}
+    `;
+    }
+    async loadRecaptcha() {
+        var _a;
+        this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({
+            siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',
+        });
+        const element = document.querySelector('#recaptcha');
+        (_a = this.recaptchaManager) === null || _a === void 0 ? void 0 : _a.setup(element, 0, 'light', 'image');
+    }
+    async executeRecaptcha() {
+        if (!this.recaptchaManager) {
+            await this.loadRecaptcha();
+        }
+        if (!this.recaptchaManager) {
+            console.error('error loading recaptcha');
+            return;
+        }
+        this.result = await this.recaptchaManager.execute();
+    }
+};
+AppRoot.styles = css `
+    :host {
+      display: block;
+    }
+  `;
+__decorate([
+    state()
+], AppRoot.prototype, "result", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
+//# sourceMappingURL=app-root.js.map

package/dist/demo/app-root.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,gBAAgB,GAEjB,MAAM,0BAA0B,CAAC;AAGlC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAKrC,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,aAAa;wBAClB,IAAI,CAAC,gBAAgB;;QAErC,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;gCACkB,IAAI,CAAC,MAAM;YAC/B;YACJ,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,aAAa;;QACzB,IAAI,CAAC,gBAAgB,GAAG,MAAM,gBAAgB,CAAC,mBAAmB,CAAC;YACjE,OAAO,EAAE,0CAA0C;SACpD,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAmB,CAAC;QACvE,MAAA,IAAI,CAAC,gBAAgB,0CAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7D,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;SAC5B;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;SACR;QAED,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;IACtD,CAAC;CAOF,CAAA;AALQ,cAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AA1CO;IAAR,KAAK,EAAE;uCAAiB;AADd,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA4CnB;SA5CY,OAAO","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport {\n RecaptchaManager,\n RecaptchaManagerInterface,\n} from '../src/recaptcha-manager';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @state() result?: string;\n\n private recaptchaManager?: RecaptchaManagerInterface;\n\n render() {\n return html`\n <button @click=\"${this.loadRecaptcha}\">Load Recaptcha</button>\n <button @click=\"${this.executeRecaptcha}\">Execute Recaptcha</button>\n <slot name=\"recaptcha\"></slot>\n ${this.result\n ? html`<strong\n >Token:<strong><p>${this.result}</p></strong></strong\n >`\n : ''}\n `;\n }\n\n private async loadRecaptcha() {\n this.recaptchaManager = await RecaptchaManager.getRecaptchaManager({\n siteKey: '6LeTUvYUAAAAAPTvW98MaXyS8c6vxk4-9n8DI1ve',\n });\n const element = document.querySelector('#recaptcha') as HTMLDivElement;\n this.recaptchaManager?.setup(element, 0, 'light', 'image');\n }\n\n private async executeRecaptcha() {\n if (!this.recaptchaManager) {\n await this.loadRecaptcha();\n }\n\n if (!this.recaptchaManager) {\n console.error('error loading recaptcha');\n return;\n }\n\n this.result = await this.recaptchaManager.execute();\n }\n\n static styles = css`\n :host {\n display: block;\n }\n `;\n}\n"]}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { RecaptchaManager } from './src/recaptcha-manager';
2	+ //# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA6B,MAAM,yBAAyB,CAAC","sourcesContent":["export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';\n"]}

package/dist/src/recaptcha-manager.d.ts ADDED Viewed

@@ -0,0 +1,68 @@
+/// <reference types="grecaptcha" />
+import { LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';
+export interface RecaptchaManagerInterface {
+    execute(): Promise<string>;
+    setup(container: HTMLElement, tabIndex: number, theme: ReCaptchaV2.Theme, type: ReCaptchaV2.Type): void;
+}
+export declare class RecaptchaManager implements RecaptchaManagerInterface {
+    /**
+     * This is a convenience initializer that also lazily loads
+     * the recaptcha library from Google.
+     *
+     * @param options
+     * @returns
+     */
+    static getRecaptchaManager(options: {
+        siteKey: string;
+    }): Promise<RecaptchaManagerInterface>;
+    /**
+     * Load the Recaptch library from Google.
+     *
+     * @param options
+     * @returns
+     */
+    static loadRecaptchaLibrary(options?: {
+        lazyLoader?: LazyLoaderServiceInterface;
+    }): Promise<ReCaptchaV2.ReCaptcha>;
+    private grecaptchaLibrary;
+    private siteKey;
+    constructor(options: {
+        grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+        siteKey: string;
+    });
+    private executionSuccessBlock?;
+    private executionExpiredBlock?;
+    private executionErrorBlock?;
+    private isExecuting;
+    /**
+     * Execute Recaptcha and return a Promise containing the response token.
+     *
+     * This is an interesting flow.. we call `execute()` here, but have to wait for the
+     * response and expiration handlers that we bind during the inital `setup` call.
+     * For consumers, we want to be able to just call `execute()` and wait for a response.
+     * To allow this, we assign two callbacks:
+     * - `executionSuccessBlock`
+     * - `executionExpiredBlock`
+     *
+     * We then call those callbacks from inside `responseHandler` and `expiredHandler` to
+     * either resolve or reject the Promise.
+     *
+     * ie:
+     *
+     * try {
+     *   const recaptchaResult = await recaptchaManager.execute();
+     *   console.log('recaptcha token:', recaptchaResult);
+     * } catch {
+     *   console.error('something happened')
+     * }
+     *
+     * @returns {Promise<string>}
+     * @memberof RecaptchaManager
+     */
+    execute(): Promise<string>;
+    private finishExecution;
+    setup(container: HTMLElement, tabIndex: number, theme: ReCaptchaV2.Theme, type: ReCaptchaV2.Type): void;
+    private responseHandler;
+    private expiredHandler;
+    private errorHandler;
+}

package/dist/src/recaptcha-manager.js ADDED Viewed

@@ -0,0 +1,126 @@
+import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
+export class RecaptchaManager {
+    constructor(options) {
+        this.isExecuting = false;
+        this.grecaptchaLibrary = options.grecaptchaLibrary;
+        this.siteKey = options.siteKey;
+    }
+    /**
+     * This is a convenience initializer that also lazily loads
+     * the recaptcha library from Google.
+     *
+     * @param options
+     * @returns
+     */
+    static async getRecaptchaManager(options) {
+        const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary();
+        return new RecaptchaManager({
+            grecaptchaLibrary,
+            siteKey: options.siteKey,
+        });
+    }
+    /**
+     * Load the Recaptch library from Google.
+     *
+     * @param options
+     * @returns
+     */
+    static async loadRecaptchaLibrary(options) {
+        var _a;
+        const service = (_a = options === null || options === void 0 ? void 0 : options.lazyLoader) !== null && _a !== void 0 ? _a : new LazyLoaderService();
+        return new Promise(resolve => {
+            window.grecaptchaLoadedCallback = () => {
+                setTimeout(() => {
+                    // remove the callback when we're done with it
+                    delete window.grecaptchaLoadedCallback;
+                }, 10);
+                resolve(window.grecaptcha);
+            };
+            service.loadScript({
+                src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
+            });
+        });
+    }
+    /**
+     * Execute Recaptcha and return a Promise containing the response token.
+     *
+     * This is an interesting flow.. we call `execute()` here, but have to wait for the
+     * response and expiration handlers that we bind during the inital `setup` call.
+     * For consumers, we want to be able to just call `execute()` and wait for a response.
+     * To allow this, we assign two callbacks:
+     * - `executionSuccessBlock`
+     * - `executionExpiredBlock`
+     *
+     * We then call those callbacks from inside `responseHandler` and `expiredHandler` to
+     * either resolve or reject the Promise.
+     *
+     * ie:
+     *
+     * try {
+     *   const recaptchaResult = await recaptchaManager.execute();
+     *   console.log('recaptcha token:', recaptchaResult);
+     * } catch {
+     *   console.error('something happened')
+     * }
+     *
+     * @returns {Promise<string>}
+     * @memberof RecaptchaManager
+     */
+    execute() {
+        if (this.isExecuting) {
+            this.finishExecution();
+        }
+        this.isExecuting = true;
+        return new Promise((resolve, reject) => {
+            this.executionSuccessBlock = (token) => {
+                this.finishExecution();
+                resolve(token);
+            };
+            this.executionExpiredBlock = () => {
+                this.finishExecution();
+                reject(new Error('expired'));
+            };
+            this.executionErrorBlock = () => {
+                this.finishExecution();
+                reject(new Error('error'));
+            };
+            this.grecaptchaLibrary.execute();
+        });
+    }
+    finishExecution() {
+        this.isExecuting = false;
+        this.grecaptchaLibrary.reset();
+    }
+    setup(container, tabIndex, theme, type) {
+        this.grecaptchaLibrary.render(container, {
+            callback: this.responseHandler.bind(this),
+            'expired-callback': this.expiredHandler.bind(this),
+            'error-callback': this.errorHandler.bind(this),
+            sitekey: this.siteKey,
+            tabindex: tabIndex,
+            theme,
+            type,
+            size: 'invisible',
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    responseHandler(response) {
+        if (this.executionSuccessBlock) {
+            this.executionSuccessBlock(response);
+            this.executionSuccessBlock = undefined;
+        }
+    }
+    expiredHandler() {
+        if (this.executionExpiredBlock) {
+            this.executionExpiredBlock();
+            this.executionExpiredBlock = undefined;
+        }
+    }
+    errorHandler() {
+        if (this.executionErrorBlock) {
+            this.executionErrorBlock();
+            this.executionErrorBlock = undefined;
+        }
+    }
+}
+//# sourceMappingURL=recaptcha-manager.js.map

package/dist/src/recaptcha-manager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"recaptcha-manager.js","sourceRoot":"","sources":["../../src/recaptcha-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LazyLoaderService,\n LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\n\nexport interface RecaptchaManagerInterface {\n execute(): Promise<string>;\n setup(\n container: HTMLElement,\n tabIndex: number,\n theme: ReCaptchaV2.Theme,\n type: ReCaptchaV2.Type\n ): void;\n}\n\nexport class RecaptchaManager implements RecaptchaManagerInterface {\n /**\n * This is a convenience initializer that also lazily loads\n * the recaptcha library from Google.\n *\n * @param options\n * @returns\n */\n static async getRecaptchaManager(options: {\n siteKey: string;\n }): Promise<RecaptchaManagerInterface> {\n const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary();\n return new RecaptchaManager({\n grecaptchaLibrary,\n siteKey: options.siteKey,\n });\n }\n\n /**\n * Load the Recaptch library from Google.\n *\n * @param options\n * @returns\n */\n static async loadRecaptchaLibrary(options?: {\n lazyLoader?: LazyLoaderServiceInterface;\n }): Promise<ReCaptchaV2.ReCaptcha> {\n const service = options?.lazyLoader ?? new LazyLoaderService();\n\n return new Promise(resolve => {\n (window as any).grecaptchaLoadedCallback = (): void => {\n setTimeout(() => {\n // remove the callback when we're done with it\n delete (window as any).grecaptchaLoadedCallback;\n }, 10);\n resolve(window.grecaptcha);\n };\n\n service.loadScript({\n src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',\n });\n });\n }\n\n private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n\n private siteKey: string;\n\n constructor(options: {\n grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n siteKey: string;\n }) {\n this.grecaptchaLibrary = options.grecaptchaLibrary;\n this.siteKey = options.siteKey;\n }\n\n private executionSuccessBlock?: (token: string) => void;\n\n private executionExpiredBlock?: () => void;\n\n private executionErrorBlock?: () => void;\n\n private isExecuting = false;\n\n /**\n * Execute Recaptcha and return a Promise containing the response token.\n *\n * This is an interesting flow.. we call `execute()` here, but have to wait for the\n * response and expiration handlers that we bind during the inital `setup` call.\n * For consumers, we want to be able to just call `execute()` and wait for a response.\n * To allow this, we assign two callbacks:\n * - `executionSuccessBlock`\n * - `executionExpiredBlock`\n *\n * We then call those callbacks from inside `responseHandler` and `expiredHandler` to\n * either resolve or reject the Promise.\n *\n * ie:\n *\n * try {\n * const recaptchaResult = await recaptchaManager.execute();\n * console.log('recaptcha token:', recaptchaResult);\n * } catch {\n * console.error('something happened')\n * }\n *\n * @returns {Promise<string>}\n * @memberof RecaptchaManager\n */\n execute(): Promise<string> {\n if (this.isExecuting) {\n this.finishExecution();\n }\n this.isExecuting = true;\n return new Promise((resolve, reject) => {\n this.executionSuccessBlock = (token: string): void => {\n this.finishExecution();\n resolve(token);\n };\n\n this.executionExpiredBlock = (): void => {\n this.finishExecution();\n reject(new Error('expired'));\n };\n\n this.executionErrorBlock = (): void => {\n this.finishExecution();\n reject(new Error('error'));\n };\n\n this.grecaptchaLibrary.execute();\n });\n }\n\n private finishExecution(): void {\n this.isExecuting = false;\n this.grecaptchaLibrary.reset();\n }\n\n setup(\n container: HTMLElement,\n tabIndex: number,\n theme: ReCaptchaV2.Theme,\n type: ReCaptchaV2.Type\n ): void {\n this.grecaptchaLibrary.render(container, {\n callback: this.responseHandler.bind(this),\n 'expired-callback': this.expiredHandler.bind(this),\n 'error-callback': this.errorHandler.bind(this),\n sitekey: this.siteKey,\n tabindex: tabIndex,\n theme,\n type,\n size: 'invisible',\n });\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private responseHandler(response: any): void {\n if (this.executionSuccessBlock) {\n this.executionSuccessBlock(response);\n this.executionSuccessBlock = undefined;\n }\n }\n\n private expiredHandler(): void {\n if (this.executionExpiredBlock) {\n this.executionExpiredBlock();\n this.executionExpiredBlock = undefined;\n }\n }\n\n private errorHandler(): void {\n if (this.executionErrorBlock) {\n this.executionErrorBlock();\n this.executionErrorBlock = undefined;\n }\n }\n}\n"]}

package/dist/test/recaptcha-manager.test.d.ts ADDED Viewed

File without changes

package/dist/test/recaptcha-manager.test.js ADDED Viewed

@@ -0,0 +1,4 @@
+"use strict";
+describe('YourWebComponent', () => {
+});
+//# sourceMappingURL=recaptcha-manager.test.js.map

package/dist/test/recaptcha-manager.test.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;AAElC,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {\n\n});\n"]}

package/dist/test/your-webcomponent.test.d.ts ADDED Viewed

File without changes

package/dist/test/your-webcomponent.test.js ADDED Viewed

@@ -0,0 +1,4 @@
+"use strict";
+describe('YourWebComponent', () => {
+});
+//# sourceMappingURL=your-webcomponent.test.js.map

package/dist/test/your-webcomponent.test.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"your-webcomponent.test.js","sourceRoot":"","sources":["../../test/your-webcomponent.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;AAElC,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {\n\n});\n"]}

package/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';

package/package.json ADDED Viewed

@@ -0,0 +1,96 @@
+{
+  "name": "@internetarchive/recaptcha-manager",
+  "description": "A library that lets you lazy load and interact with reCaptcha more easily.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/iaux-recaptcha-manager.git"
+  },
+  "license": "AGPL-3.0-only",
+  "author": "Internet Archive",
+  "version": "0.0.1-alpha.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepare": "tsc && husky install",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "circular": "madge --circular --extensions ts .",
+    "test": "tsc && yarn run lint && yarn run circular && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@internetarchive/lazy-loader-service": "^0.2.0",
+    "@types/grecaptcha": "^3.0.3"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^7.0.0",
+    "@open-wc/testing": "^3.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "@web/dev-server": "^0.1.28",
+    "@web/test-runner": "^0.13.22",
+    "concurrently": "^6.3.0",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-lit-a11y": "^2.2.0",
+    "eslint-plugin-wc": "^1.3.2",
+    "husky": "^7.0.0",
+    "lit": "^2.2.0",
+    "madge": "^5.0.1",
+    "prettier": "^2.4.1",
+    "sinon": "^12.0.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "globals": {
+      "ReCaptchaV2": "readonly"
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": [
+        "error"
+      ],
+      "class-methods-use-this": "off",
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "off",
+        "ignorePackages",
+        {
+          "js": "never",
+          "ts": "never"
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}