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
+51-41Lines changed: 51 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,26 +73,61 @@ This package makes it much more convenient by allowing you to keep inline script
73
73
74
74
-**Complex script processing** using dedicated PHP classes _(see example below)_
75
75
-**Variable passing** from PHP to JavaScript _(see example below)_
76
-
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see extra section below)_
76
+
-**Unit testing** your JavaScript code using tools like Vitest or Jest _(see bonus section below)_
77
77
-**Better code organization** and maintainability
78
78
-**IDE support** with syntax highlighting and error detection in dedicated JS files
79
79
80
80
# Explanation Through Example: Theme switch script
81
81
82
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.
83
83
84
-
**Step 1**: Publish the built-in theme switch scripts:
84
+
### Using prepared PHP classes
85
+
86
+
Add the following to your `AppServiceProvider`:
87
+
88
+
```php
89
+
use Zmyslny\LaravelInlineScripts\Ready\ThemeSwitchTwoStates\InitScript;
90
+
use Zmyslny\LaravelInlineScripts\Ready\ThemeSwitchTwoStates\SwitchScript;
91
+
92
+
class AppServiceProvider extends ServiceProvider
93
+
{
94
+
public function boot(): void
95
+
{
96
+
BladeInlineScripts::take(
97
+
new InitScript(),
98
+
new SwitchScript('d')
99
+
)->registerAs('themeSwitchScripts');
100
+
}
101
+
}
102
+
```
103
+
104
+
and insert a newly created custom Blade directive in your template:
105
+
106
+
```blade
107
+
<html>
108
+
<head>
109
+
...
110
+
@themeSwitchScripts
111
+
</head>
112
+
<body>
113
+
...
114
+
```
115
+
116
+
Now hit the `d` key to toggle between light and dark themes, and your choice will be remembered on subsequent visits.
@@ -114,7 +149,7 @@ class AppServiceProvider extends ServiceProvider
114
149
}
115
150
```
116
151
117
-
**Step 3**: Use the Blade directive in your template:
152
+
**Step 3**: Insert a newly created custom Blade directive in your template:
118
153
119
154
```blade
120
155
<html>
@@ -130,54 +165,29 @@ Now hit the `d` key to toggle between light and dark themes, and your choice wil
130
165
131
166
## Advanced Usage: Custom Script Processing
132
167
133
-
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.
168
+
Want to do more advanced processing of your JavaScript code before inlining it?
169
+
170
+
Create a PHP class that implements one of the following interfaces:
171
+
-`RenderableScript` - for scripts without placeholders
172
+
-`ScriptWithPlaceholders` - for scripts with placeholders to be replaced with variables
134
173
135
-
Create a custom PHP processor class implementing the `RenderableScript` or `ScriptWithPlaceholders` interface and register it using the `BladeInlineScripts::take()` method.
174
+
And use them with `BladeInlineScripts::take(...)` method.
175
+
176
+
This package provides base abstract implementations (in the context of getting JS code from files) for each of the interfaces:
136
177
137
-
I have prepared abstract base implementations for each of the interfaces:
138
178
```php
139
179
abstract class FromFile implements RenderableScript
140
180
141
181
abstract class FromFileWithPlaceholders implements ScriptWithPlaceholders
142
182
```
143
183
144
-
To show them in action, I have created PHP processors extending the base classes for the theme switch scripts:
145
-
146
-
**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 processors classes to `app/Blade/ThemeSwitchTwoStates/[ThemeInitScript.php, ThemeSwitchScript]`.
153
-
154
-
**Step 2**: Register the scripts in your `AppServiceProvider`:
155
-
156
-
```php
157
-
class AppServiceProvider extends ServiceProvider
158
-
{
159
-
public function boot(): void
160
-
{
161
-
BladeInlineScripts::take(
162
-
new ThemeInitScript(),
163
-
new ThemeSwitchScript('d')
164
-
)->registerAs('themeSwitchScripts');
165
-
}
166
-
}
167
-
```
168
-
169
-
**Step 3**: Use the Blade directive in your template as previously shown.
170
-
171
-
Now hit the `d` key to toggle theme.
172
-
173
-
## Extra - get the unit tests for JS scripts and PHP processors
0 commit comments