Size: a a a

2020 November 19

AP

Alexander Ponomarev in Svelte [svelt]
Alexander
ну вот cjs мне вот в такое скомпилировал для экспорта
и он лежит в node_modules?
источник

AP

Alexander Ponomarev in Svelte [svelt]
лучше опиши сначало чего ты пытаешься достичь, потому что похоже тебя изначально вообще неправильно поняли.

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

если ты хотел что-то другое, то тебя не поняли =)
источник

A

Alexander in Svelte [svelt]
Alexey Solovyov
В es пробовали собирать?
во, с es уже получше)
источник

A

Alexander in Svelte [svelt]
Alexander Ponomarev
и он лежит в node_modules?
не, просто в виде исходников
источник

AP

Alexander Ponomarev in Svelte [svelt]
тогда я не понимаю цели всех этих действий =)
источник

A

Alexander in Svelte [svelt]
в общем с es все увидел, спасибо)
источник

AS

Alexey Solovyov in Svelte [svelt]
Alexander Ponomarev
тогда я не понимаю цели всех этих действий =)
Присоединяюсь. Зачем собираете-то?)
источник

IV

Ivo Vicente in Svelte [svelt]
ID:0
#uilib

Наши пилят 👍🏻

https://illright.github.io/attractions/
👍
источник

A

Alexander in Svelte [svelt]
у меня просто непосредственно из тс-скрипта импорт не шел
источник

A

Alexander in Svelte [svelt]
ошибка была
источник

A

Alexander in Svelte [svelt]
вероятно, это решалось бы если в конфиге для свелта добавить тайпскрипт-плагин, но я для первого раза, пожалуй, сойдет и так
источник

A

Alexander in Svelte [svelt]
кстати, у svelt нет события наподобие didMount?
источник

A

Alexander in Svelte [svelt]
чтобы происходило уже после того, как разметка отрендерена?
источник

AS

Alexey Solovyov in Svelte [svelt]
Alexander
чтобы происходило уже после того, как разметка отрендерена?
onMount
источник

DK

Dmitry Kurmanov in Svelte [svelt]
Alexander Ponomarev
тогда я не понимаю цели всех этих действий =)
+1 я тоже чёт потерялся :)
источник

Б

Богдан in Svelte [svelt]
Pavel 🦇 Malyshev
Конечно не обошлось без спортивного интереса, давно было интересно, можно ли взять пару инструментов из npm, написать сотни 2 строк кода и получить фреймворка уровня реакта)
я раньше тоже занимался написанием собственной версии реакта и обычно получалось больше 100 строчек кода. Но однажды понял что мне достаточно простого хелпера который просто делает дифф компонентов и теперь весь мой "фреймворк" умещается в 22 строчки кода
Кому интересно то вот пару демок:
https://codesandbox.io/s/hungry-star-0r2y8?file=/src/index.js
https://codesandbox.io/s/condescending-shockley-4nmnq?file=/src/index.js

Из-за размера в 22 строчки кода есть пару особенностей но они как раз сочетаются с определенными взглядами на разработку приложений и например для меня полностью заменяют реакт

1) локальное состояние компонентов хранить чуть менее удобнее чем в реакте (так как нужно передавать айдишник, зато более явно так как сам хранишь в нужном месте) но мне редко когда это вообще нужно - я выяснил что намного удобнее разрабатывать приложение когда состояние всех компонентов хранится в одном объектом графе для всего приложения (а-ля стор). Но это не значит что нужно обязательно подключать какие-то стейт-менеджеры - можно просто хранить данные в обычных нативных жс-объектах а после их изменения достаточно вызвать функцию actualize() которая выполнит diff дом-дерева всего приложения

2) у реакта куча кода занимается поддержкой всего разнообразия css-свойств (которых больше 500) и всех html-тегов и атрибутов (>100), причем какое-то количество атрибутов реакт называет своими именами чем создает лишнюю путаницу и jsx перестает быть совместимым с html (не говоря уже про систему синтетических событий с которой постоянно вылезают какие-то нюансы и даже баги). Мне же не нужен ни jsx ни поддержка всех возможных сss-свойств и html-аттрибутов - я лучше в нужных атомарных компонентах сам напишу diff нужных мне css свойств и атрибутов а вместо jsx намного удобнее использовать обычное дерево вызываемых функций с передачей нужных пропсов
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Богдан
я раньше тоже занимался написанием собственной версии реакта и обычно получалось больше 100 строчек кода. Но однажды понял что мне достаточно простого хелпера который просто делает дифф компонентов и теперь весь мой "фреймворк" умещается в 22 строчки кода
Кому интересно то вот пару демок:
https://codesandbox.io/s/hungry-star-0r2y8?file=/src/index.js
https://codesandbox.io/s/condescending-shockley-4nmnq?file=/src/index.js

