@atomic-class/svelte

Atomic-Class

A reactive framework for component to control classsheet.

Usage

<script lang=ts>
    import { mouse, keyboard } from '@atomic-class/action';
    import { css } from '@atomic-class/process';
    import { Status } from '@atomic-class/core';

    export let state = ['default'];
    export let props;
    
    /** Accept customized styles and state **/
    $: status = new Status(props, state);
    $: classes = css(status);

    function mouseHandler(event) { 
        status = mouse({status, event});
    }

    export let text;
</script>
<span
    on:mousedown={mouseHandler} on:mouseup={mouseHandler}
    on:mouseenter={mouseHandler} on:mouseleave={mouseHandler}
    class="px-12 py-5 bw-2 br-5 text-white weight {classes}"

    ac-props={props}
    ac-default="bg-black-700"
    ac-hover="bg-blue cursor-pointer"
    ac-active-ol="bg-purple"
    ac-disable-ol="bg-black-400 text-white-900 cursor-not-allowed"> {text} </span>

After Compile:

<script lang=ts>
    import { mouse, keyboard } from '@atomic-class/action';
    import { tailwindcss} from '@atomic-class/process';
    import { Status } from '@atomic-class/core';

    export let keycode;
    export let state = ['default'];
    export let props;

    /** The next line is generated by the plugin **/
    props = {...{"default":{"classes":"bg-black-700","overlap":false},"hover":{"classes":"bg-blue cursor-pointer","overlap":false},"active":{"classes":"bg-purple","overlap":true},"disable":{"classes":"bg-black-400 text-white-900 cursor-not-allowed","overlap":true},"base":{"classes":"px-12 py-5 bw-2 br-5 text-white weight"}}, ...props};
    
    $: status = new Status(props, state);
    $: classes = css(status);

    function mouseHandler(event) {
        status = mouse({status, event});
    }

    export let text;
</script>
<span
    on:mousedown={mouseHandler} on:mouseup={mouseHandler}
    on:mouseenter={mouseHandler} on:mouseleave={mouseHandler}
    class={classes} >{text}</span>

You can try this demo in Atomic Class REPL.

Configuration

npm install @atomic-class/svelte -D

Building with Rollup：

import ac from '@atomic-class/svelte';

export default {
	input: 'src/demo/index.ts',
	output: {
		sourcemap: true,
		format: 'es',
		name: 'app',
		file: '../demo/svelte/dist.js'
	},
	external: ['@atomic-class/core', '@atomic-class/action', '@atomic-class/process'],
	plugins: [
        ac(),
        // ac({prefix: 'ac', include: [], exclude: []})
    ]
}

Features

Export Inline Style

TODO

Export SCSS/SASS/LESS

TODO

Tree Shaking

TODO