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.

Sign up for GitHub

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

Jump to bottom

JSON in data attributes have double quotes converted to " #45

Open
graemelambert opened this issue Nov 14, 2020 · 1 comment
Open

JSON in data attributes have double quotes converted to " #45

graemelambert opened this issue Nov 14, 2020 · 1 comment

Comments

@graemelambert
Copy link

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="{
        &quot;title&quot;: &quot;This is a test&quot;
    }"></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
@graemelambert graemelambert mentioned this issue Nov 14, 2020
Closed
6 tasks
@Scrum
Copy link
Member

Scrum commented Nov 16, 2020

Hi, thanks for your feedback.

There is an option that prohibits overwriting quotes https://github.com/posthtml/posthtml-render#replacequote she is just about your case

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Added support for JSON strings in data attributes graemelambert/posthtml-render
2 participants
@Scrum @graemelambert