Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/morellodev/ios-14-weather-widget
iOS 14 Weather Widget implemented as a Web Component using Stencil
https://github.com/morellodev/ios-14-weather-widget
html ios javascript stencil typescript web widget
Last synced: 24 days ago
JSON representation
iOS 14 Weather Widget implemented as a Web Component using Stencil
- Host: GitHub
- URL: https://github.com/morellodev/ios-14-weather-widget
- Owner: morellodev
- License: mit
- Created: 2020-06-29T09:45:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-07T09:36:35.000Z (over 4 years ago)
- Last Synced: 2024-05-01T16:19:58.449Z (6 months ago)
- Topics: html, ios, javascript, stencil, typescript, web, widget
- Language: TypeScript
- Homepage: https://morello.dev/implementing-ios-14-weather-widget-as-a-web-component
- Size: 1.75 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# iOS 14 Weather Widget
This is the source code of the project described in the post **[Implementing iOS 14 Weather Widget As A Web Component](https://morello.dev/implementing-ios-14-weather-widget-as-a-web-component)** on my blog.
It is based on the starter project for building a standalone Web Component using [Stencil](https://stenciljs.com).
## Getting Started
To start building a new web component using Stencil, clone this repo to a new directory:
```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
```
and run:
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
## Naming Components
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: ``). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
## Using this component
### Script tag
- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install my-component --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install my-component --save`
- Add an import to the npm packages `import my-component;`
- Then you can use the element anywhere in your template, JSX, html etc