Creating new components is probably one of the things you do most in Svelte. To maximize the developer experience, you must automate every task that you do often.

It’s not just to save time, but also to avoid repetitive tasks that annoy and distract us developer.

Here we’ll learn hot to create your customized component template once and use it every time.

So imagine writing this command: npx t6e $name.svelte src/components name=my-component. And get the component as you would have written it, ready into the src/component folder.

It’s easy:

<script lang="ts"> 
  import { createEventDispatcher } from 'svelte'; 
  import { writable } from 'svelte/store'; 
  const dispatch = createEventDispatcher(); 
  const store = writable({ hello: "" }); 
</script> <div class="$name"> {$store.hello} </div> <style lang="scss"> 
  .$name { @apply block } 
</style>

npx t6e templates/$name.svelte src/components name=counter

You can now re-use that template for all your components, saving hours every month.

What is t6e?

T6e is an open source scaffolder, boilerplate tool. Put simply, it lets you create any file based on your custom templates.

We created a template for svelte above, but you can create any template and reuse it as you like with this small open-source tool provided by us at butopen

You can find t6e here:

https://github.com/butopen/t6e

❤️ The Frontend Team