Merge pull request #110 from hotwired-laravel/fix-install-command-js-imports

Ensure the install command properly configures the JS imports

Author: tonysm

src/Commands/TurboInstallCommand.php

@@ -41,24 +41,14 @@ private function publishJsFiles()
             File::copy(__DIR__ . '/../../stubs/resources/js/libs/turbo.js', resource_path('js/libs/turbo.js'));
             File::copy(__DIR__ . '/../../stubs/resources/js/elements/turbo-echo-stream-tag.js', resource_path('js/elements/turbo-echo-stream-tag.js'));
 
-            if ($this->option('alpine') || $this->option('jet')) {
+            if ($this->option('jet')) {
+                File::copy(__DIR__ . '/../../stubs/resources/js/libs/alpine-jet.js', resource_path('js/libs/alpine.js'));
+            } elseif ($this->option('alpine')) {
                 File::copy(__DIR__ . '/../../stubs/resources/js/libs/alpine.js', resource_path('js/libs/alpine.js'));
             }
 
-            $imports = $this->appJsImportLines();
-
-            File::put(
-                $appJsFile = resource_path('js/app.js'),
-                preg_replace(
-                    '/(.*[\'"](?:\.\/)?bootstrap[\'"]\)?;?)/',
-                    <<<JS
-                    \\1
-                    {$imports}
-                    JS,
-                    File::get($appJsFile),
-                ),
-            );
-
+            File::put(resource_path('js/app.js'), $this->appJsImportLines());
+            File::put(resource_path('js/libs/index.js'), $this->libsIndexJsImportLines());
 
             return self::SUCCESS;
         });
@@ -69,12 +59,26 @@ private function appJsImportLines()
         $prefix = $this->usingImportmaps() ? '' : './';
 
         $imports = [
+            "import '{$prefix}bootstrap';",
             "import '{$prefix}elements/turbo-echo-stream-tag';",
-            "import '{$prefix}libs/turbo';",
+            "import '{$prefix}libs';",
         ];
 
+        return implode("\n", $imports);
+    }
+
+    private function libsIndexJsImportLines()
+    {
+        $imports = [];
+
+        $imports[] = $this->usingImportmaps()
+            ? "import 'libs/turbo';"
+            : "import './turbo';";
+
         if ($this->option('alpine') || $this->option('jet')) {
-            $imports[] = "import '{$prefix}libs/alpine';";
+            $imports[] = $this->usingImportmaps()
+                ? "import 'libs/alpine';"
+                : "import './alpine';";
         }
 
         return implode("\n", $imports);

stubs/resources/js/libs/alpine-jet.js

@@ -0,0 +1,27 @@
+import Alpine from 'alpinejs';
+import focus from '@alpinejs/focus';
+
+window.Alpine = Alpine;
+
+Alpine.plugin(focus);
+
+Alpine.start();
+
+function initAlpineTurboPermanentFix() {
+    document.addEventListener('turbo:before-render', () => {
+        let permanents = document.querySelectorAll('[data-turbo-permanent]');
+        let undos = Array.from(permanents).map(el => {
+            el._x_ignore = true;
+            return () => {
+                delete el._x_ignore;
+            };
+        });
+
+        document.addEventListener('turbo:render', function handler() {
+            while(undos.length) undos.shift()();
+            document.removeEventListener('turbo:render', handler);
+        });
+    });
+}
+
+initAlpineTurboPermanentFix();

stubs/resources/js/libs/alpine.js

@@ -1,3 +1,9 @@
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
+Alpine.start();
+
 function initAlpineTurboPermanentFix() {
     document.addEventListener('turbo:before-render', () => {
         let permanents = document.querySelectorAll('[data-turbo-permanent]');
@@ -15,6 +21,4 @@ function initAlpineTurboPermanentFix() {
     });
 }
 
-if (window.Alpine !== undefined) {
-    initAlpineTurboPermanentFix();
-}
+initAlpineTurboPermanentFix();