Запустите npx co-commit чтобы начать. — Установка не требуется.
? Справочная информация
GitHub позволяет вам соавтор коммитировать, добавив соавтором: name к сообщению о фиксации.
? Дополнительно (необязательно)
Чтобы ускорить рабочий процесс, вы можете предварительно установить совместное использование с помощью npm i -g co-commit .
Вы также можете использовать git flags с co-commit: например, git commit --all становится npx co-commit --all . Кроме того, вы можете пропустить подсказки с использованием флагов: например: -m «ваше сообщение о совершении» или -co «mariiapunda, juliettepretot» .
В 22:52 по воскресеньям UTC несколько сервисов на GitHub.com пострадали от сетевого раздела и последующего сбоя базы данных, в результате чего на нашем веб-сайте была представлена несовместимая информация. Из множества предосторожности мы предприняли шаги для обеспечения целостности ваших данных, включая приостановку событий в сети и других внутренних систем обработки. Мы знаем, насколько важны наши…
Omi: веб-инфраструктура следующего поколения в JavaScript 4kb
Объединить JSX, веб-компоненты, прокси, магазин, обновление пути вместе
Почему Оми?
Крошечный размер. ( 4kb gzipped)
Поддерживает TypeScript.
Реактивная привязка данных
На основе Shadow DOM
Легко отлаживается через расширение Omi DevTools [Install from Chrome WebStore]
Соблюдение тенденции браузера и дизайна API.
Объединить JSX и веб-компоненты в одну структуру.
Веб-компоненты также могут быть ориентированы на данные, UI = fn (данные) .
JSX — лучший опыт разработки (интеллектуальное завершение кода и подсказка). Выражение пользовательского интерфейса с наименьшим грамматическим шумом.
Оригинальная система Path Updating . Автоматическое автоматическое обновление потребление низкой мощности высокая степень свободы, отличная производительность, легкая интеграция requestIdleCallback
Попробуйте this.update метод при использовании системы хранения ! Он будет автоматически обновлять пользовательский интерфейс при изменении данных.
Посмотрите на Facebook React vs Web Components, Omi сочетает в себе свои преимущества и дает разработчикам свободу выбора 19459017 .
Shadow DOM объединяется с Virtual DOM Omi использует как виртуальную DOM, так и реальную DOM DOW, чтобы сделать просмотр обновлений более точным и быстрым.
В системе Store 99,9% проектов не требуют путешествий во времени, и не только Redux может путешествовать, пожалуйста, не придумывайте Redux, система магазинов Omi может удовлетворить все проекты
Лучшее решение с CSS — это Shadow DOM сообщество, разбивающее фреймворки и библиотеки для Scoped CSS (с использованием стилей записи JS или JSON, таких как Radium, jsxstyle, стиль, привязка к webpack с использованием сгенерированного уникального className filename-classname-hash такого как CSS-модули, Vue), являются хакерскими технологиями; и Shadow DOM Style — идеальное решение .
Сравнить TodoApp от Omi и React, Omi и React, рендеринг структуры DOM:
Оми
React
Добавить Оми в одну минуту
Эта страница демонстрирует использование Omi без инструмента для сборки .
< HTML >
< глава >
meta charset = " UTF-8 " />
< название > Добавить Оми в одну минуту </ название >
</ глава >
< тело >
src = " https://unpkg.com/omi " > </ ] сценарий >
< сценарий >
const { WeElement h render определяют } = Оми класс LikeButton распространяется WeElement { установить () { = {понравилось : false } } () {если ( это . данные . понравилось ) { return ' Вам понравилось. ' } возвращение h ( { onClick : () => { это . данные . понравилось = true это . обновление () } }, ') } } определяют ( » аналогичная кнопка 'LikeButton) h ( » аналогичная кнопка ), ' тела ) </ сценарий >
</ тела >
</ HTML >
Вы также можете использовать тег как кнопка непосредственно в HTML:
< тело >
<как-кнопки > </ как-кнопки >
</ тела >
Начало работы
Установите
$ npm i omi-cli-g # установить cli
$ omi init your_project_name # init project, вы также можете выполнить команду 'omi init' в пустой папке
$ cd your_project_name # пожалуйста, проигнорируйте эту команду, если вы выполнили 'omi init' в пустой папке
$ npm start # разработать
$ npm run build # выпуск
Описание в каталоге:
├─ config
├─ общественность
├─ скрипты
├─ src
│ ├─ активы
│ ├─ elements // Хранить все пользовательские элементы
│ ├─ store // Хранить все это хранилище страниц
│ ├─ admin.js // Запись js компилятора, будет создана для admin.html
│ └─ index.js // Запись js компилятора, будет создана для index.html
Автосозданные строительные леса CLI основаны на одностраничном приложении create-response-app, которое будет преобразовано в многостраничное, с проблемами конфигурации, чтобы увидеть руководство пользователя для создания-реагирования-приложения
Hello Element
Определите пользовательский элемент, расширив WeElement базовый класс и назовите его с помощью @tag decorator:
Если вы не хотите писать CSS в JS, вы можете использовать to-string-loader,
Например, следующая конфигурация:
{
: / [ | / ] _ [ ] S ] * . CSS $ / ,
использование : [
в строке-загрузчик ,
CSS-погрузчик
]
}
Если ваш файл CSS начинается с « _ », CSS будет использовать для-string-loader ., Например:
import { tag WeElement render } из ' оми // typeof cssStr является строкой импорт cssStr из ' ./_ index.css '
@ Тег ( мое-приложение )
класс MyApp распространяется WeElement {
css () {
возвращение cssStr
}
... ... ...
TodoApp
Вот относительно полный пример TodoApp:
import { tag WeElement render } из оми
@ Тег ( TODO-лист )
класс TodoList extends WeElement {
render ( реквизит ) {
возвращение (
< уль >
{19459049] реквизит . предметы . карта ( пункт => < li key = { Пункт . id } > { Пункт . текст } < / Li >
))}
< / уль >
);
}
}
@ Тег ( TODO-приложение )
класс TodoApp extends WeElement {
static get данные () {
{пункты : []текст : '}
}
render () {
возвращение (
< DIV > < Н3 > TODO < / Н3 > < todo - перечислил элементы = {. данные . пункты } / > < форма onSubmit = { этот . рукояткаSubmit } > < вход
ID = " новый список задачи "
OnChange = { это . handleChange }
значение = { это . Данные . текст }
/ > < Кнопка > . длина + 1 }
< / Кнопка > < / форма > < / DIV >
);
}
handleChange = ( e ) => {
текст = e . Цель . значение
}
handleSubmit = ( e ) => {
е preventDefault ().
если это . данные . текст . обрезка (). длина ) {
возвращение ;
}
это . Данные . элементов . толчок ({
текст : это . данные . текст ,
id : Дата . сейчас ()
})
данные . текст = ;
это . Обновление ()
}
}
< todo - приложение / > ' тело )
Магазин
Попробуйте this.update метод при использовании системы магазинов! При изменении данных он будет автоматически обновлять пользовательский интерфейс. Мощная архитектура Store отличается высокой производительностью, поскольку все данные монтируются в хранилище, за исключением компонентов, которые полагаются на опоры для определения состояния компонента.
экспорт по умолчанию {
данные : {
пункты : [],
текст : '' ,
firstName : ' dnt ' ,
lastName : ' zhang ' ,
fullName : функция () {
возвращение это . firstName + это . lastName
},
: abc ' // Изменить, он обновит все элементы без изменения компонентов и страницы, объявляющих зависимость данных.
ccc : : : 1 } // Изменить это будет обновлять все элементы без изменения компонентов и объявления страниц. зависимость.
},
globalPropTest '' ccc.ddd '],
добавить : function () {
если это . данные . текст . обрезка (). длина ) {
возвращение ;
}
это . Данные . элементов . толчок ({
текст : это . данные . текст ,
id : Дата . сейчас ()
})
данные . текст =
}
// Значение по умолчанию - false, значение true будет обновлять все экземпляры при изменении данных. // updateAll: true
}
Пользовательский элемент требует объявления зависимых данных, так что Omi сохраняет вычислительный путь зависимости на основе данных, объявленных на пользовательском компоненте, и обновляет их локально по мере необходимости. Например:
класс TodoApp распространяется WeElement {
// Если вы используете хранилище, данные используются только для объявления зависимостей. static get данные () {
{пункты : []текст : '}
}
// ... handleChange = ( e ) => {
текст = e . цель . значение
}
handleSubmit = ( e ) => {
е . preventDefault ()
это . магазин . добавить ()
}
}
Логика данных инкапсулирована в методе определения хранилища (например, store.add ).
Взгляды — это только ответственные за передачу данных для хранения таких как вызов store.add или установка store.data.text сверху.
Вам нужно ввести магазин из корневого узла во время рендеринга, чтобы использовать этот магазин:
< todo - приложение / > тело 'магазин)
→ Сохранить исходный код
Резюме:
store.data используется для отображения всех атрибутов и значений по умолчанию (кроме компонентов представления, определенных реквизитами).
Данные компонента и страницы используются для перечисления атрибутов зависимого store.data (Omi будет записывать путь) и обновления по запросу.
Если на странице несколько простых компонентов, updateAll может быть установлено в true а компонентам и страницам не нужно декларировать данные, и они не обновляются по запросу
Путь, объявленный в globalData обновляет все страницы и компоненты, изменяя значение соответствующего пути, который может использоваться для отображения всех страниц или большинства путей общедоступных свойств
Жизненный цикл
Метод жизненного цикла
Когда его назовут
установите
перед тем, как компонент подключится к DOM
установлен
после того, как компонент подключается к DOM
удалить
до снятия с DOM
BeforeUpdate
до render ()
AfterUpdate
после render ()
Компонентная экосистема
Я считаю, что вы можете легко преобразовать элементы веб-компонентов в элементы omi.
Отладка
Используя Omi DevTools, вы можете просто отлаживать и управлять своим пользовательским интерфейсом без какой-либо конфигурации . Просто установите и отлаживайте.
Поскольку Omi использует веб-компоненты и Shadow-DOM, ему не нужно иметь другую панель элементов, такую как React или Vue. Он просто добавляет панель к боковой панели элементов и она настолько же эффективна, как и React и Vue DevTools.
Поддержка браузеров
Omi 4.0+ работает в последних двух версиях всех основных браузеров: Safari 10+, IE 11+ и вечнозеленых Chrome, Firefox и Edge.
Ссылки
Вклад
Вилка (https://github.com/Tencent/omi/fork)
Создайте свою ветку ( git checkout -b мое-срочное исправление )
Зафиксируйте свои изменения ( git commit -am «Исправлено что-то» )
Нажмите на ветку ( git push origin my-emergency-hotfix )
Omi: веб-инфраструктура следующего поколения в JavaScript 4kb
