Akiyamka

Асинхронный эффект в атоме

Разберем как сделать асинхронный запрос в апи для получения курса валюты. На react c useEffect это выглядит так:

import { useEffect, useState } from 'react';

Akiyamka

Rollup Plugin Name: commonjs Rollup Plugin Version: 13.0.0

Ожидаемое поведение / Ситуация

Данный плагин (и Rollup in расширениях) работает настолько seamlessly насколько это возможно как с тем кодом который он генерирует сам, так и другими инструментами в экосистеме.

Текущее поведение / Ситуация

Есть большое количество интеграционных вопросов, о чем написано ниже.

Akiyamka

1. npm install ts-graphql-plugin -D
2. ext install Prisma.vscode-graphql
3. Create .graphqlconfig with folowing content (values for example):

schemaPath: schema/schema.graphql
includes: ["components/**/*.{graphql,ts,tsx}"]
extensions:
  endpoints:
    default: http://localhost:4000

Akiyamka

/**
 * @param {Object} child
 * @param {string} child.name
 * @returns {boolean}
 */
class MutePlugin {
  constructor(pluginNameSubstring) {
    this.pluginNameSubstring = pluginNameSubstring;
  }

Akiyamka

function debugLogChanges() {
  let lastDeps = [];
  return deps => {
    deps.forEach((d, i) => {
      if (!Object.is(lastDeps[i], d)) {
        console.log(`Change in [${i}]:`, lastDeps[i], '->', d);
      }
    });
    lastDeps = deps;
    return deps;

Akiyamka

Как и почему реакт обновляет компоненты и что с этим делать

Как работает реакт (без подробностей)

Известно что самая медленная операция в барузере - изменение DOM дерева. И что реакт стремится светси эти обновления к минимуму. Для этого он:

1. На стадии рендера - строит дешевый вируатльный vDOM (который браузер не ренедерит)
2. На стадии сравнения - находит разницу между VDOM и текущим DOM (для этого у него есть копия последнего примененного VDOM, т.е. по сути VDOM-ов два - current и new).
3. На стадии обновления - вызывает браузерную апи для того чтобы исправить разницу в реальном DOM и новом VDOM

Akiyamka

const { mv, ls, mkdir, isFolder } = require('./utils')

class SortOutput {
  distPath = null;

  constructor(rules) {
    this.rules = rules;
    this.start = this._start.bind(this)
  }

Akiyamka

Как вы решаете задачу - вызова функции внутри дочернего компонента из родителя?

Представим что у нас есть приложение вида:

<App>
  <Widget /> 
</App>

Akiyamka

/**
 * bbox: [llX, llY, urX, urY]
 * ┌──╗ - ur (2)
 * ╚──┘
 * └ ll (1)
 */
function bboxToPolygon(bbox) {
  const [llX, llY, urX, urY] = bbox;
  return {
    "type": "Feature",

Akiyamka

import { Remarkable } from 'remarkable';
const mdRenderer = new Remarkable();

export function md(strings, ...keys) {
  return mdRenderer.render(strings.reduce((result, str, i) => result += str + (
    keys[i] === undefined
    ? ''
    : keys[i])
    , ''));
}