Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,15 @@ Any Preact component can be registered as a custom element simply by importing `
```javascript
import register from 'preact-custom-element';

const Greeting = ({ name = 'World' }) => (
<p>Hello, {name}!</p>
);
const Greeting = ({ name = 'World' }) => <p>Hello, {name}!</p>;

register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open', adoptedStyleSheets: [], serializable: true });
// ^ ^ ^ ^ ^ ^ ^
// | HTML tag name | use shadow-dom | use adoptedStyleSheets |
// Component definition Observed attributes Encapsulation mode for the shadow DOM tree Root is serializable
```

> _**\* Note:** as per the [Custom Elements specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), the tag name must contain a hyphen._
> _**Note:** as per the [Custom Elements specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), the tag name must contain a hyphen._

Use the new tag name in HTML, attribute keys and values will be passed in as props:

Expand Down Expand Up @@ -50,15 +48,15 @@ import register from 'preact-custom-element';

// <x-greeting name="Bo"></x-greeting>
class Greeting extends Component {
// Register as <x-greeting>:
static tagName = 'x-greeting';
// Register as <x-greeting>:
static tagName = 'x-greeting';

// Track these attributes:
static observedAttributes = ['name'];
// Track these attributes:
static observedAttributes = ['name'];

render({ name }) {
return <p>Hello, {name}!</p>;
}
render({ name }) {
return <p>Hello, {name}!</p>;
}
}
register(Greeting);
```
Expand All @@ -68,12 +66,16 @@ If no `observedAttributes` are specified, they will be inferred from the keys of
```js
// Other option: use PropTypes:
function FullName({ first, last }) {
return <span>{first} {last}</span>
return (
<span>
{first} {last}
</span>
);
}

FullName.propTypes = {
first: Object, // you can use PropTypes, or this
last: Object // trick to define untyped props.
first: Object, // you can use PropTypes, or this
last: Object, // trick to define untyped props.
};

register(FullName, 'full-name');
Expand All @@ -87,21 +89,21 @@ When using shadow DOM, you can make use of named `<slot>` elements in your compo

```jsx
function TextSection({ heading, content }) {
return (
<div>
<h2>{heading}</h2>
<p>{content}</p>
</div>
);
return (
<div>
<h2>{heading}</h2>
<p>{content}</p>
</div>
);
}

register(TextSelection, 'text-selection', [], { shadow: true });
```

```html
<text-section>
<span slot="heading">My Heading</span>
<span slot="content">Some content goes here.</span>
<span slot="heading">My Heading</span>
<span slot="content">Some content goes here.</span>
</text-section>
```

Expand Down
24 changes: 12 additions & 12 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "NodeNext",
"moduleResolution": "Node",
"noEmit": true,
"allowJs": true,
"checkJs": true,
"skipLibCheck": false,
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
}
"compilerOptions": {
"target": "ESNext",
"module": "NodeNext",
"moduleResolution": "Node",
"noEmit": true,
"allowJs": true,
"checkJs": true,
"skipLibCheck": false,
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
"scripts": {
"prepare": "npx simple-git-hooks",
"build": "microbundle -f cjs,es,umd --no-generateTypes",
"lint": "eslint src/*.js",
"test": "npm run test:types & npm run test:browser",
"test:browser": "wtr test/browser/*.test.{js,jsx}",
"test:types": "tsc -p test/types/",
"prettier": "prettier **/*.{js,jsx} --write",
"lint": "eslint src/*.js",
"format": "prettier --write --ignore-path .gitignore '!README.md' .",
"prepublishOnly": "npm run build && npm run lint && npm run test"
},
"eslintConfig": {
Expand All @@ -24,7 +24,10 @@
"version": "16.8"
}
},
"ignorePatterns": ["*.ts", "*.tsx"],
"ignorePatterns": [
"*.ts",
"*.tsx"
],
"rules": {
"brace-style": "off",
"jest/expect-expect": "off",
Expand Down
20 changes: 10 additions & 10 deletions test/types/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"noEmit": true,
"skipLibCheck": true,
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
},
"compilerOptions": {
"target": "ESNext",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"noEmit": true,
"skipLibCheck": true,
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}