DEV Community: mistlog

Type Query: jQuery Style Type Manipulation

mistlog — Sat, 30 Oct 2021 07:25:01 +0000

https://mistlog.medium.com/type-query-jquery-style-type-manipulation-497ce26d93f

The Art of Type Programming

mistlog — Thu, 11 Mar 2021 15:17:18 +0000

https://mistlog.medium.com/the-art-of-type-programming-cfd933bdfff7

Create complex type using object spread

mistlog — Fri, 26 Feb 2021 15:11:19 +0000

use typetype: https://github.com/mistlog/typetype

The url parser example:

export type function parseURL = (text) => ^{
    if (parseProtocol<text> extends [infer protocol, infer rest]) {
        return {
            protocol,
            ...parseAuthority<rest>
        }
    } else {
        return never
    }
}

type function parseProtocol = (text) => ^{
    if(text extends `${infer protocol}://${infer rest}`) {
        return [
            protocol,
            rest
        ]
    } else {
        return never
    }
}

type function parseUserInfo = (text) => ^{
    if(text extends `${infer username}:${infer password}`) {
        return { username, password }
    } else {
        return { username: text }
    }
}

type function parseAuthority = (text) => ^{
    if(text extends `${infer authority}@${infer rest}`) {
        return {
            authority: parseUserInfo<authority>,
            ...parseHost<rest>
        }
    } else { 
        return {
            authority: null,
            rest: text
        }
    }
}

type function parseHost = (text) => ^{
    if(text extends `${infer name}:${infer port}`) {
        return ^{
            if(parsePort<port> extends never) {
                return never
            } else {
                return { name, port }
            }
        }
    } else {
        return { name: text }
    }
}

type function parsePort = (text) => ^{
    if(isNumberString<text> extends true) {
        return text
    } else {
        return never
    }
}

type function isNumberString = (text) => ^{
    if(text extends "") {
        return never
    } else {
        return _isNumberString<text>
    }
}

type function _isNumberString = (text) => ^{
    /* the end of recursion: each char of text is digit, no more chars to inspect */
    if(text extends "") {
        return true
    } else if(text extends `${infer digit}${infer rest}`) {
        return ^{
            if(digit extends Digit) {
                return _isNumberString<rest>
            } else {
                return false
            }
        }
    } else {
        return false
    }
}

type Digit = union ["0" , "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9"]

Then, the generated type:

export type parseURL<text> = parseProtocol<text> extends [infer protocol, infer rest] ? object$assign<{}, [{
  protocol: protocol;
}, parseAuthority<rest>]> : never;
type parseProtocol<text> = text extends `${infer protocol}://${infer rest}` ? [protocol, rest] : never;
type parseUserInfo<text> = text extends `${infer username}:${infer password}` ? {
  username: username;
  password: password;
} : {
  username: text;
};
type parseAuthority<text> = text extends `${infer authority}@${infer rest}` ? object$assign<{}, [{
  authority: parseUserInfo<authority>;
}, parseHost<rest>]> : {
  authority: null;
  rest: text;
};
type parseHost<text> = text extends `${infer name}:${infer port}` ? parsePort<port> extends never ? never : {
  name: name;
  port: port;
} : {
  name: text;
};
type parsePort<text> = isNumberString<text> extends true ? text : never;
type isNumberString<text> = text extends "" ? never : _isNumberString<text>;
type _isNumberString<text> = text extends "" ? true : text extends `${infer digit}${infer rest}` ? digit extends Digit ? _isNumberString<rest> : false : false;
type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";

test it!

import { parseURL } from "./url-parser-2";

import { Test } from "ts-toolbelt"
const { checks, check } = Test

type url = `http://admin:123456@github.com:8080`;
type result = parseURL<url>

checks([
    check<result, {
        name: "github.com";
        port: "8080";
        authority: {
            username: "admin";
            password: "123456";
        };
        protocol: "http";
    }, Test.Pass>(),
])

TypeType: generate complex typescript type with ease

mistlog — Thu, 18 Feb 2021 00:12:33 +0000

