Merge branch 'symfony:2.x' into main

Author: stakovicz

.github/workflows/test.yaml

@@ -80,25 +80,21 @@ jobs:
             - name: Chartjs
               run: |
                   cd src/Chartjs
-                  composer config platform.php 7.4.99
                   composer update --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
             - name: Cropperjs
               run: |
                   cd src/Cropperjs
-                  composer config platform.php 7.4.99
                   composer update --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
             - name: Dropzone
               run: |
                   cd src/Dropzone
-                  composer config platform.php 7.4.99
                   composer update --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
             - name: LazyImage
               run: |
                   cd src/LazyImage
-                  composer config platform.php 7.4.99
                   composer update --prefer-dist --no-interaction --no-ansi --no-progress
                   php vendor/bin/simple-phpunit
             - name: TwigComponent

README.md

@@ -16,6 +16,8 @@ to build the chart in PHP. The JavaScript is handled for you automatically.
 
 [Read all the details about the Symfony UX initiative](https://symfony.com/ux)
 
+Or watch the [Stimulus Screencast on SymfonyCasts](https://symfonycasts.com/screencast/stimulus).
+
 ## Components of UX
 
 Symfony UX leverages [Stimulus](https://stimulus.hotwired.dev/) for JavaScript

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', {targets: {node: 'current'}}],
+        '@babel/preset-typescript',
+    ],
+};

composer.json

@@ -2,6 +2,6 @@
     "name": "symfony/ux",
     "license": "MIT",
     "require-dev": {
-        "symfony/filesystem": "^5.2"
+        "symfony/filesystem": "^5.2|^6.0"
     }
 }

jest.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+    testRegex: "test/.*\\.test.ts",
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: [
+        path.join(__dirname, 'test/setup.js'),
+    ],
+    transform: {
+        '\\.(j|t)s$': ['babel-jest', { configFile: path.join(__dirname, './babel.config.js') }]
+    },
+}

package.json

@@ -5,34 +5,56 @@
         "src/**/assets"
     ],
     "scripts": {
-        "build": "yarn workspaces run build",
-        "test": "yarn workspaces run test",
-        "lint": "yarn workspaces run lint --fix",
-        "format": "prettier src/*/Resources/assets/{src,test}/*.js {,src/*/}*.{json,md} --write",
+        "build": "yarn rollup -c",
+        "test": "yarn workspaces run jest",
+        "lint": "yarn workspaces run eslint src test",
+        "format": "prettier src/*/Resources/assets/src/*.ts src/*/Resources/assets/test/*.js {,src/*/}*.{json,md} --write",
         "check-lint": "yarn lint --no-fix",
         "check-format": "yarn format --no-write --check"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.12.1",
-        "eslint": "^7.15.0",
-        "eslint-config-prettier": "^6.15.0",
-        "eslint-plugin-jest": "^24.1.3",
-        "prettier": "^2.2.1"
+        "@babel/core": "^7.15.8",
+        "@babel/preset-env": "^7.15.8",
+        "@babel/preset-typescript": "^7.15.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-typescript": "^8.3.0",
+        "@symfony/stimulus-testing": "^2.0.1",
+        "@typescript-eslint/eslint-plugin": "^5.2.0",
+        "@typescript-eslint/parser": "^5.2.0",
+        "babel-jest": "^27.3.1",
+        "eslint": "^8.1.0",
+        "eslint-config-prettier": "^8.0.0",
+        "eslint-plugin-jest": "^25.2.2",
+        "jest": "^27.3.1",
+        "pkg-up": "^3.1.0",
+        "prettier": "^2.2.1",
+        "rollup": "^2.52.2",
+        "tslib": "^2.3.1",
+        "typescript": "^4.4.4"
     },
     "eslintConfig": {
         "root": true,
-        "parser": "@babel/eslint-parser",
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+            "@typescript-eslint"
+        ],
         "extends": [
             "eslint:recommended",
-            "prettier"
+            "prettier",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended"
         ],
