v2.13.0

What's Changed

• feat: Add an optional disableDependencyExtraction() method by @nlemoine in #68
• SDO-923: Add check for symlink function existence by @Chrico in #71

Full Changelog: 2.12.0...2.12.1

v2.12.0

What's Changed

• Add support for manifest configuration with advanced asset options by @widoz in #66
• Remove unnecessary internal docblock from the Asset interface by @widoz in #67
• Add support for sharing data in Script Modules by @widoz in #65

Add support for manifest configuration with advanced asset options

An alternative output could be where the value associated with the handle is an object.
In such a case, the configuration given must be compliant to the AssetFactory configuration.

You can know which keys and values are supported by checking the AssetFactory types, respectively AssetConfig and AssetExtensionConfig.

Here is an example of such a manifest:

{
  "my-handle": {
    "filePath": "script.js",
    "location": [
      "frontend",
      "backend"
    ],
    "enqueue": false,
    "inFooter": true,
    "version": "1.0.0",
    "condition": "",
    "attributes": {
      "async": false,
      "defer": false
    }
  }
}

You can build the aforementioned configuration by implementing a custom generator for the webpack-manifest-plugin.

For instance, you can have the following generate callback passed to the ManifestPlugin:

new WebpackManifestPlugin({
    // ... other options
    
    generate: (seed, files) => {
       return files.reduce((manifest, { name, path }) => {
          const cleanName = name.replace(/\.js$/, '');
          switch(cleanName) {
                case 'handle-name':
                     manifest[cleanName] = {
                        filePath: path,
                        location: ['frontend'],
                        enqueue: true,
                        inFooter: true,
                        version: '1.0.0',
                        condition: '',
                        attributes: {
                            async: false,
                            defer: false
                        }
                    };
                    return manifest;
                default:
                    manifest[cleanName] = path;
                    return manifest;
            }
       }, seed);
    },
    
    // ... other options
})

Note: An alternative could be to have a json file from which retrieve the configuration for each handle.

Remove unnecessary internal docblock from the Asset interface

Keep the main Asset inteface open to third parties, this solves a bc issue in 2.11.0

Add support for sharing data in Script Modules

Scripts Modules allow sharing data from the server to the client via a filter "script_module_data_{$handle}".

Assets registered as ScriptModule can have shared data added like following:

$module = new ScriptModule('@my-plugin/main', 'assets/main.js');
$module->withData([
    'apiUrl' => get_rest_url(),
    'nonce'  => wp_create_nonce('wp_rest'),
]);

Full Changelog: 2.11.0...2.12.0

2.11.0

WebpackManifestLoader now supports ScriptModule

This release will now support Inpsyde\Asset\ScriptModule through a manifest.json file and the Inpsyde\Assets\Loader\WebpackManifestLoader. The Loader will automatically detect files ending with .mjs or .module.js and create a ScriptModule instance out of them. Additionally, we added support for @vendor/ in handles coming from manifest.json files.

Extending Assets

The second addition in this release is the support of "extending Assets", which are loaded through various resources. In most cases, when using Inpsyde\Assets\Loader\WebpackManifestLoader, we're very limited in extending the created Assets with additional data.

manifest.json

{
    "script-handle": "/public/path/script.23dafsf2138d.js",
    "style-handle": "style.23dafsf2138d.css"
}

Before:

<?php
use Inpsyde\Assets\AssetManager;
use Inpsyde\Assets\Script;
use Inpsyde\Assets\ScriptModule;
use Inpsyde\Assets\Style;
use Inpsyde\Assets\Loader\WebpackManifestLoader;

add_action(
	AssetManager::ACTION_SETUP,
	function(AssetManager $assetManager) {
	
	    $loader = new WebpackManifestLoader();
        /** @var \Inpsyde\Assets\Asset[] $assets */
        $assets = $loader->load('manifest.json');
		
		foreach($assets as $key => $asset) {
			if($asset->handle() === 'script.js' && $asset instance of Script::class){
				$asset->canEnqueue(static fn(): bool => is_user_logged_in());
				$asset->isInFooter();
				$assets[$key] = $asset;
				continue;
			}
			if($asset->handle() === 'style.js' && $asset instance of Style::class){
				$asset->canEnqueue(false);
				$asset->withInlineStyles(['before' => ':root { --black: #000; }']);
				$assets[$key] = $asset;
				continue;
			}
		}

		$assetManager->register(...$assets);
	}
);

After:

<?php
use Inpsyde\Assets\AssetManager;
use Inpsyde\Assets\Script;
use Inpsyde\Assets\ScriptModule;
use Inpsyde\Assets\Style;
use Inpsyde\Assets\Loader\WebpackManifestLoader;

