mirror of
https://github.com/iconify/iconify.git
synced 2024-12-13 22:18:24 +00:00
Use Svelte 3.39 because 3.40 breaks compiled components. Publish new version of component
This commit is contained in:
Vjacheslav Trushkin
parent
5a26c44009
commit
2f921ff04b
27
packages/sapper-demo/package-lock.json
generated
27
packages/sapper-demo/package-lock.json
generated
@ -18,9 +18,8 @@
|
|||||||
"@babel/plugin-transform-runtime": "^7.12.1",
|
"@babel/plugin-transform-runtime": "^7.12.1",
|
||||||
"@babel/preset-env": "^7.12.7",
|
"@babel/preset-env": "^7.12.7",
|
||||||
"@babel/runtime": "^7.12.5",
|
"@babel/runtime": "^7.12.5",
|
||||||
"@iconify-icons/bi": "^1.0.0",
|
|
||||||
"@iconify-icons/openmoji": "^1.0.9",
|
"@iconify-icons/openmoji": "^1.0.9",
|
||||||
"@iconify/svelte": "^2.1.0-beta.1",
|
"@iconify/svelte": "^2.1.0-beta.4",
|
||||||
"@rollup/plugin-babel": "^5.2.1",
|
"@rollup/plugin-babel": "^5.2.1",
|
||||||
"@rollup/plugin-commonjs": "^16.0.0",
|
"@rollup/plugin-commonjs": "^16.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
@ -1250,12 +1249,6 @@
|
|||||||
"to-fast-properties": "^2.0.0"
|
"to-fast-properties": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@iconify-icons/bi": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-icons/bi/-/bi-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-jYC05TEwi8Jlmc0LGL7Jrc/CIjoYfqYYxxfPI1hlj8XXHYhCMSizu1nMoj3vYQ7KoEP4Ge4hbiTl7O6/l68hBw==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/@iconify-icons/openmoji": {
|
"node_modules/@iconify-icons/openmoji": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
|
||||||
@ -1263,9 +1256,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@iconify/svelte": {
|
"node_modules/@iconify/svelte": {
|
||||||
"version": "2.1.0-beta.1",
|
"version": "2.1.0-beta.4",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
|
||||||
"integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
|
"integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cross-fetch": "^3.1.4"
|
"cross-fetch": "^3.1.4"
|
||||||
@ -4133,12 +4126,6 @@
|
|||||||
"to-fast-properties": "^2.0.0"
|
"to-fast-properties": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@iconify-icons/bi": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-icons/bi/-/bi-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-jYC05TEwi8Jlmc0LGL7Jrc/CIjoYfqYYxxfPI1hlj8XXHYhCMSizu1nMoj3vYQ7KoEP4Ge4hbiTl7O6/l68hBw==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"@iconify-icons/openmoji": {
|
"@iconify-icons/openmoji": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.1.0.tgz",
|
||||||
@ -4146,9 +4133,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@iconify/svelte": {
|
"@iconify/svelte": {
|
||||||
"version": "2.1.0-beta.1",
|
"version": "2.1.0-beta.4",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
|
||||||
"integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
|
"integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"cross-fetch": "^3.1.4"
|
"cross-fetch": "^3.1.4"
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
"@babel/preset-env": "^7.12.7",
|
"@babel/preset-env": "^7.12.7",
|
||||||
"@babel/runtime": "^7.12.5",
|
"@babel/runtime": "^7.12.5",
|
||||||
"@iconify-icons/openmoji": "^1.0.9",
|
"@iconify-icons/openmoji": "^1.0.9",
|
||||||
"@iconify/svelte": "^2.1.0-beta.1",
|
"@iconify/svelte": "^2.1.0-beta.4",
|
||||||
"@rollup/plugin-babel": "^5.2.1",
|
"@rollup/plugin-babel": "^5.2.1",
|
||||||
"@rollup/plugin-commonjs": "^16.0.0",
|
"@rollup/plugin-commonjs": "^16.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
|
|||||||
52
packages/svelte-demo/package-lock.json
generated
52
packages/svelte-demo/package-lock.json
generated
@ -13,14 +13,14 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-icons/mdi-light": "^1.1.0",
|
"@iconify-icons/mdi-light": "^1.1.0",
|
||||||
"@iconify-icons/uil": "^1.1.1",
|
"@iconify-icons/uil": "^1.1.1",
|
||||||
"@iconify/svelte": "^2.1.0-beta.1",
|
"@iconify/svelte": "^2.1.0-beta.4",
|
||||||
"@rollup/plugin-commonjs": "^16.0.0",
|
"@rollup/plugin-commonjs": "^16.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
"rollup": "^2.33.3",
|
"rollup": "^2.33.3",
|
||||||
"rollup-plugin-livereload": "^2.0.0",
|
"rollup-plugin-livereload": "^2.0.0",
|
||||||
"rollup-plugin-svelte": "^6.1.1",
|
"rollup-plugin-svelte": "^6.1.1",
|
||||||
"rollup-plugin-terser": "^7.0.2",
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
"svelte": "^3.29.7"
|
"svelte": "^3.43.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/code-frame": {
|
"node_modules/@babel/code-frame": {
|
||||||
@ -71,9 +71,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@iconify/svelte": {
|
"node_modules/@iconify/svelte": {
|
||||||
"version": "2.1.0-beta.1",
|
"version": "2.1.0-beta.4",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
|
||||||
"integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
|
"integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cross-fetch": "^3.1.4"
|
"cross-fetch": "^3.1.4"
|
||||||
@ -773,9 +773,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/rollup": {
|
"node_modules/rollup": {
|
||||||
"version": "2.52.1",
|
"version": "2.57.0",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
|
||||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
"integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"rollup": "dist/bin/rollup"
|
"rollup": "dist/bin/rollup"
|
||||||
@ -788,9 +788,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/rollup-plugin-livereload": {
|
"node_modules/rollup-plugin-livereload": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
|
||||||
"integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
|
"integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"livereload": "^0.9.1"
|
"livereload": "^0.9.1"
|
||||||
@ -973,9 +973,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/svelte": {
|
"node_modules/svelte": {
|
||||||
"version": "3.38.2",
|
"version": "3.43.0",
|
||||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
|
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
|
||||||
"integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
|
"integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
@ -1094,9 +1094,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@iconify/svelte": {
|
"@iconify/svelte": {
|
||||||
"version": "2.1.0-beta.1",
|
"version": "2.1.0-beta.4",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.1.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-2.1.0-beta.4.tgz",
|
||||||
"integrity": "sha512-6ekq4sbkwV/DmaKr0A4o5OVxWIyn0SRm3KW/zvDx0XO7r8yXlmwkVi9l3jXP4+wObozA3CTaSnkqjn1eaqCYkw==",
|
"integrity": "sha512-FTyfkMce4Luu1LjaDfirQOO5av9aJdduBDh6S1xZ4beLPGDGqkUc8J/gX83rRilwI58go2qJHnANsV0r8QuLwA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"cross-fetch": "^3.1.4"
|
"cross-fetch": "^3.1.4"
|
||||||
@ -1647,18 +1647,18 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"rollup": {
|
"rollup": {
|
||||||
"version": "2.52.1",
|
"version": "2.57.0",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.52.1.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.57.0.tgz",
|
||||||
"integrity": "sha512-/SPqz8UGnp4P1hq6wc9gdTqA2bXQXGx13TtoL03GBm6qGRI6Hm3p4Io7GeiHNLl0BsQAne1JNYY+q/apcY933w==",
|
"integrity": "sha512-bKQIh1rWKofRee6mv8SrF2HdP6pea5QkwBZSMImJysFj39gQuiV8MEPBjXOCpzk3wSYp63M2v2wkWBmFC8O/rg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"fsevents": "~2.3.2"
|
"fsevents": "~2.3.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"rollup-plugin-livereload": {
|
"rollup-plugin-livereload": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
|
||||||
"integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
|
"integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"livereload": "^0.9.1"
|
"livereload": "^0.9.1"
|
||||||
@ -1797,9 +1797,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"svelte": {
|
"svelte": {
|
||||||
"version": "3.38.2",
|
"version": "3.43.0",
|
||||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.38.2.tgz",
|
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
|
||||||
"integrity": "sha512-q5Dq0/QHh4BLJyEVWGe7Cej5NWs040LWjMbicBGZ+3qpFWJ1YObRmUDZKbbovddLC9WW7THTj3kYbTOFmU9fbg==",
|
"integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"terser": {
|
"terser": {
|
||||||
|
|||||||
@ -10,14 +10,14 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-icons/mdi-light": "^1.1.0",
|
"@iconify-icons/mdi-light": "^1.1.0",
|
||||||
"@iconify-icons/uil": "^1.1.1",
|
"@iconify-icons/uil": "^1.1.1",
|
||||||
"@iconify/svelte": "^2.1.0-beta.1",
|
"@iconify/svelte": "^2.1.0-beta.4",
|
||||||
"@rollup/plugin-commonjs": "^16.0.0",
|
"@rollup/plugin-commonjs": "^16.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
"rollup": "^2.33.3",
|
"rollup": "^2.33.3",
|
||||||
"rollup-plugin-livereload": "^2.0.0",
|
"rollup-plugin-livereload": "^2.0.0",
|
||||||
"rollup-plugin-svelte": "^6.1.1",
|
"rollup-plugin-svelte": "^6.1.1",
|
||||||
"rollup-plugin-terser": "^7.0.2",
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
"svelte": "^3.29.7"
|
"svelte": "^3.43.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"sirv-cli": "^1.0.8"
|
"sirv-cli": "^1.0.8"
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/dist/offline';
|
import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/offline';
|
||||||
import {
|
import {
|
||||||
addIcon as addOnlineIcon,
|
addIcon as addOnlineIcon,
|
||||||
addCollection as addOnlineCollection,
|
addCollection as addOnlineCollection,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Icon from '@iconify/svelte/dist/offline';
|
import Icon from '@iconify/svelte/offline';
|
||||||
import checkedIcon from '@iconify-icons/uil/check-square';
|
import checkedIcon from '@iconify-icons/uil/check-square';
|
||||||
import uncheckedIcon from '@iconify-icons/uil/square';
|
import uncheckedIcon from '@iconify-icons/uil/square';
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import OfflineIcon from '@iconify/svelte/dist/offline';
|
import OfflineIcon from '@iconify/svelte/offline';
|
||||||
import FullIcon from '@iconify/svelte';
|
import FullIcon from '@iconify/svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import Icon from '@iconify/svelte/dist/offline';
|
import Icon from '@iconify/svelte/offline';
|
||||||
import accountIcon from '@iconify-icons/mdi-light/account';
|
import accountIcon from '@iconify-icons/mdi-light/account';
|
||||||
import alertIcon from '@iconify-icons/mdi-light/alert';
|
import alertIcon from '@iconify-icons/mdi-light/alert';
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -3,14 +3,5 @@
|
|||||||
"svelte": "../dist/OfflineIcon.svelte",
|
"svelte": "../dist/OfflineIcon.svelte",
|
||||||
"module": "../dist/offline.mjs",
|
"module": "../dist/offline.mjs",
|
||||||
"main": "../dist/offline.js",
|
"main": "../dist/offline.js",
|
||||||
"types": "../dist/offline.d.ts",
|
"types": "../dist/offline.d.ts"
|
||||||
"exports": {
|
|
||||||
"./*": "./*",
|
|
||||||
".": {
|
|
||||||
"import": "../dist/offline.mjs",
|
|
||||||
"types": "../dist/offline.d.ts",
|
|
||||||
"svelte": "../dist/OfflineIcon.svelte",
|
|
||||||
"default": "../dist/offline.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
22
packages/svelte/package-lock.json
generated
22
packages/svelte/package-lock.json
generated
@ -1,19 +1,18 @@
|
|||||||
{
|
{
|
||||||
"name": "@iconify/svelte",
|
"name": "@iconify/svelte",
|
||||||
"version": "2.1.0-beta.2",
|
"version": "2.1.0-beta.3",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@iconify/svelte",
|
"name": "@iconify/svelte",
|
||||||
"version": "2.1.0-beta.2",
|
"version": "2.1.0-beta.3",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cross-fetch": "^3.1.4"
|
"cross-fetch": "^3.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/core": "^1.2.0-beta.3",
|
"@iconify/core": "^1.2.0-beta.3",
|
||||||
"@iconify/utils": "^1.0.9",
|
|
||||||
"@microsoft/api-extractor": "^7.15.0",
|
"@microsoft/api-extractor": "^7.15.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
"@rollup/plugin-typescript": "^8.2.1",
|
"@rollup/plugin-typescript": "^8.2.1",
|
||||||
@ -21,9 +20,10 @@
|
|||||||
"@testing-library/svelte": "^3.0.3",
|
"@testing-library/svelte": "^3.0.3",
|
||||||
"@tsconfig/svelte": "^1.0.10",
|
"@tsconfig/svelte": "^1.0.10",
|
||||||
"@types/jest": "^27.0.2",
|
"@types/jest": "^27.0.2",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
"rollup": "^2.33.3",
|
"rollup": "^2.33.3",
|
||||||
"rollup-plugin-svelte": "^6.1.1",
|
"rollup-plugin-svelte": "^6.1.1",
|
||||||
"svelte": "^3.43.0",
|
"svelte": "3.39",
|
||||||
"svelte-jester": "^2.1.5",
|
"svelte-jester": "^2.1.5",
|
||||||
"svelte-preprocess": "^4.9.5",
|
"svelte-preprocess": "^4.9.5",
|
||||||
"ts-jest": "^27.0.5"
|
"ts-jest": "^27.0.5"
|
||||||
@ -8230,7 +8230,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||||
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
|
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"glob": "^7.1.3"
|
"glob": "^7.1.3"
|
||||||
},
|
},
|
||||||
@ -8642,9 +8641,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/svelte": {
|
"node_modules/svelte": {
|
||||||
"version": "3.43.0",
|
"version": "3.39.0",
|
||||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
|
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.39.0.tgz",
|
||||||
"integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
|
"integrity": "sha512-dcJCongL0cRkZWe9q+fde0T4HX8PksBywz2+EGDVIrdYdJaxTzrJu0RVeuDtL8Mx2hs4yn3W8zKPScuzG63hTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
@ -15741,7 +15740,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||||
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
|
"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"peer": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"glob": "^7.1.3"
|
"glob": "^7.1.3"
|
||||||
}
|
}
|
||||||
@ -16072,9 +16070,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"svelte": {
|
"svelte": {
|
||||||
"version": "3.43.0",
|
"version": "3.39.0",
|
||||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
|
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.39.0.tgz",
|
||||||
"integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
|
"integrity": "sha512-dcJCongL0cRkZWe9q+fde0T4HX8PksBywz2+EGDVIrdYdJaxTzrJu0RVeuDtL8Mx2hs4yn3W8zKPScuzG63hTg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"svelte-jester": {
|
"svelte-jester": {
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
"name": "@iconify/svelte",
|
"name": "@iconify/svelte",
|
||||||
"description": "Iconify icon component for Svelte.",
|
"description": "Iconify icon component for Svelte.",
|
||||||
"author": "Vjacheslav Trushkin",
|
"author": "Vjacheslav Trushkin",
|
||||||
"version": "2.1.0-beta.2",
|
"version": "2.1.0-beta.4",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bugs": "https://github.com/iconify/iconify/issues",
|
"bugs": "https://github.com/iconify/iconify/issues",
|
||||||
"homepage": "https://github.com/iconify/iconify",
|
"homepage": "https://github.com/iconify/iconify",
|
||||||
@ -16,22 +16,9 @@
|
|||||||
"module": "dist/index.mjs",
|
"module": "dist/index.mjs",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"types": "dist/index.d.ts",
|
||||||
"exports": {
|
|
||||||
"./*": "./*",
|
|
||||||
".": {
|
|
||||||
"import": "./dist/index.mjs",
|
|
||||||
"svelte": "./dist/Icon.svelte",
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"default": "./dist/index.js"
|
|
||||||
},
|
|
||||||
"./offline": {
|
|
||||||
"import": "./dist/offline.mjs",
|
|
||||||
"svelte": "./dist/OfflineIcon.svelte",
|
|
||||||
"types": "./dist/offline.d.ts",
|
|
||||||
"default": "./dist/offline.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"cleanup": "rimraf lib dist",
|
||||||
|
"prebuild": "npm run cleanup",
|
||||||
"build": "node build",
|
"build": "node build",
|
||||||
"build:tsc": "tsc -b",
|
"build:tsc": "tsc -b",
|
||||||
"build:bundles": "rollup -c rollup.config.js",
|
"build:bundles": "rollup -c rollup.config.js",
|
||||||
@ -40,7 +27,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/core": "^1.2.0-beta.3",
|
"@iconify/core": "^1.2.0-beta.3",
|
||||||
"@iconify/utils": "^1.0.9",
|
|
||||||
"@microsoft/api-extractor": "^7.15.0",
|
"@microsoft/api-extractor": "^7.15.0",
|
||||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||||
"@rollup/plugin-typescript": "^8.2.1",
|
"@rollup/plugin-typescript": "^8.2.1",
|
||||||
@ -48,9 +34,10 @@
|
|||||||
"@testing-library/svelte": "^3.0.3",
|
"@testing-library/svelte": "^3.0.3",
|
||||||
"@tsconfig/svelte": "^1.0.10",
|
"@tsconfig/svelte": "^1.0.10",
|
||||||
"@types/jest": "^27.0.2",
|
"@types/jest": "^27.0.2",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
"rollup": "^2.33.3",
|
"rollup": "^2.33.3",
|
||||||
"rollup-plugin-svelte": "^6.1.1",
|
"rollup-plugin-svelte": "^6.1.1",
|
||||||
"svelte": "^3.43.0",
|
"svelte": "3.39",
|
||||||
"svelte-jester": "^2.1.5",
|
"svelte-jester": "^2.1.5",
|
||||||
"svelte-preprocess": "^4.9.5",
|
"svelte-preprocess": "^4.9.5",
|
||||||
"ts-jest": "^27.0.5"
|
"ts-jest": "^27.0.5"
|
||||||
|
|||||||
385
packages/svelte/tests/api/30-changing-props.test.ts
Normal file
385
packages/svelte/tests/api/30-changing-props.test.ts
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
/**
|
||||||
|
* @jest-environment jsdom
|
||||||
|
*/
|
||||||
|
import { render } from '@testing-library/svelte';
|
||||||
|
import { iconExists } from '../../';
|
||||||
|
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
|
||||||
|
import { provider, nextPrefix } from './load';
|
||||||
|
import ChangeIcon from './fixtures/ChangeIcon.svelte';
|
||||||
|
import ChangeProps from './fixtures/ChangeProps.svelte';
|
||||||
|
|
||||||
|
const iconData = {
|
||||||
|
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
};
|
||||||
|
|
||||||
|
const iconData2 = {
|
||||||
|
body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
};
|
||||||
|
|
||||||
|
type TriggerSwap = () => void;
|
||||||
|
|
||||||
|
describe('Rendering icon', () => {
|
||||||
|
test('changing icon property', (done) => {
|
||||||
|
const prefix = nextPrefix();
|
||||||
|
const name = 'changing-prop';
|
||||||
|
const name2 = 'changing-prop2';
|
||||||
|
const iconName = `@${provider}:${prefix}:${name}`;
|
||||||
|
const iconName2 = `@${provider}:${prefix}:${name2}`;
|
||||||
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||||
|
let onLoadCalled = ''; // Name of icon from last onLoad call
|
||||||
|
let triggerSwap: TriggerSwap | undefined;
|
||||||
|
|
||||||
|
mockAPIData({
|
||||||
|
type: 'icons',
|
||||||
|
provider,
|
||||||
|
prefix,
|
||||||
|
response: {
|
||||||
|
prefix,
|
||||||
|
icons: {
|
||||||
|
[name]: iconData,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delay: (next) => {
|
||||||
|
// Fixture callback should have been called
|
||||||
|
expect(typeof triggerSwap).toBe('function');
|
||||||
|
|
||||||
|
// Icon should not have loaded yet
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// onLoad should not have been called yet
|
||||||
|
expect(onLoadCalled).toBe('');
|
||||||
|
|
||||||
|
// Send icon data
|
||||||
|
next();
|
||||||
|
|
||||||
|
// Test it again
|
||||||
|
expect(iconExists(iconName)).toBe(true);
|
||||||
|
|
||||||
|
// Check if state was changed
|
||||||
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||||
|
setTimeout(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const node = component.container.querySelector('svg')!;
|
||||||
|
const html = (node.parentNode as HTMLDivElement)
|
||||||
|
.innerHTML;
|
||||||
|
|
||||||
|
// Check HTML
|
||||||
|
expect(html).toBe(
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
|
||||||
|
className +
|
||||||
|
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||||
|
);
|
||||||
|
|
||||||
|
// onLoad should have been called
|
||||||
|
expect(onLoadCalled).toBe(iconName);
|
||||||
|
|
||||||
|
// Change property
|
||||||
|
triggerSwap!();
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
mockAPIData({
|
||||||
|
type: 'icons',
|
||||||
|
provider,
|
||||||
|
prefix,
|
||||||
|
response: {
|
||||||
|
prefix,
|
||||||
|
icons: {
|
||||||
|
[name2]: iconData2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delay: (next) => {
|
||||||
|
// Icon should not have loaded yet
|
||||||
|
expect(iconExists(iconName2)).toBe(false);
|
||||||
|
|
||||||
|
// onLoad should have been called only once for previous icon
|
||||||
|
expect(onLoadCalled).toBe(iconName);
|
||||||
|
|
||||||
|
// Send icon data
|
||||||
|
next();
|
||||||
|
|
||||||
|
// Test it again
|
||||||
|
expect(iconExists(iconName2)).toBe(true);
|
||||||
|
|
||||||
|
// Check if state was changed
|
||||||
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||||
|
setTimeout(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const node = component.container.querySelector('svg')!;
|
||||||
|
const html = (node.parentNode as HTMLDivElement)
|
||||||
|
.innerHTML;
|
||||||
|
|
||||||
|
// Check HTML
|
||||||
|
expect(html).toBe(
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
|
||||||
|
className +
|
||||||
|
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
|
||||||
|
);
|
||||||
|
|
||||||
|
// onLoad should have been called for second icon
|
||||||
|
expect(onLoadCalled).toBe(iconName2);
|
||||||
|
|
||||||
|
done();
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if icon has been loaded
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// Render component
|
||||||
|
const component = render(ChangeIcon, {
|
||||||
|
icon1: iconName,
|
||||||
|
icon2: iconName2,
|
||||||
|
expose: (swap: TriggerSwap) => {
|
||||||
|
triggerSwap = swap;
|
||||||
|
},
|
||||||
|
onLoad: (name: string) => {
|
||||||
|
// onLoad should be called only once per icon
|
||||||
|
switch (name) {
|
||||||
|
// First onLoad call
|
||||||
|
case iconName:
|
||||||
|
expect(onLoadCalled).toBe('');
|
||||||
|
break;
|
||||||
|
|
||||||
|
// Second onLoad call
|
||||||
|
case iconName2:
|
||||||
|
expect(onLoadCalled).toBe(iconName);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
throw new Error(`Unexpected onLoad('${name}') call`);
|
||||||
|
}
|
||||||
|
onLoadCalled = name;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Should render empty icon
|
||||||
|
const html = component.container.innerHTML;
|
||||||
|
expect(html).toBe('<div></div>');
|
||||||
|
|
||||||
|
// onLoad should not have been called yet
|
||||||
|
expect(onLoadCalled).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('changing icon property while loading', (done) => {
|
||||||
|
const prefix = nextPrefix();
|
||||||
|
const name = 'changing-prop';
|
||||||
|
const name2 = 'changing-prop2';
|
||||||
|
const iconName = `@${provider}:${prefix}:${name}`;
|
||||||
|
const iconName2 = `@${provider}:${prefix}:${name2}`;
|
||||||
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||||
|
let onLoadCalled = ''; // Name of icon from last onLoad call
|
||||||
|
let isSync = true;
|
||||||
|
let triggerSwap: TriggerSwap | undefined;
|
||||||
|
|
||||||
|
mockAPIData({
|
||||||
|
type: 'icons',
|
||||||
|
provider,
|
||||||
|
prefix,
|
||||||
|
response: {
|
||||||
|
prefix,
|
||||||
|
icons: {
|
||||||
|
[name]: iconData,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delay: (next) => {
|
||||||
|
// Should have been called asynchronously
|
||||||
|
expect(isSync).toBe(false);
|
||||||
|
|
||||||
|
// Icon should not have loaded yet
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// Send icon data
|
||||||
|
next();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
mockAPIData({
|
||||||
|
type: 'icons',
|
||||||
|
provider,
|
||||||
|
prefix,
|
||||||
|
response: {
|
||||||
|
prefix,
|
||||||
|
icons: {
|
||||||
|
[name2]: iconData2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delay: (next) => {
|
||||||
|
// Should have been called asynchronously
|
||||||
|
expect(isSync).toBe(false);
|
||||||
|
|
||||||
|
// Icon should not have loaded yet
|
||||||
|
expect(iconExists(iconName2)).toBe(false);
|
||||||
|
|
||||||
|
// Send icon data
|
||||||
|
next();
|
||||||
|
|
||||||
|
// Test it again
|
||||||
|
expect(iconExists(iconName2)).toBe(true);
|
||||||
|
|
||||||
|
// Check if state was changed
|
||||||
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||||
|
setTimeout(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const node = component.container.querySelector('svg')!;
|
||||||
|
const html = (node.parentNode as HTMLDivElement)
|
||||||
|
.innerHTML;
|
||||||
|
|
||||||
|
// Check HTML
|
||||||
|
expect(html).toBe(
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
|
||||||
|
className +
|
||||||
|
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
|
||||||
|
);
|
||||||
|
|
||||||
|
// onLoad should have been called for second icon
|
||||||
|
expect(onLoadCalled).toBe(iconName2);
|
||||||
|
|
||||||
|
done();
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if icon has been loaded
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// Render component
|
||||||
|
const component = render(ChangeIcon, {
|
||||||
|
icon1: iconName,
|
||||||
|
icon2: iconName2,
|
||||||
|
expose: (swap: TriggerSwap) => {
|
||||||
|
triggerSwap = swap;
|
||||||
|
},
|
||||||
|
onLoad: (name: string) => {
|
||||||
|
// onLoad should be called only for second icon
|
||||||
|
expect(name).toBe(iconName2);
|
||||||
|
onLoadCalled = name;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Should render empty icon
|
||||||
|
const html = component.container.innerHTML;
|
||||||
|
expect(html).toBe('<div></div>');
|
||||||
|
|
||||||
|
// Fixture callback should have been called
|
||||||
|
expect(typeof triggerSwap).toBe('function');
|
||||||
|
|
||||||
|
// Change property
|
||||||
|
triggerSwap!();
|
||||||
|
|
||||||
|
// Async
|
||||||
|
isSync = false;
|
||||||
|
|
||||||
|
// onLoad should not have been called yet
|
||||||
|
expect(onLoadCalled).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('changing multiple properties', (done) => {
|
||||||
|
const prefix = nextPrefix();
|
||||||
|
const name = 'multiple-props';
|
||||||
|
const iconName = `@${provider}:${prefix}:${name}`;
|
||||||
|
const className = `iconify iconify--${prefix} iconify--${provider}`;
|
||||||
|
let onLoadCalled = false;
|
||||||
|
let triggerSwap: TriggerSwap | undefined;
|
||||||
|
|
||||||
|
mockAPIData({
|
||||||
|
type: 'icons',
|
||||||
|
provider,
|
||||||
|
prefix,
|
||||||
|
response: {
|
||||||
|
prefix,
|
||||||
|
icons: {
|
||||||
|
[name]: iconData,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
delay: (next) => {
|
||||||
|
// Fixture callback should have been called
|
||||||
|
expect(typeof triggerSwap).toBe('function');
|
||||||
|
|
||||||
|
// Icon should not have loaded yet
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// Send icon data
|
||||||
|
next();
|
||||||
|
|
||||||
|
// Test it again
|
||||||
|
expect(iconExists(iconName)).toBe(true);
|
||||||
|
|
||||||
|
// Check if state was changed
|
||||||
|
// Wrapped in double setTimeout() because re-render takes 2 ticks
|
||||||
|
setTimeout(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const node = component.container.querySelector('svg')!;
|
||||||
|
const html = (node.parentNode as HTMLDivElement)
|
||||||
|
.innerHTML;
|
||||||
|
|
||||||
|
// Check HTML
|
||||||
|
expect(html).toBe(
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
|
||||||
|
className +
|
||||||
|
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
|
||||||
|
);
|
||||||
|
|
||||||
|
// onLoad should have been called
|
||||||
|
expect(onLoadCalled).toBe(true);
|
||||||
|
|
||||||
|
// Add horizontal flip and style
|
||||||
|
triggerSwap!();
|
||||||
|
|
||||||
|
// Wait for component to re-render
|
||||||
|
setTimeout(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
// Check HTML again
|
||||||
|
const node =
|
||||||
|
component.container.querySelector('svg')!;
|
||||||
|
const html = (node.parentNode as HTMLDivElement)
|
||||||
|
.innerHTML;
|
||||||
|
|
||||||
|
expect(html).toBe(
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
|
||||||
|
className +
|
||||||
|
'"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
|
||||||
|
);
|
||||||
|
|
||||||
|
done();
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check if icon has been loaded
|
||||||
|
expect(iconExists(iconName)).toBe(false);
|
||||||
|
|
||||||
|
// Render component
|
||||||
|
const component = render(ChangeProps, {
|
||||||
|
icon: iconName,
|
||||||
|
expose: (swap: TriggerSwap) => {
|
||||||
|
triggerSwap = swap;
|
||||||
|
},
|
||||||
|
onLoad: (name: string) => {
|
||||||
|
expect(name).toBe(iconName);
|
||||||
|
// Should be called only once
|
||||||
|
expect(onLoadCalled).toBe(false);
|
||||||
|
onLoadCalled = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Should render empty icon
|
||||||
|
const html = component.container.innerHTML;
|
||||||
|
expect(html).toBe('<div></div>');
|
||||||
|
|
||||||
|
// onLoad should not have been called yet
|
||||||
|
expect(onLoadCalled).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
19
packages/svelte/tests/api/fixtures/ChangeIcon.svelte
Normal file
19
packages/svelte/tests/api/fixtures/ChangeIcon.svelte
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
import Icon from '../../../';
|
||||||
|
|
||||||
|
export let icon1;
|
||||||
|
export let icon2;
|
||||||
|
export let expose;
|
||||||
|
export let onLoad;
|
||||||
|
|
||||||
|
let icon = icon1;
|
||||||
|
|
||||||
|
$: {
|
||||||
|
expose(swap);
|
||||||
|
}
|
||||||
|
|
||||||
|
function swap() {
|
||||||
|
icon = icon2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<Icon icon={icon} onLoad={onLoad} />
|
||||||
24
packages/svelte/tests/api/fixtures/ChangeProps.svelte
Normal file
24
packages/svelte/tests/api/fixtures/ChangeProps.svelte
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<script>
|
||||||
|
import Icon from '../../../';
|
||||||
|
|
||||||
|
export let icon;
|
||||||
|
export let expose;
|
||||||
|
export let onLoad;
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
icon,
|
||||||
|
onLoad
|
||||||
|
};
|
||||||
|
|
||||||
|
$: {
|
||||||
|
expose(swap);
|
||||||
|
}
|
||||||
|
|
||||||
|
function swap() {
|
||||||
|
props.hFlip = true;
|
||||||
|
props.style = {
|
||||||
|
color: 'red'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<Icon {...props} />
|
||||||
Loading…
Reference in New Issue
Block a user