Skip to content

Commit f99dd04

Browse files
raymondboswelryansolid
raymondboswel
and
ryansolid
authored
Solid-Element: Add clarification on 'props' parameter in customElement function (#1730)
* Solid-Element: Add clarification on default prop values It's been a while since I ran into this, but when I used solid element in my project, I encountered the issue where the components weren't reacting to changes to props. It took quite a bit of head scratching and delving into the code to see that only props with default values are handled by the custom element. * Create gorgeous-parents-greet.md --------- Co-authored-by: Ryan Carniato <[email protected]>
1 parent f76225d commit f99dd04

File tree

2 files changed

+97
-91
lines changed

2 files changed

+97
-91
lines changed

‎.changeset/gorgeous-parents-greet.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"solid-element": patch
3+
"solid-js": patch
4+
---
5+
6+
Solid-Element: Add clarification on 'props' parameter in customElement function

‎packages/solid-element/README.md‎

Lines changed: 91 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,91 @@
1-
# Solid Element
2-
[![Build Status](https://github.com/solidjs/solid/workflows/Solid%20CI/badge.svg)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
3-
[![NPM Version](https://img.shields.io/npm/v/solid-element.svg?style=flat)](https://www.npmjs.com/package/solid-element)
4-
![](https://img.shields.io/librariesio/release/npm/solid-element)
5-
![](https://img.shields.io/npm/dm/solid-element.svg?style=flat)
6-
7-
This library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular re-usable behaviors. This allows your code to available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).
8-
9-
## Example
10-
11-
[See here](https://webcomponents.dev/edit/yGRb00wV4AMncPupRmA9) for an example of a webcomponent created by `solid-element`.
12-
13-
## Installation
14-
15-
```sh
16-
npm i solid-element solid-js babel-preset-solid
17-
```
18-
19-
## Custom Elements
20-
21-
The simplest way to create a Web Component is to use the `customElement` method.
22-
23-
The arguments of `customElement` are:
24-
1) custom element tag (e.g. `'my-component'`)
25-
2) (optional) props (e.g. `{someProp: 'one', otherProp: 'two'}`)
26-
3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here
27-
}`)
28-
29-
```jsx
30-
import { customElement } from 'solid-element';
31-
32-
customElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {
33-
// ... Solid code
34-
})
35-
```
36-
37-
Props get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:
38-
```html
39-
<my-component some-prop="some value" other-prop="some value"></my-component>
40-
```
41-
42-
This is all you need to get started with Solid Element.
43-
44-
## Examples
45-
46-
[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison
47-
48-
## Hot Module Replacement (new)
49-
50-
Solid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.
51-
52-
```js
53-
import { customElement, hot } from 'solid-element';
54-
55-
hot(module, 'my-component');
56-
```
57-
This is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)
58-
59-
There is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)
60-
61-
## withSolid
62-
63-
Under the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.
64-
65-
```jsx
66-
import { register } from 'component-register';
67-
68-
/*
69-
register(tag, defaultProps)
70-
*/
71-
register('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>
72-
// ....
73-
)
74-
```
75-
76-
Component Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.
77-
78-
```jsx
79-
import { register, compose } from 'component-register';
80-
import { withSolid } from 'solid-element';
81-
82-
/*
83-
withSolid
84-
*/
85-
compose(
86-
register('my-component'),
87-
withSolid
88-
)((props, options) =>
89-
// ....
90-
)
91-
```
1+
# Solid Element
2+
[![Build Status](https://github.com/solidjs/solid/workflows/Solid%20CI/badge.svg)](https://github.com/solidjs/solid/actions/workflows/main-ci.yml)
3+
[![NPM Version](https://img.shields.io/npm/v/solid-element.svg?style=flat)](https://www.npmjs.com/package/solid-element)
4+
![](https://img.shields.io/librariesio/release/npm/solid-element)
5+
![](https://img.shields.io/npm/dm/solid-element.svg?style=flat)
6+
7+
This library extends [Solid](https://github.com/solidjs/solid) by adding Custom Web Components and extensions to manage modular behaviors and composition. It uses [Component Register](https://github.com/ryansolid/component-register) to create Web Components and its composed mixin pattern to construct modular re-usable behaviors. This allows your code to available as simple HTML elements for library interop and to leverage Shadow DOM style isolation. Solid already supports binding to Web Components so this fills the gap allowing full modular applications to be built out of nested Web Components. Component Register makes use of the V1 Standards and on top of being compatible with the common webcomponent.js polyfills, has a solution for Polyfilling Shadow DOM CSS using the ShadyCSS Parser from Polymer in a generic framework agnostic way (unlike the ShadyCSS package).
8+
9+
## Example
10+
11+
[See here](https://webcomponents.dev/edit/yGRb00wV4AMncPupRmA9) for an example of a webcomponent created by `solid-element`.
12+
13+
## Installation
14+
15+
```sh
16+
npm i solid-element solid-js babel-preset-solid
17+
```
18+
19+
## Custom Elements
20+
21+
The simplest way to create a Web Component is to use the `customElement` method.
22+
23+
The arguments of `customElement` are:
24+
1) custom element tag (e.g. `'my-component'`)
25+
2) (optional) Default prop values (e.g. `{someProp: 'one', otherProp: 'two'}`). Props without default values will be ignored by the customElement.
26+
3) the Solid template function. The arguments of this function are state wrapped props as the first argument, and the underlying element as the 2nd (e.g. `(props, { element }) => { solid code here
27+
}`)
28+
29+
```jsx
30+
import { customElement } from 'solid-element';
31+
32+
customElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {
33+
// ... Solid code
34+
})
35+
```
36+
37+
Props get assigned as element properties and hyphenated attributes. This exposes the component that can be used in HTML/JSX as:
38+
```html
39+
<my-component some-prop="some value" other-prop="some value"></my-component>
40+
```
41+
42+
This is all you need to get started with Solid Element.
43+
44+
## Examples
45+
46+
[Web Component Todos](https://wc-todo.firebaseapp.com/) Simple Todos Comparison
47+
48+
## Hot Module Replacement (new)
49+
50+
Solid Element exposes Component Register's Hot Module Replacement solution for Webpack and Parcel. It does not preserve state, swapping Components that are changed and their descendants. This approach is simple but predictable. It works by indicating the component to be Hot Replaced with the `hot` method in your file.
51+
52+
```js
53+
import { customElement, hot } from 'solid-element';
54+
55+
hot(module, 'my-component');
56+
```
57+
This is a new feature that is actively seeking feedback. Read more: [Component Register](https://github.com/ryansolid/component-register#hot-module-replacement-new)
58+
59+
There is also a webpack loader that handles adding this automatically. Check out [Component Register Loader](https://github.com/ryansolid/component-register-loader)
60+
61+
## withSolid
62+
63+
Under the hood the customElement method is using Component Register's mixins to create our Custom Element. So this library also provides the way to do so directly if you wish to mixin your own functionality. It all starts by using the register HOC which upgrades your class or method to a WebComponent. It is always the start of the chain.
64+
65+
```jsx
66+
import { register } from 'component-register';
67+
68+
/*
69+
register(tag, defaultProps)
70+
*/
71+
register('my-component', {someProp: 'one', otherProp: 'two'})((props, options) =>
72+
// ....
73+
)
74+
```
75+
76+
Component Register exposes a convenient compose method (a reduce right) that makes it easier compose multiple mixins. From there we can use withSolid mixin to basically produce the Component method above. However, now you are able to add more HOC mixins in the middle to add additional behavior in your components.
77+
78+
```jsx
79+
import { register, compose } from 'component-register';
80+
import { withSolid } from 'solid-element';
81+
82+
/*
83+
withSolid
84+
*/
85+
compose(
86+
register('my-component'),
87+
withSolid
88+
)((props, options) =>
89+
// ....
90+
)
91+
```

0 commit comments

Comments
 (0)