UIkit is a completely independent project from Franken UI. It’s a great open-source library. However, it lacks some essential components that we need. To address this, Franken WC was created. Just like our JavaScript, we have two methods of installation available.
Just like any other regular JavaScript, you can include the Franken WC files on your page by adding them to the <head> section. You can also choose to use the defer attribute to delay script execution.
<script type="module" src="https://unpkg.com/[email protected]/dist/js/wc.iife.js"></script>
Alternatively, you can choose to install Franken WC via NPM and update your app.js file accordingly.
npm install franken-wc
import { UIkit, Icons } from "franken-ui/uikit/js/dist";
+ import 'franken-wc';
UIkit.use(Icons);
window.UIkit = UIkit;
Since we’re leveraging the power of Web Components, Franken WC can be used within popular frameworks like React, Vue, or Svelte. Just ensure you’re importing it in the browser, not on the server. For guidance on how to do this, refer to your framework’s documentation. To illustrate, here’s an example of how we implement it in SvelteKit.
<script>
import { browser } from '$app/environment';
if (browser) {
import('franken-wc');
}
</script>
I’ve designed Franken UI with backend developers in mind. While it is technically possible to use Franken WC within a reactive framework, you may encounter issues related to re-rendering or Hot Module Replacement (HMR) during development. Please note that my top priority is to ensure an HTML-first approach, which may affect the integration with certain reactive frameworks.
And that’s it! You’ve successfully set up Franken UI. You can now unlock its full potential and start building your amazing app!
Franken WC is an optional component, and it's also a relatively new project that's still undergoing frequent updates. Bundling it with Franken UI would require Franken UI to be updated just as frequently, which isn't ideal. Keeping them separate is a more practical approach.
I've found that Alpine.js has some limitations when it comes to distribution. Additionally, I've made a conscious effort to avoid cluttering our HTML tags with JSON, CSS classes, and other unnecessary elements. This approach helps keep our code clean, maintainable, and easy to work with.
Building a custom select component from scratch was a challenge. Making it reusable, distributable, and designing the markup was even harder. I needed a reactive framework to help me achieve this. After considering various options, I found that Alpine.js was a good fit, but it had some drawbacks, such as cluttering HTML tags and distribution issues.
I wanted a solution that would work seamlessly with HTML, without requiring a specific framework like React, Vue, or Svelte. My requirements were clear: lightweight, reactive, easily distributable, and framework-agnostic. After exploring various alternatives, I discovered Lit, which checks all my boxes.
While I could have used Svelte, Preact, or Solid and compiled them using web components, I couldn't find sufficient online resources to make them distributable. Additionally, web components didn't seem to be their primary focus. Therefore, I decided to go with Lit, which met my needs and provided the necessary support for my project.
While I always strive to finalize the API before releasing, changes and bugs may still occur as this is a relatively new project. Please test it, provide feedback, and decide for yourself if it's ready for production.