How to use dom-expressions - 7 common examples
To help you get started, we’ve selected a few dom-expressions examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ryansolid / mobx-jsx / src / runtime.js View on Github 
wrap(() => {
for (const prop in props) {
if (prop === "children") continue;
const value = props[prop];
if (value === prevProps[prop]) continue;
if (prop === "style") {
Object.assign(node.style, value);
} else if (prop === "classList") {
classList(node, value, prevProps[prop]);
// really only for forwarding from Components, can't forward normal ref
} else if (prop === "ref" || prop === "forwardRef") {
value(node);
} else if (prop.slice(0, 2) === "on") {
const lc = prop.toLowerCase();
if (lc !== prop && !NonComposedEvents.has(lc.slice(2))) {
const name = lc.slice(2);
node[`__${name}`] = value;
delegateEvents([name]);
} else node[lc] = value;
} else if (prop === "events") {
for (const eventName in value)
node.addEventListener(eventName, value[eventName]);
} else if ((info = Attributes[prop])) {
if (info.type === "attribute") {
node.setAttribute(prop, value);
} else node[info.alias] = value;
} else if (isSVG) {
if ((info = SVGAttributes[prop])) {
if (info.alias) node.setAttribute(info.alias, value);
else node.setAttribute(prop, value);
} elsefunction spreadExpression(node, props, prevProps = {}, isSVG) {
let info;
for (const prop in props) {
const value = props[prop];
if (value === prevProps[prop]) continue;
if (prop === 'style') {
Object.assign(node.style, value);
} else if (prop === 'classList') {
classList(node, value);
// really only for forwarding from Components, can't forward normal ref
} else if (prop === 'ref' || prop === 'forwardRef') {
value(node);
} else if (prop.slice(0, 2) === 'on') {
const lc = prop.toLowerCase();
if (lc !== prop && !NonComposedEvents.has(lc.slice(2))) {
const name = lc.slice(2);
node[`__${name}`] = value;
delegateEvents([name]);
} else node[lc] = value;
} else if (prop === 'events') {
for (const eventName in value) node.addEventListener(eventName, value[eventName]);
} else if (prop === 'children') {
insertExpression(node, value, prevProps[prop]);
} else if (info = Attributes[prop]) {
if (info.type === 'attribute') {
node.setAttribute(prop, value);
} else node[info.alias] = value;
} else if (isSVG) {
if (info = SVGAttributes[prop]) {
if (info.alias) node.setAttribute(info.alias, value);
else node.setAttribute(prop, value);wrap(() => {
for (const prop in props) {
if (prop === "children") continue;
const value = props[prop];
if (value === prevProps[prop]) continue;
if (prop === "style") {
Object.assign(node.style, value);
} else if (prop === "classList") {
classList(node, value, prevProps[prop]);
// really only for forwarding from Components, can't forward normal ref
} else if (prop === "ref" || prop === "forwardRef") {
value(node);
} else if (prop.slice(0, 2) === "on") {
const lc = prop.toLowerCase();
if (lc !== prop && !NonComposedEvents.has(lc.slice(2))) {
const name = lc.slice(2);
node[`__${name}`] = value;
delegateEvents([name]);
} else node[lc] = value;
} else if (prop === "events") {
for (const eventName in value)
node.addEventListener(eventName, value[eventName]);
} else if ((info = Attributes[prop])) {
if (info.type === "attribute") {
node.setAttribute(prop, value);
} else node[info.alias] = value;
} else if (isSVG) {
if ((info = SVGAttributes[prop])) {
if (info.alias) node.setAttribute(info.alias, value);
else node.setAttribute(prop, value);
} elsefunction spreadExpression(node, props, prevProps = {}, isSVG) {
let info;
for (const prop in props) {
const value = props[prop];
if (value === prevProps[prop]) continue;
if (prop === 'style') {
Object.assign(node.style, value);
} else if (prop === 'classList') {
classList(node, value);
// really only for forwarding from Components, can't forward normal ref
} else if (prop === 'ref' || prop === 'forwardRef') {
value(node);
} else if (prop.slice(0, 2) === 'on') {
const lc = prop.toLowerCase();
if (lc !== prop && !NonComposedEvents.has(lc.slice(2))) {
const name = lc.slice(2);
node[`__${name}`] = value;
delegateEvents([name]);
} else node[lc] = value;
} else if (prop === 'events') {
for (const eventName in value) node.addEventListener(eventName, value[eventName]);
} else if (prop === 'children') {
insertExpression(node, value, prevProps[prop]);
} else if (info = Attributes[prop]) {
if (info.type === 'attribute') {
node.setAttribute(prop, value);
} else node[info.alias] = value;
} else if (isSVG) {
if (info = SVGAttributes[prop]) {
if (info.alias) node.setAttribute(info.alias, value);
else node.setAttribute(prop, value);results.exprs.unshift(
t.expressionStatement(
t.logicalExpression(
"&&",
value.expression,
t.callExpression(value.expression, [elem])
)
)
);
} else if (key.startsWith("on")) {
if (generate === "ssr") return;
const ev = toEventName(key);
if (
delegateEvents &&
key !== key.toLowerCase() &&
!NonComposedEvents.has(ev)
) {
const events =
path.scope.getProgramParent().data.events ||
(path.scope.getProgramParent().data.events = new Set());
events.add(ev);
results.exprs.unshift(
t.expressionStatement(
t.assignmentExpression(
"=",
t.memberExpression(
t.identifier(elem.name),
t.identifier(`__${ev}`)
),
value.expression
)
)function transformAttributes(path, jsx, results) {
let elem = results.id;
const spread = t.identifier("_$spread"),
tagName = getTagName(jsx),
isSVG = SVGElements.has(tagName);
jsx.openingElement.attributes.forEach(attribute => {
if (t.isJSXSpreadAttribute(attribute)) {
registerImportMethod(path, "spread");
results.exprs.push(
t.expressionStatement(
t.callExpression(spread, [
elem,
isDynamic(
attribute.argument,
lookupPathForExpr(path, attribute.argument)
)
? t.arrowFunctionExpression([], attribute.argument)
: attribute.argument,
t.booleanLiteral(isSVG)
])
)function generateHTMLNode(path, jsx, opts, info = {}) {
if (t.isJSXElement(jsx)) {
let tagName = getTagName(jsx),
wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
voidTag = VoidElements.indexOf(tagName) > -1;
if (tagName !== tagName.toLowerCase())
return generateComponent(path, jsx, opts);
let results = {
template: `<${tagName}`,
decl: [],
exprs: [],
dynamics: [],
isSVG: wrapSVG
};
if (wrapSVG) results.template = "<svg>" + results.template;
if (!info.skipId) results.id = path.scope.generateUidIdentifier("el$");
transformAttributes(path, jsx, results);
if (
contextToCustomElements &&
(tagName === "slot" || tagName.indexOf("-") > -1)
</svg>dom-expressions
A Fine-Grained Runtime for Performant DOM Rendering
