Braunson Yager Braunson

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }

	<div :class="imageUrl && 'border-orange-500 dark:border-pink-500'"
	class="flex justify-center items-center border-2 border-gray-300 dark:border-dark-line border-dashed rounded-md h-48 overflow-y-hidden"
	x-data="fileUpload">
	<template x-if="!imageUrl">
	<div class="space-y-1 text-center px-6 pt-5 pb-6 w-full">
	<svg aria-hidden="true" class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor"
	viewBox="0 0 48 48">
	<path
	d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
	stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>

	// Usage
	// <x-card-weather-forecast location="Guwahati" api-key="your-weatherapi.com-api-key" />

	@props([
	"location" => "Guwahati",
	"apiKey" => "",
	"poll" => 10000
	])

	<div class="bg-white shadow rounded-lg p-5 dark:bg-gray-800 max-w-full"

	<?php

	namespace App\Http\Livewire;

	use App\Models\Tag;
	use App\Models\User;
	use Illuminate\Database\Eloquent\Builder;
	use Rappasoft\LaravelLivewireTables\DataTableComponent;
	use Rappasoft\LaravelLivewireTables\Views\Columns\BooleanColumn;
	use Rappasoft\LaravelLivewireTables\Views\Column;

	<script data-turbo-eval="false">
	document.addEventListener('turbo:before-render', () => {
	let permanents = document.querySelectorAll('[data-turbo-permanent]')

	let undos = Array.from(permanents).map(el => {
	el._x_ignore = true

	return () => {
	delete el._x_ignore
	}

	<!DOCTYPE html>
	<html lang="en" class="dark">
	<head><!-- head stuff --></head>
	<body class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-grey-200 font-sans transition transition-colors ease-out">
	<main role="main" class="container mx-auto">
	<div x-data="{text: ['Light', 'Dark']}">
	<button
	class="border p-2 font-bold bg-gray-900 dark:bg-white text-white dark:text-grey-900"
	@click="document.documentElement.classList.toggle('dark'); text = text.reverse()"
	x-text="text[0]"

	# Add to your .env.example and .env files
	CSP_ENABLED=true
	CSP_REPORT_ONLY=true

	const Webpackbar = require('webpackbar')

	module.exports = {
	webpack: (config, { isServer }) => {
	config.plugins.push(new Webpackbar({ name: isServer ? 'server' : 'client' }))
	return config
	}
	}

	<div x-data="{ bankAccounts: [{
	id: '',
	accountNumber: ''
	}] }">
	<template x-for="(bankAccount, index, bankAccounts) in bankAccounts" :key="index">
	<div class="grid grid-cols-6 gap-6 mt-2">
	<div class="col-span-3 md:col-span-3 sm:col-span-2">
	<x-jet-label for="city">Bank</x-jet-label>
	<select :name="`bank_info[${index}][bank_id]`" id="bank"
	class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full">

	PORTAL_DOMAIN=localhost
	SESSION_DRIVER=shared