Skip to content

[main] adds ref: namespace #445

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[main] adds ref: namespace #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion 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 @@ -547,7 +547,7 @@ function transformAttributes(path, results) {
(reservedNameSpace ||
!(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression)))
) {
if (key === "ref") {
if (key === "ref" || key.slice(0, 4) === "ref:") {
// Normalize expressions for non-null and type-as
while (
t.isTSNonNullExpression(value.expression) ||
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-jsx-dom-expressions/src/shared/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function transformComponent(path) {
key = id.name;
if (hasChildren && key === "children") return;
if (t.isJSXExpressionContainer(value))
if (key === "ref") {
if (key === "ref" || (key && key.slice(0, 4) === 'ref:')) {
if (config.generate === "ssr") return;
// Normalize expressions for non-null and type-as
while (
Expand Down
5 changes: 3 additions & 2 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 @@ -9,10 +9,11 @@ export const reservedNameSpaces = new Set([
"use",
"prop",
"attr",
"bool"
"bool",
"ref"
]);

export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool"]);
export const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool", "ref"]);

export function getConfig(path) {
return path.hub.file.metadata.config;
Expand Down
2 changes: 2 additions & 0 deletions 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 @@ -302,6 +302,7 @@ function transformAttributes(path, results, info) {
) {
if (
key === "ref" ||
key.startsWith("ref:") ||
key.startsWith("use:") ||
key.startsWith("prop:") ||
key.startsWith("on")
Expand Down Expand Up @@ -555,6 +556,7 @@ function createElement(path, { topLevel, hydratable }) {
if (hasChildren && key === "children") return;
if (
key === "ref" ||
key.startsWith("ref:") ||
key.startsWith("use:") ||
key.startsWith("prop:") ||
key.startsWith("on")
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-jsx-dom-expressions/src/universal/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ function transformAttributes(path, results) {
node.value = value = t.jsxExpressionContainer(value || t.jsxEmptyExpression());
}
if (t.isJSXExpressionContainer(value)) {
if (key === "ref") {
if (key === "ref" || key.slice(0, 4) === "ref:") {
// Normalize expressions for non-null and type-as
while (
t.isTSNonNullExpression(value.expression) ||
Expand Down
12 changes: 11 additions & 1 deletion ...-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,4 +275,14 @@ const template90 = <video playsinline={true}/>
const template91 = <video playsinline={false}/>
const template92 = <video playsInline={value}/>
const template93 = <video playsInline={true}/>
const template94 = <video playsInline={false}/>
const template94 = <video playsInline={false}/>

const template95 = <video ref:bla={(el1)=>console.log(el1)} ref:view={(el2)=>console.log(el2)}/>
const template96 = <video ref={(el1)=>console.log(el1)} ref={(el2)=>console.log(el2)}/>

let ref1
let ref2
const template97 = <video ref:bla={ref1} ref:view={ref2}/>
let ref3
let ref4
const template98 = <video ref={ref3} ref={ref4}/>
32 changes: 32 additions & 0 deletions ...lugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,4 +640,36 @@ const template94 = (() => {
_el$112.playsInline = false;
return _el$112;
})();
const template95 = (() => {
var _el$113 = _tmpl$56();
_$use(el2 => console.log(el2), _el$113);
_$use(el1 => console.log(el1), _el$113);
return _el$113;
})();
const template96 = (() => {
var _el$114 = _tmpl$56();
_$use(el2 => console.log(el2), _el$114);
_$use(el1 => console.log(el1), _el$114);
return _el$114;
})();
let ref1;
let ref2;
const template97 = (() => {
var _el$115 = _tmpl$56();
var _ref$12 = ref2;
typeof _ref$12 === "function" ? _$use(_ref$12, _el$115) : (ref2 = _el$115);
var _ref$11 = ref1;
typeof _ref$11 === "function" ? _$use(_ref$11, _el$115) : (ref1 = _el$115);
return _el$115;
})();
let ref3;
let ref4;
const template98 = (() => {
var _el$116 = _tmpl$56();
var _ref$14 = ref4;
typeof _ref$14 === "function" ? _$use(_ref$14, _el$116) : (ref4 = _el$116);
var _ref$13 = ref3;
typeof _ref$13 === "function" ? _$use(_ref$13, _el$116) : (ref3 = _el$116);
return _el$116;
})();
_$delegateEvents(["click", "input"]);
2 changes: 1 addition & 1 deletion packages/dom-expressions/src/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
if (prop === "style") return style(node, value, prev);
if (prop === "classList") return classList(node, value, prev);
if (value === prev) return prev;
if (prop === "ref") {
if (prop === "ref" || prop.slice(0, 4) === "ref:") {
if (!skipRef) value(node);
} else if (prop.slice(0, 3) === "on:") {
const e = prop.slice(3);
Expand Down
1 change: 1 addition & 0 deletions packages/dom-expressions/src/jsx-h.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export namespace JSX {

interface IntrinsicAttributes {
ref?: unknown | ((e: unknown) => void) | undefined;
[attr: `ref:${string}`]: unknown | ((e: unknown) => void) | undefined;
}
interface CustomAttributes<T> {
ref?: T | ((el: T) => void) | undefined;
Expand Down
1 change: 1 addition & 0 deletions packages/dom-expressions/src/jsx.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export namespace JSX {

interface IntrinsicAttributes {
ref?: unknown | ((e: unknown) => void) | undefined;
[attr: `ref:${string}`]: unknown | ((e: unknown) => void) | undefined;
}
interface CustomAttributes<T> {
ref?: T | ((el: T) => void) | undefined;
Expand Down
2 changes: 2 additions & 0 deletions packages/dom-expressions/src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,7 @@ export function ssrElement(tag, props, children, needsId) {
} else if (
value == undefined ||
prop === "ref" ||
prop.slice(0, 4) === "ref:" ||
prop.slice(0, 2) === "on" ||
prop.slice(0, 5) === "prop:"
) {
Expand Down Expand Up @@ -681,6 +682,7 @@ export function ssrSpread(props, isSVG, skipChildren) {
} else if (
value == undefined ||
prop === "ref" ||
prop.slice(0, 4) === "ref:" ||
prop.slice(0, 2) === "on" ||
prop.slice(0, 5) === "prop:"
) {
Expand Down
2 changes: 1 addition & 1 deletion packages/dom-expressions/src/universal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ export function createRenderer({
effect(() => props.ref && props.ref(node));
effect(() => {
for (const prop in props) {
if (prop === "children" || prop === "ref") continue;
if (prop === "children" || prop === "ref" || prop.slice(0, 4) === "ref:") continue;
const value = props[prop];
if (value === prevProps[prop]) continue;
setProperty(node, prop, value, prevProps[prop]);
Expand Down
2 changes: 1 addition & 1 deletion packages/hyper-dom-expressions/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function createHyperScript(r: Runtime): HyperScript {
Object.defineProperty(l,"class",{...d[k],value})
classes = []
}
if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
if (k !== "ref" && k.slice(0, 4) !== 'ref:' && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
r.dynamicProperty(l, k);
dynamic = true;
} else if (d[k].get) dynamic = true;
Expand Down
4 changes: 2 additions & 2 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 @@ -230,7 +230,7 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
})`
);
}
} else if (name === "ref") {
} else if (name === "ref" || name.slice(0, 4) === "ref:") {
options.exprs.push(`exprs[${options.counter++}](${tag})`);
} else {
const childOptions = Object.assign({}, options, { exprs: [] }),
Expand Down Expand Up @@ -446,7 +446,7 @@ export function createHTML(r: Runtime, { delegateEvents = true, functionBuilder
if (value.includes("###")) {
let count = options.counter++;
current += `${name}: ${
name !== "ref" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""
name !== "ref" && name.slice(0, 4) !== "ref:" ? `typeof exprs[${count}] === "function" ? exprs[${count}]() : ` : ""
}exprs[${count}],`;
} else if (name === "###") {
if (current.length) {
Expand Down
Loading