Описание бага

1. @atlantis-lab/next-app-with-provider v0.2.27
2. @atlantis-lab/next-app-with-provider может нарушать работу использующих его проектов, так как логика взаимодействия с ним была изменена

Воспроизведение

Шаги для воспроизведения бага:

1. Идём в packages/next-app-with-emotion/tests/with-emotion.test.tsx
2. Отправить в withEmotion проп ThemeProvider
3. В результате ничего не отрисуется

Ожидаемое поведение

Плагин должен принять ThemeProvider в withEmotion() как проп, withProviders (как в ридми к пакету) должен принять Consumer и обернуть его в переданный провайдер

Материалы

Ожидаемый вариант использования:

export const withProviders = compose(withEmotion({ Provider: ThemeProvider, injectGlobalStyles }))
export default withProviders(App)

Вариант его использования на данный момент (инвалидное):

export const withProviders = compose(withEmotion({ theme: appTheme }))
export const App = withProviders(Consumer)

Данные окружения

Данный баг от окружения не зависит

Описание бага

Встречается в пакетах, где есть обращение к window.__NEXT_DATA__

По дефолту у window нету свойства __NEXT_DATA__, так что нам нужно его туда добавить

Проблема встречалась и ранее, так что вот полная хронология:

Начальное состояние

Изначально эта проблема решалась так:

declare global {
  interface Window {
    __NEXT_DATA__: any
  }
}

Все было нормально до того момента, пока мы не обновили typescript до 4 мажорной. Ошибка выглядела так:

