sv-hello-world
v1.0.1
Published
A simple Hello World web component built with Svelte that can be used in any framework
Maintainers
rostyslavkrukovskyiReadme
sv-hello-world
A simple "Hello World" web component built with Svelte that can be used in any framework (React, Angular, Vue, or vanilla HTML).
Features
- 🚀 Framework Agnostic - Works in React, Angular, Vue, and vanilla HTML
- 📦 Small Bundle Size - Only ~4KB gzipped
- 🎨 Clean Styling - Modern, responsive design
- 💪 TypeScript Support - Includes type definitions
- ⚡ Fast - Built with Svelte for optimal performance
Installation
npm install sv-hello-worldUsage
Vanilla HTML/JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="module">
import 'sv-hello-world';
</script>
</head>
<body>
<sv-hello-world></sv-hello-world>
</body>
</html>React
import { useEffect } from 'react';
import 'sv-hello-world';
function App() {
return (
<div>
<h1>My React App</h1>
<sv-hello-world></sv-hello-world>
</div>
);
}
export default App;Angular
First, import the component in your main module or component:
// main.ts or app.component.ts
import 'sv-hello-world';Then use it in your template:
<!-- app.component.html -->
<h1>My Angular App</h1>
<sv-hello-world></sv-hello-world>For TypeScript support, add to your app.component.ts:
// Tell Angular about the custom element
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
// ...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})Vue.js
<template>
<div>
<h1>My Vue App</h1>
<sv-hello-world></sv-hello-world>
</div>
</template>
<script>
import 'sv-hello-world';
export default {
name: 'App'
};
</script>Next.js
import { useEffect } from 'react';
export default function Home() {
useEffect(() => {
// Dynamic import to avoid SSR issues
import('sv-hello-world');
}, []);
return (
<div>
<h1>My Next.js App</h1>
<sv-hello-world></sv-hello-world>
</div>
);
}TypeScript Support
The package includes TypeScript definitions. For React projects, the component will be properly typed:
// This will work with full TypeScript support
<sv-hello-world className="my-class" style={{margin: '1rem'}} />Browser Support
- Chrome/Edge 54+
- Firefox 63+
- Safari 10.1+
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build the library
npm run build:lib
# Build the demo app
npm run buildSize
- ES Module: ~11KB (~4KB gzipped)
- UMD Bundle: ~7KB (~3KB gzipped)
License
MIT
Contributing
Issues and pull requests are welcome!