// CodeQuery is a library that allows you to write SQL queries in a type-safe way using TypeScript.

// It's designed to be as close as SQL as possible, but with the benefits of TypeScript.

// Typescript is actually a very good fit because of it's mapping capabilities.

// first we create two tables users and logins

const users = createTable(sqliteProvider, "user", table => ({

    id: table.number(c => c.pk(true)),

    name: table.string(),

}));

const logins = createTable(sqliteProvider, "login", table => ({

    id: table.number(c => c.pk(true)),

    userId: table.number(c => c.fk(users.columns.id)),

    loginTime: table.number(),

    success: table.bool()

}));

// create a query that will return the amount of successful and failed logins per user

const counts = users.from()

    .innerJoin(logins, ({user, login}) => user.id.eq(login.userId))

    .groupBy(r => r.user.id)

    .select(r => ({

        userId: r.key,

        success: r.sum(l => l.login.success.when(true,1, 0)),

        fail: r.sum(l => l.login.success.when(false,1, 0))

    }), 'counts');

const query = await users.from()

    .innerJoin(counts, ({user, counts}) => user.id.eq(counts.userId))

    .select(r => ({

        userId: r.user.id,

        name: r.user.name,

        success: r.counts.success,

        fail: r.counts.fail

    }))

    .fetchAll();

/* this will produce the following SQL:

SELECT

    user.id,

    user.name,

    counts.success,

    counts.fail

FROM user

INNER JOIN (

    SELECT

        user.id,

        SUM(CASE WHEN login.success THEN 1 ELSE 0 END) as success,

        SUM(CASE WHEN NOT login.success THEN 1 ELSE 0 END) as fail

    FROM user

    INNER JOIN login ON user.id = login.userId

    GROUP BY user.id

) as counts ON user.id = counts.userId

 */

// When you use JSON.parse, TypeScript assumes the output to be of the type you specify, but it's not enforced on runtime.

// This could lead to potential runtime errors that are hard to catch

// Inspired by Elm decoders with a simple API

// a sample usage:

interface Dog {

    name: string;

    nickNames: string[];

    size: 'small' | 'medium' | 'large';

    // other properties including the breed

    properties: Record<string, string> & { breed: string; }

    birthDate?: Date;

}

// custom decoder for properties type

const propertiesDecoder: Decoder<Dog["properties"]> = {

    decode(obj: any): DecoderResult<Dog["properties"]> {

        // only if obj is an object and not null

        if (obj && typeof obj == "object") {

            // fill breed

            const props: Dog["properties"] = {breed: ''};

            // then the rest

            Object.keys(obj).forEach(k => {

                if (typeof obj[k] === 'string')

                    props[k] = obj[k];

            });

            return resolve(props);

        }

        return fallback();

    }, fallback(): Dog["properties"] {

        return {breed: ''};

    }

}

const dogDecoder = decodeObject<Dog>({

    name: decodeString,

    nickNames: decodeArray(decodeString),

    size: decodeUnionLiterals('small', 'medium', 'large'),

    birthDate: decodeOptional(decodeDate),

    properties: propertiesDecoder

})

const jsonString = '...';

const dog: Dog = decode.parse(dogDecoder, jsonString);

// dog is now always safe to use

Since primary school, I've been writing programs and messing around with code.

Not only by what it does, but by the way it's structured and presented. 

I call it abstract art in it's finest form. I even wrote my wife a love letter in code.

My big motto: know what you are doing. Spent time to things you don't understand - it's always pays off on the long run.

Feel free to browse and look through my projects. 

<!--This tiny utility will enable you to use Vue in a declarative way in your static markup with some added benefits. No code needed to create and mount a Vue instance - it's all part of your markup. This utility is really small (<100 lines, 1Kb) and doesn't do anything on its own. It's only brings the power of Vue in a another way. -->

<!--Vue is already bundles in this package. Note you only need to include the packge. Nothing more.-->

<a href="https://github.com/itechodev/vue-hydrate">Github repo</a>

<script src="https://unpkg.com/vue-hydrate@1.0/dist/vue-hydrate-bundle.js"></script>

<!--You can use any of Vue's rich feature sets. Start learning from https://vuejs.org/v2/guide/#Declarative-Rendering. -->

<!--Vue-hydate adds the following 4 features:-->

<div v-data="{message: 'Hydration works', count: 1}" ref="first">

    <div @click="count++">{{ message }} with count: {{ count }}</div>

</div>

<div v-data="data">

    <div @click="inc">{{ message }} with count: {{ count }}</div>

</div>

<script>

    var data = {

        count: 1,

        mounted() {

            console.log('Instance mounted');

        },

        message: 'Increase both',

        inc() {

            this.count++;

            this.$instances.first.count++;

        }

    }

</script>