Ditch Jest in favor of native Test Runner

.gitattributes

@@ -0,0 +1,2 @@
+script/* linguist-vendored
+test/env/* linguist-vendored

.github/workflows/build.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 21.x]
+        node-version: [20.x]
 
     steps:
       - name: Checkout

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [20.x, 21.x]
+        node-version: [20.x]
 
     steps:
       - name: Checkout

package.json

@@ -29,8 +29,8 @@
     "build": "npm run build:tsc && npm run build:bundle && npm run build:css",
     "build:tsc": "tsc --project src/tsconfig.json",
     "build:bundle": "esbuild src/index.ts --bundle --format=esm --platform=browser --target=esnext --outfile=dist/bundle/comments-element-esm.js --legal-comments=none",
-    "build:css": "tsx --tsconfig tsconfig-template.json compact-css.ts",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest"
+    "build:css": "tsx --tsconfig tsconfig-template.json script/compact-css.ts",
+    "test": "node --import tsx script/run-tests.ts | faucet"
   },
   "files": [
     "dist/*.js",
@@ -60,22 +60,22 @@
     "node": ">=20.9.0"
   },
   "dependencies": {
-    "@textcomplete/core": "~0.1.12",
-    "@textcomplete/textarea": "~0.1.12",
+    "@textcomplete/core": "^0.1.13",
+    "@textcomplete/textarea": "~0.1.13",
     "eventemitter3": "^5.0.1",
-    "dompurify": "~3.0.6"
+    "dompurify": "^3.0.6"
   },
   "devDependencies": {
-    "@types/node": "~20.10.3",
-    "@jest/globals": "~29.7.0",
+    "@types/node": "~20.10.4",
     "@types/dompurify": "~3.0.5",
-    "typescript": "~5.3.2",
+    "typescript": "~5.3.3",
     "tslib": "~2.6.2",
-    "jest": "~29.7.0",
-    "jest-environment-jsdom": "~29.7.0",
-    "ts-jest": "~29.1.1",
+    "glob": "~10.3.10",
     "tsx": "~4.6.2",
-    "esbuild": "~0.19.8",
+    "jsdom": "~23.0.1",
+    "faucet": "~0.0.4",
+    "c8": "~8.0.1",
+    "esbuild": "~0.19.9",
     "magic-string": "~0.30.5"
   }
 }

script/run-tests.ts

@@ -0,0 +1,12 @@
+import {tap} from 'node:test/reporters';
+import {run} from 'node:test';
+import {stdout} from 'node:process';
+import {globSync} from 'glob';
+
+const files: string[] = globSync('test/**/*.spec.ts', {absolute: true});
+files.forEach(console.log);
+run({
+    files: files
+})
+    .compose(tap)
+    .pipe(stdout);

src/api.ts

@@ -9,7 +9,7 @@ import {Misc} from './options/misc.js';
 export interface CommentsOptions extends CurrentUser, Icons, Labels, Functionalities, Callbacks, Formatters, Misc {
 }
 
-export {CommentModel, UserDisplayNamesById, PingableUser, ReferenceableHashtag} from './options/models.js';
+export type {CommentModel, UserDisplayNamesById, PingableUser, ReferenceableHashtag} from './options/models.js';
 
 export {SortKey} from './options/misc.js';
 

src/comments-element.ts

@@ -13,13 +13,13 @@ import {SpinnerFactory} from './subcomponent/spinner-factory.js';
 import {CommentViewModel, CommentViewModelEvent} from './comment-view-model.js';
 import {findParentsBySelector, hideElement} from './html-util.js';
 import {STYLE_SHEET} from './css/stylesheet.js';
-import {CustomElement} from './custom-element.js';
+import {CustomElement, defineCustomElement} from './custom-element.js';
 import {createDynamicStylesheet} from './css/dynamic-stylesheet-factory.js';
 import {ToggleAllButtonElement} from './subcomponent/toggle-all-button-element.js';
 import {CommentingFieldElement} from './subcomponent/commenting-field-element.js';
 import {CommentElement} from './subcomponent/comment-element.js';
 
