JS and TS can get real messy real quick. 1 file? Many files? Barrel exports out of an index.ts file? Classes? but what about tree shaking methods on huge classes?
I've found a pattern that works well within the constraint of normal JS/TS that can help with these.
There is so much tooling to scale a project and it sucks. There's many options out there but nothing does everything and I'm curious why.
I believe there's a fundamental change required for software that ecosystems are solving without modularising.
| import { lighten } from "polished"; | |
| import { css } from "styled-components"; | |
| export const lightenOnUserInteraction = css<{ color: string }>` | |
| background-color: ${(props) => props.color}; | |
| :hover, | |
| :focus { | |
| background-color: ${(props) => lighten(0.13, props.color)}; | |
| } |
| // defined in fp-ts | |
| export interface Functor<F> { | |
| map: <A,B>(f: (a:A) => B) => (fa: HKT<F,A>) => HKT<F,B> | |
| } | |
| // How it looks in an array | |
| export interface FunctorArray extends Functor<"Array"> { | |
| map: <A,B>(f: (a:A) => B) => (fa: Array<A>) => Array<B> | |
| } |
| #!/bin/bash | |
| # DO NOT RUN AS SUDO | |
| # AS XBPS-SRC WILL THROW AN ERROR | |
| DIR="$HOME/void-rpi4" | |
| [ -d "$DIR" ] || mkdir "$DIR" | |
| DIR_PACKAGES="$DIR/void-packages" | |
| [ -d "$DIR_PACKAGES" ] || git clone https://github.com/void-linux/void-packages.git "$DIR_PACKAGES" |
| /* | |
| FREE TO USE! COPY AND PASTE INTO YOUR PROJECT. TELL YOUR FRIENDS ABOUT MAPPABLE TYPES! | |
| How to use: | |
| install dependencies (tree shakable): | |
| `yarn add fp-ts ts-toolbelt normalizr` | |
| Your schema definitions should look like this: |
| ```sh | |
| DEBUG: +0ms version: 0.6.2 | |
| DEBUG: +1ms config used: | |
| { | |
| help: false, | |
| include: [ 'src' ], | |
| version: false, | |
| write: false, | |
| avoidSingleFile: false, | |
| debug: 'dbg.txt' |
| /** | |
| * A port of switch-case statements for fp-ts. | |
| * | |
| * This could be broken down further and perhaps extended into a new type-class. | |
| * It does the specific job I needed it to. | |
| * | |
| * If you have an abstraction that might help, i'd love to hear about it! | |
| */ | |
| import { array, either, option } from "fp-ts"; |
In these examples we'll be using letters to represent any number of variables of any type: a, b ,c, etc.
Functional programming is nice becuase it doesn't discriminate primitives and objects.
The point of all these type containers mentioned below is to provide safer and consitently typed code. Prerequisite is that you know what piping means and does.
| // content.tsx | |
| import React, { FC } from 'react' | |
| import { createStyles } from '@material-ui/styles' | |
| import { Paper, AppBar, Toolbar, Grid, TextField, Button, Tooltip, IconButton, Typography, Theme, withStyles } from '@material-ui/core' | |
| import { Search, Refresh } from '@material-ui/icons' | |
| const styles = (theme: Theme) => | |
| createStyles({ | |
| paper: { |
