You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Register a custom Blade directive for your JavaScript file or files, typically in a service provider `AppServiceProvider`:
21
27
22
28
```php
23
-
class AppServiceProvider extends ServiceProvider {
24
-
public function boot(): void {
29
+
class AppServiceProvider extends ServiceProvider
30
+
{
31
+
public function boot(): void
32
+
{
25
33
BladeInlineScripts::takeFiles(
26
34
resource_path('js/your-first-script.js'),
27
35
resource_path('js/your-second-script.js'),
@@ -44,95 +52,121 @@ Use the Blade directive in your template to inline the scripts:
44
52
...
45
53
```
46
54
47
-
## What are Inline Scripts?
55
+
###What are Inline Scripts?
48
56
49
57
Inline scripts are JavaScript code blocks embedded directly into HTML documents. Traditionally, developers manually write these scripts as strings in the `<head>` section or at the end of the `<body>` section:
This package makes it much more convenient by allowing you to keep inline scripts in separate JavaScript files, which enables:
61
71
62
-
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see the example section below)_
72
+
-**Complex script processing** using dedicated PHP classes _(see example below)_
73
+
-**Variable passing** from PHP to JavaScript _(see example below)_
74
+
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see example below)_
63
75
-**Better code organization** and maintainability
64
-
-**IDE support** with syntax highlighting and error detection
65
-
-**Variable passing** from PHP to JavaScript
76
+
-**IDE support** with syntax highlighting and error detection in dedicated JS files
66
77
67
-
### Example Usage with Blade
78
+
#Explanation Through Example: Theme switch script
68
79
69
-
Instead of writing JavaScript directly in your Blade template:
80
+
Modern websites often provide users with the ability to switch between light and dark themes. In such cases, you might want to remember the user's choice using `localStorage` and apply the selected theme on page load. To avoid **FOUC** (Flash of Unstyled Content), you can use _inline script_ to set the theme before the page fully loads.
70
81
71
-
```blade
72
-
<!-- Old way -->
73
-
<script>
74
-
const userId = {{ auth()->id() }};
75
-
const theme = '{{ $theme }}';
76
-
// ... more JavaScript code
77
-
</script>
82
+
Step 1: Publish the built-in theme switch scripts:
['__DARK__' => 'dark', '__LIGHT__' => 'light', '__TOGGLE_KEY__' => 'd'], // variables to replace in the script
107
+
]
108
+
)->registerAs('themeSwitchScripts');
109
+
}
110
+
}
85
111
```
86
112
87
-
## Usage Example: Theme Switch Scripts
113
+
Step 3: Use the Blade directive in your template:
88
114
89
-
The package includes example scripts for theme switching functionality (dark/light theme) with user preference persistence in localStorage, available under the "theme-switch-2-states-all" tag.
115
+
```blade
116
+
<html>
117
+
<head>
118
+
...
119
+
@themeSwitchScripts
120
+
</head>
121
+
<body>
122
+
...
123
+
```
90
124
91
-
### Publishing Theme Switch Scripts
125
+
Now hit the `d` key to toggle between light and dark themes, and your choice will be remembered on subsequent visits.
92
126
93
-
To use the included theme switch scripts, publish them:
You can create a custom PHP class to process or modify your JavaScript code before inlining it. For example, you might want to minify the script or add some dynamic content.
98
130
99
-
### Adding as JavaScript Files
131
+
Create a custom PHP processor class implementing the `RenderableScript` or `ScriptWithPlaceholders` interface and register it using the `BladeInlineScripts::take()` method.
100
132
101
-
After publishing, you can include the scripts in your Blade templates:
133
+
We have a built-in processor for the theme switch scripts as well. To use it, follow these steps:
102
134
103
-
```blade
104
-
@inlineScript('theme-switch-two-states')
135
+
Step 1: Publish the built-in theme switch scripts with the PHP processor:
That will copy the scripts to `resources/js/theme-switch-two-states/[theme-init.js, theme-switch.js]` and the processor class to `app/Blade/ThemeSwitchTwoStates/[ThemeInitScript.php, ThemeSwitchScript]`.
108
142
109
-
You can also use the theme switch functionality through PHP classes:
143
+
Step 2: Register the scripts in your `AppServiceProvider`:
110
144
111
145
```php
112
-
use LaravelInlineScripts\ThemeSwitch\ThemeSwitchScript;
146
+
class AppServiceProvider extends ServiceProvider
147
+
{
148
+
public function boot(): void
149
+
{
150
+
BladeInlineScripts::take(
151
+
new ThemeInitScript(),
152
+
new ThemeSwitchScript('d')
153
+
)->registerAs('themeSwitchScripts');
154
+
}
155
+
}
156
+
```
113
157
114
-
// In your controller
115
-
$themeSwitchScript = new ThemeSwitchScript([
116
-
'defaultTheme' => 'light',
117
-
'storageKey' => 'user-theme-preference'
118
-
]);
158
+
Step 3: Use the Blade directive in your template as previously shown.
0 commit comments