{"_id":"@auroratide/svelte-custom-element-transitions","_rev":"2-ab7bf68c823d22f173e2d2d51eb877ed","name":"@auroratide/svelte-custom-element-transitions","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@auroratide/svelte-custom-element-transitions","version":"0.1.0","description":"Utility for making svelte transitions work on custom elements","main":"dist/index.js","types":"dist/index.d.ts","keywords":["svelte","transitions","web components"],"scripts":{"build":"tsc","clean":"rm -rf dist examples/public/build","preexample":"npm run build","example":"rollup -c examples/rollup.config.js -w","preexample:build":"npm run build","example:build":"rollup -c examples/rollup.config.js","example:server":"sirv examples/public","pretest":"npm run example:build","test":"testcafe --app \"npm run example:server\" chrome verification.ts","prepublishOnly":"npm-run-all clean test"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"repository":{"type":"git","url":"git+https://github.com/Auroratide/svelte-custom-element-transitions.git"},"license":"ISC","peerDependencies":{"svelte":"3.x"},"devDependencies":{"@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-typescript":"^8.2.1","@types/mathjs":"^6.0.11","mathjs":"^9.3.2","npm-run-all":"^4.1.5","rollup":"^2.45.2","rollup-plugin-livereload":"^2.0.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","sirv-cli":"^1.0.11","svelte":"^3.37.0","svelte-preprocess":"^4.7.2","testcafe":"^1.14.0","ts-node":"^9.1.1","typescript":"^4.2.4"},"gitHead":"d0ca9dc5a66508e752e5fe7d45ea02632f64629b","bugs":{"url":"https://github.com/Auroratide/svelte-custom-element-transitions/issues"},"homepage":"https://github.com/Auroratide/svelte-custom-element-transitions#readme","_id":"@auroratide/svelte-custom-element-transitions@0.1.0","_nodeVersion":"16.0.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-/uemBTig94RsCSKZhJ1gpWjFfaIbRKRfUs361FFBtX2lj4E2DA4aiQu1IE0nhDz0lGMzbpmU9FEsg/pqOwWY+w==","shasum":"bcb6de759712ca42cadcfebb363333eea1f9f7ec","tarball":"https://registry.npmjs.org/@auroratide/svelte-custom-element-transitions/-/svelte-custom-element-transitions-0.1.0.tgz","fileCount":7,"unpackedSize":11282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghM4WCRA9TVsSAnZWagAAWEQP/2IS+HdH478d9sVLPAJ1\nRn0/ZeVazVqvS4AMiIVdMk9GRhenJG5sjTNrl77n5rCFW7gnvhbGGXcbgaBc\n0R1bWGAomWmIaq998VvGUGTMwWzQ6WbjwL8YTBAoAIqrVtZpIol+4jefDMn3\nrkRsuSJe1sQ5BupVq2+qiFXhLaKLxe8ERxQQCmglrOUePyA9DdJQRP7HT9h1\nm4vRQSD8blKLHllFwD2iMSdTJEMdnD7DrOUOKP3yV9lZvKO2mZTWMEulqBKw\njay3TDGDazKhoWm9nsp0ESgrT8SDpUvOvgdG80WQYbTc/8m6YvKm3w9WdjVi\nC8iW1FxIMcJgaIV90E9Ge7XAz2UKNpWVNatGp6mpyYUwj1bc0NSol1ElIcNf\nG0aG3m8FQeARqX4PvECzpcWQVsbFZLT/tinFDAmHCtEGtCEdS478YadToNYf\napDaHWCqHeNCz7wVkQtYT9M9QSgrg/H3A9UA2tblmxC9fu2r+1WO1/UzpgSK\nfxUjYoIR9xXKgkTnW8H2y/qEZdi++byx4BTvjwHF2/CJOsT5D2yOFrgC6Fm6\nfZ6A57Dlmt1Gs/0dqE+pTh3MsOmWZ+5DJC5z8PQurPNvfKTcy1yosH+hTwXe\nGIiUPYKOE/77wH2kOzjWoxIjNqL7Q2WogXgPa4J5ZcMQBY27zi6WrFxBxIUZ\nSEwG\r\n=WIVQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDaAuuisNrSd8DNpmTO5yyIewRIHGyMd/k8SarlXOx+AiA+puUwRjQR1M190gF0eho3DaPWj0ShegfaXAgnotfxtQ=="}]},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"directories":{},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-custom-element-transitions_0.1.0_1619316245771_0.4635496914942254"},"_hasShrinkwrap":false},"0.1.1":{"name":"@auroratide/svelte-custom-element-transitions","version":"0.1.1","description":"Utility for making svelte transitions work on custom elements","main":"dist/index.js","types":"dist/index.d.ts","keywords":["svelte","transitions","web components"],"scripts":{"build":"tsc","clean":"rm -rf dist examples/public/build","preexample":"npm run build","example":"rollup -c examples/rollup.config.js -w","preexample:build":"npm run build","example:build":"rollup -c examples/rollup.config.js","example:server":"sirv examples/public","pretest":"npm run example:build","test":"testcafe --app \"npm run example:server\" chrome verification.ts","prepublishOnly":"npm-run-all clean test"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"repository":{"type":"git","url":"git+https://github.com/Auroratide/svelte-custom-element-transitions.git"},"license":"ISC","peerDependencies":{"svelte":"3.x"},"devDependencies":{"@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-typescript":"^8.2.1","@types/mathjs":"^6.0.11","mathjs":"^9.3.2","npm-run-all":"^4.1.5","rollup":"^2.45.2","rollup-plugin-livereload":"^2.0.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","sirv-cli":"^1.0.11","svelte":"^3.37.0","svelte-preprocess":"^4.7.2","testcafe":"^1.14.0","ts-node":"^9.1.1","typescript":"^4.2.4"},"gitHead":"8f26d7d4eb4ee1cd2437ed49c7f0e738dc59c176","bugs":{"url":"https://github.com/Auroratide/svelte-custom-element-transitions/issues"},"homepage":"https://github.com/Auroratide/svelte-custom-element-transitions#readme","_id":"@auroratide/svelte-custom-element-transitions@0.1.1","_nodeVersion":"16.0.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-eUlWJb7F3I0DviMMHiMUt/UBPMKfHA7amUxw5/0Xd1pbtojqcI00Qh8X+KtuvOwArjEAOYXKeomKxaxcXEXvEA==","shasum":"d8cfcbd88eec4dfc976b751077bb26afe6f44091","tarball":"https://registry.npmjs.org/@auroratide/svelte-custom-element-transitions/-/svelte-custom-element-transitions-0.1.1.tgz","fileCount":7,"unpackedSize":11489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghNCbCRA9TVsSAnZWagAA1jIQAIYH1QosGuF7S8v8ErP8\nWLAd+rEYbPdH4DwUPOStxhlUpOZbNbmJ5wWJMQfbrLEnRUblpzB9GDXKK/4l\nyUBz76IpUOe1mVEO8bT4OUxkKhNVk4zQnMO2Gwq1bUFhgVpVrm7RMlsjXn53\nEJmZHOz9pjzYXFwUBxHE58vAIErv+RvQK039tj0YxvSWhEe/ybTqoXuzHSqi\ngpE2B7RfdVrUiDB5GovYueyuV/jW/EeJr+slJFvM5LCFEZkHWjSOlk/3qa28\n2UUjlN8rJpe5l9x/dDhm8EiFU1R0Ap9GNA6iTpEVJu2urkWrmyrobR29wSEz\nLrjDsJZImGxDosYnMCzRcWAfN/tXHAnyVoUnbFoO/nbfPT8bRuIOhSsqTP2N\nuU/8ij8ZeLV/Xu0No/6LgNYYsBiAQTf4l/KUSVaoIEifsnUsmX3GiBIh01bQ\nl0yrLzD0Xcfa8Kh9EzfYFofCNRRoeiGIm9zWAcF+tmTOv98bAv0IpXXdScLp\nHTV/BDDdD/g+APpbuS1peQc5zaJiXAQ7N6FGtxWUczdSqf2Zofgm7Z13NrYl\nkX11N3y7jvcSpg/+uGSj2Lpaa+GTIEcdMjF5dp7hQhf3qQp7VMGI7LaBQtuN\nkECcn7yusye3M6/67er+LEW7Ej9MeEN+9qh1U3u7wXzBGSg06UwgB6l9FyNb\nUzcI\r\n=SNZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgYY5SiCrLzjvQ+QKLhN3K28wQbd9BkGU29wmbdi39ZQIhAJ1HV3j6aPWWKJjP9icwqWcH6gnkkmMsqdgeJpYFyFKE"}]},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"directories":{},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-custom-element-transitions_0.1.1_1619316891284_0.9529143273543115"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-25T02:04:05.721Z","0.1.0":"2021-04-25T02:04:05.919Z","modified":"2022-04-04T16:29:01.996Z","0.1.1":"2021-04-25T02:14:51.463Z"},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"description":"Utility for making svelte transitions work on custom elements","homepage":"https://github.com/Auroratide/svelte-custom-element-transitions#readme","keywords":["svelte","transitions","web components"],"repository":{"type":"git","url":"git+https://github.com/Auroratide/svelte-custom-element-transitions.git"},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"bugs":{"url":"https://github.com/Auroratide/svelte-custom-element-transitions/issues"},"license":"ISC","readme":"# Svelte Custom Element Transitions\n\nIt's a [known issue](https://github.com/sveltejs/svelte/issues/1825) that Svelte transitions do not work when compiling to custom elements (aka, web components). There's an active [Pull Request](https://github.com/sveltejs/svelte/pull/5870) which has been around for several months.\n\nHopefully that PR will be merged in the near future. But in case it doesn't, at least you have **@auroratide/svelte-custom-element-transitions**! This tiny module works around the issue by applying the CSS rules directly to the target node with Javascript.\n\n```html\n\n\n

Hello!

\n```\n\nThis module also provides a higher order function which can make custom transitions work as well.\n\n```js\nimport { forCustomElement } from '@auroratide/svelte-custom-element-transitions'\n\nexport const myTransition = forCustomElement((node, params) => {\n // ...\n})\n```\n\nSee the **[examples](examples)** for different possible use cases.\n\n> By the way, each example is run as an automated test!\n\n## Contributing\n\nThis library is intended to become deprecated as soon as Svelte has an official solution. In the meantime, here are some helpful notes for anyone who wants to contribute:\n\n* `npm run build`: Build the library\n* `npm test`: Run verification script (in Chrome)\n* `npm run example`: See transitions in action\n","readmeFilename":"README.md"}