Skip to content

Instantly share code, notes, and snippets.

View Stradivario's full-sized avatar
🌊
Riding the wave

Kristiqn Tachev Stradivario

🌊
Riding the wave
View GitHub Profile
@Stradivario
Stradivario / esbuild.ts
Created February 17, 2023 10:30
How to emit type declarations in esbuild using tsc
// esbuild.js
import { execSync } from 'child_process'
import { build } from 'esbuild'
build({
...options,
plugins: [
{
name: 'TypeScriptDeclarationsPlugin',
setup(build) {
/*
* Javascript string Diff Algorithm Service
*/
export class DiffService {
public static diff(o: string, n: string) {
o = o.replace(/\s+$/, '');
n = n.replace(/\s+$/, '');
const out = this.calculate(o == '' ? [] : o.split(/\s+/), n == '' ? [] : n.split(/\s+/));
@Stradivario
Stradivario / sort-by-using-rxjs.ts
Created December 14, 2022 18:11
Example how we can sort out array of users by age with multiple emissions process them and change to appropriate structure and from multiple emissions to a single using combineAll()
import { from, of, zip } from 'rxjs';
import { combineAll, groupBy, map, mergeMap, toArray } from 'rxjs/operators';
const people = [
{ id: 1, name: 'Sue', age: 25 },
{ id: 2, name: 'Joe', age: 30 },
{ id: 3, name: 'Frank', age: 25 },
{ id: 4, name: 'Sarah', age: 35 }
];
import {Component} from '@angular/core';
@Component({
selector: 'open-overlay',
template: `
<div (click)="onOpen($event)" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
<ng-content select="[header]"> </ng-content>
</div>
<ng-template
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {ControlValueAccessor, VALUE_ACCESSOR} from '';
@Component({
selector: 'catalog-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.scss'],
providers: [VALUE_ACCESSOR(CounterComponent)],
})
export class CounterComponent extends ControlValueAccessor {
/* eslint-disable @typescript-eslint/no-unused-vars */
import {EventEmitter, forwardRef} from '@angular/core';
import {
ControlValueAccessor as Control,
NG_VALUE_ACCESSOR,
} from '@angular/forms';
export const VALUE_ACCESSOR = <T>(clazz: T) => ({
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => clazz),
const comments = [...document.body.querySelectorAll('li')].filter((e) => !!e.id).map((m) => ({el: m, id: m.id.replace('comment', '')}));
comments.forEach(c => {
const myEl = document.createElement('div');
myEl.innerHTML = 'Hello world';
c.el.querySelector(".comment-item-body").appendChild(myEl)
})
const http = ApolloLink.from([
new RetryLink({
attempts: {
max: 5,
retryIf: (error, operation: Operation) => {
logger.error(`retry to connect error: ${error.message}`);
return !!error;
},
},
delay: {
@Stradivario
Stradivario / trello-board.ts
Last active October 17, 2020 16:36
Example Trello board web component
/* eslint-disable @typescript-eslint/no-this-alias */
import { Component, css, html, LitElement, property } from '@rxdi/lit-html';
export interface Board {
id: string;
name: string;
cards: Card[];
}
export interface Card {
id: string;
@Stradivario
Stradivario / LazyArray.ts
Last active February 18, 2023 17:41
Simple operator helping us to render array with delay
import { animationFrameScheduler, from, Observable, of, scheduled } from 'rxjs';
import { bufferCount, concatMap, delay, mergeMap, scan, tap } from 'rxjs/operators';
export const lazyArray =
<T>(delayMs = 0, concurrency = 2, isFirstEmission = true) =>
(source$: Observable<T[]>) =>
source$.pipe(
mergeMap((items) =>
!isFirstEmission
? of(items)