Ole's questions

O Lit Element tem um projeto inicial do TypeScript que tem um script package.json checksizee se parece com isso.

"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"

A rollup -cparte produz um bom relatório que mostra o tamanho do pacote assim:

┌───────────────────────┬──────────┐
│ File name             │ Size     │
│ --------------------- │ -------- │
│ my-element.bundled.js │ 17.07 kB │
│ --------------------- │ -------- │
│ Totals                │ 17.07 kB │

E estou tentando descobrir para que cat my-element.bundled.js | gzip -9 | wc -c serve essa parte.

Ela produz um número. Como interpretamos esse número?

Por exemplo, sem alterar o projeto de amostra iluminado, esta é a saída produzida pela execução checksize:

┌───────────────────────┬──────────┐
│ File name             │ Size     │
│ --------------------- │ -------- │
│ my-element.bundled.js │ 17.07 kB │
│ --------------------- │ -------- │
│ Totals                │ 17.07 kB │
└───────────────────────┴──────────┘
    6325

Qual é o número 6325?

Agora podemos importar módulos CommonJS no Node usando a sintaxe de importação ESM?

Então, se commonjsmodulefor um módulo cjs que exporta assim:

exports.add = function() {...}

Podemos importar dessa forma, supondo que estamos trabalhando dentro do ESM?

import { add } from "commonjsmodule";

Neste vídeo do YouTube, o autor está demonstrando a typepropriedade e o que ela faz package.json.

E ele faz isso criando um arquivo cjs e um arquivo mjs e um aplicativo, e no aplicativo ele está importando ambos usando a sintaxe de importação ESM, e eu simplesmente presumi que ferramentas adicionais seriam necessárias para o arquivo cjs.

A demonstração que a Mozilla tem para o clip path (também incluída abaixo para referência) diz que:

Somente a parte do coração vermelho dentro do círculo do clipe fica visível.

E o caminho de recorte é definido assim:

  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

E é referenciado assim:

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />

Agora, quando olhamos para a demonstração, que anima o raio do círculo de 0a 60px, o coração acaba cortando o círculo, em vez do círculo cortar o coração, que é o que a demonstração descreve (diz que é a intenção da demonstração).

Por que é que?

html,
body,
svg {
  height: 100%;
}

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

Na documentação do RxJS Interop para Angular 19 diz:

Diferentemente de Observables, os sinais nunca fornecem uma notificação síncrona de alterações. Mesmo se você atualizar o valor de um sinal várias vezes, toObservable emitirá o valor somente após o sinal estabilizar.

E dá este exemplo:

const obs$ = toObservable(mySignal);
obs$.subscribe(value => console.log(value));
mySignal.set(1);
mySignal.set(2);
mySignal.set(3);

No caso acima, apenas 3fica registrado.

Então, como "estabilizamos" meu sinal depois, se quisermos que cada setchamada seja emitida pelo observável correspondente?

É suficiente sempre encapsular o conjunto em uma chamada de método como essa? Há outras maneiras de fazer isso?

updateMySignal(value: number) {
   this.mySignal.set(value);
}

Se definirmos uma propriedade como esta em um color-spanelemento personalizado:

  static get observedAttributes() {
    return ['bgc'];
  }

E obter uma referência a uma instância como essa e, ao mesmo tempo, alterar a propriedade bgc, isso deve fazer com que o attributeChangedCallbackseja disparado?

const colorSpan = document.querySelector('color-span');
console.log(colorSpan);
colorSpan.bgc = 'BLUE';

Eu testei nesta demonstração e ele não dispara, então eu só queria confirmar meu entendimento de que ele attributeChangedCallbacksó disparará quando um atributo for definido declarativamente assim:

<color-span bgc="RED">Hello From Color Span</color-span>