Type error: Subsequent property declarations must have the same type.  Property '__NEXT_DATA__' must be of type 'NEXT_DATA', but here has type 'any'.

  3 | declare global {
  4 |     interface Window {
> 5 |         __NEXT_DATA__: any;
    |         ^
  6 |     }
  7 | }
  8 | declare type Props = {

Воспроизведение:

Для воспроизведение можно использовать @monstrs/[email protected], там такая же проблема (с ходу не нашел @atls либ более ранних версий в регистре, где бы это воспроизводилось)

Нужно установить ее в проект с [email protected] и запустить typecheck (но само приложение будет работать)

"Фикс"

Для фикса этой проблемы, очевидно, нужно было получить тип NEXT_DATA, о котором он писал в логах, и он должен был находиться в где-то next, но проблема в том, что просто так его взять и заимпортить нельзя - его нет в индексе.

Проблема решается если добираться до файла с этим типом вручную через релятивные пути:

require('next/dist/next-server/lib/utils')

Там есть NEXT_DATA и он нам подходит, но проблема в том, что в разных версиях некста путь до этого файла тоже разный, так что была использована следующая заплатка (на данный момент актуальная):

const NEXT_DATA_VAL = (require('next/dist/shared/lib/utils') || require('next/dist/next-server/lib/utils')).NEXT_DATA

type NEXT_DATA = typeof NEXT_DATA_VAL

declare global {
  interface Window {
    __NEXT_DATA__: NEXT_DATA
  }
}

Ранее она работала, но здесь она выстрелила следующим образом:

Только в этом случае уже не билдится проект: он не может достучаться до файла, откуда мы берем NEXT_DATA

Воспроизведение

Получается шаги для воспроизведения бага следующие:

1. Устанавливаем на проекте @atls/[email protected] и next@11 или [email protected] (проверялось на обоих)
2. Билдим проект
3. Видим ошибку

Но проблема в том, что есть проекты где с аналогичным окружением все в порядке, так что шаги могут сработать, а могут и не сработать, на данный момент не могу быть уверен в чем именно причина

Ожидаемое поведение

Тайпчеки проходят, проект билдится

Данные окружения

• macOS@monterey и Windows 10

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-ismobile

Расскажите как вы это себе видите

Например:

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-ismobile.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

Какого рода задача?

Обновить файл README.md

С чем связан запрос на фичу?

• Перевести next-app-with-emotion на emotion 11 (emotion-theming -> @emotion/react)
• Перевести next-document-with-emotion на emotion 11 (emotion-server -> @emotion/server)

Расскажите как вы это себе видите

До

import { ThemeProvider } from 'emotion-theming'

После

import { ThemeProvider } from '@emotion/react'

Приложите примеры реализаций

https://emotion.sh/docs/emotion-11

Какого рода задача?

Переписать тест в next-app-with-apollo

Что и где будем менять?

Например:
Нужно переписать прошлый тест на более эффективный

Примерный код теста:

import React          from 'react'
import TestRenderer   from 'react-test-renderer'
import { compose }    from 'recompose'
import { gql, useQuery } from '@apollo/client'

import { withApollo } from '../src/index'

describe('TestMessage suit for next-app-with-apollo', function describer() {
    test('should start data fetching using provided ApolloClient', function tester(){

        const withProviders = compose(
            withApollo({
                uri: 'https://48p1r2roz4.sse.codesandbox.io',
            })
        )

        const EXCHANGE_RATES = gql`
            query GetExchangeRates {
                rates(currency: "USD") {
                    currency
                    rate
                }
            }
        `;

        function ExchangeRates() {
            const { loading, error, data } = useQuery(EXCHANGE_RATES);

            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error :(</p>;

            return data.rates.map(({ currency, rate }) => (
                <div key={currency}>
                    <p>
                        {currency}: {rate}
                    </p>
                </div>
            ));
        }

        const App = withProviders(ExchangeRates)

        const testRenderer = TestRenderer.create(<App/>)

        expect(testRenderer.root.findByType('p').props.children).toBe('Loading...')
    })
})

Укажите референс

#128 - была закрыта тем самым тестом

Использование пакета @atlantis-lab/next-app-with-apollo приводит к ошибке

error - ../../../../node_modules/@apollo/react-hooks/lib/react-hooks.esm.js:5:0
Module not found: Can't resolve 'apollo-client'

Описание бага

1. @atlantis-lab/next-app-with-emotion@latest
2. Ошибка во время сборки

Воспроизведение

Шаги для воспроизведения бага:

1. Начинаем сборку прокта, который использует next-app-with-emotion
2. Видим ошибку

Ожидаемое поведение

Все должно собираться без ошибок

Материалы

Module not found: Can't resolve '@emotion/react'

Во время теста ошибки нет, тест проходит

Дополнительно

Это наверняка связано с отказом от emotion-theming в пользу @emotion/react

При обратной замене @emotion/react на emotion-theming ошибка исчезает

Данные окружения

• [email protected]

Описание бага

Новые тайпчеки не проходят в пакетах:

• next-app-with-user
• next-app-with-ismobile
• next-app-with-intl
• next-app-with-emotion
• next-app-with-auth

Воспроизведение

Шаги для воспроизведения бага:

1. Установить @atls/actl-cli
2. Установить пакеты выше как зависимости (yarn 2)
3. actl typecheck
4. Видим ошибки

Ожидаемое поведение

Ошибок быть не должно

Материалы

Type error: Subsequent property declarations must have the same type.  Property '__NEXT_DATA__' must be of type 'NEXT_DATA', but here has type 'any'.

  2 | declare global {
  3 |     interface Window {
> 4 |         __NEXT_DATA__: any;
    |         ^
  5 |     }
  6 | }
  7 | declare type Props = {

Данные окружения

• macOS@latest

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-document-with-emotion

Расскажите как вы это себе видите

Например:

• Добавить папку __tests__ в директории с плагином
• Создать файл с тестом with-emotion.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-helmet

Расскажите как вы это себе видите

• Создать папку tests в директории с плагином
• Создать файл с тестом with-helmet.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

Какого рода задача?

Обновить намспейсы

atlantis-lab -> atls

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-document-with-helmet

Расскажите как вы это себе видите

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-helmet.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-document-with-emotion

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-auth

Расскажите как вы это себе видите

Например:

• Создать папку tests в директории с плагином
• Создать файл с тестом next-app-with-auth.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

С чем связан запрос на фичу?

Необходимо добавить переводы для ошибок в next identity integration

Расскажите как вы это себе видите

• переводы добавлены

Приложите пример реализаций

No response

Описание бага

1. @atlantis-lab/next-document-with-emotion v0.2.29
2. Тест в @atlantis-lab/next-document-with-emotion не покрывает функционал пакета

Воспроизведение

Шаги для воспроизведения бага:

1. Идём в packages/next-document-with-emotion/
2. Выполняем yarn test (он же jest)
3. Тест проходит, но на деле ничего не покрывается и не проверяется

Ожидаемое поведение

Тест должен проверить валидность инициализации Document после его передачи в withProviders()

Материалы

Это тест, который проверяет строку в expect на truthy. Этой строкой является "undefined", так что очевидно, что результатом прохождения теста должен быть FAIL:

const withProviders = compose(withEmotion())

expect(`${withProviders(Document).render}`).toBeTruthy()

Из этого следует, что функционал пакета не покрыт

Данные окружения

Данный баг с окружением не связан

С чем связан запрос на фичу?

Необходимо реализовать возможность передачи кастомного хэндлера для случая успешного завершения флоу. Сейчас это только редирект.

Расскажите как вы это себе видите

• в провайдер передается функция onSuccess
• если в провайдер передана функция, выполняется только она
• если onSuccess === undefined - выполняется стандартный редирект

Приложите пример реализаций

No response

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-emotion

Расскажите как вы это себе видите

• Создать папку tests в директории с плагином
• Создать файл с тестом with-emotion.test.tsx

Приложите примеры реализаций

Просто оставьте ссылку на репу, статью, gist, любой другой источник откуда почерпнули идею

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-auth

Список зависимостей на обновление

• #163
• #164

Блокирующие факторы

В обоих нарушена обратная совместимость, необходим ресёч

Описание бага

Последний yarn работает некорректно на этой репе

Воспроизведение

Шаги для воспроизведения бага:

1. Пытаемся установить зависимость в любой из воркспейсов, например:
   yarn workspace @atlantis-lab/next-app-with-emotion add @emotion/react
2. Видим ошибку

Ожидаемое поведение

Зависимость должна установиться

Материалы

error An unexpected error occurred: "expected workspace package to exist for \"yargs-parser\"".
info If you think this is a bug, please open a bug report with the information provided in "/media/darius/6E4CBE7A4CBE3D21/atlantis/atlantis/nextjs/packages/next-app-with-emotion/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
error Command failed.
Exit code: 1

Примечания

yarn install работает без проблем

Как временный workaround - понизить версию yarn до 1.19

Данные окружения

• [email protected]

С чем связан запрос на фичу?

Необходимо предусмотреть переадресацию пользователя на страницу верификации со страницы логина при попытке входа в неподтвержденный аккаунт

Расскажите как вы это себе видите

• пользователь зарегистрировался
• не подтвердил аккаунт
• вернулся спустя время на страницу логина
• логин при верных кредах и неподтвержденном аккаунте переадресовал на верификацию и отправил код заново.

(скорее всего надо будет email передавать через квери)

Приложите пример реализаций

No response

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-intl

Расскажите как вы это себе видите

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-intl.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

С чем связан запрос на фичу?

Необходимо протестировать функционал плагина next-app-with-apollo

Расскажите как вы это себе видите

Заменить файл stub.test.ts на файл с тестом next-app-with-apollo.test.tsx в папке tests

Приложите примеры реализаций

https://github.com/Atlantis-Lab/reactjs/tree/master/packages/react-user

С чем связан запрос на фичу?

С переходом на app router необходимо изменить хуки роутера в identity integration

Расскажите как вы это себе видите

• useRouter
• useSearchParams
• usePathname

Приложите пример реализаций

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-config-with-workspaces

Расскажите как вы это себе видите

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-workspaces.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

Описание бага

TypeError внутри пакетов

Необходимо адаптировать пакеты под последнюю версию тайпскрипта

Воспроизведение

Шаги для воспроизведения бага:

1. Устанавиливаем @atls/next-app-with-user или любой другой пакет где есть этот фрагмент:

declare global {
  interface Window {
    __NEXT_DATA__: any
  }
}

2. actl typecheck
3. Видим TypeError

Ожидаемое поведение

Внутри пакетов не должно быть никаких ошибок на уровне типов

Материалы

.yarn/cache/@atls-next-app-with-user-npm-0.2.66-6e291aa29c-1c4d94370d.zip/node_modules/@atls/next-app-with-user/dist/with-user.provider.d.ts:4:9
Type error: Subsequent property declarations must have the same type.  Property '__NEXT_DATA__' must be of type 'NEXT_DATA', but here has type 'any'.

  2 | declare global {
  3 |     interface Window {
> 4 |         __NEXT_DATA__: any;
    |         ^
  5 |     }
  6 | }
  7 | declare type Props = {

Данные окружения

• macOS@latest

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-provider

Расскажите как вы это себе видите

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-provider.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

Какого рода задача?

Пакет next-app-with-apollo

Добавить дополнительную проверку во избежание TypeError'ов во время билда

Что и где будем менять?

Например:
Нужно изменить условие функции

    if (response.status === 401 && options.onUnauthenticated) {
      options.onUnauthenticated()
    }
  })

на

    if ((response && response.status === 401) && options.onUnauthenticated) {
      options.onUnauthenticated()
    }
  })

