
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
vite-plugin-svelte-xblock
Advanced tools
A Vite plugin that enables the use of `.svelte.xblock` files in your Svelte and SvelteKit projects. This plugin allows you to create reusable code blocks with shared context, enhancing code organization and maintainability.
A Vite plugin that enables the use of .svelte.xblock
files in your Svelte and SvelteKit projects. This plugin allows you to create reusable code blocks with shared context, enhancing code organization and maintainability.
In modern web development, we often distinguish between components and code blocks. Components are designed to be reusable across different contexts, accepting various parameters and props. However, when dealing with complex business logic, components can quickly become large and unwieldy.
The traditional approach to managing this complexity is to break down large components into smaller sub-components. While this can improve code organization, it often leads to its own set of challenges:
Svelte Xblock offers a solution to these challenges by introducing the concept of code blocks:
In essence, Svelte Xblock allows you to organize your code more cleanly without the overhead of creating full-fledged sub-components. It's particularly useful for large, complex components that are specific to your business logic and not intended for reuse across your application.
.svelte.xblock
file type for Svelte code blocks.svelte.xblock
files into their parent Svelte components at build time.svelte.xblock
file is only used once in your project.svelte.xblock
files with their parent components.svelte.xblock
files to directly access variables and functions from their parent Svelte componentnpm i vite-plugin-svelte-xblock --save-dev
// vite.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import svelteXBlockPlugin from 'vite-plugin-svelte-xblock'
export default defineConfig({
plugins: [
svelteXBlockPlugin(),
svelte()
]
})
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import svelteXBlockPlugin from 'vite-plugin-svelte-xblock'
export default defineConfig({
plugins: [
svelteXBlockPlugin(),
sveltekit()
]
});
Important Note: Make sure to place svelteXBlockPlugin()
before the Svelte or SvelteKit plugin in the plugins array. This ensures that .svelte.xblock
files are processed before Svelte compilation occurs.
.svelte.xblock
file that uses variables from its parent component:<!-- UserGreeting.svelte.xblock -->
<script>
// No need to declare or import 'username', it's accessed from the parent context
export let greetingText = 'Hello'
</script>
<div class="greeting">
{greetingText}, {username}!
</div>
<style>
.greeting {
font-size: 1.2em;
color: #333;
}
</style>
.svelte.xblock
file in your Svelte component:<!-- +page.svelte -->
<script>
import UserGreeting from './UserGreeting.svelte.xblock'
let username = 'Alice'
let timeOfDay = 'morning'
</script>
<main>
<h1>Welcome to my SvelteKit app!</h1>
<UserGreeting greetingText="Good {timeOfDay}" />
<input bind:value={username} placeholder="Enter your name">
</main>
In this example, UserGreeting.svelte.xblock
can directly access the username
variable from its parent component. It also receives the greetingText
prop, which uses the timeOfDay
variable from the parent.
The plugin intercepts imports of .svelte.xblock
files and merges their content with the parent Svelte component. This process includes:
<script>
tags, allowing the xblock to access variables and functions from the parent component<style>
tagsThe plugin ensures that each .svelte.xblock
file is only used once in your project to prevent potential conflicts. It also allows .svelte.xblock
files to seamlessly access the context of their parent components, enabling powerful composition patterns without the overhead of creating separate components.
.svelte.xblock
files in any of your SvelteKit routes or components..svelte.xblock
file can only be used once in your project.svelte.xblock
files (i.e., a .svelte.xblock
file importing another .svelte.xblock
file)Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
A Vite plugin that enables the use of `.svelte.xblock` files in your Svelte and SvelteKit projects. This plugin allows you to create reusable code blocks with shared context, enhancing code organization and maintainability.
The npm package vite-plugin-svelte-xblock receives a total of 0 weekly downloads. As such, vite-plugin-svelte-xblock popularity was classified as not popular.
We found that vite-plugin-svelte-xblock demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.