torus
Minor rendering bug fixes
torus-dom )Torus-это структура пользовательского интерфейса модели, управляемая событиями для Интернета, сфокусированная на крошечной, эффективной и свободной от зависимостей .
Вы можете найти? Полная документация для Torus здесь, на страницах GitHub .
Torus также имеет аннотированную, простую в чтении версию всей (довольно краткой) кодовой базы, также на страницах GitHub. Проверьте это, если вы хотите узнать больше о том, как разработаны фреймворки, и как работает виртуальный DOM и шаблон!
Вот как выглядит Торус в действии! Это полностью функциональное приложение для счетчика, не требуется шаги компиляции или объединения.
Отбросьте этот сценарий в свой HTML
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >... и загрузите этот сценарий.
// every view extends Component or StyledComponent
class App extends Torus . StyledComponent {
init ( ) {
// initialize our local state
this . count = 0 ;
}
styles ( ) {
// we can define dynamically and efficiently injected
// styles for our component with styles(), like this.
// These styles are also automatically scoped to the
// component, and we can use the full, nested SCSS syntax.
return css `
font-family: system-ui, sans-serif;
h1 {
text-align: center;
}
button {
padding: 4px 8px;
&:hover {
opacity: .8;
}
}
` ;
}
compose ( ) {
// We define the structure of our component in compose(),
// using a JSX- and lit-html-like syntax as a template string.
return jdom `<main>
<h1>Hi! You clicked ${ this . count } times.</h1>
<button onclick=" ${ ( ) => {
this . count ++ ;
this . render ( ) ;
} } ">Count up!</button>
</main>` ;
}
}
// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ; Torus не имеет производственных зависимостей, не требует шага сборки, чтобы воспользоваться всеми его функциями, и весит при размере до 5 КБ, включая шаблон двигателя, визуализатор, компонент и систему событий и обертку CSS-In-JS. Это делает его простым внедрением и отправкой, для чего угодно, от рендеринга одного компонента на странице до создания полномасштабных приложений.
Торус не предназначен для того, чтобы быть самой быстрой виртуальной библиотекой DOM (есть большие альтернативы, такие как inferno ), но производительность и отзывчивость являются одними из основных целей проекта. Оставаясь крошечным, Торус старается быть максимально быстрым и отзывчивым, особенно при рендеринге. В сочетании с небольшим размером пучка это делает Torus отличным для создания веб -приложений для любого, на любом устройстве.
Архитектура Торуса инкапсулирует всю логику рендеринга и обновления в самой компоненте, поэтому безопасно принимать Component#node и рассматривать ее как простой указатель на элемент корневого DOM компонента. Вы можете перемещать его по странице, взять его в документ и выходить из документа, встраивать его в компоненты React или Vue или даже веб -компоненты, а также используйте его в любом месте, где можно использовать традиционный элемент DOM. Это позволяет включать в себя компоненты и приложения Torus в различные архитектуры.
В сочетании с небольшим размером Torus это делает разумным отправлять Torus только с одним или несколькими компонентами для более крупного проекта, который включает в себя элементы из других рамок, если вы не хотите или не можете отправить все приложение Torus.
Торус не касается интернационализации, но, как разработчики, мы можем использовать API, доступные для нас, сделать возможной интернационализацию в наших компонентах Torus. Торус раскрывает большую часть процесса рендеринга и виртуального DOM для вас, разработчика и, что важно, позволяет нам создавать preprocessor , который может принять JDOM, и изменить его до того, как он достигнет рендеринга, поэтому мы можем внести изменения в DOM, который визуализатор видит с помощью нашего собственного кода. Это делает Torus очень расширяемым и идеальным для i18n. Фактически, компонент препроцессорного API - это то, что делает возможным компоненты Styled() Torus. ( Styled() добавляет новое имя класса в JDOM до того, как компонент будет отображаться.)
Например, мы могли бы создать I18nComponent , который может выступать в качестве базового класса компонентов для интернационализированного проекта, подобного этому.
class I18nComponent extends Component {
// The default preprocess method just returns the jdom as-is. We can override it
// to modify the JDOM given by component's `#compose()` method before it reaches the
// virtual DOM renderer.
preprocess ( jdom , _data ) {
// Here, we might recursively traverse the JDOM tree of children
// and call some custom `translate()` function on each string child
// and any displayed props like `placeholder` and `title`.
// As a trivial example, if we only cared about text nodes on the page,
// we could write...
const translate = jdom => {
if ( typeof jdom === 'string' ) {
// translate text nodes
return yourImplementationOfTranslateString ( jdom ) ;
} else if ( Array . isArray ( jdom . children ) ) {
// it's an object-form JDOM, so recursively translate children
jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
return jdom ;
}
return jdom ;
}
// In production, we'd also want to translate some user-visible properties,
// so we may also detect and translate attrs like `title` and `placeholder`.
return translate ( jdom ) ;
}
} Я (Linus) использую Torus для большинства моих личных проектов, когда мне нужна библиотека пользовательского интерфейса на стороне клиента. Некоторые из этих проектов включают в себя:
API Torus представляет собой смесь декларативных интерфейсов для определения пользовательских интерфейсов и представлений, а также императивных моделей для управления государством, которые, как я лично считаю, является лучшим балансом двух стилей при создании больших приложений. В качестве общей практики компоненты должны стараться оставаться декларативными и идентифицированными, и взаимодействовать с моделями данных / состоянием с помощью общественных, стабильных императивных API, выявленных моделями данных.
Конструкция Торуса вдохновлена архитектурой, управляемой компонентами React, и заимствует общие концепции из экосистемы React, например, идея разнообразия в виртуальном DOM, перед рендерингом, состав с компонентами более высокого порядка, а также смешивание CSS и разметке с JavaScript, чтобы разделить проблемы для каждого компонента в один класс. Но Торус опирается на эти идеи, предоставляя более минимальные, менее самоуверенные API нижнего уровня и выбирая современную модель данных, а не слой представления/контроллера, который стремится быть чисто функциональным.
Torus также заимствует из основания в разработке моделей данных, для записей и хранилищ, чтобы иметь дизайн, управляемый событиями, за тем, как обновления данных связаны с представлениями и другими моделями.
Наконец, тег шаблона jdom от Torus был вдохновлен HTM и LIT-HTML, оба теги шаблонов для обработки разметки HTML в виртуальный DOM.
Инструменты для разработки фронта были в тенденции к тому, чтобы делать все больше и больше во время сборки / компиляции, делая возможными более богатыми синтаксисами и функциями, такими как принятие функций JavaScript предложения и JSX. SVELTE-это замечательный пример того, как инструмент времени компиляции может создать категорически разницу в создании пользовательских интерфейсов.
Торус не пытается быть еще одним инструментом времени сборки. Одна из целей Торуса состоит в том, чтобы быть максимально полезным, насколько это возможно во время выполнения , при этом жертвуя как можно меньше производительности и накладных расходов, поэтому мы можем исключить шаг компиляции в разработке. В результате Torus-это золотой стандарт опыта прототипирования идей пользовательского интерфейса: просто бросьте тег <script> в документ и начните писать. Недостатком этой сознательной приоритеты времени выполнения во время компиляции является то, что некоторые функции, которые не являются частью синтаксиса JavaScript, просто невозможны без шага компиляции. Примечательно, что синтаксис Decorator и синтаксис JSX невозможны, но было бы полезно, если бы был шаг компиляции в создании приложений Torus. Мы могли бы написать шаблоны JDom в JSX, которые синтаксически очень похожи, и обернуть методы обновления состояния и слушателей событий в декораторах @render и @bind , а не называть this.render() и .bind(this) в каждом случае.
Добавление поддержки компиляции в настоящее время не находится на дорожной карте, но это должно быть просто, так как Torus является подмножеством современного JavaScript. Мы можем вернуться к решению этих предельных преимуществ компиляции в будущем, особенно если декораторы не показывают никакого прогресса в треке предложения.
Аналогичные декларативные рамки пользовательского интерфейса, такие как React и Preact, представили понятие фрагментов, которое представляет собой синтаксис сахар для отображения массива (виртуальных) узлов DOM из функции. Это связано с тем, что, несмотря на то, что компонент возвращает массив узлов, не имеет смысла самостоятельно, часто полезно иметь внутренние функции, которые возвращают части компонентов и представлений в качестве узлов без элемента обертки. Торус национально поддерживает массивное представление списка узлов - просто оберните объекты JDom в массив! Хотя, в отличие от React, компонент не может отображать более одного узла, большинство вариантов использования фрагментов покрываются просто возможностью передать представление списка узлов в массиве внутри компонента, и это интуитивно поддерживается из-за коробки в торе.
Я играл с идеей изменения тега шаблона jdom , чтобы иметь возможность превратить шаблонные представления фрагментов, таких как <>...</> в массивы узлов. jdom также способен просто анализировать смежные элементы верхнего уровня в шаблоне и вернуть их за один массив. Тем не менее, я решил не отправлять эти функции на данный момент, потому что я считаю, что эти варианты использования адекватно покрываются возможностью возвращения .children шаблонов JDOM, даже возможно, одну, завернутую внутри <>...</> фрагментных маркеров для читабельности или просто возврата массива объектов JDOM. Я ценю явность дополнительного шага, связанного с возвращением нетрадиционного массива от операции рендеринга, и я думаю, что случайная стоимость возврата массивов в качестве промежуточных представлений частей представления не стоит дополнительной стоимости функции.
Torus использует символы, карты и наборы, поэтому он совместим с последними версиями всех основных браузеров, кроме Internet Explorer 11. На более старых браузерах, которые не поддерживают операторы, например, вам, возможно, потребуются перенести библиотеку в ES5, используя такой инструмент, как Babel.
Вы можете установить Torus из NPM как torus-dom . Торус все еще считается бета -версией , а не в выпуске 1.0. Я считаю, что API сейчас стабилен, и большинство основных ошибок были раздавлены, но не гарантировали до 1,0.
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;В качестве альтернативы, вы также можете просто импортировать Torus с:
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Torus экспортирует все свои глобалы по умолчанию в window.Torus , поэтому они доступны в качестве глобальных имен для ваших сценариев. Это не рекомендуется в производственных приложениях, но отлично подходит для экспериментов.
Если вы найдете ошибки, пожалуйста, откройте проблему или поместите запрос на притяжение с тестированием, чтобы воссоздать ошибку против того, что вы ожидали. Если у вас есть запросы на функции, я не обязательно уважаю это, потому что Торус строится в основном в соответствии с моим личным рабочим процессом и предпочтениями архитектуры. Но я открыт, чтобы услышать ваше мнение! Так что не стесняйтесь открывать проблему, ожидая, что я не могу принять решение добавить эту функцию в Torus (особенно, если она раздут размер пакета или потребует транспилера.)
Вы можете использовать как NPM, так и пряжу для разработки тора, но сценарии NPM используют пряжу, а пряжа официально поддерживается, поскольку это то, что я использую для разработки и создания Torus.
Чтобы построить торус из источника, запустите
yarn build Это будет работать ./src/torus.js через пользовательский инструмент, сначала удаляя любые вызовы функций отладки и запустив этот результат через Webpack, как через режимы development , так и через режимы production . Оба выхода, а также ванильная версия Torus без обработки WebPack сохраняются на ./dist/ . Запуск yarn clean будет удалять любые такие артефакты сборки, а также любые отчеты о покрытии.
У Torus есть уникальная система для генерации документации из комментариев кода, которые начинаются с //> . Чтобы генерировать документы с комментариями, запустите
yarn docs Файлы DOCS будут генерироваться по адресу ./docs/ и доступны для просмотра в веб -браузере. Проверьте страницу Github для этого проекта, чтобы получить пример того, что генерирует этот сценарий.
Чтобы запустить модульные тесты Torus и генерировать отчет о покрытии для coverage/ , запустить
yarn testЭто запустит базовый набор тестов на разработке сборки Torus. Более полные интеграционные тесты с использованием полных пользовательских интерфейсов, таких как приложения Todo, находятся на дорожной карте.
Мы также можем провести тесты на производственной сборке, с:
yarn test:prod Это не будет генерировать отчет о покрытии , но будет запускать тесты против минимизированной производственной сборки в dist/torus.min.js чтобы проверить никаких ошибок компиляции.
Torus Lints с Eslint, используя пользовательскую конфигурацию. Чтобы запустить Linter, запустить
yarn lintИли рассмотрите возможность использования плагина редактора для Eslint.
