impulse
1.0.0
Créez des sites Web modernes dans votre navigateur sans abandonner le code.
impulse.dev | Discorde
Fabriqué par @krogovoy et @ivolchenskov
Impulse a été créée pour travailler avec des sites Web React en mode Dev (ce qui signifie, exécutant votre Host local).
Il vous permet de modifier votre interface utilisateur dans le navigateur tout en modifiant automatiquement votre code précisément comme vous le feriez manuellement. C'est comme une extension de l'éditeur de code qui va au-delà de l'éditeur de code.
? Voir démos sur impulse.dev
Par rapport à l'écriture de code manuellement:
Langues:
Bibliothèques de rendu:
REACT Cadreworks and Bundlers:
Cadres CSS:
BROWNSEMENTS:
(Impulse repose sur l'API d'accès au système de fichiers qui ne fonctionne bien que dans les navigateurs basés sur le chrome)
Intégration de l'éditeur:
Il y a trois façons d'essayer l'impulsion.
Copiez et collez le code ci-dessous dans la console de votre navigateur.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )Moyen facile de jouer avec l'outil sans rien installer, mais il disparaîtra une fois que vous actualiseriez la page.
Configuration une fois pour toutes pour toute l'équipe.
npm i -D @impulse.dev/runtime@latest Collez dans n'importe quel fichier qui est toujours importé. Habituellement, ce sera le fichier de réact "principal", tel que _app.jsx dans next.js.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} Collez cette balise de script à la fin de <body>
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}IMPORTANT: Assurez-vous que vous n'êtes pas entièrement impulsif dans votre construction de production! Il gonflera la taille de votre bundle!
La plupart des bundlers découpent tout le code à l'intérieur d'un if (process.env.NODE_ENV === 'development') { ... } , mais il est recommandé de faire une construction de production et de comparer la taille du bundle à ce qu'elle était auparavant.
Une fois installé, l'impulsion est prête pour le travail. Vous trouverez ci-dessous certaines choses que vous voudrez peut-être mettre en place pour que l'impulsion fonctionne le mieux pour vous.
Si vous utilisez Brave, activez l'API d'accès au système de fichiers:
file system access apiImpulse ne fonctionne que si vous exécutez votre environnement de développement sur le même ordinateur que vous utilisez le navigateur. Impulse ne fonctionne pas avec des environnements distants car il ne peut pas modifier les fichiers sur d'autres ordinateurs.
Pour des raisons de sécurité, l'API d'accès au système de fichiers ne fonctionne que pour localhost lorsque http: // est utilisé. Si vous utilisez un nom d'hôte différent même si l'environnement est local, vous devez:
Insecure origins treated as secureImpulse modifie votre code. Par défaut, il fait de son mieux pour rendre ces changements aussi minimes que possible.
Cependant, il ne sait pas vraiment comment formater votre code.
Si vous voulez qu'il utilise plus jolie après chaque changement de code (recommandé), passez votre configuration pour 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 vous avez étendu le thème standard dans Tailwind, passez votre tailwind.config.js pour 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'),
+ }))
}
Ce que vous pouvez faire:
<div></div>Exigences:
Cloner le repo:
git clone [email protected]:impulse-oss/impulse.git && cd impulseInstallez les dépendances:
npm installExécutez le serveur de développement:
npm run devOuvrir http: // localhost: 3005 /. Il s'agit d'un terrain de jeu pour développer et tester l'application.
