What is the best way to create a versatile svelte component that can be utilized across various projects?

Question

What is the best way to create a versatile svelte component that can be utilized across various projects?

Currently, I am in the process of developing two distinct web applications using svelte/typescript:

Site A, which serves as the public-facing front end and must be optimized for speed and efficiency
Site B, the administration UI where editors manage and update the content displayed on Site A

My goal is to utilize the same "view component" from Site A in the editor interface of Site B, while incorporating editor-specific logic to create a seamless WYSIWYG experience without duplicating code.

One option is to merge Site A and Site B into a single svelte application; however, I am concerned about the additional modules and code required for Site B negatively impacting the performance of Site A.

How can I structure my design to avoid code redundancy while ensuring that Site B's logic remains isolated from Site A?

typescript package.json composition svelte

Answer 1

Answer №1

To effectively streamline your design process, consider implementing a design system:

A design system acts as a repository of reusable components, governed by specific standards, which can be combined to construct a multitude of applications.

One way to implement this is by creating an npm package. Start by setting up a design-system repository that houses all your components (Button, Card, ...). Then, export all these components in an index.js file:

export { Button } from 'path/to/component/Button';
export { Card } from 'path/to/component/Card';
...

Next, package your design system and generate a npm package with the aforementioned index.js file as the entry point.

Subsequently, in your various applications, import the components from this package:

import { Button } from 'my-design-system';

Answer 2

To effectively streamline your design process, consider implementing a design system:

A design system acts as a repository of reusable components, governed by specific standards, which can be combined to construct a multitude of applications.

One way to implement this is by creating an npm package. Start by setting up a design-system repository that houses all your components (Button, Card, ...). Then, export all these components in an index.js file:

export { Button } from 'path/to/component/Button';
export { Card } from 'path/to/component/Card';
...

Next, package your design system and generate a npm package with the aforementioned index.js file as the entry point.

Subsequently, in your various applications, import the components from this package:

import { Button } from 'my-design-system';

Answer 3

Answer №2

Imagine organizing your work with separate project folders for project A and project B. Now, instead of duplicating components, you can place them in a shared-folder that sits alongside A and B.
When you need to use a shared component in project A, simply import it using the correct path like ../shared/Comp.svelte. This way, your project will only include the necessary components when it is built, resulting in a more efficient bundle.js file.

Answer 4

Imagine organizing your work with separate project folders for project A and project B. Now, instead of duplicating components, you can place them in a shared-folder that sits alongside A and B.
When you need to use a shared component in project A, simply import it using the correct path like ../shared/Comp.svelte. This way, your project will only include the necessary components when it is built, resulting in a more efficient bundle.js file.

What is the best way to create a versatile svelte component that can be utilized across various projects?

Answer №1

Answer №2

Similar questions

Steps for confirming a property setting on an interface

Menu with options labeled using IDs in FluentUI/react-northstar

Adding a condition to the react-router v6 element: A step-by-step guide

TypeScript Yup schema validation combined with the power of Type Inference

Should the input field only contain spaces, a validation error will be triggered by the user

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

Visual Studio - Error TS1005 'Unexpected token'

Using Cypress fixtures with TypeScript

Creating nested Angular form groups is essential for organizing form fields in a hierarchical structure that reflects

A step-by-step guide on injecting a model within the root app module of a Nest JS application

Using React Native with TypeScript to Select the Parent and Child Checkboxes within a FlatList

What could be causing the primeng dialog to appear blank when conducting Jasmine tests on this Angular TypeScript application?

Changing the button class during an event in Angular 4

React App PWA ERROR: Service worker not registered to control the page and start_url

Is there a way to configure tsconfig so that it can properly recognize ".graphql" files and aliases when they are imported into components?

What is the best way to implement asynchronous guarding for users?

What is the best way to implement forwardRef in a distinct select component?

Should we rethink our approach to styling components in this way?

Issues with multiple validators in Angular 8 intricately intertwined

How can I resolve the issue of "Errors detected in your package-lock.json" in NGRX?