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
Copy file name to clipboardExpand all lines: README.md
+19-11Lines changed: 19 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
A Laravel package that provides a simple way to wrap your JavaScript code stored in a file and inline it as custom Blade directive.
4
4
5
-
Allows:
5
+
Allows ✨:
6
6
- passing variables from PHP to JavaScript,
7
7
- process / modify the script in a dedicated PHP class.
8
8
@@ -23,7 +23,7 @@ Install the package via Composer:
23
23
composer require zmyslny/laravel-inline-scripts
24
24
```
25
25
26
-
Register a custom Blade directive for your JavaScript file or files, typically in a service provider`AppServiceProvider`:
26
+
Register a custom Blade directive for your JavaScript in your`AppServiceProvider`:
27
27
28
28
```php
29
29
class AppServiceProvider extends ServiceProvider
@@ -52,6 +52,8 @@ Use the Blade directive in your template to inline the scripts:
52
52
...
53
53
```
54
54
55
+
Done.
56
+
55
57
### What are Inline Scripts?
56
58
57
59
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:
@@ -71,15 +73,15 @@ This package makes it much more convenient by allowing you to keep inline script
71
73
72
74
-**Complex script processing** using dedicated PHP classes _(see example below)_
73
75
-**Variable passing** from PHP to JavaScript _(see example below)_
74
-
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see example below)_
76
+
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see extra section below)_
75
77
-**Better code organization** and maintainability
76
78
-**IDE support** with syntax highlighting and error detection in dedicated JS files
77
79
78
80
# Explanation Through Example: Theme switch script
79
81
80
82
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.
81
83
82
-
Step 1: Publish the built-in theme switch scripts:
84
+
**Step 1**: Publish the built-in theme switch scripts:
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]`.
143
+
That will copy the scripts to `resources/js/theme-switch-two-states/[theme-init.js, theme-switch.js]` and the processors classes to `app/Blade/ThemeSwitchTwoStates/[ThemeInitScript.php, ThemeSwitchScript]`.
142
144
143
-
Step 2: Register the scripts in your `AppServiceProvider`:
145
+
**Step 2**: Register the scripts in your `AppServiceProvider`:
144
146
145
147
```php
146
148
class AppServiceProvider extends ServiceProvider
@@ -155,7 +157,7 @@ class AppServiceProvider extends ServiceProvider
155
157
}
156
158
```
157
159
158
-
Step 3: Use the Blade directive in your template as previously shown.
160
+
**Step 3**: Use the Blade directive in your template as previously shown.
0 commit comments