swapi-person-card v0.0.2
\
This webcomponent follows the open-wc recommendation.
Installation
npm i swapi-person-card
Usage
<script type="module">
import 'swapi-person-card/swapi-person-card.js';
</script>
<swapi-person-card></swapi-person-card>
<swapi-person-card id-person="2">
</swapi-person-card>
<swapi-person-card url="https://swapi.dev/api/people/3/">
</swapi-person-card>
Attributes
Name | Type | Example | Note |
---|---|---|---|
data | Object | {} | Only accepts schema for SWAPI |
id-person | Number | 1 , 2 | |
url | String | https://swapi.dev/api/people/3/ | If you use url and id-person, url has priority |
Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
npm run lint
You can lint with ESLint and Prettier individually as well
npm run lint:eslint
npm run lint:prettier
To automatically fix many linting errors, run
npm run format
You can format using ESLint and Prettier individually as well
npm run format:eslint
npm run format:prettier
Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
npm run test
To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
npm run test:watch
Tooling configs
For most of the tools, the configuration is in the package.json
to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
Local Demo with web-dev-server
npm start
To run a local development server that serves the basic demo located in demo/index.html
History
Hey! I love StarWars and I'm learning to code web components and share with the world!
Original documentation
Original documentation of Star Wars API by Paul Hallet
at https://swapi.co/documentation
Star Wars and all associated names are copyright Lucasfilm ltd.
Credits
- Erika Valdes