-@CustomElement('ax-comments')
+//@CustomElement('ax-comments')
 export class CommentsElement extends HTMLElement implements WebComponent {
     private container!: HTMLElement;
 
@@ -396,3 +396,5 @@ export class CommentsElement extends HTMLElement implements WebComponent {
     }
 
 }
+
+defineCustomElement(CommentsElement, 'ax-comments');

src/custom-element.ts

@@ -24,3 +24,10 @@ type CustomElementDecorator = <E extends HTMLElement, C extends CustomElementCon
  * Reference to the specific custom element's class.
  */
 type CustomElementConstructor<E extends HTMLElement> = new (...args: any[]) => E;
+
+/**
+ * @deprecated Use until https://github.com/evanw/esbuild/issues/3462 is done. See also https://caniuse.com/decorators
+ */
+export function defineCustomElement(ctor: CustomElementConstructor<HTMLElement>, selector: string, options?: ElementDefinitionOptions): void {
+    customElements.define(selector, ctor, options);
+}

src/subcomponent/button-element.ts

@@ -1,15 +1,15 @@
 import {CommentModel, CommentsOptions} from '../api.js';
 import {OptionsProvider, ServiceProvider} from '../provider.js';
 import {SpinnerFactory} from './spinner-factory.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {getHostContainer} from '../html-util.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 import {ErrorFct, SuccessFct} from '../options/callbacks.js';
 import {isNil, noop} from '../util.js';
 
-@CustomElement('ax-button', {extends: 'button'})
+//@CustomElement('ax-button', {extends: 'button'})
 export class ButtonElement extends HTMLButtonElement implements WebComponent {
 
     set inline(value: boolean) {
@@ -199,3 +199,5 @@ export class ButtonElement extends HTMLButtonElement implements WebComponent {
     }
 
 }
+
+defineCustomElement(ButtonElement, 'ax-button', {extends: 'button'});

src/subcomponent/comment-container-element.ts

@@ -4,7 +4,7 @@ import {TagFactory} from './tag-factory.js';
 import {CommentModel, CommentsOptions} from '../api.js';
 import {CommentViewModelProvider, OptionsProvider, ServiceProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {findParentsBySelector, getHostContainer} from '../html-util.js';
 import {ButtonElement} from './button-element.js';
 import {CommentViewModel, CommentViewModelEvent, CommentViewModelEventSubscription} from '../comment-view-model.js';
@@ -16,7 +16,7 @@ import {SuccessFct} from '../options/callbacks.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {AttachmentModel} from '../options/models.js';
 
-@CustomElement('ax-comment-container')
+//@CustomElement('ax-comment-container')
 export class CommentContainerElement extends HTMLElement implements WebComponent {
 
     commentModel!: CommentModelEnriched;
@@ -374,3 +374,5 @@ export class CommentContainerElement extends HTMLElement implements WebComponent
         this.querySelector('.actions')!.replaceWith(actions);
     }
 }
+
+defineCustomElement(CommentContainerElement, 'ax-comment-container');

src/subcomponent/comment-element.ts

@@ -1,10 +1,10 @@
 import {isNil} from '../util.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {CommentContainerElement} from './comment-container-element.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 
-@CustomElement('ax-comment', {extends: 'li'})
+//@CustomElement('ax-comment', {extends: 'li'})
 export class CommentElement extends HTMLLIElement implements WebComponent {
 
     #commentModel!: CommentModelEnriched;
@@ -61,3 +61,5 @@ export class CommentElement extends HTMLLIElement implements WebComponent {
         commentContainer.reRenderCommentActionBar();
     }
 }
+
+defineCustomElement(CommentElement, 'ax-comment', {extends: 'li'});

src/subcomponent/commenting-field-element.ts

@@ -9,7 +9,7 @@ import {CommentModelEnriched} from '../comments-by-id.js';
 import {CommentViewModelProvider, OptionsProvider, ServiceProvider} from '../provider.js';
 import {CommentViewModel} from '../comment-view-model.js';
 import {WebComponent} from '../web-component.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {
     findSiblingsBySelector,
     getHostContainer,
@@ -21,7 +21,7 @@ import {ErrorFct, SuccessFct} from '../options/callbacks.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {AttachmentModel} from '../options/models.js';
 
-@CustomElement('ax-commenting-field')
+//@CustomElement('ax-commenting-field')
 export class CommentingFieldElement extends HTMLElement implements WebComponent {
 
     parentId: string | null = null;
@@ -449,3 +449,5 @@ export class CommentingFieldElement extends HTMLElement implements WebComponent
         uploadButton.querySelector('input')!.value = '';
     }
 }
