Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support namespaced objects in localize #5

Merged
merged 1 commit into from
Apr 23, 2024
Merged

Conversation

lucatume
Copy link
Contributor

This PR adds the possibility, in the Assets::add_localize_script method, to specify object names in dot notation and have them printed with Object.assign instance.

As an example, this PHP code:

<?php
use Boomshakalaka\StellarWP\Assets\Asset;

Asset::add( 'my-first-script', 'js/first-script.js' )
	->add_localize_script(
		'acme.project.firstScriptData',
		[
			'animal' => 'cat',
			'color'  => 'orange',
		]
	)
	->register();

Asset::add( 'my-second-script', 'js/second-script.js' )
	->add_localize_script(
		'acme.project.secondScriptData',
		[
			'animal' => 'dog',
			'color'  => 'green',
		]
	)
	->register();

Asset::add( 'my-second-script-mod', 'js/second-script-mod.js' )
	->add_localize_script(
		'acme.project.secondScriptData',
		[
			'animal' => 'horse'
		]
	)
	->register();

Would print this on the page:

<script id="my-first-script-ns-extra">
	window.acme = window.acme || {};
	window.acme.project = window.acme.project || {};
	window.acme.project.firstScriptData = Object.assign(
		window.acme.project.firstScriptData || {},
		{ "animal": "cat", "color": "orange" }
	);
</script>
<script src="https://someplace.com/wp-content/plugins/my-plugins/js/first-script.js" id="my-first-script-js"></script>
<script id="my-second-script-ns-extra">
	window.acme = window.acme || {};
	window.acme.project = window.acme.project || {};
	window.acme.project.secondScriptData = Object.assign(
		window.acme.project.secondScriptData || {},
		{ "animal": "dog", "color": "green" }
	);
</script>
<script src="https://someplace.com/wp-content/plugins/my-plugins/js/second-script.js" id="my-second-script-js"></script>
<script id="my-second-script-mod-ns-extra">
	window.acme = window.acme || {};
	window.acme.project = window.acme.project || {};
	window.acme.project.secondScriptData = Object.assign(
		window.acme.project.secondScriptData || {},
		{ "animal": "horse" }
	);
</script>
<script src="https://someplace.com/wp-content/plugins/my-plugins/js/second-script-mod.js" id="my-second-script-mod-js"></script>

This means that, all scripts registered on the page could, potentially, share a root namespace without having to resort to filtering or similar constructs.

@lucatume lucatume self-assigned this Apr 22, 2024
@lucatume lucatume requested review from bordoni and borkweb and removed request for bordoni April 22, 2024 17:38
@lucatume lucatume force-pushed the feat/namespaced-data branch 2 times, most recently from 9d7d290 to 7340e8e Compare April 22, 2024 17:55
@lucatume lucatume marked this pull request as ready for review April 22, 2024 18:36
@lucatume
Copy link
Contributor Author

I've updated and added the composer.lock file and the build scripts to lock the WordPress version and avoid inconsistencies.

Copy link
Member

@borkweb borkweb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome change! This will make localizing scripts soooo much nicer. ⛱️

@lucatume lucatume merged commit 93c62e4 into main Apr 23, 2024
3 checks passed
@lucatume lucatume deleted the feat/namespaced-data branch April 23, 2024 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants