From 15464e5662c07f9a476419c3ea25261cec320987 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 29 Feb 2024 10:40:01 -0600 Subject: [PATCH] feat: add define to package entrypoint (#22) * feat: add define to entrypoint * feat: add define to package entrypoint --- .changeset/witty-ears-shop.md | 5 +++++ package-lock.json | 4 ++-- packages/live-region-element/package.json | 21 +++++++------------ packages/live-region-element/rollup.config.js | 8 +++---- .../src/__tests__/global-announce.test.ts | 1 - packages/live-region-element/src/index.ts | 1 + .../src/live-region-element.ts | 21 +++++++++++++++++-- website/src/components/Layout.tsx | 2 -- 8 files changed, 38 insertions(+), 25 deletions(-) create mode 100644 .changeset/witty-ears-shop.md diff --git a/.changeset/witty-ears-shop.md b/.changeset/witty-ears-shop.md new file mode 100644 index 0000000..387a902 --- /dev/null +++ b/.changeset/witty-ears-shop.md @@ -0,0 +1,5 @@ +--- +"@primer/live-region-element": minor +--- + +Add define behavior to entrypoint, remove define entrypoint diff --git a/package-lock.json b/package-lock.json index 9914abf..c4da559 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9865,7 +9865,7 @@ }, "packages/live-region-element": { "name": "@primer/live-region-element", - "version": "0.1.0", + "version": "0.1.1", "license": "MIT", "dependencies": { "@lit-labs/ssr-dom-shim": "^1.2.0" @@ -9884,7 +9884,7 @@ }, "website": { "dependencies": { - "@primer/live-region-element": "^0.1.0", + "@primer/live-region-element": "^0.1.1", "a11y-dialog": "^8.0.4", "next": "^14.1.0", "react": "^18.2.0", diff --git a/packages/live-region-element/package.json b/packages/live-region-element/package.json index 0552ec2..e1f8c8a 100644 --- a/packages/live-region-element/package.json +++ b/packages/live-region-element/package.json @@ -16,18 +16,6 @@ }, "import": "./dist/esm/index.js", "require": "./dist/cjs/index.cjs" - }, - "./define": { - "types": { - "import": "./dist/esm/define.d.ts", - "require": "./dist/cjs/define.d.cts" - }, - "node": { - "import": "./dist/esm/node/define.js", - "require": "./dist/cjs/node/define.cjs" - }, - "import": "./dist/esm/define.js", - "require": "./dist/cjs/define.cjs" } }, "repository": { @@ -68,9 +56,14 @@ }, "sideEffects": [ "./src/define.ts", + "./src/index.ts", "./dist/esm/define.js", - "./dist/cjs/define.js", + "./dist/esm/index.js", + "./dist/cjs/define.cjs", + "./dist/cjs/index.cjs", "./dist/esm/node/define.js", - "./dist/cjs/node/define.js" + "./dist/esm/node/index.js", + "./dist/cjs/node/define.cjs", + "./dist/cjs/node/index.cjs" ] } diff --git a/packages/live-region-element/rollup.config.js b/packages/live-region-element/rollup.config.js index 85aae84..72150bc 100644 --- a/packages/live-region-element/rollup.config.js +++ b/packages/live-region-element/rollup.config.js @@ -8,7 +8,7 @@ import typescript from 'rollup-plugin-typescript2' */ const config = [ { - input: ['./src/index.ts', './src/define.ts'], + input: ['./src/index.ts'], external: ['@lit-labs/ssr-dom-shim'], plugins: [typescript({tsconfig: 'tsconfig.build.json'}), esbuild()], output: { @@ -17,7 +17,7 @@ const config = [ }, }, { - input: ['./src/index.ts', './src/define.ts'], + input: ['./src/index.ts'], external: ['@lit-labs/ssr-dom-shim'], plugins: [typescript({tsconfig: 'tsconfig.build.json'}), esbuild()], output: { @@ -27,7 +27,7 @@ const config = [ }, }, { - input: ['./src/index.ts', './src/define.ts'], + input: ['./src/index.ts'], external: ['@lit-labs/ssr-dom-shim'], plugins: [ esbuild(), @@ -50,7 +50,7 @@ const config = [ }, }, { - input: ['./src/index.ts', './src/define.ts'], + input: ['./src/index.ts'], external: ['@lit-labs/ssr-dom-shim'], plugins: [ esbuild(), diff --git a/packages/live-region-element/src/__tests__/global-announce.test.ts b/packages/live-region-element/src/__tests__/global-announce.test.ts index f7a5483..fe40794 100644 --- a/packages/live-region-element/src/__tests__/global-announce.test.ts +++ b/packages/live-region-element/src/__tests__/global-announce.test.ts @@ -1,7 +1,6 @@ import {afterEach, describe, test, expect} from 'vitest' import {announce, announceFromElement} from '../' import {LiveRegionElement} from '../live-region-element' -import '../define' describe('Global announcements', () => { afterEach(() => { diff --git a/packages/live-region-element/src/index.ts b/packages/live-region-element/src/index.ts index cb5a3d2..6759452 100644 --- a/packages/live-region-element/src/index.ts +++ b/packages/live-region-element/src/index.ts @@ -1,3 +1,4 @@ +import './define' import {LiveRegionElement, templateContent, type AnnounceOptions} from './live-region-element' type GlobalAnnounceOptions = AnnounceOptions & { diff --git a/packages/live-region-element/src/live-region-element.ts b/packages/live-region-element/src/live-region-element.ts index 0062d53..2e105c3 100644 --- a/packages/live-region-element/src/live-region-element.ts +++ b/packages/live-region-element/src/live-region-element.ts @@ -42,8 +42,9 @@ class LiveRegionElement extends HTMLElement { * corresponding politeness level */ public announceFromElement(element: HTMLElement, options?: AnnounceOptions) { - if (element.textContent) { - this.announce(element.textContent, options) + const textContent = getTextContent(element) + if (textContent !== '') { + this.announce(textContent, options) } } @@ -56,6 +57,22 @@ class LiveRegionElement extends HTMLElement { } } +function getTextContent(element: HTMLElement): string { + let value: string | null = '' + + if (element.hasAttribute('aria-label')) { + value = element.getAttribute('aria-label') + // eslint-disable-next-line github/no-innerText + } else if (element.innerText) { + // eslint-disable-next-line github/no-innerText + value = element.innerText + } else if (element.textContent) { + value = element.textContent + } + + return value ? value.trim() : '' +} + let template: HTMLTemplateElement | null = null const templateContent = ` diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx index 5d69575..904a30e 100644 --- a/website/src/components/Layout.tsx +++ b/website/src/components/Layout.tsx @@ -1,7 +1,5 @@ 'use client' -import '@primer/live-region-element/define' - export function Layout({children}: React.PropsWithChildren) { return children }