Manipulator: Add JSON parse support

[GeoSot]

A proposal trying to solve the JSON data-attributes parsing issue.

Merging this PR, components will be able to parse JSON string values from element data attributes as configuration values.
Edit: As an experimental add on, component elements can have a data-bs-config attribute that can house all the component config as JSON string. In case an element has data-bs-config='{"foo":123}' and data-bs-foo="456" attributes, final foo value will be 456, as the separate data attributes will override values given on data-bs-config

So the final config for each components will be a result of:

• Defaults
• data-bs-config
• rest data attributes
• configuration object given during instance initialization

I would appreciate any thoughts or doubts on it

Refs #34259, refs #34321, refs #35880
closes #34465

TODO:

• Document it

[XhmikosR]

@GeoSot shouldn't this remove bsConfig too?

[GeoSot]

yes, I want to filter bsConfig out of given results . My purpose is to can be accessed only on purpose and not by massive get

[XhmikosR]

I'm not sure I understand. Right now, bsConfig is not normalized, right? Shouldn't it be normalized here?

[GeoSot]

here (getDataAttributes) is omitted, on purpose (of mass getting).

We may need to think of normalization only in config.js usage, but I didn't do it, as the normalization of the json string should have be done already from the developer. We after all validate the final object.

(Check the tests please too. I think they cover your thoughts on line 80)

[arcanisgk]

Hi, I'm new to this...why did the test fail due to the disconnected test?

[arcanisgk]

I must remind you that in html the values of an attribute are enclosed in double quotes:
this semantically or in html code it is invalid:
data-bs-config='{"foo":123}'

the solution would be something like this:

• php to generate the html (any server side mus implement this behavior):
  <div data-bs-config="<?php echo htmlspecialchars(json_encode($dataParams), ENT_QUOTES, 'UTF-8'); ?>">

• javascript is the same:
  const bsKeys = Object.keys(element.dataset).filter(key => key.startsWith('bs') && !key.startsWith('bsConfig'))

[GeoSot]

Hi, I'm new to this...why did the test fail due to the disconnected test?

If anyone could enlighten me too, I would be much happier. 😕

[mdo]

@GeoSot @XhmikosR Is this okay to merge?

[GeoSot]

It's ok by me. XhmikosR may have the last word

[Frenzie]

What if you want your string that looks like JSON to be treated like a string?

Edit:
PS For anybody else who's hit by this change, here's a quick workaround:

const content = popoverTriggerEl.getAttribute('data-bs-content');
if (content.startsWith('{')) {
  popoverTriggerEl.setAttribute('data-bs-content', content.replace('{', '{'));
}

[Frenzie]

For example, taking from the manual https://getbootstrap.com/docs/5.2/components/popovers/#live-demo:

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content='{"id":1234, "text":"This has worked for over a decade."}'>Click to toggle popover</button>