Из-за размера в 22 строчки кода есть пару особенностей но они как раз сочетаются с определенными взглядами на разработку приложений и например для меня полностью заменяют реакт

1) локальное состояние компонентов хранить чуть менее удобнее чем в реакте (так как нужно передавать айдишник, зато более явно так как сам хранишь в нужном месте) но мне редко когда это вообще нужно - я выяснил что намного удобнее разрабатывать приложение когда состояние всех компонентов хранится в одном объектом графе для всего приложения (а-ля стор). Но это не значит что нужно обязательно подключать какие-то стейт-менеджеры - можно просто хранить данные в обычных нативных жс-объектах а после их изменения достаточно вызвать функцию actualize() которая выполнит diff дом-дерева всего приложения

2) у реакта куча кода занимается поддержкой всего разнообразия css-свойств (которых больше 500) и всех html-тегов и атрибутов (>100), причем какое-то количество атрибутов реакт называет своими именами чем создает лишнюю путаницу и jsx перестает быть совместимым с html (не говоря уже про систему синтетических событий с которой постоянно вылезают какие-то нюансы и даже баги). Мне же не нужен ни jsx ни поддержка всех возможных сss-свойств и html-аттрибутов - я лучше в нужных атомарных компонентах сам напишу diff нужных мне css свойств и атрибутов а вместо jsx намного удобнее использовать обычное дерево вызываемых функций с передачей нужных пропсов
только 200 строчек я имею ввиду именно моего кода) сам по себе перлит основа на lit-html (шаблонизатор на основе  template literals + <template> + нативного парсера браузера) и hyperactiv (реактивная либа на основе Proxy). Поэтому конечно весь "фреймворк" занимает уже 8.8Кб gz+min. При этом там есть почти все что нужно (транзишены еще не завез только). Разве что у него не компонентный подход. Хотя виджеты можно нестить при необходимости.
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
нам было важно удобство и минимум каких-то особенностей. чтобы можно было почитать про такие штуки как template literals на MDN чтобы научиться писать шаблоны, почитать доку по апи перлита и вперед
источник

AP

Alexander Ponomarev in Svelte [svelt]
Богдан
я раньше тоже занимался написанием собственной версии реакта и обычно получалось больше 100 строчек кода. Но однажды понял что мне достаточно простого хелпера который просто делает дифф компонентов и теперь весь мой "фреймворк" умещается в 22 строчки кода
Кому интересно то вот пару демок:
https://codesandbox.io/s/hungry-star-0r2y8?file=/src/index.js
https://codesandbox.io/s/condescending-shockley-4nmnq?file=/src/index.js

Из-за размера в 22 строчки кода есть пару особенностей но они как раз сочетаются с определенными взглядами на разработку приложений и например для меня полностью заменяют реакт

1) локальное состояние компонентов хранить чуть менее удобнее чем в реакте (так как нужно передавать айдишник, зато более явно так как сам хранишь в нужном месте) но мне редко когда это вообще нужно - я выяснил что намного удобнее разрабатывать приложение когда состояние всех компонентов хранится в одном объектом графе для всего приложения (а-ля стор). Но это не значит что нужно обязательно подключать какие-то стейт-менеджеры - можно просто хранить данные в обычных нативных жс-объектах а после их изменения достаточно вызвать функцию actualize() которая выполнит diff дом-дерева всего приложения

2) у реакта куча кода занимается поддержкой всего разнообразия css-свойств (которых больше 500) и всех html-тегов и атрибутов (>100), причем какое-то количество атрибутов реакт называет своими именами чем создает лишнюю путаницу и jsx перестает быть совместимым с html (не говоря уже про систему синтетических событий с которой постоянно вылезают какие-то нюансы и даже баги). Мне же не нужен ни jsx ни поддержка всех возможных сss-свойств и html-аттрибутов - я лучше в нужных атомарных компонентах сам напишу diff нужных мне css свойств и атрибутов а вместо jsx намного удобнее использовать обычное дерево вызываемых функций с передачей нужных пропсов
что-то мне не кажется что это нормально работает со statefull дом элементами типа инпутов =)
источник

AP

Alexander Ponomarev in Svelte [svelt]
Вся система синтетических эвентов сделана чтобы не дифать по 30раз пока эвент всплывает и эвент хендлеры меняют стейт, а потом уже приделали плюшки типа баблинг через порталы.

Ну и времена мобильных сафари где элемент не кликался пока конкретно на него эвент не повешан или не сделан cursor: pointer система синтетических эвентов нормально обрабатывала =)
источник