wc-webview-test

Web Components library built with Lit.

Components

• my-element: Example component.
• welcome-news: Header + welcome + news card; desktop = tek kart, mobile = iki kart; birthdate-enabled bayrağı ile doğum günü paneli aç/kapat.
• weather-widget: Belirtilen koordinasyonlar için hava durumunu her 15 sn’de çeker; her fetch’te sayaç +1 artar; tam genişlik ve mobile responsive.

Install

npm i wc-webview-test
npm i lit

Lit is a peer dependency and is externalized from the build, so the host app must install it.

Usage (Bundlers)

Vite/Webpack/Rollup/Next/etc.

import 'wc-webview-test/welcome-news'
import 'wc-webview-test/weather-widget'

// Optionally: import 'my-lit-app/my-element'

<welcome-news username="Aykut" birthdate-enabled></welcome-news>
<weather-widget lat="41.0082" lon="28.9784" interval-ms="15000"></weather-widget>

Props & API

• <welcome-news>
  • username="string"
  • birthdate-enabled (boolean attribute; false/0 ile kapatılabilir)
  • Header slot: <span slot="header">Başlık</span>
  • Haberler (JS):

    const el = document.querySelector('welcome-news')
    el.newsItems = [
      { title: 'Haber 1', date: '2025-08-25', image: '...'},
      { title: 'Haber 2', date: '2025-08-26', image: '...'},
    ]

• <weather-widget>
  • lat (number), lon (number)
  • interval-ms (number, default 15000)
  • Okuma: fetch sayısı data içinde tutulur ve üstte gösterilir.

Usage (Plain HTML via CDN)

This package’s ESM builds externalize lit, so you need either an import map or a CDN that rewrites bare imports.

Option A — Import Map (jsDelivr):

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
    }
  }
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/wc-webview-test/dist/welcome-news.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/wc-webview-test/dist/weather-widget.js"></script>

Option B — esm.sh (rewrites dependencies automatically):

<script type="module" src="https://esm.sh/wc-webview-test/dist/welcome-news.js"></script>
<script type="module" src="https://esm.sh/wc-webview-test/dist/weather-widget.js"></script>

Exports

• wc-webview-test/my-element
• wc-webview-test/welcome-news
• wc-webview-test/weather-widget

Types are published under dist/types and referenced in package.json exports.

Build

npm run build

Outputs to dist/.

Publish Notes

• Package name must be unique on npm; update name in package.json if needed.
• Consider adding license, author, and repository fields before publishing.
• prepublishOnly runs the build automatically.