Jquery Bundle Laravel Package

Getting Started

Minimal Steps

1. Installation:

   composer require alexandermatveev/jquery-bundle
   

   Update AppKernel.php to register the bundle:

   new AlexanderMatveev\JQueryBundle\AlexanderMatveevJQueryBundle(),
   

   Run asset installation:

   php bin/console assets:install web
   

2. First Use Case: Include jQuery in a Twig template:

   <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.min.js') }}"></script>
   

   Verify jQuery is loaded by checking $ in browser console.

Implementation Patterns

Core Workflows

1. Asset Management:

   • Use asset() helper in Twig to reference jQuery files.
   • For development, prefer non-minified versions (if available) for debugging:

     <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.js') }}"></script>
     

2. Integration with Symfony Assets:

   • Leverage Symfony’s asset system for versioning and caching:

     {% javascripts
         'bundles/alexandermatveevjquery/lib/jquery-3.2.1.min.js'
         output='js/jquery-bundle.js'
     %}
         <script src="{{ asset(output) }}"></script>
     {% endjavascripts %}
     

3. Dependency Loading:

   • Load jQuery before other JS dependencies (e.g., plugins):

     <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.min.js') }}"></script>
     <script src="{{ asset('bundles/yourbundle/js/plugin.js') }}"></script>
     

4. Environment-Specific Config:

   • Use Twig’s app.debug to conditionally load minified/non-minified files:

     {% if app.debug %}
         <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.js') }}"></script>
     {% else %}
         <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.min.js') }}"></script>
     {% endif %}
     

Gotchas and Tips

Pitfalls

1. Bundle Compatibility:

   • The bundle is Symfony 2.x-only (not compatible with Symfony 3/4/5 or Laravel).
   • If migrating from Symfony 2, ensure no breaking changes exist with jQuery 3.2.1 (e.g., deprecated methods like .live()).

2. Asset Paths:

   • Hardcoded paths in the bundle may break if the web/ directory is renamed or moved.
   • Fix: Override the bundle’s Resources/public directory in a custom bundle or use Symfony’s asset() helper consistently.

3. No Modern jQuery:

   • jQuery 3.2.1 is outdated (released 2017). Use a newer version (e.g., via assets:install with a CDN or a Laravel-compatible package like laravel-mix with jquery).

4. No Build Tools:

   • The bundle provides pre-built files only. For custom builds (e.g., concatenation, UglifyJS), use Laravel Mix or Webpack.

Debugging Tips

1. Verify Loading:

   • Check browser DevTools (Network tab) to confirm jQuery is loaded without 404 errors.
   • Test $ in console; if undefined, the path is incorrect or the file is missing.

2. Conflict Resolution:

   • If $ is undefined due to another library (e.g., Prototype), wrap jQuery code in:

     jQuery(document).ready(function($) {
         // Use $ here
     });
     

3. Cache Issues:

   • Clear Symfony cache after updates:

     php bin/console cache:clear
     

   • For Laravel, use php artisan cache:clear and php artisan view:clear.

Extension Points

1. Custom jQuery Version:

   • Replace the bundle’s jQuery by:
     1. Removing the bundle’s lib/jquery-3.2.1.min.js.
     2. Adding your version to public/bundles/alexandermatveevjquery/lib/.
     3. Updating Twig templates to reference your file.

2. Plugin Integration:

   • Install plugins via npm/yarn (for Laravel) or Bower (Symfony 2) and include them after jQuery:

     <script src="{{ asset('bundles/alexandermatveevjquery/lib/jquery-3.2.1.min.js') }}"></script>
     <script src="{{ asset('bundles/yourbundle/js/jquery.plugin.js') }}"></script>
     

3. Symfony 2 → Laravel Migration:

   • Replace this bundle with Laravel’s jquery package or use a CDN:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>