Skip to content

Commit c165941

Browse files
developitdevelopit
authored
[WIP] Update for Preact 10 (#70)
* Update for preact 10 * Update test/render.js Co-Authored-By: developit <[email protected]> * Get all tests passing (#71) * adjust test name to match renamed properties
1 parent ef7b0a2 commit c165941

File tree

5 files changed

+57
-46
lines changed

5 files changed

+57
-46
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"eslint-config-developit": "^1.1.1",
7373
"microbundle": "^0.6.0",
7474
"mocha": "^5.2.0",
75-
"preact": "^8.1.0",
75+
"preact": "^10.0.0-alpha.0",
7676
"sinon": "^1.17.5",
7777
"sinon-chai": "^2.8.0"
7878
},

‎src/index.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { encodeEntities, indent, isLargeString, styleObjToCss, assign, getNodeProps } from './util';
1+
// import { toChildArray } from 'preact';
2+
import { encodeEntities, indent, isLargeString, styleObjToCss, assign, getChildren /*, getNodeProps*/ } from './util';
23
import { ENABLE_PRETTY } from '../env';
34

45
const SHALLOW = { shallow: true };
@@ -38,8 +39,8 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
3839
return '';
3940
}
4041

41-
let nodeName = vnode.nodeName,
42-
attributes = vnode.attributes,
42+
let nodeName = vnode.type,
43+
attributes = vnode.props,
4344
isComponent = false;
4445
context = context || {};
4546
opts = opts || {};
@@ -59,7 +60,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
5960
nodeName = getComponentName(nodeName);
6061
}
6162
else {
62-
let props = getNodeProps(vnode),
63+
let props = vnode.props, //props = getNodeProps(vnode),
6364
rendered;
6465

6566
if (!nodeName.prototype || typeof nodeName.prototype.render!=='function') {
@@ -70,7 +71,7 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
7071
// class-based components
7172
let c = new nodeName(props, context);
7273
// turn off stateful re-rendering:
73-
c._disable = c.__x = true;
74+
c._dirty = c.__d = true;
7475
c.props = props;
7576
c.context = context;
7677
if (nodeName.getDerivedStateFromProps) c.state = assign(assign({}, c.state), nodeName.getDerivedStateFromProps(c.props, c.state));
@@ -153,17 +154,19 @@ function renderToString(vnode, context, opts, inner, isSvgMode) {
153154
if (isVoid) s = s.replace(/>$/, ' />');
154155

155156
let pieces = [];
157+
158+
let children;
156159
if (html) {
157160
// if multiline, indent.
158161
if (pretty && isLargeString(html)) {
159162
html = '\n' + indentChar + indent(html, indentChar);
160163
}
161164
s += html;
162165
}
163-
else if (vnode.children) {
166+
else if (vnode.props && getChildren(children = [], vnode.props.children).length) {
164167
let hasLarge = pretty && ~s.indexOf('\n');
165-
for (let i=0; i<vnode.children.length; i++) {
166-
let child = vnode.children[i];
168+
for (let i=0; i<children.length; i++) {
169+
let child = children[i];
167170
if (child!=null && child!==false) {
168171
let childSvgMode = nodeName==='svg' ? true : nodeName==='foreignObject' ? false : isSvgMode,
169172
ret = renderToString(child, context, opts, true, childSvgMode);

‎src/jsx.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import prettyFormat from 'pretty-format';
77
// we have to patch in Array support, Possible issue in npm.im/pretty-format
88
let preactPlugin = {
99
test(object) {
10-
return object && typeof object==='object' && 'nodeName' in object && 'attributes' in object && 'children' in object && !('nodeType' in object);
10+
return object && typeof object==='object' && 'type' in object && 'props' in object && 'key' in object;
1111
},
1212
print(val, print, indent) {
1313
return renderToString(val, preactPlugin.context, preactPlugin.opts, true);

‎src/util.js

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// import { toChildArray } from 'preact';
2+
13
// DOM properties that should NOT have "px" added when numeric
24
export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
35

@@ -45,25 +47,35 @@ export function assign(obj, props) {
4547
return obj;
4648
}
4749

50+
export function getChildren(accumulator, children) {
51+
if (Array.isArray(children)) {
52+
children.reduce(getChildren, accumulator);
53+
}
54+
else if (children!=null && children!==false) {
55+
accumulator.push(children);
56+
}
57+
return accumulator;
58+
}
59+
4860
/**
4961
* Reconstruct Component-style `props` from a VNode.
5062
* Ensures default/fallback values from `defaultProps`:
51-
* Own-properties of `defaultProps` not present in `vnode.attributes` are added.
63+
* Own-properties of `defaultProps` not present in `vnode.props` are added.
5264
* @param {import('preact').VNode} vnode The VNode to get props for
5365
* @returns {object} The props to use for this VNode
5466
*/
55-
export function getNodeProps(vnode) {
56-
let props = assign({}, vnode.attributes);
57-
props.children = vnode.children;
67+
// export function getNodeProps(vnode) {
68+
// let props = assign({}, vnode.props);
69+
// props.children = toChildArray(vnode);
5870

59-
let defaultProps = vnode.nodeName.defaultProps;
60-
if (defaultProps!==undefined) {
61-
for (let i in defaultProps) {
62-
if (props[i]===undefined) {
63-
props[i] = defaultProps[i];
64-
}
65-
}
66-
}
71+
// let defaultProps = vnode.type.defaultProps;
72+
// if (defaultProps!==undefined) {
73+
// for (let i in defaultProps) {
74+
// if (props[i]===undefined) {
75+
// props[i] = defaultProps[i];
76+
// }
77+
// }
78+
// }
6779

68-
return props;
69-
}
80+
// return props;
81+
// }

‎test/render.js

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ describe('render', () => {
182182
.and.calledWithExactly(
183183
match({
184184
foo: 'test',
185-
children: ['content']
185+
children: 'content'
186186
}),
187187
match({})
188188
);
@@ -205,9 +205,7 @@ describe('render', () => {
205205
.and.calledWithExactly(
206206
match({
207207
foo: 1,
208-
children: [
209-
match({ nodeName: 'span', children: ['asdf'] })
210-
]
208+
children: match({ type: 'span', props: { children: 'asdf' } })
211209
}),
212210
match({})
213211
);
@@ -240,7 +238,7 @@ describe('render', () => {
240238

241239
const PROPS = {
242240
foo: 'test',
243-
children: ['content']
241+
children: 'content'
244242
};
245243

246244
expect(rendered)
@@ -254,8 +252,8 @@ describe('render', () => {
254252
.to.have.been.calledOnce
255253
.and.calledWithExactly(
256254
match(PROPS),
257-
match({}), // empty state
258-
match({}) // empty context
255+
match.falsy,
256+
match({}) // empty context
259257
);
260258
});
261259

@@ -284,11 +282,9 @@ describe('render', () => {
284282
.and.calledWithExactly(
285283
match({
286284
foo: 1,
287-
children: [
288-
match({ nodeName: 'span', children: ['asdf'] })
289-
]
285+
children: match({ type: 'span', props: { children: 'asdf' } })
290286
}),
291-
match({}), // empty state
287+
match.falsy,
292288
match({})
293289
);
294290
});
@@ -389,13 +385,13 @@ describe('render', () => {
389385
render(<Outer />);
390386

391387
expect(Outer.prototype.getChildContext).to.have.been.calledOnce;
392-
expect(Inner.prototype.render).to.have.been.calledWith(match({}), {}, CONTEXT);
388+
expect(Inner.prototype.render).to.have.been.calledWith(match({}), match.falsy, CONTEXT);
393389

394390
CONTEXT.foo = 'bar';
395391
render(<Outer {...PROPS} />);
396392

397393
expect(Outer.prototype.getChildContext).to.have.been.calledTwice;
398-
expect(Inner.prototype.render).to.have.been.calledWith(match(PROPS), {}, CONTEXT);
394+
expect(Inner.prototype.render).to.have.been.calledWith(match(PROPS), match.falsy, CONTEXT);
399395
});
400396

401397
it('should pass context to direct children', () => {
@@ -422,16 +418,16 @@ describe('render', () => {
422418
render(<Outer />);
423419

424420
expect(Outer.prototype.getChildContext).to.have.been.calledOnce;
425-
expect(Inner.prototype.render).to.have.been.calledWith(match({}), {}, CONTEXT);
421+
expect(Inner.prototype.render).to.have.been.calledWith(match({}), match.falsy, CONTEXT);
426422

427423
CONTEXT.foo = 'bar';
428424
render(<Outer {...PROPS} />);
429425

430426
expect(Outer.prototype.getChildContext).to.have.been.calledTwice;
431-
expect(Inner.prototype.render).to.have.been.calledWith(match(PROPS), {}, CONTEXT);
427+
expect(Inner.prototype.render).to.have.been.calledWith(match(PROPS), match.falsy, CONTEXT);
432428

433429
// make sure render() could make use of context.a
434-
expect(Inner.prototype.render).to.have.returned(match({ children: ['a'] }));
430+
expect(Inner.prototype.render).to.have.returned(match({ props: { children: 'a' } }));
435431
});
436432

437433
it('should preserve existing context properties when creating child contexts', () => {
@@ -466,8 +462,8 @@ describe('render', () => {
466462

467463
render(<Outer />);
468464

469-
expect(Inner.prototype.render).to.have.been.calledWith(match({}), {}, { outerContext });
470-
expect(InnerMost.prototype.render).to.have.been.calledWith(match({}), {}, { outerContext, innerContext });
465+
expect(Inner.prototype.render).to.have.been.calledWith(match({}), match.falsy, { outerContext });
466+
expect(InnerMost.prototype.render).to.have.been.calledWith(match({}), match.falsy, { outerContext, innerContext });
471467
});
472468
});
473469

@@ -573,7 +569,7 @@ describe('render', () => {
573569
});
574570

575571
describe('state locking', () => {
576-
it('should set _disable and __x to true', () => {
572+
it('should set _dirty and __d to true', () => {
577573
let inst;
578574
class Foo extends Component {
579575
constructor(props, context) {
@@ -587,8 +583,8 @@ describe('render', () => {
587583

588584
expect(render(<Foo />)).to.equal('<div></div>');
589585

590-
expect(inst).to.have.property('_disable', true);
591-
expect(inst).to.have.property('__x', true);
586+
expect(inst).to.have.property('_dirty', true);
587+
expect(inst).to.have.property('__d', true);
592588
});
593589

594590
it('should prevent re-rendering', () => {
@@ -597,7 +593,7 @@ describe('render', () => {
597593
let count = 0;
598594

599595
class Foo extends Component {
600-
componentWillMount() {
596+
componentDidMount() {
601597
this.forceUpdate();
602598
}
603599
render() {

0 commit comments

Comments
 (0)