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

Hi developers 👋
JSTools Weekly newsletter, issue 2023#49 (New JS Tools) just released.

---

source

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.

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

source

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

If you like this issue, please consider subscribing to JSTools Weekly Newsletter.

Thank you