+        "rules": {
+            "@typescript-eslint/no-explicit-any": "off"
+        },
         "env": {
             "browser": true
         },
         "overrides": [
             {
                 "files": [
-                    "src/*/Resources/assets/test/*.js"
+                    "src/*/Resources/assets/test/**/*.ts",
+                    "src/*/assets/test/**/*.ts"
                 ],
                 "extends": [
                     "plugin:jest/recommended"

rollup.config.js

@@ -0,0 +1,64 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import glob from 'glob';
+import path from 'path';
+import pkgUp from 'pkg-up';
+
+/**
+ * Guarantees that any files imported from a peer dependency are treated as an external.
+ *
+ * For example, if we import `chart.js/auto`, that would not normally
+ * match the "chart.js" we pass to the "externals" config. This plugin
+ * catches that case and adds it as an external.
+ *
+ * Inspired by https://github.com/oat-sa/rollup-plugin-wildcard-external
+ */
+const wildcardExternalsPlugin = (peerDependencies) => ({
+    name: 'wildcard-externals',
+    resolveId(source, importer) {
+        if (importer) {
+            let matchesExternal = false;
+            peerDependencies.forEach((peerDependency) => {
+                if (source.includes(`/${peerDependency}/`)) {
+                    matchesExternal = true;
+                }
+            });
+
+            if (matchesExternal) {
+                return {
+                    id: source,
+                    external: true,
+                    moduleSideEffects: true
+                };
+            }
+        }
+
+        return null; // other ids should be handled as usually
+    }
+});
+
+const files = glob.sync("src/**/assets/src/*controller.ts");
+const packages = files.map((file) => {
+    const absolutePath = path.join(__dirname, file);
+    const packageData = require(pkgUp.sync({ cwd: absolutePath }));
+    const peerDependencies = [
+        '@hotwired/stimulus',
+        ...(packageData.peerDependencies ? Object.keys(packageData.peerDependencies) : [])
+    ];
+
+    return {
+        input: file,
+        output: {
+            file: path.join(absolutePath, '..', '..', 'dist', path.basename(file, '.ts') + '.js'),
+            format: 'esm',
+        },
+        external: peerDependencies,
+        plugins: [
+            resolve(),
+            typescript(),
+            wildcardExternalsPlugin(peerDependencies)
+        ],
+    };
+});
+
+export default packages;

src/Chartjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 2.0
+
+-   Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus`
+    version 3 was added. See the [@symfony/stimulus-bridge CHANGELOG](https://github.com/symfony/stimulus-bridge/blob/main/CHANGELOG.md#300)
+    for more details.
+-   Support added for Symfony 6
+-   Upgrade Chart.js to version 3
+
 ## 1.3
 
 -   [DEPENDENCY CHANGE] `chart.js` is no longer included automatically (#93)

src/Chartjs/DependencyInjection/ChartjsExtension.php

@@ -13,10 +13,12 @@
 
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Reference;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 use Symfony\UX\Chartjs\Builder\ChartBuilder;
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Twig\ChartExtension;
+use Symfony\WebpackEncoreBundle\Twig\StimulusTwigExtension;
 use Twig\Environment;
 
 /**
@@ -38,9 +40,10 @@ public function load(array $configs, ContainerBuilder $container)
             ->setPublic(false)
         ;
 
-        if (class_exists(Environment::class)) {
+        if (class_exists(Environment::class) && class_exists(StimulusTwigExtension::class)) {
             $container
                 ->setDefinition('chartjs.twig_extension', new Definition(ChartExtension::class))
+                ->addArgument(new Reference('webpack_encore.twig_stimulus_extension'))
                 ->addTag('twig.extension')
                 ->setPublic(false)
             ;

src/Chartjs/Model/Chart.php

@@ -21,7 +21,6 @@ class Chart
 {
     public const TYPE_LINE = 'line';
     public const TYPE_BAR = 'bar';
-    public const TYPE_BAR_HORIZONTAL = 'horizontalBar';
     public const TYPE_RADAR = 'radar';
     public const TYPE_PIE = 'pie';
     public const TYPE_DOUGHNUT = 'doughnut';