Building and Deploying Web Components with Svelte

In December, I embarked on a side project inspired by KakaoTalk ads, resulting in the creation of Adsense-Popover. This project features a Google AdSense advertisement that slides into view at the bottom right corner (or a position of your choice) of a webpage.

Today, I'll discuss the technology behind this project, web components, and the process of creating and deploying them using Svelte.

What are Web Components?

Web components allow the creation of custom tags (Custom Elements) in browsers. Besides standard tags like div and span, you can use your own custom tags.

<my-component aProp="aProp" ></my-component>

Why Use Web Components?

Web components facilitate easy distribution to other developers. They don't rely on libraries like React or Vue, making them usable even in environments not using these frameworks. For instance, using React or Vue directly on platforms like Wordpress or Super.so can be challenging. Web components offer a straightforward solution, allowing easy integration of created components in widget form.

For example, Adsense-Popover can be used by simply embedding the following code into a page:

<script
  type="module"
  src="https://cdn.jsdelivr.net/gh/sjquant/adsense-popover@v0.1.0/dist/adsense-popover.min.js"
></script>
<adsense-popover
  layoutKey="<your-layout-key>"
  client="<your-client>"
  slot="<your-slot>"
  format="<your-format>"
></adsense-popover>

Creating Web Components with Svelte

Svelte is optimized for creating web components. Unlike frameworks like Vue or React, which include dependencies in the build, Svelte transforms into vanilla JavaScript code, resulting in smaller bundle sizes and optimized performance.

Even if you're familiar with Vue or React, transitioning to Svelte is straightforward. I usually work with Vue but started the Adsense-Popover project without specific Svelte training.

Installation and Project Setup

First, create a Svelte project using Vite:

npx create-vite <project-name> --template svelte

For TypeScript, use:

npx create-vite <project-name> --template svelte-ts

Developing Web Components

Developing web components isn't significantly different. Create and develop your component in the components folder. Here, we'll use MyComponent.svelte.

Once development is complete, declare the component as a custom element. At the top of your component file, add:

<!--components/MyComponent.svelte-->
<svelte:options
  customElement={{
    tag: "my-component",
  }}
/>

The tag name will be used in the deployed tag. For more options, refer to Svelte's documentation.

Building

After completing the component, build it for deployment. Create an index.js file in the components folder to export the component:

// components/index.js

export { default as MyComponent } from "./MyComponent.svelte";

Modify the vite.config.js for the build. The specifics of these settings are beyond this discussion.

Finally, build the component:

yarn build

Check the dist folder for the deployment files.

Deploying with jsDelivr

After building the web component with Svelte, deploy it. You can use your own CDN server or services like jsDelivr. Upload the code to a public GitHub repository and release it. Ensure the build files are not ignored in .gitignore. Then, use the jsDelivr CDN URL:

https://cdn.jsdelivr.net/gh/<github-username>/<repository-name>@<tag>/dist/my-component.min.js

Embed the above script in the head tag of your HTML to use the custom tag.

Adsense-Popover provides the following usage instructions:

That concludes the process!

Conclusion

Through the Adsense-Popover project, I've come to appreciate the significant appeal of web components. With the increasing use of external services like Wordpress and Super.so by businesses and individuals, this technology can meet many of their needs. I encourage you to explore this technology in your projects.

Thank you for reading.