+
+defineCustomElement(CommentingFieldElement, 'ax-commenting-field');

src/subcomponent/navigation-element.ts

@@ -1,11 +1,11 @@
 import {CommentsOptions, SortKey} from '../api.js';
 import {OptionsProvider} from '../provider.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {getHostContainer, hideElement, showElement} from '../html-util.js';
 import {noop} from '../util.js';
 
-@CustomElement('ax-navigation')
+//@CustomElement('ax-navigation')
 export class NavigationElement extends HTMLElement implements WebComponent {
 
     sortKey: SortKey = SortKey.NEWEST;
@@ -161,3 +161,5 @@ export class NavigationElement extends HTMLElement implements WebComponent {
         getHostContainer(this).classList.add('responsive');
     }
 }
+
+defineCustomElement(NavigationElement, 'ax-navigation');

src/subcomponent/textarea-element.ts

@@ -3,11 +3,11 @@ import {CommentsOptions} from '../api.js';
 import {CommentViewModelProvider, OptionsProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
 import {findSiblingsBySelector, getHostContainer} from '../html-util.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {PingableUser, UserDisplayNamesById} from '../options/models.js';
 import {CommentViewModel} from '../comment-view-model.js';
 
-@CustomElement('ax-textarea', {extends: 'textarea'})
+//@CustomElement('ax-textarea', {extends: 'textarea'})
 export class TextareaElement extends HTMLTextAreaElement implements WebComponent {
 
     parentId: string | null = null;
@@ -79,7 +79,7 @@ export class TextareaElement extends HTMLTextAreaElement implements WebComponent
 
         if (el.valueBeforeChange !== el.value) {
             el.valueBeforeChange = el.value;
-            el.dispatchEvent(new Event('change', {bubbles: true}))
+            el.dispatchEvent(new CustomEvent('change', {bubbles: true}))
         }
     };
 
@@ -111,3 +111,5 @@ export class TextareaElement extends HTMLTextAreaElement implements WebComponent
     }
 
 }
+
+defineCustomElement(TextareaElement, 'ax-textarea', {extends: 'textarea'});

src/subcomponent/toggle-all-button-element.ts

@@ -1,12 +1,12 @@
 import {isNil} from '../util.js';
 import {OptionsProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
-import {CustomElement} from '../custom-element.js';
+import {CustomElement, defineCustomElement} from '../custom-element.js';
 import {findSiblingsBySelector, getHostContainer} from '../html-util.js';
 import {Labels} from '../options/labels.js';
 import {Misc} from '../options/misc.js';
 
-@CustomElement('ax-toggle-all-button', {extends: 'li'})
+//@CustomElement('ax-toggle-all-button', {extends: 'li'})
 export class ToggleAllButtonElement extends HTMLLIElement implements WebComponent {
 
     #options!: Required<Labels & Misc>;
@@ -127,3 +127,5 @@ export class ToggleAllButtonElement extends HTMLLIElement implements WebComponen
         }
     }
 }
+
+defineCustomElement(ToggleAllButtonElement, 'ax-toggle-all-button', {extends: 'li'});