✨2023#49: TSDiagram: Create diagrams with TypeScript.

📅 December 3-9, 2023

Dec 14, 2023

tsdiagram: Create diagrams and plan your code with TypeScript.

TSDiagram is an innovative online tool that utilizes TypeScript for rapid diagram creation. It empowers users to define data models using type aliases, interfaces, and classes, and it automatically arranges nodes efficiently. Additionally, TSDiagram automatically rearranges nodes except the one moved manually. It also preserves document status in URL and localStorage and enables SVG export for diagrams.

ai-group-tabs: Organize and group your Chrome tabs with AI

This extension helps you organize and group your Chrome tabs by default categories. It uses OpenAI API key in popup and save in Chrome storage. It also allows you to customize categories in popup. It groups new tabs automatically and published on Chrome store.

nanotar: Tiny and fast Tar utils for any JavaScript runtime!

Nanotar is a tiny and fast tar utility for any JavaScript runtime. It is written in modern TypeScript and ESM format and works in any JavaScript runtime, including Node.js (18+), Bun, Deno, Browsers and Edge Workers. It provides built-in compression and decompression support and is Web Standard Compatible.

import { createTar } from "nanotar";

const data = createTar(
  [
    { name: "README.md", data: "# Hello World!" },
    { name: "test", attrs: { mode: "777", mtime: 0 } },
    { name: "src/index.js", data: "console.log('wow!')" },
  ],
  { attrs: { user: "js", group: "js" } },
);

// Data is a Uint8Array view you can send or write to a file

pagination: Simple Pagination Library

const peoples = [
    { name: 'Asep', age: 21, address: 'Bandung' },
    { name: 'Komar', age: 23, address: 'Jakarta' },
];

const options = {
    search: 'a',
    limit: 1,
    currentPage: 1,
    fieldName: 'peoples',
    sort: [
        ['age', 'desc'],
    ],
};

paginate(peoples, options);

action-table: Native HTML web component for adding sorting and filtering functionality to tables

A lightweight and customizable web component that enhances static HTML tables with sorting and filtering capabilities. Unlike conventional Shadow DOM implementation, it utilizes a custom CSS stylesheet for styling, allowing users to tailor the component's appearance to their preferences.

unwrapped: Spotify Wrapped for developers.

Unwrapped provides developers with a comprehensive summary of their coding activities throughout the year, including code contributions, productivity insights, repo highlights, coding habits, contribution styles, and detecting fires early.

source

astro-dashboard: An Astro dashboard

An open source dashboard project using Astro with API endpoints, Tailwind, and Supabase.

Screenshot 2023-12-10 at 11 01 49 PM — source

rich-editor-to-markdown-parser: microCMS Rich Editor response convert to markdown

import parse from 'rich-editor-to-markdown-parser';

const html = '<h1>Hello World!</h1><p>This <strong>html</strong> string is <s>convert</s>into <a href="https://exampe.com">markdown.</a></p>'

parse(html); // # Hello World!\n\nThis **html** string is ~~convert ~~into [markdown.](https://exampe.com)

metaline: A tiny language to write mapping functions as strings

The string where.id.in.$>#id;limit:99 generates the equivalent function of:

function transform (input) {
  return {
    where: {
      id: {
        in: input.map((i) => i.id)
      }
    },
    limit: 99
  }
}

The string $>id.#directoryId generates the equivalent function of:

function transform (input) {
  return input.map((t) => {
    return {
      id: t.directoryId
    }
  })
}

ChunkViz: Visualize Different Text Splitting Methods

This is a tool to visualize how different text splitters chunk up text

More tools to explore:

ai-group-tabs: Organize and group your Chrome tabs with AI
fast-ignore: A fast parser and processor for .gitignore files.
eslint-ts-patch: Support loading eslint.config.mjs and eslint.config.ts as flat config files for ESLint.
eslint-plugin-format: Format various languages with formatters in ESLint
eslint-plugin-unimport: Insert imports automatically from Unimport in ESLint
eslint-processor-vue-blocks: Create virtual files in ESLint for each Vue SFC block to lint them individually.
eslint-merge-processors: Merge multiple ESLint processors to behave like one
vite-plugin-stylex: Vite Plugin for StyleX
vite-plugin-clean-css: Optimize CSS for production using clean-css
chrome-extension-starter: Chrome extension starter template with React, TypeScript, Vite and Tailwind
remix-vite-template: Remix template with Vite, Tailwind CSS, and Fly.io support
YouTubeAIExtension: Chat with ANY of your favorite YouTube Videos!
http-server: An experimental HTTP framework
ts-check-perf: Measuring and comparing type-checking speed of TS samples
client-js: JS Client library for Mistral AI platform
disposable-email-api: This API allows you to check if an email address is from a disposable email service.
commit-translator: vscode extension for translating commit message
Js-form-data-assigner: This is a recursive function which generates a formData object from nested values
pragmaticversioning: Pragmatic versioning optimizes for communicating changes to a package to package consumers, while retaining simple semantics for package maintainers.
snapp: Yet Another Url Shortner. A simple excercise to learn Svelte, Svelte5 Runes, and Tabler.
generic-streaming: Streaming server actions without the AI

⛔ From this issue onwards, the Top JSTools section, which included new releases of JavaScript tools, will no longer be published.

The reason for this decision is that developers can subscribe to new releases through GitHub by watching the GitHub repositories and get notified as soon as new releases are released.

JSTools Weekly

Discussion about this post