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

attributes/properties transformation & custom elements defaulting to attributes #373

Merged
merged 2 commits into from
Feb 5, 2025
Merged

attributes/properties transformation & custom elements defaulting to attributes #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bdf8bf7
1. do not transform case of attribute/properties. 2. default to attri…
titoBouzout Oct 21, 2024
ec18f11
update tests
titoBouzout Oct 22, 2024
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
8 changes: 3 additions & 5 deletions packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
registerImportMethod,
filterChildren,
toEventName,
toPropertyName,
checkLength,
getStaticExpression,
reservedNameSpaces,
Expand Down Expand Up @@ -238,8 +237,7 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,
const isChildProp = ChildProperties.has(name);
const isProp = Properties.has(name);
const alias = getPropAlias(name, tagName.toUpperCase());
if (namespace !== "attr" && (isChildProp || (!isSVG && isProp) || isCE || namespace === "prop")) {
if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
if (namespace !== "attr" && (isChildProp || (!isSVG && isProp) || namespace === "prop")) {
if (config.hydratable && namespace !== "prop") {
return t.callExpression(registerImportMethod(path, "setProperty"), [elem, t.stringLiteral(name), value]);
}
Expand All @@ -252,7 +250,7 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,

let isNameSpaced = name.indexOf(":") > -1;
name = Aliases[name] || name;
!isSVG && (name = name.toLowerCase());
/*!isSVG && (name = name.toLowerCase());*/
const ns = isNameSpaced && SVGNamespace[name.split(":")[0]];
if (ns) {
return t.callExpression(
Expand Down Expand Up @@ -797,7 +795,7 @@ function transformAttributes(path, results) {
t.expressionStatement(setAttr(attribute, elem, key, value, { isSVG, isCE, tagName }))
);
} else {
!isSVG && (key = key.toLowerCase());
/*!isSVG && (key = key.toLowerCase());*/
results.template += `${needsSpacing ? ' ' : ''}${key}`;
// https://github.com/solidjs/solid/issues/2338
// results.templateWithClosingTags += `${needsSpacing ? ' ' : ''}${key}`;
Expand Down
8 changes: 0 additions & 8 deletions packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,14 +224,6 @@ export function toEventName(name) {
return name.slice(2).toLowerCase();
}

export function toAttributeName(name) {
return name.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`);
}

export function toPropertyName(name) {
return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
}

export function wrappedByText(list, startIndex) {
let index = startIndex,
wrapped;
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export function transformElement(path, info) {

function toAttribute(key, isSVG) {
key = Aliases[key] || key;
!isSVG && (key = key.toLowerCase());
/*!isSVG && (key = key.toLowerCase());*/
return key;
}

Expand Down
8 changes: 4 additions & 4 deletions packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/customElements/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<my-element>`, true, false),
);
const template = (() => {
var _el$ = _tmpl$();
_el$.someAttr = name;
_el$.notprop = data;
_$setAttribute(_el$, "some-attr", name);
_$setAttribute(_el$, "notProp", data);
_$setAttribute(_el$, "my-attr", data);
_el$.someProp = data;
_el$._$owner = _$getOwner();
Expand All @@ -53,8 +53,8 @@ const template2 = (() => {
_v$2 = state.data,
_v$3 = state.data,
_v$4 = state.data;
_v$ !== _p$.e && (_el$2.someAttr = _p$.e = _v$);
_v$2 !== _p$.t && (_el$2.notprop = _p$.t = _v$2);
_v$ !== _p$.e && _$setAttribute(_el$2, "some-attr", (_p$.e = _v$));
_v$2 !== _p$.t && _$setAttribute(_el$2, "notProp", (_p$.t = _v$2));
_v$3 !== _p$.a && _$setAttribute(_el$2, "my-attr", (_p$.a = _v$3));
_v$4 !== _p$.o && (_el$2.someProp = _p$.o = _v$4);
return _p$;
Expand Down
9 changes: 4 additions & 5 deletions ...abel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/customElements/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@ import { effect as _$effect } from "r-dom";
import { getNextElement as _$getNextElement } from "r-dom";
import { getOwner as _$getOwner } from "r-dom";
import { setAttribute as _$setAttribute } from "r-dom";
import { setProperty as _$setProperty } from "r-dom";
var _tmpl$ = /*#__PURE__*/ _$template(`<my-element>`, true, false),
_tmpl$2 = /*#__PURE__*/ _$template(`<my-element><header slot=head>Title`, true, false),
_tmpl$3 = /*#__PURE__*/ _$template(`<slot name=head>`),
_tmpl$4 = /*#__PURE__*/ _$template(`<a is=my-element>`, true, false);
const template = (() => {
var _el$ = _$getNextElement(_tmpl$);
_$setProperty(_el$, "someAttr", name);
_$setProperty(_el$, "notprop", data);
_$setAttribute(_el$, "some-attr", name);
_$setAttribute(_el$, "notProp", data);
_$setAttribute(_el$, "my-attr", data);
_el$.someProp = data;
_el$._$owner = _$getOwner();
Expand All @@ -26,8 +25,8 @@ const template2 = (() => {
_v$2 = state.data,
_v$3 = state.data,
_v$4 = state.data;
_v$ !== _p$.e && _$setProperty(_el$2, "someAttr", (_p$.e = _v$));
_v$2 !== _p$.t && _$setProperty(_el$2, "notprop", (_p$.t = _v$2));
_v$ !== _p$.e && _$setAttribute(_el$2, "some-attr", (_p$.e = _v$));
_v$2 !== _p$.t && _$setAttribute(_el$2, "notProp", (_p$.t = _v$2));
_v$3 !== _p$.a && _$setAttribute(_el$2, "my-attr", (_p$.a = _v$3));
_v$4 !== _p$.o && (_el$2.someProp = _p$.o = _v$4);
return _p$;
Expand Down
8 changes: 4 additions & 4 deletions packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/customElements/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<my-element>`, true, false),
_tmpl$4 = /*#__PURE__*/ _$template(`<a is=my-element>`, true, false);
const template = (() => {
var _el$ = _tmpl$();
_el$.someAttr = name;
_el$.notprop = data;
_$setAttribute(_el$, "some-attr", name);
_$setAttribute(_el$, "notProp", data);
_$setAttribute(_el$, "my-attr", data);
_el$.someProp = data;
_el$._$owner = _$getOwner();
Expand All @@ -24,8 +24,8 @@ const template2 = (() => {
_v$2 = state.data,
_v$3 = state.data,
_v$4 = state.data;
_v$ !== _p$.e && (_el$2.someAttr = _p$.e = _v$);
_v$2 !== _p$.t && (_el$2.notprop = _p$.t = _v$2);
_v$ !== _p$.e && _$setAttribute(_el$2, "some-attr", (_p$.e = _v$));
_v$2 !== _p$.t && _$setAttribute(_el$2, "notProp", (_p$.t = _v$2));
_v$3 !== _p$.a && _$setAttribute(_el$2, "my-attr", (_p$.a = _v$3));
_v$4 !== _p$.o && (_el$2.someProp = _p$.o = _v$4);
return _p$;
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/hybrid/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Child = props => {
"element",
(() => {
var _el$10 = _tmpl$4();
_$effect(() => _$setAttribute(_el$10, "backgroundcolor", s() ? "red" : "green"));
_$effect(() => _$setAttribute(_el$10, "backgroundColor", s() ? "red" : "green"));
return _el$10;
})()
)
Expand Down Expand Up @@ -94,7 +94,7 @@ const Child = props => {
(() => {
var _el$13 = _tmpl$4();
_$effect(() =>
_$setAttribute(_el$13, "backgroundcolor", s() ? "red" : "green")
_$setAttribute(_el$13, "backgroundColor", s() ? "red" : "green")
);
return _el$13;
})()
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/customElements/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ var _tmpl$ = ["<my-element", "></my-element>"],
const template = _$ssr(
_tmpl$,
_$ssrAttribute("some-attr", _$escape(name, true), false) +
_$ssrAttribute("notprop", _$escape(data, true), false) +
_$ssrAttribute("notProp", _$escape(data, true), false) +
_$ssrAttribute("my-attr", _$escape(data, true), false)
);
const template2 = _$ssr(
_tmpl$,
_$ssrAttribute("some-attr", _$escape(state.name, true), false) +
_$ssrAttribute("notprop", _$escape(state.data, true), false) +
_$ssrAttribute("notProp", _$escape(state.data, true), false) +
_$ssrAttribute("my-attr", _$escape(state.data, true), false)
);
const template3 = _$ssr(_tmpl$2);
Expand Down
4 changes: 2 additions & 2 deletions ...abel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/customElements/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ const template = _$ssr(
_tmpl$,
_$ssrHydrationKey() +
_$ssrAttribute("some-attr", _$escape(name, true), false) +
_$ssrAttribute("notprop", _$escape(data, true), false) +
_$ssrAttribute("notProp", _$escape(data, true), false) +
_$ssrAttribute("my-attr", _$escape(data, true), false)
);
const template2 = _$ssr(
_tmpl$,
_$ssrHydrationKey() +
_$ssrAttribute("some-attr", _$escape(state.name, true), false) +
_$ssrAttribute("notprop", _$escape(state.data, true), false) +
_$ssrAttribute("notProp", _$escape(state.data, true), false) +
_$ssrAttribute("my-attr", _$escape(state.data, true), false)
);
const template3 = _$ssr(_tmpl$2, _$ssrHydrationKey());
Expand Down
31 changes: 15 additions & 16 deletions packages/dom-expressions/src/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef
for (const prop in prevProps) {
if (!(prop in props)) {
if (prop === "children") continue;
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props);
prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
}
}
for (const prop in props) {
Expand All @@ -228,7 +228,7 @@ export function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef
continue;
}
const value = props[prop];
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props);
prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
}
}

Expand Down Expand Up @@ -260,7 +260,9 @@ export function getNextElement(template) {
if (!hydrating || !(node = sharedConfig.registry.get((key = getHydrationKey())))) {
if ("_DX_DEV_" && hydrating) {
sharedConfig.done = true;
throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
throw new Error(
`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`
);
}
return template();
}
Expand Down Expand Up @@ -321,18 +323,14 @@ function isHydrating(node) {
return !!sharedConfig.context && !sharedConfig.done && (!node || node.isConnected);
}

function toPropertyName(name) {
return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
}

function toggleClassKey(node, key, value) {
const classNames = key.trim().split(/\s+/);
for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
node.classList.toggle(classNames[i], value);
}

function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
let isCE, isProp, isChildProp, propAlias, forceProp;
function assignProp(node, prop, value, prev, isSVG, skipRef) {
let propAlias, forceProp;
if (prop === "style") return style(node, value, prev);
if (prop === "classList") return classList(node, value, prev);
if (value === prev) return prev;
Expand Down Expand Up @@ -363,17 +361,14 @@ function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
setBoolAttribute(node, prop.slice(5), value);
} else if (
(forceProp = prop.slice(0, 5) === "prop:") ||
(isChildProp = ChildProperties.has(prop)) ||
(!isSVG &&
((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
(isCE = (node.nodeName.includes("-") || 'is' in props))
ChildProperties.has(prop) ||
(!isSVG && (propAlias = getPropAlias(prop, node.tagName))) ||
Properties.has(prop)
) {
if (forceProp) {
prop = prop.slice(5);
isProp = true;
} else if (isHydrating(node)) return value;
if (prop === "class" || prop === "className") className(node, value);
else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
else node[propAlias || prop] = value;
} else {
const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
Expand Down Expand Up @@ -404,7 +399,11 @@ function eventHandler(e) {
data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
if (e.cancelBubble) return;
}
node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
node.host &&
typeof node.host !== "string" &&
!node.host._$host &&
node.contains(e.target) &&
retarget(node.host);
return true;
};
const walkUpTree = () => {
Expand Down
7 changes: 1 addition & 6 deletions packages/lit-dom-expressions/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,6 @@ function fullClosing($0: string, $1: string, $2: string) {
return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
}

function toPropertyName(name: string) {
return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
}

function parseDirective(name: string, value: string, tag: string, options: Options) {
if (name === 'use:###' && value === '###') {
const count = options.counter++;
Expand Down Expand Up @@ -194,9 +190,8 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
options.exprs.push(`r.classList(${tag},${expr},${prev})`);
} else if (
namespace !== "attr" &&
(isChildProp || (!isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp)) || isCE || namespace === "prop")
(isChildProp || (!isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp)) || namespace === "prop")
) {
if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || name} = ${expr}`);
} else {
const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
Expand Down
Loading