feature #894 Asset mapper integration part 2! (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Asset mapper integration part 2!

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | None
| License       | MIT

Hi!

Continued work to prep the UX bundles (and the new StimulusBundle) to support AssetMapper (support for WebpackEncoreBundle will not change).

TODOS:

* [X] React support
* [X] autoimport support
* [ ] Vue support
* [ ] Svelte support
* [ ] Translator support
* [ ] add "excludes" to avoid controllers.json from being in the asset mapper
* [ ] add "excludes" to avoid .d.ts files from being in the asset mapper
* [ ] tests

Cheers!

Commits
-------

1b9f4d8 Asset mapper integration part 2!

Author: weaverryan

.github/workflows/test.yaml

@@ -235,7 +235,6 @@ jobs:
               uses: ramsey/composer-install@v2
               with:
                   working-directory: src/React
-                  dependency-versions: lowest
             - name: React Tests
               run: php vendor/bin/simple-phpunit
               working-directory: src/React
@@ -252,7 +251,6 @@ jobs:
               uses: ramsey/composer-install@v2
               with:
                   working-directory: src/Svelte
-                  dependency-versions: lowest
             - name: Svelte Tests
               run: php vendor/bin/simple-phpunit
               working-directory: src/Svelte
@@ -277,7 +275,6 @@ jobs:
               uses: ramsey/composer-install@v2
               with:
                   working-directory: src/Vue
-                  dependency-versions: lowest
             - name: Vue Tests
               run: php vendor/bin/simple-phpunit
               working-directory: src/Vue

build.js renamed to bin/build_javascript.js