Suponha que primeiro verificamos se um recurso não está carregando assim:

    @if (!countriesResource.isLoading()) {
      <ul>
        @for (
          country of countriesResource.value(); 
          track country.name.official
        ) {
          <li>{{ country.name.official }}</li>
        }
      </ul>

Se o recurso não estiver carregando, mas ainda não tiver iniciado uma solicitação, existe uma maneira de fornecer um valor inicial para que ele countriesResource.value()seja resolvido como um valor inicial?

Com o RxJS, poderíamos evitar o retorno de pressionamentos de tecla como esse antes de executar uma solicitação http.

this.query$.pipe(
    debounceTime(500),
    distinctUntilChanged(),

A nova API de recursos do Angular tem uma maneira de eliminar a rejeição de um campo de entrada antes de atualizar os parâmetros da solicitação?

Podemos enviar uma subárvore (neste exemplo para documa pasta) para gh-pagesalgo assim:

git subtree push --prefix doc origin gh-pages

Se quisermos que o conteúdo da docpasta seja enviado para uma apipasta, gh-pagesé possível especificar uma apipasta como parte do envio?

Ou seria necessário mover o conteúdo da docpasta para doc/apie então empurrar doc? Isso teria o mesmo efeito desejado...

Estou tentando criar um web trabalhador em um projeto Lit Element Stackblitz .

Este é o trabalhador ( worker.js):

onmessage = (e) => {
  console.log(e.data);
  postMessage(e.data);
};

E este é o código que o cria ( In my-element.ts` ):

  constructor() {
    super();
    const worker: Worker = new Worker('worker.js');
    console.log(worker);
    worker.postMessage('hello');
    worker.onmessage = (e) => {
      console.log(`The worker posted back ${e.data}`);
    };
  }

E a demonstração, quando visualizada com ferramentas de desenvolvedor, não registra nenhuma mensagem interna ou do trabalhador, mas registra:

SyntaxError: token inesperado '<' (em trabalhador.js:1:1)

E estou tentando descobrir se isso é um bug do Stackblitz e se há alguma maneira de contornar isso.

Pensamentos?

Existe uma maneira de criar um commit com corpo e rodapé usando a linha de comando?

Sempre fiz assim , porém especificações como Convencional Commits também mencionam o uso de corpo e rodapé, então só estou curioso para saber se eles podem ser definidos por meio da linha de comando?

Suponha que temos um serviço SomeServicedeclarado dentro de uma biblioteca sem a providedIn: rootconfiguração de metadados injetáveis.

@Injectable()
export class SomeService { ...}

E dentro da nossa aplicação colocamos SomeServiceo providersarray for bootstrapApplication.

import { SomeService} from 'SomeLibrary';

bootstrapApplication(AppComponent, {
  providers: [
    SomeService,
  ],
});

Isso criará essencialmente um SomeServicesingleton para todo o aplicativo da providedIn: rootmesma forma?

É possível tornar uma fatia de um gráfico de rosca chart.js mais espessa que o restante das fatias?

Por exemplo, nesta demonstração do Stackblitz, é possível tornar a fatia azul 25% mais espessa que a fatia roxa?

Este é o código da demonstração.

const config: ChartConfiguration = {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue'],
    datasets: [
      {
        hoverOffset: 24,
        backgroundColor: ['rgb(255, 9, 132)', 'rgb(54, 162, 235)'],
        borderWidth: 0,
        label: '# of Points',
        data: [75, 25],
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        mode: 'index',
        intersect: false,
        position: 'nearest',
      },
    },
    scales: {
      y: {
        min: 0,
        max: 20,
      },
    },
  },
};
new Chart(ctx, config);

Se tivermos um serviço como este que faz parte de uma biblioteca:

@Injectable({ providedIn: 'root' })
export class ChartJSProvider {
  constructor() {
    Chart.register(...registerables);
  }
}

E um aplicativo que usa a biblioteca.

O ChartJSProvidersingleton será criado automaticamente e incluído nas instâncias em execução do aplicativo Angular, mesmo que não seja injetado em nenhum componente usado pelo aplicativo ou seja sacudido pela árvore?

Alguém sabe se existe um conjunto atualizado de tipos para ChartJS?

Existe um package @types/chartjs, mas está obsoleto.

Seria bom obter o preenchimento automático ao definir as opções.

Atualmente com JS puro:

const config = {
  type: 'line',
  data: {},
  options: {},
  plugins: []
}

Seria bom se pudéssemos fazer:

const config: ChartJSOptions = {
  type: 'line',
  data: {},
  options: {},
  plugins: []
}

Como deve ser feito o uso/observação @Output()de emissores de eventos pais em componentes filhos?

Por exemplo, nesta demonstração, o componente filho usa o @Output onGreetingChangeseguinte:

<app-greeting [greeting]="onGreetingChange | async"></app-greeting>

E isso funcionará se onGreetingChangefor emitido no AfterViewInitgancho do ciclo de vida.

  ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
  }

No entanto, isso produz um ExpressionChangedAfterItHasBeenCheckedErrorerro.

Existe uma maneira de fazer isso funcionar sem produzir o erro?

Tentei emitir em ambos constructore OnInit. Pensamentos?

Tentando descobrir por que OnPusha estratégia de detecção de alterações não está funcionando nesta demonstração .

Se bem entendi, OnPusha detecção de alterações deve ser acionada quando uma referência de propriedade é alterada. e para garantir isso, um novo array é definido sempre assim:

    this.periodData$.subscribe((pd) => {
      this.periodData = [...pd];
    });

E o modelo que é renderizado periodDatafica assim:

<div *ngFor="let p of periodData">{{p}}</div>

O periodDataé alterado através do controle de seleção na demonstração.

Podemos ver que está mudando via log, porém o template não está atualizando. Se a detecção de alterações estiver definida como padrão, ela funcionará.

Pensamentos?

Nesta demonstração, gostaria de reduzir a altura do campo de seleção. Esta é a marcação.

<mat-form-field appearance="outline">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

Se entrarmos nas ferramentas do desenvolvedor e selecionarmos o divcom a classe, mat-mdc-form-field-infixpodemos alterar o heighte o padding, no entanto, quando o preenchimento é alterado, ele também altera a localização da seta suspensa, então estou tentando descobrir como manter tudo centralizado enquanto reduzindo a altura.

Pensamentos?

Estou tentando atualizar um modelo quando uma fatia do gráfico de pizza é clicada.

Este é o modelo.

    <h1>{{slice && slice.name}}</h1>
    <h1>{{slice && slice.value}}</h1>

Aqui está uma demonstração. https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts

Quando um dos segmentos do gráfico de pizza é clicado ele emite um objeto contendo o namee valuedo segmento que foi clicado.

O maincomponente recebe isso através do ouvinte onPieSelecte define a slicepropriedade no maincomponente assim:

  onPieSelect(e: any) {
    console.log('slice clicked', e);
    this.slice = e;
  }

Podemos observar que o objeto está sendo recebido via log, porém o template não está sendo atualizado.

Alguma ideia?

Esta Optionsclasse possui uma função de fábrica que retorna uma instância personalizada da classe. É isso:

export class Options {
  quadrant?: 1 | 2 | 3 | 4 = 1;
  static factory(options: Partial<Options>): Options {
    const defaults: Options = new Options();
    return {
      ...defaults,
      ...options,
    };
  }
}

E estou tentando passar um argumento de função de fábrica que modifica quadrantassim:

export const defaults = {
  quadrant: 2,
};

const responsive: Options = Options.factory({
  ...defaults,
});

E produz este erro:

Argument of type '{ quadrant: number; }' is not assignable to parameter of type 'Partial<Options>'.
  Types of property 'quadrant' are incompatible.
    Type 'number' is not assignable to type '1 | 2 | 3 | 4'.(2345)

Existe uma maneira de consertar isso?

Nesta demonstração, há dois divs dentro do div do contêiner de grade css. É possível centralizá-los para que o segundo item fique dentro e em cima do primeiro item e ambos sejam centralizados vertical e horizontalmente? Pensei que talvez align-selfo fizesse...

<div
  style="
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 200px;
    width: 200px;
    background-color: blue;
  "
>
  <div
    style="
      width: 100px;
      height: 100px;
      background-color: red;
      align-self: center;
    "
  ></div>
  <div
    style="
      align-self: center;
      width: 50px;
      height: 50px;
      background-color: yellow;
    "
  ></div>
</div>