Socket
Socket
Sign inDemoInstall

svelte-legos

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-legos - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package/hooks/useActiveElement/demo.svelte

19

package.json
{
"name": "svelte-legos",
"version": "0.0.1",
"version": "0.0.2",
"main": "./package/index.js",

@@ -14,3 +14,4 @@ "scripts": {

"watch:docs": "node page-gen.js",
"start:dev": "concurrently --kill-others \"npm run watch:docs\" \"npm run dev\""
"start:dev": "concurrently --kill-others \"npm run watch:docs\" \"npm run dev\"",
"build:docs": "vite build"
},

@@ -46,3 +47,17 @@ "devDependencies": {

"prismjs": "^1.29.0"
},
"exports": {
".": {
"types": "./package/index.d.ts",
"svelte": "./package/index.js"
}
},
"files": [
"package"
],
"svelte": "./package/index.js",
"types": "./package/index.d.ts",
"peerDependencies": {
"svelte": "^3.54.0"
}
}

61

README.md

@@ -1,38 +0,57 @@

# create-svelte
# Svelte Legos
Collection of essential Svelte Composition Utilities
<br>
<br>
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## 🚀 Features
## Creating a project
- 🎪 [**Interactive docs & demos**](https://svelte-legos.singhalankur.com)
- ⚡ **Fully tree shakeable**: Only take what you want, [bundle size]
- 🦾 **Type Strong**: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc)
- 🔋 **SSR Friendly**
- 🌎 **No bundler required**: Usable via CDN
- 🔩 **Flexible**: Configurable event filters and targets
If you're seeing this, you've probably already done this step. Congrats!
## 🦄 Usage
```bash
# create a new project in the current directory
npm create svelte@latest
```svelte
<script lang="ts">
import { useCounter } from "$lib";
# create a new project in my-app
npm create svelte@latest my-app
const { counter, inc, dec, set, reset } = useCounter();
</script>
<button on:click={() => inc()}>Increment</button>
{counter}
<button on:click={() => dec()}>Decrement</button>
```
## Developing
```svelte
<script lang="ts">
import { useWindowSize } from "$lib";
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
const size = useWindowSize();
</script>
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
<div>{$size.width}</div>
<div>{$size.height}</div>
```
## Building
Refer to [functions list](https://svelte-legos.singhalankur.com/guides) or [documentations](https://svelte-legos.singhalankur.com) for more details.
To create a production version of your app:
## 📦 Install
```bash
npm run build
npm i svelte-legos
```
## 🌸 Thanks
You can preview the production build with `npm run preview`.
This project is heavily inspired by the following awesome projects.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [streamich/react-use](https://github.com/streamich/react-use)
- [u3u/vue-hooks](https://github.com/u3u/vue-hooks)
- [logaretm/vue-use-web](https://github.com/logaretm/vue-use-web)
- [kripod/react-hooks](https://github.com/kripod/react-hooks)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc