Svelte Custom Elements Demo

See https://www.appsoftware.com/tools/utilities/calculators for a description of the Svelte Custom Element configuration demo maintained here.

Using this configuration you can include these components in any web project. Change the outDir in each vite.config.<component>.js as required depending on where you want to reference <component>.iife.js from.

You can use this project as a template for your own Svelte Custom Element components. If you don't want to inherit global styles (Bulma CSS is used in this sample project), you can enable Shadow DOM encapsulation by removing shadow: "none" from the customElement configuration in the .svelte component files, or by changing it to shadow: "open".

Each component is compiled as an IIFE-format bundle that can be included in any HTML page. The bundle executes immediately when loaded, automatically registering the component as a custom element.

<svelte:options customElement={{ tag: "image-processor", shadow: "none" }} />

Quick Start

1. Build the components:

   npm run build
   

2. Serve the demo pages:

   npm run serve
   

   Or build and serve in one command:

   npm start
   

3. Open in browser:

   • Main demo page: http://localhost:3000
   • Calculator forms: http://localhost:3000/forms.html
   • Text formatter: http://localhost:3000/text-formatter.html
   • Image processor: http://localhost:3000/image-processor.html

Components

1. Calculator Forms (forms.html)

• Custom Elements: <add-calculator>, <multiply-calculator>
• Bundle: public/js/forms.iife.js
• Features: Real-time mathematical calculations with input validation

2. Text Formatter (text-formatter.html)

• Custom Element: <text-formatter>
• Bundle: public/js/text-formatter.iife.js
• Features: Syntax highlighting, code formatting, validation for JSON/XML/HTML/Markdown

3. Image Processor (image-processor.html)

• Custom Element: <image-processor>
• Bundle: public/js/image-processor.iife.js
• Features: Client-side image processing, batch operations, drag-and-drop upload

Styling

All components use:

• Bulma CSS: Loaded from CDN for consistent styling
• Font Awesome: Icons and visual elements
• Shadow DOM disabled: Components inherit page styles

Integration

To use these components in your own project:

1. Include the JavaScript bundle:

   <script src="path/to/component.iife.js"></script>
   

2. Use the custom elements:

   <add-calculator></add-calculator>
   <multiply-calculator></multiply-calculator>
   <text-formatter></text-formatter>
   <image-processor></image-processor>
   

3. Include Bulma CSS:

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">