Features/importmap (#409)

Author: Spomky

.gitattributes

@@ -1,6 +1,7 @@
 * text=auto
 
 /.github export-ignore
+/bin export-ignore
 /tests export-ignore
 /.editorconfig export-ignore
 /.gitattributes export-ignore

.github/workflows/tweet.yml

@@ -1,6 +1,6 @@
 .PHONY: mu
 mu: vendor ## Mutation tests
-	vendor/bin/infection -s --threads=$$(nproc) --min-msi=30 --min-covered-msi=50
+	vendor/bin/infection -v -s --threads=$$(nproc) --min-msi=45 --min-covered-msi=60
 
 .PHONY: tests
 tests: vendor ## Run all tests
@@ -36,7 +36,7 @@ st: vendor ## Run static analyse
 
 .PHONY: ci-mu
 ci-mu: vendor ## Mutation tests (for CI/CD only)
-	vendor/bin/infection --logger-github -s --threads=$$(nproc) --min-msi=30 --min-covered-msi=50
+	vendor/bin/infection --logger-github -s --threads=$$(nproc) --min-msi=45 --min-covered-msi=60
 
 .PHONY: ci-cc
 ci-cc: vendor ## Show test coverage rates (for CI/CD only)

Makefile

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

babel.config.js

@@ -0,0 +1,29 @@
+/**
+ * This file is used to compile the TypeScript files in the assets/src directory
+ * of each package.
+ *
+ * It allows each package to spawn its own rollup process, which is necessary
+ * to keep memory usage down.
+ */
+const { spawnSync } = require('child_process');
+const glob = require('glob');
+
+const files = [
+    ...glob.sync('src/*/assets/src/*controller.ts'),
+];
+
+files.forEach((file) => {
+    const result = spawnSync('node', [
+        'node_modules/.bin/rollup',
+        '-c',
+        '--environment',
+        `INPUT_FILE:${file}`,
+    ], {
+        stdio: 'inherit',
+        shell: true
+    });
+
+    if (result.error) {
+        console.error(`Error compiling ${file}:`, result.error);
+    }
+});

bin/build_javascript.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}`);
+        });
+    });
+});

bin/build_styles.js

@@ -19,6 +19,7 @@
         "psr-4": {
             "Webauthn\\": "src/webauthn/src/",
             "Webauthn\\Bundle\\": "src/symfony/src/",
+            "Webauthn\\Stimulus\\": "src/stimulus/src/",
             "Webauthn\\MetadataService\\": "src/metadata-service/src/"
         }
     },
@@ -87,7 +88,6 @@
         "web-token/jwt-signature-algorithm-eddsa": "Recommended for the AndroidSafetyNet Attestation Statement support"
     },
     "require-dev": {
-        "doctrine/annotations": "^1.13 || ^2.0",
         "doctrine/dbal": "^3.4",
         "doctrine/doctrine-bundle": "^2.7",
         "doctrine/orm": "^2.13",
@@ -105,8 +105,9 @@
         "phpunit/phpunit": "^10.1",
         "psr/log": "^3.0",
         "qossmic/deptrac-shim": "^1.0",
-        "rector/rector": "^0.16",
+        "rector/rector": "^0.17",
         "roave/security-advisories": "dev-latest",
+        "symfony/asset-mapper": "^6.3",
         "symfony/browser-kit": "^6.1",
         "symfony/filesystem": "^6.1",
         "symfony/finder": "^6.1",
@@ -119,5 +120,11 @@
         "web-token/jwt-signature-algorithm-ecdsa": "^3.1",
         "web-token/jwt-signature-algorithm-eddsa": "^3.1",
         "web-token/jwt-signature-algorithm-rsa": "^3.1"
+    },
+    "extra": {
+        "thanks": {
+            "name": "web-auth/webauthn-framework",
+            "url": "https://github.com/web-auth/webauthn-framework"
+        }
     }
 }

composer.json

@@ -33,14 +33,16 @@ parameters:
   ruleset:
     MetadataService:
       - 'Vendors'
-    UX: ~
+    UX:
+      - 'Vendors'
     Webauthn:
       - 'Vendors'
       - 'MetadataService'
     SymfonyBundle:
       - 'Vendors'
       - 'Webauthn'
       - 'MetadataService'
+    StimulusBundle:
   skip_violations:
     Webauthn\Bundle\Service\AuthenticatorAssertionResponseValidator:
       - Webauthn\Util\CoseSignatureFixer

deptrac.yaml

@@ -11,9 +11,9 @@ module.exports = {
         path.join(__dirname, 'tests/setup.js'),
     ],
     transform: {
-        '\\.(j|t)s$': ['babel-jest', {configFile: path.join(__dirname, './babel.config.js')}]
+        '\\.(j|t)s$': ['babel-jest', { configFile: path.join(__dirname, './babel.config.js') }]
     },
     "transformIgnorePatterns": [
         "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
     ]
-}
+};

jest.config.js

@@ -1,13 +1,13 @@
 {
     "private": true,
     "workspaces": [
-        "src/**/Resources/assets"
+        "src/*/assets"
     ],
     "scripts": {
-        "build": "yarn rollup -c",
+        "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/*/Resources/assets/src/*.ts src/*/Resources/assets/test/*.js {,src/*/}*.{json,md} --write",
+        "format": "prettier src/*/assets/src/*.ts src/*/assets/test/*.js {,src/*/}*.{json,md} --write",
         "check-lint": "yarn lint --no-fix",
         "check-format": "yarn format --no-write --check"
     },
@@ -16,21 +16,23 @@
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.15.8",
         "@babel/preset-typescript": "^7.15.8",
+        "@rollup/plugin-commonjs": "^25.0.0",
         "@rollup/plugin-node-resolve": "^15.0.0",
-        "@rollup/plugin-typescript": "^10.0.0",
+        "@rollup/plugin-typescript": "^11.0.0",
         "@symfony/stimulus-testing": "^2.0.1",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
         "@typescript-eslint/parser": "^5.2.0",
         "babel-jest": "^29.0",
+        "clean-css-cli": "^5.6.2",
         "eslint": "^8.1.0",
         "eslint-config-prettier": "^8.0.0",
-        "eslint-plugin-jest": "^27.0",
-        "jest": "^29.0",
+        "eslint-plugin-jest": "^27.0.0",
+        "jest": "^29.0.0",
         "jest-environment-jsdom": "^29.0",
         "prettier": "^2.2.1",
         "rollup": "^3.7.0",
         "tslib": "^2.3.1",
-        "typescript": "^4.4.4"
+        "typescript": "^5.0.0"
     },
     "eslintConfig": {
         "root": true,
@@ -59,7 +61,7 @@
         "overrides": [
             {
                 "files": [
-                    "src/*/Resources/assets/test/**/*.ts"
+                    "src/*/assets/test/**/*.ts"
                 ],
                 "extends": [
                     "plugin:jest/recommended"