Укажите референс

Ошибка билда в atls/serenity#156

[   =] info  - Exporting (1/7)/Users/darius/workspace/atlantis/serenity/.yarn/cache/zen-observable-npm-0.8.15-3bec99c19c-7d155f8a75.zip/node_modules/zen-observable/lib/Observable.js:65
      throw e;
      ^

TypeError: Cannot read property 'status' of undefined
    at /Users/darius/workspace/atlantis/serenity/.yarn/unplugged/@atls-next-app-with-apollo-virtual-906ead1e3e/node_modules/@atls/next-app-with-apollo/dist/apollo.client.js:25:22
    at Object.error (/Users/darius/workspace/atlantis/serenity/.yarn/cache/@apollo-link-error-npm-2.0.0-beta.3-4aea365499-76cb027479.zip/node_modules/@apollo/link-error/lib/index.js:33:41)

Список зависимостей на обновление

• @atlantis-lab/react-auth
• @atlantis-lab/react-locale
• @atlantis-lab/react-modals
• @atlantis-lab/react-user

Блокирующие факторы

Описаны подробнее тут

Какого рода задача?

Обновить зависимости emotion до последних в next-app-with-emotion

Что и где будем менять?

1. Обновить зависимости
2. Наладить совместимость

Укажите референс

Старые зависимости emotion несовместимы с новыми, что может блокировать сборку проекта

