Merge pull request #9 from adanski/deps-upgrade

Dependencies upgrade, workflows adaptation

.gitattributes

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

.github/workflows/build.yml

@@ -4,23 +4,30 @@ name: build
 
 on:
   push:
+    branches:
+      - master
   pull_request:
   workflow_dispatch:
 
 jobs:
   build:
-    runs-on: windows-latest
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{matrix.node-version}}
-      - run: npm install
-      - run: npm run build
+      - name: Build
+        run: |
+          npm install
+          npm run build
   test:
     needs: build
     uses: ./.github/workflows/test.yml
+    secrets: inherit

.github/workflows/publish.yml

@@ -10,15 +10,19 @@ on:
 
 jobs:
   publish-npm:
-    runs-on: windows-latest
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: npm install
-      - run: npm run build
-      - run: npm publish
+      - name: Build and publish
+        run: |
+          npm install
+          npm run build
+          npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/test.yml

@@ -7,15 +7,19 @@ on:
 
 jobs:
   test:
-    runs-on: windows-latest
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{matrix.node-version}}
-      - run: npm install
-      - run: npm test
+      - name: Test
+        run: |
+          npm install
+          npm test

.gitignore

@@ -5,6 +5,7 @@ target/
 # Dependencies
 node_modules/
 jspm_packages/
+# Libraries should not commit package-lock
 package-lock.json
 
 # Logs

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": "ts-node --esm -P tsconfig-template.json -O {\\\"moduleResolution\\\":\\\"node\\\"} 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",
@@ -57,24 +57,25 @@
     "url": "https://github.com/adanski/ax-comments.git"
   },
   "engines": {
-    "node": ">=16.0.0 <21.0.0"
+    "node": ">=20.9.0"
   },
   "dependencies": {
-    "@textcomplete/core": "~0.1.12",
-    "@textcomplete/textarea": "~0.1.12",
-    "dompurify": "~2.4.3"
+    "@textcomplete/core": "^0.1.13",
+    "@textcomplete/textarea": "~0.1.13",
+    "eventemitter3": "^5.0.1",
+    "dompurify": "^3.0.6"
   },
   "devDependencies": {
-    "@types/node": "~16.18.10",
-    "@jest/globals": "~29.3.1",
-    "@types/dompurify": "~2.4.0",
-    "typescript": "~4.9.4",
-    "tslib": "~2.4.1",
-    "jest": "~29.3.1",
-    "jest-environment-jsdom": "~29.3.1",
-    "ts-jest": "~29.0.3",
-    "ts-node": "~10.9.1",
-    "esbuild": "~0.16.14",
-    "magic-string": "~0.27.0"
+    "@types/node": "~20.10.4",
+    "@types/dompurify": "~3.0.5",
+    "typescript": "~5.3.3",
+    "tslib": "~2.6.2",
+    "glob": "~10.3.10",
+    "tsx": "~4.6.2",
+    "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/comment-view-model.ts

@@ -1,6 +1,6 @@
 import {CommentsById, CommentModelEnriched, CommentId} from './comments-by-id.js';
-import EventEmitter from 'EventEmitter3';
 import {CommentModel} from './options/models.js';
+import {EventEmitter} from 'eventemitter3';
 
 export class CommentViewModel {
 

src/comments-element.ts

@@ -11,15 +11,15 @@ import {CommentSorter} from './comment-sorter.js';
 import {NavigationElement} from './subcomponent/navigation-element.js';
 import {SpinnerFactory} from './subcomponent/spinner-factory.js';
 import {CommentViewModel, CommentViewModelEvent} from './comment-view-model.js';
-import {findParentsBySelector, findSiblingsBySelector, hideElement, showElement} from './html-util.js';
+import {findParentsBySelector, hideElement} from './html-util.js';
 import {STYLE_SHEET} from './css/stylesheet.js';
-import {RegisterCustomElement} from './register-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';
 
-@RegisterCustomElement('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

@@ -0,0 +1,33 @@
+/**
+ * Decorator which registers custom HTML element.
+ */
+export function CustomElement(selector: string, options?: ElementDefinitionOptions): CustomElementDecorator {
+    return (target, context) => {
+        context.addInitializer(function () {
+            customElements.define(selector, this, options);
+        });
+    };
+}
+
+/*declare global {
+    interface HTMLElementTagNameMap {
+        selector: target;
+    }
+}*/
+
+/**
+ * Custom element decorator. Based on {@link ClassDecorator}.
+ */
+type CustomElementDecorator = <E extends HTMLElement, C extends CustomElementConstructor<E>>(target: C, context: ClassDecoratorContext<C>) => C | void;
+
+/**
+ * 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 {RegisterCustomElement} from '../register-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';
 
-@RegisterCustomElement('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 {RegisterCustomElement} from '../register-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';
 
-@RegisterCustomElement('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 {RegisterCustomElement} from '../register-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';
 
-@RegisterCustomElement('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'});