bitjson · rnbrady · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 8, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 dist/
 www/
+loader/
 
 *~
 *.sw[mnpcod]

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,8 +2,8 @@
   "name": "@bitjson/qr-code",
   "version": "1.0.2",
   "description": "QR Code Web Component",
-  "module": "dist/esm/index.js",
-  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "main": "dist/index.cjs.js",
   "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "files": [
@@ -15,13 +15,14 @@
     "watch:prod": "stencil build --watch --serve --prod",
     "serve": "stencil-dev-server",
     "start": "npm run watch",
-    "test": "jest",
-    "test.watch": "jest --watch"
+    "test": "stencil test --spec",
+    "test.watch": "stencil test --spec --watchAll"
   },
   "devDependencies": {
-    "@stencil/core": "^0.10.2",
-    "@types/jest": "^21.1.1",
-    "jest": "^21.2.1",
+    "@stencil/core": "^2.22.3",
+    "@types/jest": "^27.5.2",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "just-animate": "^2.5.0",
     "qrcode-generator": "^1.4.0"
   },
@@ -33,18 +34,5 @@
   "bugs": {
     "url": "https://github.com/bitjson/qr-code"
   },
-  "homepage": "https://qr.bitjson.com",
-  "jest": {
-    "transform": {
-      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/@stencil/core/testing/jest.preprocessor.js"
-    },
-    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "json",
-      "jsx"
-    ]
-  }
+  "homepage": "https://qr.bitjson.com"
 }
diff --git a/readme.md b/readme.md
@@ -14,10 +14,11 @@ https://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1
 
 # Usage
 
-Import `<qr-code>` using your build system or framework (e.g. `npm install @bitjson/qr-code`), or use the standalone script in your HTML `<head>` element:
+Import `<qr-code>` using your build system or framework (e.g. `npm install @bitjson/qr-code`), or use the standalone scripts in your HTML `<head>` element (you can add both of these for fallback on older browsers):
 
 ```html
-<script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script>
+<script type="module" src="https://unpkg.com/@bitjson/qr-code@2.0.0/dist/esm/qr-code.mjs"></script>
+<script nomodule src="https://unpkg.com/@bitjson/qr-code@2.0.0/dist/qr-code.js"></script>
 ```
 
 Then use the component anywhere in your HTML `<body>` element:
@@ -55,6 +56,43 @@ Here's an example in pure HTML using most features:
 </script>
 ```
 
+## Using with React
+
+```tsx
+import { applyPolyfills, defineCustomElements } from "@bitjson/qr-code/loader";
+
+applyPolyfills().then(() => {
+  defineCustomElements();
+});
+
+export default function Home() {
+  return (
+    <div>
+      <main>
+        <qr-code
+            contents="Hello world"
+            module-color="white"
+            position-ring-color="white"
+            position-center-color="white"
+          />
+      </main>
+    </div>
+  );
+}
+
+// types.d.ts (when using with TSX)
+import { JSX as QrCodeJSX } from "@bitjson/qr-code";
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'qr-code': QrCodeJSX.QrCode;
+    }
+  }
+}
+```
+
+
 ## Animations
 
 Animate in, animate on user interactions like URL hits or detected payments, and/or animate out when the QR code interaction is complete.

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -1,82 +1,59 @@
+/* eslint-disable */
+/* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-
-import '@stencil/core';
-
-declare global {
-  namespace JSX {
-    interface Element {}
-    export interface IntrinsicElements {}
-  }
-  namespace JSXElements {}
-
-  interface HTMLElement {
-    componentOnReady?: () => Promise<this | null>;
-  }
-
-  interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
-
-    forceUpdate(): void;
-  }
-
-  interface HTMLAttributes {}
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { AnimationPreset, QRCodeAnimation } from "./components/qr-code/animations";
+export namespace Components {
+    interface QrCode {
+        "animateQRCode": (animation?: AnimationPreset | QRCodeAnimation) => Promise<void>;
+        "contents": string;
+        "getModuleCount": () => Promise<number>;
+        "maskXToYRatio": number;
+        "moduleColor": string;
+        "positionCenterColor": string;
+        "positionRingColor": string;
+        "protocol": string;
+        "squares": boolean;
+    }
+}
+export interface QrCodeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQrCodeElement;
 }
-
-import {
-  AnimationPreset,
-  QRCodeAnimation,
-} from './components/qr-code/animations';
-
 declare global {
-
-  namespace StencilComponents {
+    interface HTMLQrCodeElement extends Components.QrCode, HTMLStencilElement {
+    }
+    var HTMLQrCodeElement: {
+        prototype: HTMLQrCodeElement;
+        new (): HTMLQrCodeElement;
+    };
+    interface HTMLElementTagNameMap {
+        "qr-code": HTMLQrCodeElement;
+    }
+}
+declare namespace LocalJSX {
     interface QrCode {
-      'animateQRCode': (animation?: AnimationPreset | QRCodeAnimation) => void;
-      'contents': string;
-      'getModuleCount': () => number;
-      'maskXToYRatio': number;
-      'moduleColor': string;
-      'positionCenterColor': string;
-      'positionRingColor': string;
-      'protocol': string;
-      'squares': boolean;
+        "contents"?: string;
+        "maskXToYRatio"?: number;
+        "moduleColor"?: string;
+        "onCodeRendered"?: (event: QrCodeCustomEvent<any>) => void;
+        "positionCenterColor"?: string;
+        "positionRingColor"?: string;
+        "protocol"?: string;
+        "squares"?: boolean;
     }
-  }
-
-  interface HTMLQrCodeElement extends StencilComponents.QrCode, HTMLStencilElement {}
-
-  var HTMLQrCodeElement: {
-    prototype: HTMLQrCodeElement;
-    new (): HTMLQrCodeElement;
-  };
-  interface HTMLElementTagNameMap {
-    'qr-code': HTMLQrCodeElement;
-  }
-  interface ElementTagNameMap {
-    'qr-code': HTMLQrCodeElement;
-  }
-  namespace JSX {
     interface IntrinsicElements {
-      'qr-code': JSXElements.QrCodeAttributes;
+        "qr-code": QrCode;
     }
-  }
-  namespace JSXElements {
-    export interface QrCodeAttributes extends HTMLAttributes {
-      'contents'?: string;
-      'maskXToYRatio'?: number;
-      'moduleColor'?: string;
-      'onCodeRendered'?: (event: CustomEvent) => void;
-      'positionCenterColor'?: string;
-      'positionRingColor'?: string;
-      'protocol'?: string;
-      'squares'?: boolean;
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "qr-code": LocalJSX.QrCode & JSXBase.HTMLAttributes<HTMLQrCodeElement>;
+        }
     }
-  }
 }
-
-declare global { namespace JSX { interface StencilJSX {} } }
-
-export declare function defineCustomElements(window: any): void;
diff --git a/src/components/qr-code/qr-code.spec.ts b/src/components/qr-code/qr-code.spec.ts
@@ -1,24 +1,38 @@
-import { TestWindow } from '@stencil/core/testing';
+import { newSpecPage } from '@stencil/core/testing';
 import { BpQRCode } from './qr-code';
 
 describe('qr-code', () => {
-  it('should build', () => {
+  it('builds', () => {
     expect(new BpQRCode()).toBeTruthy();
   });
+
+  it('renders without slotted content', async () => {
+    const { body } = await newSpecPage({
+      components: [BpQRCode],
+      html: '<qr-code></qr-code>',
+    });
+    expect(body.querySelector('qr-code')).not.toBeNull();
+    expect(body.querySelector('qr-code').shadowRoot.querySelector('slot')).not.toBeNull();
+    expect(body.querySelector('[slot="icon"]')).toBeNull();
+  });
 
-  describe('rendering', () => {
-    let element: HTMLQrCodeElement;
-    let testWindow: TestWindow;
-    beforeEach(async () => {
-      testWindow = new TestWindow();
-      element = await testWindow.load({
-        components: [BpQRCode],
-        html: '<qr-code></qr-code>',
-      });
+  it('renders with slotted content', async () => {
+    const { body } = await newSpecPage({
+      components: [BpQRCode],
+      html: '<qr-code><div slot="icon">Icon</div></qr-code>',
     });
+    expect(body.querySelector('qr-code')).not.toBeNull();
+    expect(body.querySelector('qr-code').shadowRoot.querySelector('slot')).not.toBeNull();
+    expect(body.querySelector('[slot="icon"]')).not.toBeNull();
+    expect(body.querySelector('[slot="icon"]').textContent).toBe('Icon');
+  });
 
-    it('should work without parameters', () => {
-      expect(element.textContent.trim()).toEqual('TODO');
+  it('has correct module count', async () => {
+    const { body } = await newSpecPage({
+      components: [BpQRCode],
+      html: '<qr-code contents="1234567890"></qr-code>',
     });
+    expect(body.querySelector('qr-code')).not.toBeNull();
+    expect(await body.querySelector('qr-code').getModuleCount()).toBe(25);
   });
 });
diff --git a/src/components/qr-code/qr-code.tsx b/src/components/qr-code/qr-code.tsx
@@ -7,14 +7,15 @@ import {
   Method,
   State,
   Watch,
+  h,
 } from '@stencil/core';
 
 import { addPlugin, animate } from 'just-animate';
-import { waapiPlugin } from 'just-animate/lib.es2015/web';
+import { waapiPlugin } from 'just-animate/lib/web';
 addPlugin(waapiPlugin);
 
 // Comment below and line 149 build for production:
-import { player } from 'just-animate/lib.es2015/tools';
+import { player } from 'just-animate/lib/tools';
 
 import qrcode from 'qrcode-generator';
 import {
@@ -76,21 +77,23 @@ export class BpQRCode {
         ? true
         : false
       : realSlot
-      ? realSlot.assignedNodes().length > 0
+      ? typeof realSlot.assignedNodes === 'function'
+        ? realSlot.assignedNodes().length > 0
+        : realSlot.childNodes.length > 0  // Fallback for Jest jsdom environment
       : false;
 
     this.data = this.generateQRCodeSVG(this.contents, hasSlot);
   }
 
   @Method()
-  animateQRCode(animation?: AnimationPreset | QRCodeAnimation) {
+  async animateQRCode(animation?: AnimationPreset | QRCodeAnimation) {
     this.executeAnimation(
       typeof animation === 'string' ? getAnimationPreset(animation) : animation
     );
   }
 
   @Method()
-  getModuleCount() {
+  async getModuleCount() {
     return this.moduleCount;
   }
 
@@ -246,16 +249,18 @@ export class BpQRCode {
       coordinateShift: number
     ) {
       return `
