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" + } }