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

Jump to bottom

fix: support dimensional prop value without px #1456

Merged
merged 3 commits into from
Nov 4, 2019
Merged

fix: support dimensional prop value without px #1456

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4acb1c5
fix: support dimensional prop value without px
yuanyan Oct 30, 2019
bb96e99
chore: refactor unitless test regexp
yuanyan Nov 4, 2019
03ccc08
feat: update v
Nov 4, 2019
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
44 changes: 34 additions & 10 deletions packages/driver-dom/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,24 @@
* Driver for Web DOM
**/
const RPX_REG = /[-+]?\d*\.?\d+(rpx)/g;

// opacity -> opa
// fontWeight -> ntw
// lineHeight|lineClamp -> ne[ch]
// flex|flexGrow|flexPositive|flexShrink|flexNegative|boxFlex|boxFlexGroup|zIndex -> ex(?:s|g|n|p|$)
// order -> ^ord
// zoom -> zoo
// gridArea|gridRow|gridRowEnd|gridRowSpan|gridRowStart|gridColumn|gridColumnEnd|gridColumnSpan|gridColumnStart -> grid
// columnCount -> mnc
// tabSize -> bs
// orphans -> orp
// windows -> ows
// animationIterationCount -> onit
// borderImageOutset|borderImageSlice|borderImageWidth -> erim
const NON_DIMENSIONAL_REG = /opa|ntw|ne[ch]|ex(?:s|g|n|p|$)|^ord|zoo|grid|orp|ows|mnc|^columns$|bs|erim|onit/i;
const EVENT_PREFIX_REG = /^on[A-Z]/;
const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
const __HTML = '__html';
const HTML = '__html';
const INNER_HTML = 'innerHTML';
const CLASS_NAME = 'className';
const CLASS = 'class';
Expand All @@ -15,7 +31,6 @@ const CREATE_COMMENT = 'createComment';
const CREATE_TEXT_NODE = 'createTextNode';
const SET_ATTRIBUTE = 'setAttribute';
const REMOVE_ATTRIBUTE = 'removeAttribute';
const EVENT_PREFIX_REGEXP = /^on[A-Z]/;
const SVG_NS = 'http://www.w3.org/2000/svg';
const TEXT_NODE = 3;
const COMMENT_NODE = 8;
Expand Down Expand Up @@ -86,9 +101,10 @@ function isRpx(str) {
}

// Cache the convert fn.
const convertUnit = cached((value) => isRpx(value) ? calcRpxToVw(value) : value);
const convertUnit = cached(value => isRpx(value) ? calcRpxToVw(value) : value);

const isEventProp = cached((prop) => EVENT_PREFIX_REGEXP.test(prop));
const isDimensionalProp = cached(prop => !NON_DIMENSIONAL_REG.test(prop));
const isEventProp = cached(prop => EVENT_PREFIX_REG.test(prop));

export function setTagNamePrefix(prefix) {
tagNamePrefix = prefix;
Expand Down Expand Up @@ -308,8 +324,8 @@ export function removeAttribute(node, propKey) {

export function setAttribute(node, propKey, propValue) {
// For reduce innerHTML operation to improve performance.
if (propKey === DANGEROUSLY_SET_INNER_HTML && node[INNER_HTML] !== propValue[__HTML]) {
return node[INNER_HTML] = propValue[__HTML];
if (propKey === DANGEROUSLY_SET_INNER_HTML && node[INNER_HTML] !== propValue[HTML]) {
return node[INNER_HTML] = propValue[HTML];
}

if (propKey === CLASS_NAME) propKey = CLASS;
Expand All @@ -328,10 +344,18 @@ export function setAttribute(node, propKey, propValue) {

export function setStyle(node, style) {
for (let prop in style) {
// Support CSS custom properties
const convertedValue = convertUnit(style[prop]);
const value = style[prop];
let convertedValue;
if (typeof value === 'number' && isDimensionalProp(prop)) {
convertedValue = value + 'px';
} else {
convertedValue = convertUnit(value);
}

// Support CSS custom properties (variables) like { --main-color: "black" }
if (prop[0] === '-' && prop[1] === '-') {
// reference: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty. style.setProperty do not support Camel-Case style properties.
// reference: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty.
// style.setProperty do not support Camel-Case style properties.
node.style.setProperty(prop, convertedValue);
} else {
node.style[prop] = convertedValue;
Expand Down Expand Up @@ -370,5 +394,5 @@ export function afterRender({ container }) {
* @NOTE: Optimization at web.
*/
export function removeChildren(node) {
node.textContent = '';
node.textContent = EMPTY;
}