Skip to content

Commit 75486aa

Browse files
developitdevelopit
authored
Merge pull request #1 from zemlanin/master
SVG compatibility; preact as peerDependency
2 parents 0beaba4 + dddca93 commit 75486aa

File tree

8 files changed

+145
-19
lines changed

8 files changed

+145
-19
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
*.md
22
*.conf.js
33
server.js
4+
tests/preact-versions/*.js

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist
22
node_modules
33
npm-debug.log
4+
tests/preact-versions

‎.travis.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
language: node_js
22
node_js:
33
- 6
4+
install:
5+
- '[ -z "$PREACT_VERSION" ] || npm run peer:preact -- $PREACT_VERSION'
6+
- npm install
7+
env:
8+
-
9+
- PREACT_VERSION=5.7.0
10+
- PREACT_VERSION=6.0.2

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@
1212
"minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map",
1313
"size": "echo \"gzip size: $(gzip-size $npm_package_minified_main | pretty-bytes)\"",
1414
"test": "npm-run-all lint test:karma",
15-
"lint": "eslint {src,test}",
15+
"lint": "eslint {src,tests}",
1616
"test:karma": "karma start tests/karma.conf.js --single-run",
1717
"prepublish": "npm-run-all build test",
18-
"release": "npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
18+
"release": "npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
19+
"peer:preact": "mkdir -p tests/preact-versions && sh -c 'curl https://registry.npmjs.org/preact/-/preact-$0.tgz | tar xz -O package/dist/preact.min.js > tests/preact-versions/$0.js'"
1920
},
2021
"keywords": [
2122
"preact",
@@ -66,6 +67,7 @@
6667
"mocha": "^2.4.5",
6768
"npm-run-all": "^2.3.0",
6869
"phantomjs-prebuilt": "^2.1.5",
70+
"preact": "^6.0.2",
6971
"pretty-bytes-cli": "^1.0.0",
7072
"rollup": "^0.34.1",
7173
"rollup-plugin-babel": "^2.4.0",
@@ -77,7 +79,7 @@
7779
"uglify-js": "^2.6.2",
7880
"webpack": "^1.12.14"
7981
},
80-
"dependencies": {
81-
"preact": "^5.6.0"
82+
"peerDependencies": {
83+
"preact": "^5.7.0 || ^6.0.2"
8284
}
8385
}

‎src/CSSCore.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,24 @@ const RE_CLASS = /[\n\t\r]+/g;
1717
let norm = elemClass => (SPACE + elemClass + SPACE).replace(RE_CLASS, SPACE);
1818

1919
export function addClass(elem, className) {
20-
elem.className += ' ' + className;
20+
if (elem.classList) {
21+
elem.classList.add(className);
22+
} else {
23+
elem.className += ' ' + className;
24+
}
2125
}
2226

2327
export function removeClass(elem, needle) {
24-
let elemClass = elem.className.trim();
25-
let className = norm(elemClass);
2628
needle = needle.trim();
27-
needle = SPACE + needle + SPACE;
28-
while (className.indexOf(needle) >= 0) {
29-
className = className.replace(needle, SPACE);
29+
if (elem.classList) {
30+
elem.classList.remove(needle);
31+
} else {
32+
let elemClass = elem.className.trim();
33+
let className = norm(elemClass);
34+
needle = SPACE + needle + SPACE;
35+
while (className.indexOf(needle) >= 0) {
36+
className = className.replace(needle, SPACE);
37+
}
38+
elem.className = className.trim();
3039
}
31-
elem.className = className.trim();
3240
}

‎src/TransitionEvents.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function detectEvents() {
5353
delete EVENT_NAME_MAP.transitionend.transition;
5454
}
5555

56-
for (let baseEventName in EVENT_NAME_MAP) {
56+
for (let baseEventName in EVENT_NAME_MAP) { // eslint-disable-line guard-for-in
5757
let baseEvents = EVENT_NAME_MAP[baseEventName];
5858
for (let styleName in baseEvents) {
5959
if (styleName in style) {

‎tests/index.js‎

Lines changed: 94 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,38 @@ class TodoList extends Component {
5151
}
5252
}
5353

54+
class SVGList extends Component {
55+
state = {
56+
items: ['hello', 'world', 'click', 'me']
57+
};
58+
59+
handleAdd(item) {
60+
let { items } = this.state;
61+
items = items.concat(item);
62+
this.setState({ items });
63+
}
64+
65+
handleRemove(i) {
66+
let { items } = this.state;
67+
items.splice(i, 1);
68+
this.setState({ items });
69+
}
70+
71+
render(_, { items }) {
72+
return (
73+
<svg>
74+
<CSSTransitionGroup transitionName="example" component="g">
75+
{ items.map( (item, i) => (
76+
<text key={item} className="item">
77+
{item}
78+
</text>
79+
)) }
80+
</CSSTransitionGroup>
81+
</svg>
82+
);
83+
}
84+
}
85+
5486

5587
const Nothing = () => null;
5688

@@ -99,17 +131,74 @@ describe('CSSTransitionGroup', () => {
99131
list.handleAdd(Date.now());
100132

101133
setTimeout( () => {
102-
expect($('.item')).to.have.length(4);
134+
expect($('.item')).to.have.length(5);
103135

104-
expect($('.item')[3].className).to.contain('example-enter');
105-
expect($('.item')[3].className).to.contain('example-enter-active');
136+
expect($('.item')[4].className).to.contain('example-enter');
137+
expect($('.item')[4].className).to.contain('example-enter-active');
106138
}, 500);
107139

140+
setTimeout( () => {
141+
expect($('.item')).to.have.length(5);
142+
143+
expect($('.item')[4].className).not.to.contain('example-enter');
144+
expect($('.item')[4].className).not.to.contain('example-enter-active');
145+
146+
done();
147+
}, 1400);
148+
});
149+
});
150+
151+
describe('CSSTransitionGroup: SVG', () => {
152+
let container = document.createElement('div'),
153+
list, root;
154+
document.body.appendChild(container);
155+
156+
let $ = s => [].slice.call(container.querySelectorAll(s));
157+
158+
beforeEach( () => {
159+
root = render(<div><Nothing /></div>, container, root);
160+
root = render(<div><SVGList ref={c => list=c} /></div>, container, root);
161+
});
162+
163+
afterEach( () => {
164+
list = null;
165+
});
166+
167+
it('create works', () => {
168+
expect($('.item')).to.have.length(4);
169+
});
170+
171+
it('transitionLeave works', done => {
172+
list.handleRemove(0);
173+
108174
setTimeout( () => {
109175
expect($('.item')).to.have.length(4);
110176

111-
expect($('.item')[3].className).not.to.contain('example-enter');
112-
expect($('.item')[3].className).not.to.contain('example-enter-active');
177+
expect($('.item')[0].classList.contains('example-leave'));
178+
expect($('.item')[0].classList.contains('example-leave-active'));
179+
}, 100);
180+
181+
setTimeout( () => {
182+
expect($('.item')).to.have.length(3);
183+
done();
184+
}, 1400);
185+
});
186+
187+
it('transitionEnter works', done => {
188+
list.handleAdd(Date.now());
189+
190+
setTimeout( () => {
191+
expect($('.item')).to.have.length(5);
192+
193+
expect($('.item')[4].classList.contains('example-enter'));
194+
expect($('.item')[4].classList.contains('example-enter-active'));
195+
}, 500);
196+
197+
setTimeout( () => {
198+
expect($('.item')).to.have.length(5);
199+
200+
expect(!$('.item')[4].classList.contains('example-enter'));
201+
expect(!$('.item')[4].classList.contains('example-enter-active'));
113202

114203
done();
115204
}, 1400);

‎tests/karma.conf.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
var path = require('path');
1+
/* eslint-env node */
2+
const path = require('path');
3+
4+
// to run with specific preact file:
5+
// $ PREACT_FILE=/path/to/preact.js npm test
6+
// to test with specific preact version (loaded from npm):
7+
// $ npm run peer:preact -- 5.7.0
8+
// $ PREACT_VERSION=5.7.0 npm test
9+
const preactFile = process.env.PREACT_FILE
10+
? path.resolve(__dirname, '..', process.env.PREACT_FILE)
11+
: null;
12+
const preactVersion = process.env.PREACT_VERSION
13+
? path.resolve(__dirname, 'preact-versions', process.env.PREACT_VERSION + '.js')
14+
: null;
215

316
module.exports = function(config) {
417
config.set({
@@ -12,6 +25,10 @@ module.exports = function(config) {
1225
'tests/**/*.js'
1326
],
1427

28+
exclude: [
29+
'tests/preact-versions/**/*.js'
30+
],
31+
1532
preprocessors: {
1633
'tests/**/*.js': ['webpack'],
1734
'src/**/*.js': ['webpack'],
@@ -53,7 +70,8 @@ module.exports = function(config) {
5370
'node_modules'
5471
],
5572
alias: {
56-
src: path.resolve(__dirname, '..', 'src')
73+
src: path.resolve(__dirname, '..', 'src'),
74+
preact: preactFile || preactVersion || 'preact'
5775
}
5876
}
5977
},

0 commit comments

Comments
 (0)