Replace Gulp with Webpack

Sylius · Feb 11, 2021 · d98b145 · d98b145
1 parent 54a2d8a
commit d98b145
Show file tree

Hide file tree

Showing 27 changed files with 1,247 additions and 3,866 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 /public/assets
+/public/build
 /public/css
 /public/js
 /public/media
@@ -14,6 +15,9 @@
 /composer.lock
 /node_modules
 
+/npm-debug.log
+/yarn-error.log
+
 /etc/build/*
 !/etc/build/.gitignore
 

diff --git a/UPGRADE-1.9.md b/UPGRADE-1.9.md
@@ -8,48 +8,47 @@
     +   BabDev\PagerfantaBundle\BabDevPagerfantaBundle::class => ['all' => true],
     +   SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
 
+    ```
+
 1. Remove `getContainerLoader` method from `src/Kernel.php` class if you did not customise it.
 
-1. We've removed the support for Symfony's Templating component (which is removed in Symfony 5). 
+1. We've removed the support for Symfony's Templating component (which is removed in Symfony 5).
 
-    * Remove `templating` from framework's configuration:
-
+    - Remove `templating` from framework's configuration:
         ```diff
         # config/packages/framework.yaml
-       
+
         framework:
             # ...
         -    templating: { engines: ["twig"] }
         ```
-
-    * Replace any usages of `Symfony\Bundle\FrameworkBundle\Templating\EngineInterface` with `Twig\Environment`.
-
+    - Replace any usages of `Symfony\Bundle\FrameworkBundle\Templating\EngineInterface` with `Twig\Environment`.
+
         Inject `twig` service into your controllers instead of `templating`.
-      
+
         `$templating->renderResponse(...)` might be replaced with `new Response($twig->render(...))`.
-    
+
 1. We've upgraded Sylius' ResourceBundle and GridBundle packages which forced us to upgrade major versions of our dependencies.
-   
+
     Please follow [ResourceBundle's upgrade instructions](https://github.com/Sylius/SyliusResourceBundle/blob/master/UPGRADE.md#from-16x-to-17x).
-   
+
     Apart from that, JMS Serializer major version upgrade requires to replace `array` type to `iterable` when serializing Doctrine Collections.
 
     Due to FOS Rest Bundle major version upgrade, the JSON error responses might have changed. If your tests stop passing,
     you can bring back old behaviour by overriding `error.json.twig` and `exception.json.twig` templates. You can check
-    how we've done that in Sylius by looking into vendor code in `templates/bundles/TwigBundle/Exception/` directory. 
-   
+    how we've done that in Sylius by looking into vendor code in `templates/bundles/TwigBundle/Exception/` directory.
+
 1. We've replaced deprecated Doctrine Persistence API with the new one.
-   
+
     Replace `Doctrine\Common\Persistence` namespace in your codebase to `Doctrine\Persistence`.
-   
+
 1. We've removed DoctrineCacheBundle from our required packages while upgrading to the next major version of DoctrineBundle (v2).
-
 1. We've upgraded SyliusThemeBundle to the next major version (v2.1).
-   
+
     Please follow [SyliusThemeBundle's upgrade instructions](https://github.com/Sylius/SyliusThemeBundle/blob/master/UPGRADE.md).
-   
+
 1. We've replaced deprecated Symfony Translator API with the new one.
-   
+
     Replace `Symfony\Component\Translation\TranslatorInterface` with `Symfony\Contracts\Translation\TranslatorInterface` in your codebase.
 
 1. `/new-api` prefix has been changed to `/api/v2`. Please adjust your routes accordingly.
@@ -70,26 +69,26 @@
 
 ### New API
 
-1. Adjust your `config/packages/security.yaml`.
+1.  Adjust your `config/packages/security.yaml`.
 
-    * Parameters from `config/packages/security.yaml` has been moved to separated bundles. 
-    You may delete them if you are using the default values:
-
-        ```diff
-        - parameters:
-        -     sylius.security.admin_regex: "^/%sylius_admin.path_name%"
-        -     sylius.security.api_regex: "^/api/v1"
-        -     sylius.security.shop_regex: "^/(?!%sylius_admin.path_name%|api/.*|api$|media/.*)[^/]++"
-        -     sylius.security.new_api_route: "/api/v2"
-        -     sylius.security.new_api_regex: "^%sylius.security.new_api_route%"
-        -     sylius.security.new_api_admin_route: "%sylius.security.new_api_route%/admin"
-        -     sylius.security.new_api_admin_regex: "^%sylius.security.new_api_admin_route%"
-        -     sylius.security.new_api_shop_route: "%sylius.security.new_api_route%/shop"
-        -     sylius.security.new_api_shop_regex: "^%sylius.security.new_api_shop_route%"
-        ```
+    -   Parameters from `config/packages/security.yaml` has been moved to separated bundles.
+        You may delete them if you are using the default values:
+
+            ```diff
+            - parameters:
+            -     sylius.security.admin_regex: "^/%sylius_admin.path_name%"
+            -     sylius.security.api_regex: "^/api/v1"
+            -     sylius.security.shop_regex: "^/(?!%sylius_admin.path_name%|api/.*|api$|media/.*)[^/]++"
+            -     sylius.security.new_api_route: "/api/v2"
+            -     sylius.security.new_api_regex: "^%sylius.security.new_api_route%"
+            -     sylius.security.new_api_admin_route: "%sylius.security.new_api_route%/admin"
+            -     sylius.security.new_api_admin_regex: "^%sylius.security.new_api_admin_route%"
+            -     sylius.security.new_api_shop_route: "%sylius.security.new_api_route%/shop"
+            -     sylius.security.new_api_shop_regex: "^%sylius.security.new_api_shop_route%"
+            ```
+
+    -   If you are not using the default values, you may need to add and change parameters:
 
-    * If you are not using the default values, you may need to add and change parameters:
-
         ```diff
             parameters:
         -       sylius.security.api_regex: "^/api"
@@ -101,9 +100,9 @@
         +       sylius.security.new_api_user_account_route: "%sylius.security.new_api_shop_route%/account"
         +       sylius.security.new_api_user_account_regex: "^%sylius.security.new_api_user_account_route%"
         ```
-    
-    * Add new access control configuration and reorder it:
-    
+
+    -   Add new access control configuration and reorder it:
+
         ```diff
             security:
                 access_control:
@@ -117,11 +116,11 @@
                     - { path: "%sylius.security.new_api_shop_regex%/.*", role: IS_AUTHENTICATED_ANONYMOUSLY }
         ```
 
-1. Unified API registration path in shop has been changed from `/new-api/shop/register` to `/new-api/shop/customers/`. 
- 
-1. Identifier needed to retrieve a product in shop API endpoint (`/new-api/shop/products/{id}`) has been changed from `slug` to `code`. 
+1.  Unified API registration path in shop has been changed from `/new-api/shop/register` to `/new-api/shop/customers/`.
+
+1.  Identifier needed to retrieve a product in shop API endpoint (`/new-api/shop/products/{id}`) has been changed from `slug` to `code`.
 
-1. Replace and add new keys in `config/packages/dev/jms_serializer.yaml`:
+1.  Replace and add new keys in `config/packages/dev/jms_serializer.yaml`:
 
     ```diff
         jms_serializer:
@@ -139,7 +138,7 @@
     +                  - JSON_PRESERVE_ZERO_FRACTION
     ```
 
-1. Replace and add new keys in `config/packages/prod/jms_serializer.yaml`:
+1.  Replace and add new keys in `config/packages/prod/jms_serializer.yaml`:
 
     ```diff
         jms_serializer:
@@ -154,17 +153,17 @@
     +                  - JSON_UNESCAPED_SLASHES
     +                  - JSON_PRESERVE_ZERO_FRACTION
     ```
-   
-1. Replace key in `config/packages/jms_serializer.yaml`:
-   
-   ```diff
-       jms_serializer:
-           visitors:
-   -           xml:
-   +           xml_serialization:
-   ```
-
-1. `config/packages/fos_rest.yaml` rules have been changed to:
+
+1.  Replace key in `config/packages/jms_serializer.yaml`:
+
+    ```diff
+        jms_serializer:
+            visitors:
+    -           xml:
+    +           xml_serialization:
+    ```
+
+1.  `config/packages/fos_rest.yaml` rules have been changed to:
 
     ```diff
         rules:
@@ -174,30 +173,63 @@
 
 ### Data migrations
 
-1. The `CoreBundle/Migrations/Version20201208105207.php` migration was added which extends existing adjustments with additional details (context). 
-   
+1.  The `CoreBundle/Migrations/Version20201208105207.php` migration was added which extends existing adjustments with additional details (context).
+
     Depending on the type of adjustment, additionally defined information are:
-    
+
         * Taxation details (percentage and relation to tax rate)
         * Shipping details (shipping relation)
         * Taxation for shipping (combined details of percentage and shipping relation)
- 
+
     This data is fetched based on two assumptions:
-   
+
         * Order level taxes relates to shipping only (default Sylius behaviour)
         * Tax rate name has not changed since the time, the first order has been placed
- 
-    If these are not true, please adjust migration accordingly to your need. To exclude following migration from execution run following code: 
-    
+
+    If these are not true, please adjust migration accordingly to your need. To exclude following migration from execution run following code:
+
     ```
     bin/console doctrine:migrations:version 'Sylius\Bundle\CoreBundle\Migrations\Version20201208105207' --add
     ```
 
-1. The base of the `Adjustment` class has changed. If you extend your adjustments already (or have them overridden 
-by default, because of Sylius-Standard usage), you should base your Adjustment class 
-on `Sylius\Component\Core\Model\Adjustment` instead of `Sylius\Component\Order\Model\Adjustment`.
+1.  The base of the `Adjustment` class has changed. If you extend your adjustments already (or have them overridden
+    by default, because of Sylius-Standard usage), you should base your Adjustment class
+    on `Sylius\Component\Core\Model\Adjustment` instead of `Sylius\Component\Order\Model\Adjustment`.
 
-    ```diff
-    -       use Sylius\Component\Order\Model\Adjustment as BaseAdjustment;
-    +       use Sylius\Component\Core\Model\Adjustment as BaseAdjustment;
-    ```
+        ```diff
+        -       use Sylius\Component\Order\Model\Adjustment as BaseAdjustment;
+        +       use Sylius\Component\Core\Model\Adjustment as BaseAdjustment;
+        ```
+
+### From Gulp to Webpack Encore
+
+After migrating to the Webpack, asset paths should be changed. By default, it will be compiled to the `public/build/admin/...` and `public/build/shop/...` folder:
+
+```
+- <img src="{{ asset('assets/admin/img/admin-logo.svg') }}" class="ui fluid image">
++ <img src="{{ asset('build/admin/images/admin-logo.svg', 'admin') }}" class="ui fluid image">
+```
+
+Output paths can be changed freely, but keep in mind, that before every build, the directory will be cleared, so old files may be removed.
+
+Scripts and styles paths have also changed:
+
+```
+- {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}
++ {{ encore_entry_script_tags('admin-entry', null, 'admin') }}
+```
+
+```
+- {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}
++ {{ encore_entry_link_tags('admin-entry', null, 'admin') }}
+```
+
+```
+- {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
++ {{ encore_entry_script_tags('shop-entry', null, 'shop') }}
+```
+
+```
+- {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
++ {{ encore_entry_link_tags('shop-entry', null, 'shop') }}
+```
diff --git a/composer.json b/composer.json
@@ -106,6 +106,7 @@
         "symfony/translation": "^4.4 || ^5.2",
         "symfony/twig-bundle": "^4.4 || ^5.2",
         "symfony/validator": "^4.4 || ^5.2",
+        "symfony/webpack-encore-bundle": "^1.8",
         "symfony/yaml": "^4.4 || ^5.2",
         "twig/intl-extra": "^2.12",
         "twig/twig": "^2.12",

diff --git a/config/bundles.php b/config/bundles.php
@@ -61,4 +61,5 @@
     Sonata\Doctrine\Bridge\Symfony\SonataDoctrineSymfonyBundle::class => ['all' => true],
     Sonata\Twig\Bridge\Symfony\SonataTwigSymfonyBundle::class => ['all' => true],
     SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];
diff --git a/config/packages/assets.yaml b/config/packages/assets.yaml
@@ -0,0 +1,7 @@
+framework:
+    assets:
+        packages:
+            shop:
+                json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
+            admin:
+                json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json'
diff --git a/config/packages/webpack_encore.yaml b/config/packages/webpack_encore.yaml
@@ -0,0 +1,5 @@
+webpack_encore:
+    output_path: '%kernel.project_dir%/public/build/default'
+    builds:
+        shop: '%kernel.project_dir%/public/build/shop'
+        admin: '%kernel.project_dir%/public/build/admin'
diff --git a/gulpfile.babel.js b/gulpfile.babel.js