Use with Svelte

Installation#

npm install @fower/svelte-preprocess

Config svelte-preprocess#

Then, configure svelte-preprocess, we assume you are using rollup or webpack to build Svelte App:

rollup.config.js
import { fowerSveltePreprocess } from '@fower/svelte-preprocess'
export default {  plugins: [    svelte({      compilerOptions: {        // enable run-time checks when not in production        dev: !production,      },
      preprocess: fowerSveltePreprocess(),    }),  ],}

Enjoy it#

Now, you can write Atomic Props directly in Markup:

<div toCenterY p-10 w-260 bgWhite rounded-10 shadow>  <img circle-48 src="/img/jobs.jpg" />  <div ml-10>    <div textXL fontBold>Steve Jobs</div>    <span gray800>Co-founder of Apple Inc.</span>  </div></div>

If you don't like Atomic Props, you can use atomic css class instead:

<template>  <div class="toCenterY p-10 w-260 bgWhite rounded-10 shadow">    <img src="/img/jobs.jpg" class="circle-48" />    <div class="ml-10">      <div class="textXL fontBold">Steve Jobs</div>      <span class="gray800">Co-founder of Apple Inc.</span>    </div>  </div></template>

IntelliSense#

To get IntelliSense in VS Code, just to install VS Code plugin: Fower IntelliSense.

fower-intellisense

Example source code#

You can view the example souce code in github: