impulse
1.0.0
Crie sites modernos diretamente no seu navegador sem desistir do código.
impulse.dev | Discórdia
Feito por @krogovoy e @ivolchenskov
O impulso foi criado para trabalhar com sites do React no modo dev (significando, executando em sua localhost).
Ele permite que você edite sua interface do usuário no navegador enquanto altera automaticamente seu código precisamente da maneira que você faria isso manualmente. É como uma extensão do editor de código que vai além do editor de código.
? Veja demos em impulse.dev
Comparado com o código de escrever manualmente:
Idiomas:
Bibliotecas de renderização:
React Frameworks and Motores:
Estruturas CSS:
Navegadores:
(O Impulse depende da API de acesso ao sistema de arquivos, que só funciona bem nos navegadores baseados em cromo)
Integração do editor:
Existem três maneiras de tentar impulso.
Copie e cole o código abaixo no console do seu navegador.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )Maneira fácil de brincar com a ferramenta sem instalar nada, mas ela desaparecerá assim que você atualizar a página.
Configure de uma vez por todas para toda a equipe.
npm i -D @impulse.dev/runtime@latest Cole em qualquer arquivo que sempre seja importado. Normalmente, será o arquivo "principal" reagt, como _app.jsx em Next.js.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} Cole esta tag de script no final do <body>
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}IMPORTANTE: Verifique se você não está enviando impulso na sua produção de produção! Ele incasará o tamanho do seu pacote!
A maioria dos pacotes corta todo o código dentro de um if (process.env.NODE_ENV === 'development') { ... } , mas é recomendável fazer uma construção de produção e comparar o tamanho do pacote com o que era antes.
Uma vez instalado, o impulso está pronto para o trabalho. Abaixo estão algumas coisas que você pode querer configurar para o impulso funcionar melhor para você.
Se você estiver usando BRAVE, ative a API de acesso ao sistema de arquivos:
file system access apiO impulso só funciona se você executar seu ambiente de desenvolvimento no mesmo computador que você usa o navegador. O Impulse não funciona com ambientes remotos porque não pode editar arquivos em outros computadores.
Por razões de segurança, a API de acesso ao sistema de arquivos funciona apenas para localhost quando http: // é usado. Se você estiver usando um nome de host diferente, embora o ambiente seja local, você deve:
Insecure origins treated as secureImpulse edita seu código. Por padrão, ele tenta o melhor para tornar essas alterações o mais mínimo possível.
No entanto, ele realmente não sabe como formatar seu código.
Se você deseja que ele use mais bonito após cada alteração de código (recomendado), passe sua configuração para 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')
+ }))
} Se você estendeu o tema padrão em Tailwind, passe seu tailwind.config.js para 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'),
+ }))
}
O que você pode fazer:
<div></div>Requisitos:
Clone o repo:
git clone [email protected]:impulse-oss/impulse.git && cd impulseInstale dependências:
npm installExecute o servidor dev:
npm run devAberto http: // localhost: 3005/. Este é um playground para desenvolver e testar o aplicativo.