-      <path class="position-ring" fill="${ringFill}" data-column="${
-        x - margin
-      }" data-row="${y - margin}" d="M${x - coordinateShift} ${
-        y - 0.5 - coordinateShift
-      }h6s.5 0 .5 .5v6s0 .5-.5 .5h-6s-.5 0-.5-.5v-6s0-.5 .5-.5zm.75 1s-.25 0-.25 .25v4.5s0 .25 .25 .25h4.5s.25 0 .25-.25v-4.5s0-.25 -.25 -.25h-4.5z"/>
-      <path class="position-center" fill="${centerFill}" data-column="${
-        x - margin + 2
-      }" data-row="${y - margin + 2}" d="M${x + 2 - coordinateShift} ${
-        y + 1.5 - coordinateShift
-      }h2s.5 0 .5 .5v2s0 .5-.5 .5h-2s-.5 0-.5-.5v-2s0-.5 .5-.5z"/>
+      <path
+        class="position-ring"
+        fill="${ringFill}"
+        data-column="${x - margin}" 
+        data-row="${y - margin}" 
+        d="M${x - coordinateShift} ${y - 0.5 - coordinateShift}h6s.5 0 .5 .5v6s0 .5-.5 .5h-6s-.5 0-.5-.5v-6s0-.5 .5-.5zm.75 1s-.25 0-.25 .25v4.5s0 .25 .25 .25h4.5s.25 0 .25-.25v-4.5s0-.25 -.25 -.25h-4.5z"/>
+      <path
+        class="position-center"
+        fill="${centerFill}"
+        data-column="${x - margin + 2}"
+        data-row="${y - margin + 2}"
+        d="M${x + 2 - coordinateShift} ${y + 1.5 - coordinateShift}h2s.5 0 .5 .5v2s0 .5-.5 .5h-2s-.5 0-.5-.5v-2s0-.5 .5-.5z"/>
       `;
     }
 
@@ -359,7 +364,7 @@ export class BpQRCode {
             data-column={this.moduleCount / 2}
             data-row={this.moduleCount / 2}
           >
-            <slot name="icon" />
+            <slot name="icon"/>
           </div>
         </div>
         <div innerHTML={this.data} />

diff --git a/src/index.html b/src/index.html
@@ -11,9 +11,13 @@
     <!-- <script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script> -->
 
     <!-- Development mode -->
-    <script src="/build/qr-code.js"></script>
+    <script type="module" src="/build/qr-code.esm.js"></script>
+    <script nomodule src="/build/qr-code.js"></script>
+
     <!-- Test production build on local filesystem -->
-    <!-- <script src="../dist/qr-code.js"></script> -->
+    <!-- <script type="module" src="../dist/qr-code/qr-code.esm.js"></script> -->
+    <!-- <script src="../dist/qr-code/qr-code.js"></script> -->
+
     <!-- Test with latest release -->
     <!-- <script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script> -->
   </head>
-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     dist/
     www/
+    loader/
     *~
     *.sw[mnpcod]
@@ Expand Down @@