Skip to content

Commit

Permalink
feat(runtime-html): Enhance the style accessor
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandonseydel
brandonseydel committed Sep 5, 2019
1 parent 5672720 commit 57bc7b1
Show file tree
Hide file tree
Showing 2 changed files with 318 additions and 24 deletions.
256 changes: 256 additions & 0 deletions packages/__tests__/runtime-html/target-observers.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,262 @@ describe('StyleAccessor', function () {
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block;', `actual`);
});
it(`style binding array string/object returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', { borderColor: 'black' }], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; border-color: black;', `actual`);
});
it(`style binding array string/object returns correct with no static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', { borderColor: 'black' }], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; border-color: black;', `actual`);
});

it(`style binding array string/object (kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', { ['border-color']: 'black' }], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; border-color: black;', `actual`);
});
it(`style binding array string/object (kebab) returns correct with no static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', { ['border-color']: 'black' }], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; border-color: black;', `actual`);
});


it(`style binding array string/string returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', 'height:32px'], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style binding array string/string returns correct with no static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', 'height:32px'], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style string returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue('background-color:red;height:32px;', LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style string returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue('background-color:red; height:32px;', LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (non kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ backgroundColor: 'red', height: '32px' }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style object (non kebab) returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', height: '32px' }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', height: '32px' }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ backgroundColor: 'red', height: '32px' }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (non kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ backgroundColor: 'red', height: '32px' }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', height: '32px' }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (non-kebab) string/object returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ backgroundColor: 'red', test: { height: '32px' } }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});
it(`style object (non-kebab) string/object returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ backgroundColor: 'red', test: { height: '32px' } }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) string/object returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', test: { height: '32px' } }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) string/object returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', test: { height: '32px' } }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px;', `actual`);
});

it(`style object (kebab) string/object (kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', test: { ['border-color']: 'black' } }, LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; border-color: black;', `actual`);
});

it(`style object (kebab) string/object (kebab) returns correct without static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue({ ['background-color']: 'red', test: { ['border-color']: 'black' } }, LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; border-color: black;', `actual`);
});

it(`style binding array string/array (kebab) returns correct with static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div style="display: block;"></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);

sut.setValue(['background-color:red', ['height:32px', { ['border-color']: 'black' }]], LifecycleFlags.fromBind);
const actual = sut.getValue();
assert.strictEqual(actual, 'display: block; background-color: red; height: 32px; border-color: black;', `actual`);
});

it(`style binding array string/array (kebab) returns correct with no static style`, function () {
const ctx = TestContext.createHTMLTestContext();
el = ctx.createElementFromMarkup(`<div></div>`);
const { lifecycle: $lifecycle } = setup();
lifecycle = $lifecycle;
sut = new StyleAttributeAccessor(lifecycle, LifecycleFlags.none, el);
sut.setValue(['background-color:red', ['height:32px', { ['border-color']: 'black' }]], LifecycleFlags.fromBind);

const actual = sut.getValue();
assert.strictEqual(actual, 'background-color: red; height: 32px; border-color: black;', `actual`);
});

});

describe('ClassAccessor', function () {
Expand Down
86 changes: 62 additions & 24 deletions packages/runtime-html/src/observation/style-attribute-accessor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import {
LifecycleFlags,
Priority,
} from '@aurelia/runtime';

import { PLATFORM, kebabCase } from '@aurelia/kernel';
export class StyleAttributeAccessor implements IAccessor<unknown> {
public readonly lifecycle: ILifecycle;

public readonly obj: HTMLElement;
public currentValue: string | Record<string, string>;
public oldValue: string | Record<string, string>;
public currentValue: unknown;
public oldValue: unknown;

public readonly persistentFlags: LifecycleFlags;

Expand Down Expand Up @@ -43,7 +43,7 @@ export class StyleAttributeAccessor implements IAccessor<unknown> {
return this.obj.style.cssText;
}

public setValue(newValue: string | Record<string, string>, flags: LifecycleFlags): void {
public setValue(newValue: unknown, flags: LifecycleFlags): void {
this.currentValue = newValue;
this.hasChanges = newValue !== this.oldValue;
if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
Expand All @@ -53,6 +53,59 @@ export class StyleAttributeAccessor implements IAccessor<unknown> {
}
}

private spltStyleString(currentValue: string): [string, string][] {
const returnVal: [string, string][] = [];
const rx = /\s*([\w\-]+)\s*:\s*((?:(?:[\w\-]+\(\s*(?:"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[\w\-]+\(\s*(?:[^"](?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^\)]*)\),?|[^\)]*)\),?|"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^;]*),?\s*)+);?/g;
let pair: RegExpExecArray;
let style;
while ((pair = rx.exec(currentValue)!) != null) {
style = pair[1];
if (!style) { continue; }
returnVal.push([style, pair[2]])
}
return returnVal;
}

private getStyleArray(currentValue: unknown): [string, string][] {
if (typeof currentValue === 'string') {
return this.spltStyleString(currentValue);
}

if (currentValue instanceof Array) {
const len = currentValue.length;
if (len > 0) {
const styles: [string, string][] = [];
for (let i = 0; i < len; ++i) {
styles.push(...this.getStyleArray(currentValue[i]));
}
return styles;
} else {
return PLATFORM.emptyArray;
}
} else if (currentValue instanceof Object) {
let value: unknown;
const styles: [string, string][] = [];
for (const property in currentValue) {
//@ts-ignore
value = currentValue[property];
if (value == null) {
continue;
}
if (typeof value === 'string') {
styles.push([kebabCase(property), value]);
continue;
}

styles.push(...this.getStyleArray(value));
}

return styles;
}
return PLATFORM.emptyArray;
}



public flushRAF(flags: LifecycleFlags): void {
if (this.hasChanges) {
this.hasChanges = false;
Expand All @@ -62,26 +115,11 @@ export class StyleAttributeAccessor implements IAccessor<unknown> {
let style: string;
let version = this.version;

if (currentValue instanceof Object) {
let value: string;
for (style in currentValue) {
if (currentValue.hasOwnProperty(style)) {
value = currentValue[style];
style = style.replace(/([A-Z])/g, m => `-${m.toLowerCase()}`);
styles[style] = version;
this.setProperty(style, value);
}
}
} else if (typeof currentValue === 'string') {
const rx = /\s*([\w\-]+)\s*:\s*((?:(?:[\w\-]+\(\s*(?:"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[\w\-]+\(\s*(?:[^"](?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^\)]*)\),?|[^\)]*)\),?|"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^;]*),?\s*)+);?/g;
let pair: RegExpExecArray;
while ((pair = rx.exec(currentValue)!) != null) {
style = pair[1];
if (!style) { continue; }

styles[style] = version;
this.setProperty(style, pair[2]);
}
const styleTuple = this.getStyleArray(currentValue);
for (let i = 0; i < styleTuple.length; i++) {
const [style, value] = styleTuple[i];
styles[style] = version;
this.setProperty(style, value);
}

this.styles = styles;
Expand Down

0 comments on commit 57bc7b1

Please sign in to comment.