@@ -9,6 +9,15 @@ const { spawnSync } = require('child_process');
 const glob = require('glob');
 
 const files = [
+    // custom handling for React
+    'src/React/assets/src/loader.ts',
+    'src/React/assets/src/components.ts',
+    // custom handling for Svelte
+    'src/Svelte/assets/src/loader.ts',
+    'src/Svelte/assets/src/components.ts',
+    // custom handling for Vue
+    'src/Vue/assets/src/loader.ts',
+    'src/Vue/assets/src/components.ts',
     // custom handling for StimulusBundle
     'src/StimulusBundle/assets/src/loader.ts',
     'src/StimulusBundle/assets/src/controllers.ts',

bin/build_styles.js

@@ -0,0 +1,46 @@
+/**
+ * Script to "build" the source CSS files to their final destination.
+ */
+
+const glob = require('glob');
+const { exec } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+let pattern = 'src/*/assets/package.json';
+
+// Use glob to find all matching package.json files
+glob(pattern, function (err, files) {
+    if (err) {
+        console.error('Error while finding package.json files:', err);
+        process.exit(1);
+    }
+
+    // Loop over all files
+    files.forEach(file => {
+        // Read the package.json file
+        const pkg = JSON.parse(fs.readFileSync(file, 'utf-8'));
+
+        // Get the css source
+        const cssSourceRelative = pkg.config && pkg.config.css_source;
+
+        if (!cssSourceRelative) {
+            return;
+        }
+        // Construct the output path
+        const cssSource = path.join(path.dirname(file), cssSourceRelative);
+        const outputDir = path.join(path.dirname(file), 'dist');
+        const outputFilename = path.basename(cssSource, '.css') + '.min.css';
+        const output = path.join(outputDir, outputFilename);
+
+        // Run the clean-css-cli command
+        exec(`yarn run cleancss -o ${output} ${cssSource}`, function (err) {
+            if (err) {
+                console.error(`Error while minifying ${cssSource}:`, err);
+                return;
+            }
+
+            console.log(`Minified ${cssSource} to ${output}`);
+        });
+    });
+});

package.json

@@ -4,7 +4,7 @@
         "src/*/assets"
     ],
     "scripts": {
-        "build": "node build.js",
+        "build": "node bin/build_javascript.js && node bin/build_styles.js",
         "test": "yarn workspaces run jest",
         "lint": "yarn workspaces run eslint src test",
         "format": "prettier src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md} --write",
@@ -23,6 +23,7 @@
         "@typescript-eslint/eslint-plugin": "^5.2.0",
         "@typescript-eslint/parser": "^5.2.0",
         "babel-jest": "^27.3.1",
+        "clean-css-cli": "^5.6.2",
         "eslint": "^8.1.0",
         "eslint-config-prettier": "^8.0.0",
         "eslint-plugin-jest": "^25.2.2",

rollup.config.js

@@ -74,6 +74,10 @@ const peerDependencies = [
 if (file.includes('StimulusBundle/assets/src/loader.ts')) {
     peerDependencies.push('./controllers.js');
 }
+// React, Vue
+if (file.includes('assets/src/loader.ts')) {
+    peerDependencies.push('./components.js');
+}
 
 module.exports = {
     input: file,

src/Autocomplete/doc/index.rst

@@ -20,6 +20,11 @@ Then install the bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-autocomplete
 
+If you're using WebpackEncore, install your assets and restart Encore. This is
+not needed if you're using AssetMapper:
+
+.. code-block:: terminal
+
     # Don't forget to install the JavaScript dependencies as well and compile
     $ npm install --force
     $ npm run watch

src/Chartjs/doc/index.rst

@@ -16,6 +16,11 @@ Then, install this bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-chartjs
 
+If you're using WebpackEncore, install your assets and restart Encore. This is
+not needed if you're using AssetMapper:
+
+.. code-block:: terminal
+
     # Don't forget to install the JavaScript dependencies as well and compile
     $ npm install --force
     $ npm run watch
@@ -24,9 +29,6 @@ Then, install this bundle using Composer and Symfony Flex:
     $ yarn install --force
     $ yarn watch
 
-Also make sure you have at least version 3.0 of `@symfony/stimulus-bridge`_
-in your ``package.json`` file.
-
 Usage
 -----
 
@@ -241,7 +243,6 @@ the Symfony framework: https://symfony.com/doc/current/contributing/code/bc.html
 
 .. _`Chart.js`: https://www.chartjs.org
 .. _`the Symfony UX initiative`: https://symfony.com/ux
-.. _`@symfony/stimulus-bridge`: https://github.com/symfony/stimulus-bridge
 .. _`Chart.js documentation`: https://www.chartjs.org/docs/latest/
 .. _`Symfony UX configured in your app`: https://symfony.com/doc/current/frontend/ux.html
 .. _`a lot of plugins`: https://github.com/chartjs/awesome#plugins

src/Cropperjs/assets/dist/style.min.css

@@ -0,0 +1 @@
+.cropperjs-image{max-width:100%}

src/Cropperjs/assets/package.json

@@ -5,6 +5,9 @@
     "version": "1.1.0",
     "main": "dist/controller.js",
     "types": "dist/controller.d.ts",
+    "config": {
+        "css_source": "src/style.css"
+    },
     "symfony": {
         "controllers": {
             "cropper": {
@@ -14,7 +17,7 @@
                 "enabled": true,
                 "autoimport": {
                     "cropperjs/dist/cropper.min.css": true,
-                    "@symfony/ux-cropperjs/src/style.css": true
+                    "@symfony/ux-cropperjs/dist/style.min.css": true
                 }
             }
         },

src/Cropperjs/doc/index.rst

@@ -16,6 +16,11 @@ Then, install this bundle using Composer and Symfony Flex:
 
     $ composer require symfony/ux-cropperjs
 
+If you're using WebpackEncore, install your assets and restart Encore. This is
+not needed if you're using AssetMapper:
+
+.. code-block:: terminal
+
     # Don't forget to install the JavaScript dependencies as well and compile
     $ npm install --force
     $ npm run watch
@@ -24,9 +29,6 @@ Then, install this bundle using Composer and Symfony Flex:
     $ yarn install --force
     $ yarn watch
 
-Also make sure you have at least version 3.0 of
-`@symfony/stimulus-bridge`_ in your ``package.json`` file.
-
 Usage
 -----
 
@@ -148,6 +150,5 @@ https://symfony.com/doc/current/contributing/code/bc.html
 
 .. _`Cropper.js`: https://fengyuanchen.github.io/cropperjs/
 .. _`the Symfony UX initiative`: https://symfony.com/ux
-.. _`@symfony/stimulus-bridge`: https://github.com/symfony/stimulus-bridge
 .. _`the Cropper.js options`: https://github.com/fengyuanchen/cropperjs/blob/main/README.md#options
 .. _`Symfony UX configured in your app`: https://symfony.com/doc/current/frontend/ux.html