impulse
1.0.0
Создайте современные веб -сайты прямо в вашем браузере, не отдаваясь на код.
Impulse.dev | Раздор
Сделано @krogovoy и @ivolchenskov
Импульс был создан для работы с веб -сайтами React в режиме DEV (это означает, что работает на вашем локальном хосте).
Это позволяет вам редактировать свой пользовательский интерфейс прямо в браузере, автоматически изменяя ваш код точно так же, как вы делаете его вручную. Это как расширение редактора кода, которое выходит за рамки редактора кода.
? Смотрите демо в Impulse.dev
По сравнению с написанием кода вручную:
Языки:
Рендеринг библиотеки:
Реагировать рамки и пучки:
CSS Frameworks:
Браузеры:
(Impulse зависит от API доступа к файловой системе, который хорошо работает только в браузерах на основе хрома)
Интеграция редактора:
Есть три способа попробовать импульс.
Скопируйте и вставьте код ниже в консоли вашего браузера.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )Легкий способ играть с инструментом, не устанавливая ничего, но он исчезнет, как только вы обновите страницу.
Настройка раз и навсегда для всей команды.
npm i -D @impulse.dev/runtime@latest Вставьте в любой файл, который всегда импортируется. Обычно это будет «основной» файл React, такой как _app.jsx в next.js.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} Вставьте этот тег сценария в конце <body>
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}Важно: убедитесь, что вы не отправляете импульс в своей производственной сборке! Это раздувает размер вашего пакета!
Большинство бундлеров вырезают весь код внутри if (process.env.NODE_ENV === 'development') { ... } , но рекомендуется сделать производственную сборку и сравнить размер пакета с тем, что было раньше.
После установки импульс готов к работе. Ниже приведены некоторые вещи, которые вы можете настроить для импульса, чтобы работать лучше всего для вас.
Если вы используете смелые, включите API доступа к файловой системе:
file system access apiImpulse работает только в том случае, если вы запускаете свою среду разработки на том же компьютере, что и в браузере. Impulse не работает с удаленными средами, потому что он не может редактировать файлы на других компьютерах.
По соображениям безопасности API доступа к файловой системе работает только для localhost , когда используется http: //. Если вы используете другое имя хоста, даже если среда локальная, вы должны:
Insecure origins treated as secureИмпульс редактирует ваш код. По умолчанию он старается сделать эти изменения максимально минимальными.
Тем не менее, на самом деле это не знает, как отформатировать ваш код.
Если вы хотите, чтобы он использовал краситель после каждого изменения кода (рекомендуется), передайте свою конфигурацию, чтобы run() :
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ prettierConfig: require('./path_to/.prettierrc.js')
+ }))
} Если вы расширили стандартную тему в Tainwind, пропустите свой tailwind.config.js , чтобы run() :
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ tailwindConfig: require('./path_to/tailwind.config.js'),
+ }))
}
Что вы можете сделать:
<div></div>Требования:
Клонировать репо:
git clone [email protected]:impulse-oss/impulse.git && cd impulseУстановить зависимости:
npm installЗапустите Dev Server:
npm run devОткройте http: // localhost: 3005/. Это игровая площадка для разработки и тестирования приложения.
