impulse
1.0.0
Cree sitios web modernos directamente en su navegador sin renunciar al código.
impulse.dev | Discordia
Hecho por @krogovoy y @ivolchenskov
Impulse fue creado para trabajar con sitios web React en modo Dev (es decir, ejecutándose en su localhost).
Le permite editar su interfaz de usuario directamente en el navegador mientras cambia automáticamente su código con precisión de la forma en que lo haría manualmente. Es como una extensión de editor de código que va más allá del editor de código.
? Ver demostraciones en impulse.dev
En comparación con la escritura de código manualmente:
Idiomas:
Renderización de bibliotecas:
React Frameworks and Bundlers:
Marcos CSS:
Navegadores:
(Impulse se basa en la API de acceso al sistema de archivos que solo funciona bien en los navegadores basados en el cromo)
Integración del editor:
Hay tres formas de probar el impulso.
Copie y pegue el código a continuación en la consola de su navegador.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )Manera fácil de jugar con la herramienta sin instalar nada, pero desaparecerá una vez que actualice la página.
Configurar de una vez por todas para todo el equipo.
npm i -D @impulse.dev/runtime@latest Pegue en cualquier archivo que siempre se importe. Por lo general, será el archivo react "principal", como _app.jsx en next.js.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} Pegue esta etiqueta de script al final de <body>
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}IMPORTANTE: ¡Asegúrese de que no esté enviando impulso en su construcción de producción! ¡Blojará el tamaño de su paquete!
La mayoría de los Bundlers cortan todo el código dentro de un if (process.env.NODE_ENV === 'development') { ... } , pero se recomienda hacer una construcción de producción y comparar el tamaño del paquete con lo que era antes.
Una vez instalado, el impulso está listo para el trabajo. A continuación se presentan algunas cosas que puede configurar para que Impulse funcione mejor para usted.
Si está utilizando BRAVE, habilite la API de acceso al sistema de archivos:
file system access apiEl impulso solo funciona si ejecuta su entorno de desarrollo en la misma computadora que usa el navegador. Impulse no funciona con entornos remotos porque no puede editar archivos en otras computadoras.
Por razones de seguridad, la API de acceso al sistema de archivos solo funciona para localhost cuando se usa http: //. Si está utilizando un nombre de host diferente aunque el entorno sea local, debe:
Insecure origins treated as secureImpulse edita su código. Por defecto, hace todo lo posible para hacer que esos cambios sean lo más mínimos posible.
Sin embargo, realmente no sabe cómo formatear su código.
Si desea que use Prettier después de cada cambio de código (recomendado), pase su configuración 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')
+ }))
} Si ha extendido el tema estándar en Tailwind, pase su 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'),
+ }))
}
Lo que puedes hacer:
<div></div>Requisitos:
Clon el repositorio:
git clone [email protected]:impulse-oss/impulse.git && cd impulseInstalar dependencias:
npm installEjecute el servidor Dev:
npm run devAbra http: // localhost: 3005/. Este es un patio de recreo para desarrollar y probar la aplicación.