add_action(
	AssetManager::ACTION_SETUP,
	function(AssetManager $assetManager) {
		$assetManager->extendAsset(
			Style::class, 
			'style.css',
			[
				'inline' => ['before' => ':root { --black: #000; }']
				'enqueue' => false,
			]
		);
		$assetManager->extendAsset(
			Script::class,
			'script.js',
			[
				'enqueue' => static fn(): bool => is_user_logged_in(),
				'inFooter' => true,
			]
		);
	
		$loader = new WebpackManifestLoader();
		/** @var \Inpsyde\Assets\Asset[] $assets */
		$assets = $loader->load('manifest.json');

		$assetManager->register(...$assets);
	}
);

The AssetManager::extendAsset() method will now automatically extend a registered Asset before it is processed.

---

What's Changed

• New "extend asset" feature by @Chrico in #63
• Improves consistency with extendAsset() by @Chrico in #64
• WebPack Loader Script Modules Support by @widoz in #62

Full Changelog: 2.10.0...2.11.0

2.10.0

What's Changed

• AT-716: Update Inpsyde in code to Syde (license, copyright, text) by @overclokk in #57
• PHP 8.4: Implicitly marking parameter as nullable is deprecated by @Soean in #56
• Feature/phpcs and phpstan by @Chrico in #58
• Fix Asset::BLOCK_ASSETS hook in documentation by @tyrann0us in #61
• feat: Add support for Script Modules by @hmouhtar in #60

New Contributors

• @overclokk made their first contribution in #57
• @Soean made their first contribution in #56
• @tyrann0us made their first contribution in #61
• @hmouhtar made their first contribution in #60

Full Changelog: 2.9.0...2.10.0

2.9.0

Important

As part of the PHP 8.2 compatibility improvements (#52), the AttributesOutputFilter class was changed to use the WP_HTML_Tag_Processor class instead of DOMDocument under the hood. WP_HTML_Tag_Processor was introduced in WordPress 6.2, so packages using AttributesOutputFilter MUST use WordPress 6.2 or newer.

What's Changed

• Update getting-started.md by @sovetski in #50
• test: fix library directory detection by @shvlv in #51
• fix: mb_convert_encoding PHP 8.2 deprecation by @shvlv in #52

New Contributors

• @sovetski made their first contribution in #50
• @shvlv made their first contribution in #51

Full Changelog: 2.8.3...2.9.0

2.8.3

This release is just a QoL release with some improvements on Github Workflows and adding PHP 8.1 and PHP 8.2 into testing routine.

• ScriptHandler // allow $path to be null for wp_set_script_translations().
• composer.json // make use of worpdress-stubs for pslam.
• github/workflows // add support for PHP 8.1 and 8.2. Make use of inpsyde/reusable-workflows.
• phpunit.xml.dist // upgrade config.
• Run CI on PR-s
• Add explicit "WordPress plugin" to README

2.8.2

• Deprecated Script::useDependencyExtractionPlugin().
• Improved Script::resolveDependencyExtractionPlugin() by setting earlier the "loaded" state to avoid calling logic multiple times.
• docs/assets.md // update documentation.

2.8.1

Improvements

• Change AssetHookResolver::$context visibility to protected to make the class extendable.

Fixes

• Psalm and PHPCS.

---

props @nlemoine

2.8

New feature "custom CSS properties (vars)"

inpsyde/assets now supports via Inpsyde\Assets\Style() to register custom CSS properties (vars).

The new API looks like following:

use Inpsyde\Assets\Style;

$style = new Style('foo', 'www.example.com/style.css');

// to a specific selector/element.
$style->withCssVars(
	'.some-element', 
	['white' => '#fff', 'black' => '000']
);
// or to :root
$style->withCssVars(
	':root', 
	['grey' => '#ddd']
);

The StyleHandler will automatically check if there are CSS vars available via Style::cssVars() and add them via wp_add_inline_style() to your handle.

Registered CSS vars will be automatically prefixed with -- if not present. The example from above will generate following output (prettified for the sake of readability):

<style id="foo-inline-css">
.some-element {
	--white:#fff;
	--black:#000;
}
:root {
	--grey:#ddd;
}
</style>

2.7

New Features

Asset now supports registration/enqueuing styles and scripts in wp-activate.php via Asset::ACTIVATE. Also the default Asset::location() was changed to Asset::FRONTEND | Asset::ACTIVATE.

Props @websupporter & @gmazzap

---

Documentation

inpsyde/assets now uses Github Pages for documentation. Check out the documentation here: https://inpsyde.github.io/assets/

You can also checkout our Inpsyde Jekyll Theme - which is based on Just the docs here: https://github.com/inpsyde/jekyll-inpsyde-theme

Thanks to @tangrufus and @judy-inpsyde for the awesome work! 💪