@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="bg-purple"
    ac-disabled="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"},"hover":{"classes":"bg-blue cursor-pointer"},"active":{"classes":"bg-purple"},"disabled":{"classes":"bg-black-400 text-white-900 cursor-not-allowed"},"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.

Working With RxJS

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

    export let keycode;
    export let state = ['default'];
    export let props;
    
    $: status = new Status(props, state);

    function mouseAction(node) {
        fromEvent(node, 'mouseup')
            .pipe(map(mouse))
            .pipe(map(states => ({states, status})))
            .pipe(tailwindcss)
            .subscribe(rs => classes = rs);
    }
    export let text;
</script>
<span
    use:mouseAction
    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="bg-purple"
    ac-disabled="bg-black-400 text-white-900 cursor-not-allowed">
    {text}
</span>

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