JSON in data attributes have double quotes converted to " #45
Description
Details
Traced this issue down to attrs and this area in particular;
let attrValue = object[key];
if (replaceQuote) {
attrValue = object[key].replace(/"/g, '"');
}
attr += ' ' + key + '="' + attrValue + '"';Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" data-config="{
"title": "This is a test"
}"></div>
<script src="/parcel-test.e31bb0bc.js"></script>
</body>
</html>Reproduction (Code)
package.json
{
"name": "parcel-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "parcel index.html --out-dir build"
},
"author": "",
"license": "ISC",
"dependencies": {
"parcel": "^1.12.4",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}index.js
import React from 'react';
import ReactDOM from 'react-dom';
const root = document.getElementById('app');
const config = JSON.parse(root.dataset.config);
const App = ({config}) => {
return <h1>{config.title}</h1>
}
ReactDOM.render(<App config={config} />, root);index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" data-config='{
"title": "This is a test"
}'></div>
<script src="./index.js"></script>
</body>
</html>Run the example
$ npm run watch