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

Adds class directive shortcut and encapsulate styles #1695

Merged
merged 4 commits into from
Aug 28, 2018
Merged

Adds class directive shortcut and encapsulate styles #1695

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ec85bb
Adds class directive shortcut
jacwright Aug 25, 2018
c1fc9c1
Encapsulate class directives in the stylesheet.
jacwright Aug 25, 2018
22f4b3d
Remove camel-casing, but account for dashed parameters still.
jacwright Aug 27, 2018
fb734a3
Use existing property quoting function
jacwright Aug 28, 2018
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
28 changes: 22 additions & 6 deletions src/compile/nodes/Element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -855,8 +855,8 @@ export default class Element extends Node {
const { expression } = action;
let snippet, dependencies;
if (expression) {
snippet = action.expression.snippet;
dependencies = action.expression.dependencies;
snippet = expression.snippet;
dependencies = expression.dependencies;
}

const name = block.getUniqueName(
Expand Down Expand Up @@ -889,7 +889,16 @@ export default class Element extends Node {

addClasses(block: Block) {
this.classes.forEach(classDir => {
const { expression: { snippet, dependencies}, name } = classDir;
const { expression, name } = classDir;
let snippet, dependencies;
if (expression) {
snippet = expression.snippet;
dependencies = expression.dependencies;
} else {
const varName = camelCase(name);
snippet = `ctx.${varName}`;
dependencies = [varName];
}
const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`;

block.builders.hydrate.addLine(updater);
Expand Down Expand Up @@ -978,7 +987,8 @@ export default class Element extends Node {
}

const classExpr = this.classes.map((classDir: Class) => {
const { expression: { snippet }, name } = classDir;
const { expression, name } = classDir;
const snippet = expression ? expression.snippet : `ctx.${camelCase(name)}`;
return `${snippet} ? "${name}" : ""`;
}).join(', ');

Expand Down Expand Up @@ -1026,15 +1036,15 @@ export default class Element extends Node {
openingTag += '${' + attribute.chunks[0].snippet + ' ? " ' + attribute.name + '" : "" }';
} else if (attribute.name === 'class' && classExpr) {
addClassAttribute = false;
openingTag += ` class="\${ [\`${attribute.stringifyForSsr()}\`, ${classExpr} ].join(' ') }"`;
openingTag += ` class="\${ [\`${attribute.stringifyForSsr()}\`, ${classExpr} ].join(' ').trim() }"`;
} else {
openingTag += ` ${attribute.name}="${attribute.stringifyForSsr()}"`;
}
});
}

if (addClassAttribute) {
openingTag += ` class="\${ [${classExpr}].join(' ') }"`;
openingTag += ` class="\${ [${classExpr}].join(' ').trim() }"`;
}

openingTag += '>';
Expand Down Expand Up @@ -1159,3 +1169,9 @@ const events = [
name === 'volume'
}
];

function camelCase(str) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how I feel about camel casing the class name to get the state field name. On the one hand, I can see how this would let you follow CSS class naming conventions more easily - but on the other, we're not doing this transformation anywhere else (on component prop names, etc.). I think I'm leaning towards saying that the class name and property name have to exactly match.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use it when setting dataset properties so I used it without considering. With dataset however, that is all "under the hood". I didn't think about it being a new convention, and I understand your point.

Considering it further, I believe it is a useful convention and would lean towards keeping it, but I'm not passionate about it. I can remove it from here and sveltejs/v2.svelte.dev#351 if it is decided to remove it.

return str.replace(/(-\w)/g, function (m) {
return m[1].toUpperCase();
});
}
8 changes: 7 additions & 1 deletion src/css/Selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stac
}

if (selector.type === 'ClassSelector') {
if (!attributeMatches(node, 'class', selector.name, '~=', false)) return false;
if (!attributeMatches(node, 'class', selector.name, '~=', false) && !classMatches(node, selector.name)) return false;
}

else if (selector.type === 'IdSelector') {
Expand Down Expand Up @@ -258,6 +258,12 @@ function attributeMatches(node: Node, name: string, expectedValue: string, opera
return false;
}

function classMatches(node, name: string) {
return node.classes.some(function(classDir) {
return classDir.name === name;
});
}

function isDynamic(value: Node) {
return value.length > 1 || value[0].type !== 'Text';
}
Expand Down
16 changes: 16 additions & 0 deletions test/runtime/samples/class-shortcut/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default {
data: {
isActive: true,
isSelected: true,
myClass: 'one two'
},
html: `<div class="one two is-active isSelected"></div>`,

test ( assert, component, target, window ) {
component.set({ isActive: false });

assert.htmlEqual( target.innerHTML, `
<div class="one two isSelected"></div>
` );
}
};
1 change: 1 addition & 0 deletions test/runtime/samples/class-shortcut/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div class="{ myClass }" class:is-active class:isSelected class:not-used></div>