[feature] create public package

[TFK70]

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

1. Создать публичный пакет @gochicus/list, отвечающий за отрисовку TodoItem
2. Внедрить в проект, установив как зависимость

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

Пакет должен быть публичным, т.е. присутствовать в npm регистре

Пакет будет заменять @ui/list, API не изменится
Сам @ui/list нужно будет убрать, за ненадобностью

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

import TodoList from '@gochicus/list'

<TodoList
      deleteItem={deleteItem}
      likeItem={likeItem}
      importantItem={importantItem}
      items={filterData(postData, status, searchResult)}
    />

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

https://github.com/atls-academy/gochicus.github.io/tree/master/practice/web-diary/ui/list

[gochicus]

@TFK70 не получается опубликовать пакет, получаю ошибку 403, текст ошибки:

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/@practice%2fweb-diary - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/aleksandr/.npm/_logs/2021-06-18T09_46_38_615Z-debug.log

Искал варианты решения, пробовал создать файл .npmrc и прописать в нем новый токен, как советуют здесь Однако, результата это не дало.

[TFK70]

@gochicus Распиши что ты делал

[gochicus]

@TFK70

1. npm login
2. переход в директорию пакета
3. npm init
4. Заполнил поля: имя, описание, автор, лицензия
5. Подтвердил правильность написанного в пакете
6. Посмотрел текст пакета и из поля тест убрал команду на выход в случае отсутствия теста.
7. npm publish --access=public

[TFK70]

@gochicus Где находится пакет? Как выглядит package.json? Больше данных об окружении

[gochicus]

@TFK70 пакет расположен в web-diary/ui/list

{
"name": "@ui/list",
"version": "0.0.0",
"license": "BSD-3-Clause",
"main": "src/index.tsx",
"dependencies": {
"@store/post-data": "0.0.0",
"@ui/background": "0.0.0",
"@ui/button": "0.0.0",
"@ui/condition": "0.0.0",
"@ui/icons": "0.0.0",
"@ui/layout": "0.0.0",
"@ui/text": "0.0.0",
"@ui/theme": "0.0.0",
"react": "^17.0.1"
},
"description": "item iterator",
"scripts": {
"test": "echo "Error: no test specified""
},
"author": "gochicus"
}

[TFK70]

@gochicus https://classic.yarnpkg.com/en/docs/publishing-a-package/
create+publish

[gochicus]

@TFK70 Описываю прогресс на текущий момент и затруднения. Чтобы обойти проблему с ошибкой 403, описанной выше, переименовал пакет в gochicus/list, и получил возможность его опубликовать. Успешно опубликовал пакет под этим именем(потом сразу же убрализ npm, когда стало ясно, что не работает), добавил во фрагмент post-list, однако модуль не загружался. Пытаюсь решить проблему через настройки tsconfig. Буду тестировать. Ещё одна проблема связана с компонентом Text в Item, получаю ошибку:

TS2786: 'Text' cannot be used as a JSX component.
Its instance type 'Text' is not a valid JSX element.
Type 'Text' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

[TFK70]

@TFK70 Описываю прогресс на текущий момент и затруднения. Чтобы обойти проблему с ошибкой 403, описанной выше, переименовал пакет в gochicus/list, и получил возможность его опубликовать. Успешно опубликовал пакет под этим именем(потом сразу же убрализ npm, когда стало ясно, что не работает), добавил во фрагмент post-list, однако модуль не загружался. Пытаюсь решить проблему через настройки tsconfig. Буду тестировать. Ещё одна проблема связана с компонентом Text в Item, получаю ошибку:

TS2786: 'Text' cannot be used as a JSX component.
Its instance type 'Text' is not a valid JSX element.
Type 'Text' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

1. Я более чем уверен что ты на эти проблемы потратил больше 30 минут, скорее всего несколько часов. Почему сразу о них не написал?
2. Мне кидать обрывки от логов ошибок бессмысленно пока не покажешь код & окружение (можно хоть коммитом это сделать) и это важный момент который ты всегда опускаешь
3. Смотрел ссылку которую я вчера к таске прикрепил?

[gochicus]

@TFK70 Ссылку смотрел, код сейчас закину. По проблемам пытался сам разобраться.

[gochicus]

@TFK70 возникает проблема с парсингом кода, получаемого из пакета. Код в последнем коммите. Пакет доступен в нпм @gochicus/list:0.0.6. Не уверен в чем проблема, то ли тут нужо как-то сделать асинхронность парсинга, то ли я в пакете что-то напутал. Собственно, текст ошибки:

List.tsx:1 Uncaught Error: Module parse failed: Unexpected token (7:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export const List = ({ items, deleteItem, importantItem, likeItem, setPostData }) => {
| return (

| {items.map(item => (
| <ListItem
at eval (List.tsx:1)
at Object.../../node_modules/@gochicus/list/src/List.tsx (main.js:425)
at webpack_require (main.js:2203)
at eval (index.tsx:2)
at Module.../../node_modules/@gochicus/list/src/index.tsx (main.js:436)
at webpack_require (main.js:2203)
at eval (PostList.tsx:7)
at Module../fragments/post-list/src/PostList.tsx (main.js:766)
at webpack_require (main.js:2203)
at eval (index.tsx:5)

[TFK70]

@gochicus давай думать почему так
Было бы неплохо если бы ты еще добавил свои догадки, например на счет того что он ссылается на вебпак. Куда копаем?

[gochicus]

@TFK70 Статус выполнения задачи. Сейчас есть 0.0.7 версия пакета (опубликована), в ней проверялось влияние tsconfig из пакета на работу приложения. В работе версия 0.0.8 в ней добавлен вебпак и .npmignore. Сейчас разбираюсь с настройками вебпака, чтобы собрать пакет, src уйдет в .npmignore. Потом будт проверяться как оно работает в рпиложении.