Skip to content

Add preserveHtmlProp option #6

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

Closed
wants to merge 4 commits into from
Closed

Add preserveHtmlProp option #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1fddfc1
Add `jsxStyle` option
bluwy Feb 1, 2023
382de0c
Fix test error
bluwy Feb 1, 2023
f466b17
Revert identifier check
bluwy Feb 1, 2023
fc10ba3
Refactor as `preserveHtmlProp` option
bluwy Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions lib/handlers/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,10 @@ export function element(node, state) {
continue
}

prop = info.space
? hastToReact[info.property] || info.property
: info.attribute
prop =
!state.preserveHtmlProp && info.space
? hastToReact[info.property] || info.property
: info.attribute

if (Array.isArray(value)) {
// Accept `array`.
Expand Down
8 changes: 8 additions & 0 deletions lib/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,17 @@
* it.
* @property {Record<string, Handle | null | undefined> | null | undefined} [handlers={}]
* Custom handlers.
* @property {boolean} [preserveHtmlProp=false]
* Whether to produce JSX props using HTML-style naming, e.g. `xlink:href`
* instead of `xlinkHref`.
*
* @typedef State
* Info passed around about the current state.
* @property {Schema} schema
* Current schema.
* @property {boolean} preserveHtmlProp
* Whether to produce JSX props using HTML-style naming, e.g. `xlink:href`
* instead of `xlinkHref`.
* @property {Array<Comment>} comments
* List of estree comments.
* @property {Array<Directive | Statement | ModuleDeclaration>} esm
Expand Down Expand Up @@ -117,6 +123,7 @@ export function createState(options) {
return {
// Current space.
schema: options.space === 'svg' ? svg : html,
preserveHtmlProp: Boolean(options.preserveHtmlProp),
// Results.
comments: [],
esm: [],
Expand Down Expand Up @@ -220,6 +227,7 @@ function all(parent) {
* Nothing.
*/
function inherit(from, to) {
// @ts-expect-error Test data field only
const left = from.data
/** @type {Record<string, unknown> | undefined} */
let right
Expand Down
5 changes: 5 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,11 @@ Object mapping node types to functions handling the corresponding nodes
Merged into the defaults.
See [`Handle`][handle].

###### `preserveHtmlProp`

Whether to produce JSX props using HTML-style naming, e.g. `xlink:href` instead
of `xlinkHref` (`boolean`, default: `false`).

### `Space`

Namespace (TypeScript type).
Expand Down
14 changes: 9 additions & 5 deletions test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,12 @@ test('toEstree', () => {
'should support SVG w/ an explicit `space`'
)

assert.deepEqual(
toEstree(s('x', {xlinkHref: '#test'}), {preserveHtmlProp: true}),
acornClean(acornParse('<x {...{"xlink:href": "#test"}}/>')),
'should support SVG w/ namespaced attribute'
)

assert.deepEqual(
toEstree({
type: 'element',
Expand Down Expand Up @@ -840,7 +846,6 @@ test('integration (micromark-extension-mdxjs, mdast-util-mdx)', () => {

const hast = toHast(mdast, {passThrough})

// @ts-expect-error: hush.
if (clean && hast) visit(hast, passThrough, acornClean)

// @ts-expect-error: it’s a node.
Expand Down Expand Up @@ -923,9 +928,9 @@ test('integration (@babel/plugin-transform-react-jsx, react)', () => {
assert.deepEqual(
transform('# Hi <Icon /> {"!"}', {runtime: 'automatic'}),
[
'import { Fragment as _Fragment } from "react/jsx-runtime";',
'import { jsx as _jsx } from "react/jsx-runtime";',
'import { jsxs as _jsxs } from "react/jsx-runtime";',
'import { Fragment as _Fragment } from "react/jsx-runtime";',
'/*#__PURE__*/_jsx(_Fragment, {',
' children: /*#__PURE__*/_jsxs("h1", {',
' children: ["Hi ", /*#__PURE__*/_jsx(Icon, {}), " ", "!"]',
Expand All @@ -937,7 +942,7 @@ test('integration (@babel/plugin-transform-react-jsx, react)', () => {

assert.deepEqual(
transform('# Hi <Icon /> {"!"}', {pragma: 'a', pragmaFrag: 'b'}),
'a("b", null, a("h1", null, "Hi ", a(Icon, null), " ", "!"));',
'a(b, null, a("h1", null, "Hi ", a(Icon, null), " ", "!"));',
'should integrate w/ `@babel/plugin-transform-react-jsx` (pragma, pragmaFrag)'
)

Expand All @@ -948,9 +953,9 @@ test('integration (@babel/plugin-transform-react-jsx, react)', () => {
),
[
'import /* a */a from "b";',
'import { Fragment as _Fragment } from "react/jsx-runtime";',
'import { jsx as _jsx } from "react/jsx-runtime";',
'import { jsxs as _jsxs } from "react/jsx-runtime";',
'import { Fragment as _Fragment } from "react/jsx-runtime";',
'/*#__PURE__*/_jsx(_Fragment, {',
' children: /*#__PURE__*/_jsxs("h1", {',
' children: [" ", /*#__PURE__*/_jsx("x", {',
Expand Down Expand Up @@ -1074,7 +1079,6 @@ test('integration (@vue/babel-plugin-jsx, Vue 3)', () => {
function acornClean(node) {
node.sourceType = 'module'

// @ts-expect-error acorn
walk(node, {enter})

return JSON.parse(JSON.stringify(node))
Expand Down