{"_id":"@aredridel/fractal-svelte-adapter","_rev":"8-ea2186dc2efc0e8ac6397f5a40e2349c","name":"@aredridel/fractal-svelte-adapter","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@aredridel/fractal-svelte-adapter","version":"1.0.0","description":"An adapter for fractal styleguide (1.x) to use svelte components","main":"index.js","repository":{"type":"git","url":"git+https://github.com/aredridel/fractal-svelte-adapter.git"},"keywords":["fractal","svelte"],"author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"license":"MIT","bugs":{"url":"https://github.com/aredridel/fractal-svelte-adapter/issues"},"homepage":"https://github.com/aredridel/fractal-svelte-adapter#readme","peerDependencies":{"@frctl/fractal":"^1.2.0","highlight.js":"^9.18.1","svelte":"^3.19.0"},"gitHead":"cb2205a2b1de87bbf4e997a9884fd41d84e0cf84","_id":"@aredridel/fractal-svelte-adapter@1.0.0","_nodeVersion":"13.8.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-v5TX1+8PVEvHoYtuVtRmziCZeu+btHzHVZpiHoe3qdrnxVg68qdhCGyrrcbqeruqrqL6DWLa6bm7fHWSNGI2AA==","shasum":"bee7a6b89408468efd8e046664327994087c8b25","tarball":"https://registry.npmjs.org/@aredridel/fractal-svelte-adapter/-/fractal-svelte-adapter-1.0.0.tgz","fileCount":5,"unpackedSize":6945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebHInCRA9TVsSAnZWagAA5+oP/0B1nYV8xBZKekgf7/Uf\n7q6251YcjEbngykOXnDbt96ly4tkcpjKfAKNRs7XlQfE7XMNLjwy6EPWQP4z\nL4H5qXV1X6DCcht/6W6SUMK45PnbKkDZ2LrL0+kchzFaCZnuZRBxAJcIe/xT\nu3tnzsJXTMYnFTWmHpNOcj2jFET3Gnsh3Ymz5nJ+11UE96yAAM+IAwCXgoo/\nC8V7VO7nvEo37XyR5dKjRi2tjfs5W4UM4ylpBUxh4L6UTYQrUy58nDcbeUuV\nfe/PR+yI/8MFflSipMrC+7Ecp6zjmKu2zWnPnMDGUivQ1fI+apSOgPPEV+mo\neSVxhrrO6toCu0lf+QwbxWBGyzE5uCNGf3Eb1CvAJWml04ntMRx8bbuoKu2e\nv+Ot0dq2P1QPQ4xKal4/LIY9dB0+lFKXljwANEGrV5/KFcCJMMGwY8eVecXg\n1966Fk8AwLyjJzjACwK0U6RDuflI8QeF4FHtJd5l7gZo3Oe+p99Enoxfnszf\nEfjFXypRpoU2UiVy4U51K2ybcltCUuPLYDfIcFsO9MWQlH0dDKKUB0/zNx/9\nofV0TLJn26mlDlPp0pwWQ7kfHQlfsdH2LvFcLDffZsu2Y7r8SYPESv9V7/MF\nR8nh0fgZFsUFbPwZ1aqcS/h6QfamzdQLq1zVy7NIszhM4TSWjc71ws906lxL\n/0rS\r\n=xZwi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN4MnlD6i6EpBmfXorfAf7rkJp+kZ6EouXjTuJpQOLwwIgJXBQbRhcTKlGUoaFTCN0+pUlvAJbR+p/L2sZeYSf+2I="}]},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"_npmUser":{"name":"aredridel","email":"aredridel@dinhe.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fractal-svelte-adapter_1.0.0_1584165415573_0.9580751167840607"},"_hasShrinkwrap":false},"2.0.0":{"name":"@aredridel/fractal-svelte-adapter","version":"2.0.0","description":"An adapter for fractal styleguide (1.x) to use svelte components","main":"index.js","repository":{"type":"git","url":"git+https://github.com/aredridel/fractal-svelte-adapter.git"},"keywords":["fractal","svelte"],"author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"license":"MIT","bugs":{"url":"https://github.com/aredridel/fractal-svelte-adapter/issues"},"homepage":"https://github.com/aredridel/fractal-svelte-adapter#readme","peerDependencies":{"@frctl/core":"^0.3.0","highlight.js":"^9.18.1","svelte":"^3.19.0"},"devDependencies":{"@frctl/core":"^0.3.0","highlight.js":"^10.7.2","svelte":"^3.38.2"},"gitHead":"0c7ec7b18e4b7009971ef1bd188b4869270a7d57","_id":"@aredridel/fractal-svelte-adapter@2.0.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-9EhgRwGl/Sa0nDxJrKwdbCyP/JCrqNgYOONH5IcA9vE4yTRc6VP6xyiEk032ZpJVbBW5lLrSf2zDnZcZCvn4gA==","shasum":"7b514d3573aa36ccb0b8320923929e9e4442f3ec","tarball":"https://registry.npmjs.org/@aredridel/fractal-svelte-adapter/-/fractal-svelte-adapter-2.0.0.tgz","fileCount":5,"unpackedSize":7046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAxZCRA9TVsSAnZWagAAuBwQAIjNgio9k7JUxKQ1DKCz\nLyUc3Azr5Ga3aUM/F04a1zuP2zp8MtsjUA560m1sXcQsoCRFT51Qeqz0spQg\ndduMmX72+IzvHsSbcq5XrbQRcQMHuL2fMEssrWfm/I+6aY5w8OaG1/Jau1mB\nfYXGsSnFTNZQ8WJLib54tw7cx/RTT4J+Gc5Waq+mjw/Hbp8S3DvOV7gee1Fu\nZOqnTFcNwWihBwqC42B6vmzJpGw453rV0AQJM4NShELNDuHuecD+Q6tEOZK5\ncV5QtYg/ZaKCVwNv4driG1f5Ob/Be9hBKRZWZjp4zrAjI7QPunAq5HKhuElM\nm4kDbMB4W/ekDTg6KTLMF2KwGFyMMGnEEevh8f7TiIYTlJlHkNV4hLAgFUgW\nILAPG2pHgGnbIHyGh3JI9Ci/BPr+4ZDtAUIAdmrG1WyLNR7wI+lfpaQBTFHn\na7hVa8PKD22BYbd75oTw5GVT9NYsI7ocQxjElsP4060179Dt3iOqrnPU9lEe\nSUDn6bH5kGBnvMkG1a0Irm4CbrOmCwk/yAGX7DDu3NykP/9uI4WAkcxeY4cX\nV8If38C0SBx4yTm12JPwB7eq3Q751rmpTb+8dzSI2/GPQ6pxo5YRhI72bqib\nqwlV8Nqqc+ztGq+b5k/MQSl+tUpxK1NAfah8rN/ThG6t3Vy/cGT3AWpBofX+\nzQV1\r\n=P2uP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4oZ1pIEL1KvaN/zppFqG3KCpdpU0R7WDpxP/YaWOr8wIgUKpREI+0juU9kQ2qCw5a6utdFDttlxP13SzDosuNyGI="}]},"_npmUser":{"name":"aredridel","email":"aredridel@dinhe.net"},"directories":{},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fractal-svelte-adapter_2.0.0_1620839512807_0.4665937596557972"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-14T04:45:56.131Z","1.0.0-pre0":"2020-03-14T04:45:56.520Z","modified":"2022-04-04T15:22:57.427Z","1.0.0-1":"2020-03-14T04:51:25.532Z","1.0.0-2":"2020-03-14T05:53:37.106Z","1.0.0":"2020-03-14T05:56:55.720Z","2.0.0":"2021-05-12T17:11:52.922Z"},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"description":"An adapter for fractal styleguide (1.x) to use svelte components","homepage":"https://github.com/aredridel/fractal-svelte-adapter#readme","keywords":["fractal","svelte"],"repository":{"type":"git","url":"git+https://github.com/aredridel/fractal-svelte-adapter.git"},"author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"bugs":{"url":"https://github.com/aredridel/fractal-svelte-adapter/issues"},"license":"MIT","readme":"# fractal-svelte-adapter\n\nAllows the use of [svelte](https://svelte.dev) components as templates in a\n[fractal](https://fractal.build) 1.x styleguide.\n\n## Use\n\nIn your `fractal.js` configuration:\n\n```javascript\nfractal.components.engine(\"@aredridel/fractal-svelte-adapter\");\nfractal.components.set(\"ext\", \".svelte\");\n```\n\n## Fractal concepts\n\nThe connection between how Fractal conceives of templates and how Svelte thinks\nof the world in components has some small friction for which this library\nprovides some workarounds.\n\n### Context data & properties\n\nContext data from the styleguide is passed to components as properties.\n\nA `component.config.json` such as this\n\n```json\n{\n  \"context\": {\n    \"text\": \"Hello, World\"\n  }\n}\n```\n\nInforms a `component.svelte` such as this:\n\n```svelte\n<script>\n  export let text;\n</script>\n\n<h2>{text}</h2>\n```\n\nWill render `<h2>Hello, World</h2>`.\n\n### Asset Helper\n\nFor static generation, knowing the root path is important for generating links\nto assets properly.\n\nAs we can't use a handlebars helper such as `{{ path \"filename\" }}`, a similar\ntool is injected into the Svelte context. To use it, fetch it from the context:\n\n```svelte\n<script>\n  import { getContext } from \"svelte\";\n  const { assetPath } = getContext(\"fractal\");\n</script>\n\n<img src={assetPath(\"/assets/some-image.png\")} />\n```\n\nAssuming you've configured `public/` as your static assets path with\n`fractal.web.set(\"static.path\", __dirname + \"/public\");`, this will link to the\nasset in `public/assets/some-image.png`.\n\n### Layout Template & Generated HTML\n\nThe overall HTML output is wrapped in an `<html>` element with an html5 doctype.\n\nLayouts are handled as svelte components, which provide a `<body>`:\n\n`layout.svelte`:\n\n```svelte\n<script>\n  import SomeComponent from \"./some-component.svelte\";\n  import { getContext } from \"svelte\";\n  const { assetPath } = getContext(\"fractal\");\n</script>\n\n<svelte:head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <link rel=\"stylesheet\" href={assetPath(\"/css/app.css\")} />\n  <script defer type=\"module\" src={assetPath(\"/js/app.js\")}></script>\n  <title>Preview</title>\n</svelte:head>\n\n<body>\n  <SomeComponent />\n\n  <p>Lorem ipsum dolor sit amet miss Bacon sic amundiam</p>\n  <slot />\n  <p>Lorem ipsum dolor sit amet miss Bacon sic amundiam</p>\n\n</body>\n```\n\nThe component being previewed is inserted into the default slot in the component.\n","readmeFilename":"README.md"}