Какого рода задача?

Избавиться от mctl в пользу actl

Что и где будем менять?

1. Скрипты с mctl на actl
2. Конфиги с mctl на actl
3. Почистить зависимости

Укажите референс

mctl устарел

С чем связан запрос на фичу?

Необходимо добавить возможность передавать имейл в квери параметры запроса после успешной регистрации

Расскажите как вы это себе видите

После успешной регистрации пользователь попадает на страницу верификации с необходимыми квери параметрами (в том числе имейлом, если необходимо)

Приложите пример реализаций

No response

Обновить зависимости пакетов на Next 10

С чем связан запрос на фичу?

Сделать хок, который будет инжектить теги для gtag в head документа

Расскажите как вы это себе видите

Предыдущая реализация

Проблема с ней заключается в том, что нету яндекс метрики (проблема по-видимому на стороне gtag)

Рабочий вариант (можно скопипастить и потестить):

<!doctype html>
<html lang="en">
<head>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-KGZLL27');</script>
  <!-- End Google Tag Manager -->
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KGZLL27"
                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>
</html>

Секции в head и в конце body

Пример использования

const withProviders = compose(
  ...
  withGtag('GTM-DWDFDES')
)

С чем связан запрос на фичу?

Необходимо после успешной регистрации иметь возможность переходить на страницу верификации с правильными квери параметрами

Расскажите как вы это себе видите

• После заполнения всех полей необходимых для регистрации вызываем функцию onSubmit
• Если регистрация прошла успешно, пользователя перекидывает на страницу верификации, если не указаны другие опции.

Приложите пример реализаций

No response

С чем связан запрос на фичу?

Необходимо протестировать работоспособность плагина next-app-with-user

Расскажите как вы это себе видите

• Создать папку __tests__ в директории с плагином
• Создать файл с тестом with-user.test.tsx

Приложите примеры реализаций

https://github.com/Atlantis-Lab/nextjs/tree/master/packages/next-app-with-apollo

С чем связан запрос на фичу?

В NextJS есть возможность выбора между двумя видами роутера - app и pages. На момент создания таски микрофронты работают только на pages роутере, который уже в режиме maintanance.

Расскажите как вы это себе видите

• обновить зависимости
• добавить отдельный экспорт функций для pages роутера`

Приложите пример реализаций

No response