diff --git a/packages/scope/package.json b/packages/scope/package.json index 1532185..8ffcb7b 100644 --- a/packages/scope/package.json +++ b/packages/scope/package.json @@ -47,5 +47,5 @@ "type": "git", "url": "https://github.com/ekwoka/alpine-plugins" }, - "homepage": "https://github.com/ekwoka/alpine-plugins/blob/main/packages/xscope/README.md" + "homepage": "https://github.com/ekwoka/alpine-plugins/blob/main/packages/scope/README.md" } diff --git a/packages/scope/src/index.ts b/packages/scope/src/index.ts index aae30da..403e79f 100644 --- a/packages/scope/src/index.ts +++ b/packages/scope/src/index.ts @@ -1,28 +1,27 @@ -import type { Alpine } from 'alpinets'; +import type { Alpine } from 'alpinejs'; +import type { Assertion } from 'vitest'; export const Scope = (Alpine: Alpine) => { const $scope = Symbol('$scope'); + type Scopable = { [$scope]?: Map }; Alpine.directive('scope', (el, { expression }) => { - const context = Alpine.$data(el); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const context = Alpine.$data(el) as Scopable; const rootContext = Alpine.closestDataStack(el)[0]; if (!rootContext) return; - rootContext[$scope] = new Map( - context[$scope] as Map | undefined, - ).set(expression, el); + rootContext[$scope] = new Map(context[$scope]).set(expression, el); }); Alpine.magic('scope', (el) => { return new Proxy( {}, { get(_, name: string) { - const scopes = Alpine.$data(el)[$scope] as - | Map - | undefined; + const scopes = (Alpine.$data(el) as Scopable)[$scope]; if (scopes?.has(name)) return Alpine.$data(scopes.get(name)!); const root = Alpine.findClosest(el, (el) => el.matches(`[x-data="${name}"]`), - ); + ) as HTMLElement | undefined; if (root) return Alpine.$data(root); return undefined; }, @@ -46,13 +45,13 @@ if (import.meta.vitest) { const root = await render( `
-
- - - -
+
+ + + +
- `.trim(), + `.trim(), ) .withComponent('foo', () => ({ value: 'foo' })) .withComponent('bar', () => ({ value: 'bar' })) @@ -70,14 +69,14 @@ if (import.meta.vitest) { it('can access explicitely scoped context', async () => { const root = await render( ` -
-
- - - -
-
- `.trim(), +
+
+ + + +
+
+ `.trim(), ).withPlugin(Scope); expect((root as HTMLElement).querySelector('#naked')).toHaveTextContent( 'bar', @@ -92,13 +91,13 @@ if (import.meta.vitest) { it('favors explicitely scoped contexts', async () => { const root = await render( ` -
-
- - -
-
- `.trim(), +
+
+ + +
+
+ `.trim(), ) .withComponent('foo', () => ({ value: 'foo' })) .withComponent('bar', () => ({ value: 'bar' })) @@ -113,15 +112,15 @@ if (import.meta.vitest) { it('does not leak', async () => { const root = await render( ` -
-
-
-
- - - -
- `.trim(), +
+
+
+
+ + + +
+ `.trim(), ) .withComponent('foo', () => ({ value: 'foo' })) .withComponent('bar', () => ({ value: 'bar' })) @@ -138,3 +137,10 @@ if (import.meta.vitest) { }); }); } +declare module 'vitest' { + interface Assertion extends AlpineMatchers {} +} + +interface AlpineMatchers { + toHaveTextContent: (expected: string) => Assertion; +} diff --git a/size.json b/size.json index 1c09bed..ae67b10 100644 --- a/size.json +++ b/size.json @@ -15,8 +15,8 @@ "raw": 373 }, "brotli": { - "pretty": "238 B", - "raw": 238 + "pretty": "236 B", + "raw": 236 } }, "xajax": {