diff --git a/README.md b/README.md
index 496c70d..f3d5e58 100644
--- a/README.md
+++ b/README.md
@@ -10,9 +10,7 @@ Any Preact component can be registered as a custom element simply by importing `
```javascript
import register from 'preact-custom-element';
-const Greeting = ({ name = 'World' }) => (
-
Hello, {name}!
-);
+const Greeting = ({ name = 'World' }) => Hello, {name}!
;
register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open', adoptedStyleSheets: [], serializable: true });
// ^ ^ ^ ^ ^ ^ ^
@@ -20,7 +18,7 @@ register(Greeting, 'x-greeting', ['name'], { shadow: true, mode: 'open', adopted
// 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:
@@ -50,15 +48,15 @@ import register from 'preact-custom-element';
//
class Greeting extends Component {
- // Register as :
- static tagName = 'x-greeting';
+ // Register as :
+ static tagName = 'x-greeting';
- // Track these attributes:
- static observedAttributes = ['name'];
+ // Track these attributes:
+ static observedAttributes = ['name'];
- render({ name }) {
- return Hello, {name}!
;
- }
+ render({ name }) {
+ return Hello, {name}!
;
+ }
}
register(Greeting);
```
@@ -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 {first} {last}
+ return (
+
+ {first} {last}
+
+ );
}
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');
@@ -87,12 +89,12 @@ When using shadow DOM, you can make use of named `` elements in your compo
```jsx
function TextSection({ heading, content }) {
- return (
-
-
{heading}
-
{content}
-
- );
+ return (
+
+
{heading}
+
{content}
+
+ );
}
register(TextSelection, 'text-selection', [], { shadow: true });
@@ -100,8 +102,8 @@ register(TextSelection, 'text-selection', [], { shadow: true });
```html
- My Heading
- Some content goes here.
+ My Heading
+ Some content goes here.
```
diff --git a/jsconfig.json b/jsconfig.json
index 2864c03..1c514dd 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -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"
+ }
}
diff --git a/package.json b/package.json
index 13622db..f64da6f 100644
--- a/package.json
+++ b/package.json
@@ -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": {
@@ -24,7 +24,10 @@
"version": "16.8"
}
},
- "ignorePatterns": ["*.ts", "*.tsx"],
+ "ignorePatterns": [
+ "*.ts",
+ "*.tsx"
+ ],
"rules": {
"brace-style": "off",
"jest/expect-expect": "off",
diff --git a/test/types/tsconfig.json b/test/types/tsconfig.json
index 6f3c645..11fc4a8 100644
--- a/test/types/tsconfig.json
+++ b/test/types/tsconfig.json
@@ -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"
+ }
}