Skip to content

Commit 89a1883

Browse files
Add note about TypeScript requiring types for namespaced attributes (#954)
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 534ce8a commit 89a1883

File tree

5 files changed

+22
-3
lines changed

5 files changed

+22
-3
lines changed

src/routes/configuration/typescript.mdx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -748,12 +748,15 @@ declare module "solid-js" {
748748
count: number;
749749
name: string;
750750
}
751+
interface ExplicitBoolAttributes {
752+
disabled: boolean;
753+
}
751754
}
752755
}
753756

754757
// Usage
755758
<Input prop:name={name()} prop:count={count()}/>
756-
<my-web-component attr:name={name()} attr:count={count()}/>
759+
<my-web-component attr:name={name()} attr:count={count()} bool:disabled={true}/>
757760
```
758761

759762
#### Custom directives

src/routes/reference/jsx-attributes/attr.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22
title: attr:*
33
---
44

5-
Forces the prop to be treated as an attribute instead of a property. Useful for Web Components where you want to set attributes.
5+
Forces the prop to be treated as an attribute instead of a property.
6+
Useful for Web Components where you want to set attributes.
67

78
```tsx
89
<my-element attr:status={props.status} />
910
```
11+
12+
<Callout type="info" title="Strong-Typing Custom Attributes">
13+
Type definitions are required when using TypeScript.
14+
See the[TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
15+
</Callout>

src/routes/reference/jsx-attributes/bool.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,8 @@ This attribute is most useful for Web Components.
1919
<my-element />
2020

2121
```
22+
23+
<Callout type="info" title="Strong-Typing Custom Bollean Attributes">
24+
Type definitions are required when using TypeScript.
25+
See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
26+
</Callout>

src/routes/reference/jsx-attributes/on.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const handler = {
2929

3030
// or inline
3131

32-
<div on:click={{passive:true, handleEvent(e) => console.log("Weeeee!")}} />
32+
<div on:click={{passive:true, handleEvent(e) { console.log("Weeeee!")}}} />
3333
```
3434

3535
This new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.

src/routes/reference/jsx-attributes/prop.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,8 @@ Forces the prop to be treated as a property instead of an attribute.
88
```tsx
99
<div prop:scrollTop={props.scrollPos + "px"} />
1010
```
11+
12+
<Callout type="info" title="Strong-Typing Custom Properties">
13+
Type definitions are required when using TypeScript.
14+
See the [TypeScript](/configuration/typescript#forcing-properties-and-custom-attributes) page for examples.
15+
</Callout>

0 commit comments

Comments
 (0)