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])
    , ''));
}

Akiyamka

# Check node is installed
node -v

# if not, install it
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install stable

# install yarn
curl -o- -L https://yarnpkg.com/install.sh | bash

Akiyamka

const fs = require('fs').promises;
const path = require('path');
const ls = dir => fs.readdir(dir);

async function walk(dir) {
  const filesList = await ls(dir);
  const files = await Promise.all(filesList.map(async file => {
    const filePath = path.join(dir, file);
    const stats = await fs.stat(filePath);
    if (stats.isDirectory()) return walk(filePath);