TypeType is designed to generate complex typescript type with ease.

/* 
  export type MyPick<T, Keys extends keyof T> = { [K in Keys]: T[K] } 
*/
export type function MyPick = (T, Keys extends keyof T) => ^{
    for(K in Keys) {
        return {
            key: K,
            value: T[K]
        }
    }
}

/* type mapped2 = { [K in Keys as `get${K}`]: () => string }*/
type mapped2 = ^{
    for(K in Keys) {
        return {
            key: `get${K}`,
            value: type () => string
        }
    }
}

type function _isNumberString = (text) => ^{
    if(text extends "") {
        return true
    } else if(text extends `${infer digit}${infer rest}`) {
        return ^{
            if(digit extends Digit) {
                return _isNumberString<rest>
            } else {
                return false
            }
        }
    } else {
        return false
    }
}

playground: https://mistlog.github.io/typetype-playground/
repo: https://github.com/mistlog/typetype

ReactPeg: Declarative parser generator based on PEG.js

mistlog — Sat, 09 Jan 2021 13:49:43 +0000

Now, we can generate parser in "react" style: declarative & composable:

playground: https://mistlog.github.io/react-peg-playground/
docs: https://mistlog.github.io/react-peg-docs/docs/getting-started
template project: https://github.com/mistlog/react-peg-template

Element UI in Svelte

mistlog — Wed, 30 Dec 2020 14:53:19 +0000

You may want to develop svelte app in another way: use svelte-draft. This site with live editing is implemented in svelte-draft itself and svelte-element.

svelte-element provides vanilla svelte component, so that you can use in both svelte and svelte-draft.

I'm not good at UI engineering, however, take this button implementation as an example:

The skeleton is clear: receive props -> config state -> provide UI.

As for state:

I do believe that code will be maintainable in this way.

TypeDraft: Use Pattern Match DSL

mistlog — Tue, 01 Sep 2020 14:54:32 +0000

In typedraft 0.2.5(use draft-dsl-match 0.2.0), we have full support of pattern match as DSL:

import { MatchDSL } from "draft-dsl-match";

type Vector1 = { x: number };
type Vector2 = { x: number; y: number };
type Vector3 = {
  x: number;
  y: number;
  z: number;
};
type Vector = Vector1 | Vector2 | Vector3;

const vector: Vector = { x: 1 };
const result = Λ<string>("match")` ${vector as Vector} 
  ${{ x: 1, y: 1, z: 1 }} -> ${"vector3"}
  ${{ x: 2, y: 1 }} -> ${"vector2"}
  ${{ x: 1 }} -> ${"vector1"}
`;

console.log(result); // "vector1"

Λ<string>("match")... will be translated to MatchDSL..., behind the scene, ts-pattern provides runtime support for pattern match.

Document for typedraft can be found in typedraft-docs, examples of pattern match: draft-dsl-match, and it's well tested: Test cases as examples.

Have a try in dsl-match-demo! Any feedback is welcome.

TypeDraft: Language is the New Framework

mistlog — Sat, 25 Jul 2020 07:36:21 +0000

https://medium.com/@mistlog/typedraft-language-is-the-new-framework-84dfc433971f

Sapper with Typescript

mistlog — Fri, 28 Feb 2020 15:09:31 +0000

Now we can develop sapper app with full power of typescript and we can refactor current project progressively.

Template project: https://github.com/mistlog/sapper-template.

This was made possible by svelte-draft, see examples or visit online playground: https://codesandbox.io/s/svelte-draft-tutorial-22mdl.

Svelte with TypeScript

mistlog — Sun, 16 Feb 2020 13:15:25 +0000

Recently I implemented svelte-draft, which is another way to add complete typescript support to svelte. I rewrote almost all examples in https://svelte.dev/tutorial and the result is repo svelte-draft-tutorial.

The solution is different from others in that it's in language level, instead of writing tools such as preprocessor, svelte-draft itself is implemented in TypeDraft, which is a superset of typescript with built-in support for DSL extension, code transformation and literate programming.

Any feedback is welcome! :)