{"_id":"@288-toolkit/component-loader","_rev":"5-06ba5f2506270746452c57738225641c","name":"@288-toolkit/component-loader","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@288-toolkit/component-loader","version":"1.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/component-loader@1.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"e7cccbb045fdba003e3d702690229484f5172707","tarball":"https://registry.npmjs.org/@288-toolkit/component-loader/-/component-loader-1.0.0.tgz","fileCount":8,"integrity":"sha512-lSrDU8pNDyfM35lw/5NP52/aOkwsa0uWvWDpn9WiHli9MLRwk7JLUKnU1HOmWouCDgZvV55ITFRLLHB3UkLGSA==","signatures":[{"sig":"MEQCIHB8UBUKv+JtxO3ZMu5ClkISZy4SgxswvuDVFemrVU6HAiBXHI4XceFml9tSIIrB40CtKwQItBbUACDtyOOtGjVwwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9635},"type":"module","_from":"file:288-toolkit-component-loader-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/faeb005adb16a4a4f76a54a49db5aaea/288-toolkit-component-loader-1.0.0.tgz","_integrity":"sha512-lSrDU8pNDyfM35lw/5NP52/aOkwsa0uWvWDpn9WiHli9MLRwk7JLUKnU1HOmWouCDgZvV55ITFRLLHB3UkLGSA==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/component-loader ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"esm-env":"1.0.0","just-clone":"6.2.0","@288-toolkit/types":"3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x"},"_npmOperationalInternal":{"tmp":"tmp/component-loader_1.0.0_1714672489324_0.9583510374903996","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@288-toolkit/component-loader","version":"1.0.1","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/component-loader@1.0.1","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"ca588f71286c0f8bee8d82a04bf56ed3ca777050","tarball":"https://registry.npmjs.org/@288-toolkit/component-loader/-/component-loader-1.0.1.tgz","fileCount":8,"integrity":"sha512-0wMp8VIj9wq7Vva9r+BDwhJdWC9qvkz7yXfX2DG2Vtq9SHUQ5IEqq/h3kwkluMyqgu+QNIiSVUzEvVIKWGHfLw==","signatures":[{"sig":"MEQCIDev+qPoCg+FD6TCr4CV2FtZs2SelNwZt/oz/0UMlqKnAiAGv15UyO0Eyb33tpwt8HWxV6K1tm+Lok7pbTVlow3oWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9599},"type":"module","_from":"file:288-toolkit-component-loader-1.0.1.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/8385bd59f0082c255bc38bca6b2318d5/288-toolkit-component-loader-1.0.1.tgz","_integrity":"sha512-0wMp8VIj9wq7Vva9r+BDwhJdWC9qvkz7yXfX2DG2Vtq9SHUQ5IEqq/h3kwkluMyqgu+QNIiSVUzEvVIKWGHfLw==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/component-loader ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"esm-env":"1.0.0","just-clone":"6.2.0","@288-toolkit/types":"3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x"},"_npmOperationalInternal":{"tmp":"tmp/component-loader_1.0.1_1714675594488_0.705451405632447","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@288-toolkit/component-loader","version":"1.0.2","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/component-loader@1.0.2","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"1b7783b9961bbf2137070ea06ae2872403aa8e3c","tarball":"https://registry.npmjs.org/@288-toolkit/component-loader/-/component-loader-1.0.2.tgz","fileCount":8,"integrity":"sha512-3ZFGhYvz8Vl2/9w8SeoKVuUxHIZueqYut/VY1/RSi0Bt9L4CT7NwoaN/JEnenQcr7Ja9SRulVlLPqLCVmmBk9w==","signatures":[{"sig":"MEQCIDmX55xCAfGmeH2gSSOrUN7Wg5R+3H/dZ7gsm1lEyJTfAiAhc3Lwch1jdqI/JGe/OdJ/qUHvWMLMVm4amGwaPnofwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9686},"type":"module","_from":"file:288-toolkit-component-loader-1.0.2.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/7e5252d49a6b51bb08383ba291387806/288-toolkit-component-loader-1.0.2.tgz","_integrity":"sha512-3ZFGhYvz8Vl2/9w8SeoKVuUxHIZueqYut/VY1/RSi0Bt9L4CT7NwoaN/JEnenQcr7Ja9SRulVlLPqLCVmmBk9w==","_npmVersion":"10.5.2","description":"```sh npm i @288-toolkit/component-loader ```","directories":{},"_nodeVersion":"20.13.1","dependencies":{"esm-env":"1.0.0","just-clone":"6.2.0","@288-toolkit/types":"3.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x"},"_npmOperationalInternal":{"tmp":"tmp/component-loader_1.0.2_1715871148662_0.08868985806983054","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@288-toolkit/component-loader","version":"1.0.3","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/component-loader@1.0.3","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"796513c3f4b2eb37b3788a832526ceb3275f71b0","tarball":"https://registry.npmjs.org/@288-toolkit/component-loader/-/component-loader-1.0.3.tgz","fileCount":9,"integrity":"sha512-F8ZwOHxDA3AEiddb1S2K3M1szHzcc8rEAEoEKg08Jtppeawa1rW0OiESoyuLoU1+UE6cvM+0ofzhSq6rqYiRAw==","signatures":[{"sig":"MEYCIQC28LfZW/lXlNHfPM3T24vyFG1o41kIicygGGbj9+kdGgIhAMtTtgtMYT1b0Mzg9ZAwi97poirDuLfw+HV7hfQtHpWF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10690},"type":"module","_from":"file:288-toolkit-component-loader-1.0.3.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package -i src","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/11d1f92f5115c637f0b11351a061766a/288-toolkit-component-loader-1.0.3.tgz","_integrity":"sha512-F8ZwOHxDA3AEiddb1S2K3M1szHzcc8rEAEoEKg08Jtppeawa1rW0OiESoyuLoU1+UE6cvM+0ofzhSq6rqYiRAw==","_npmVersion":"10.9.0","description":"```sh npm i @288-toolkit/component-loader ```","directories":{},"_nodeVersion":"22.12.0","dependencies":{"esm-env":"1.0.0","just-clone":"6.2.0","@288-toolkit/types":"3.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x"},"_npmOperationalInternal":{"tmp":"tmp/component-loader_1.0.3_1754429301123_0.8731092710656516","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-05-02T17:54:49.209Z","modified":"2025-09-23T15:34:32.320Z","1.0.0":"2024-05-02T17:54:49.472Z","1.0.1":"2024-05-02T18:46:34.645Z","1.0.2":"2024-05-16T14:52:28.799Z","1.0.3":"2025-08-05T21:28:21.297Z"},"author":{"name":"DeuxHuitHuit"},"license":"MIT","description":"```sh npm i @288-toolkit/component-loader ```","maintainers":[{"email":"open-source@deuxhuithuit.com","name":"nitriques"}],"readme":"# Component-loader\n\n```sh\nnpm i @288-toolkit/component-loader\n```\n\n## `createComponentLoader()`\n\nCreates a function that allows you to import Svelte components dynamically and add them to a data\nobject as a `svelteComponent` property.\n\nIt takes a `DynamicImports` array that contains objects of the following form:\n\n```ts\n{\n\tkey: string;\n\tgetImport: (entry) => void | Promise<SvelteComponent>;\n}\n```\n\n### `key`\n\nThe `key` property is a string describing the path, in dot notation, of the property you want\ndynamically imported components for on the data object passed to the loader.\n\nFor example:\n\n-   The key for a `modules` property on an `entry` property on the data object would be\n    `entry.modules`.\n-   The key for a `dynamicEntries` property inside of a module would be\n    `entry.modules.dynamicEntries` and so on.\n-   An empty string represents the data object itself.\n\n### `getImport`\n\nThe `getImport` function receives the object corresponding to the key as an argument and returns the\n`import()` call for the component.\n\nIf the value of the key is an object, `getImport` is called for that object only, and he\n`svelteComponent` property is added directly to it.\n\nIf the value is an array of objects, `getImport` is called for every objects of the array, and the\n`svelteComponent` property is added to all of them.\n\n[!IMPORTANT] Do NOT `await` the import, it will not work. The 'awaiting' happens later.\n\n[!IMPORTANT] You can return `null` or `undefined` if you don't want to import anything. For example,\nif you know the entry will not have a component.\n\nBecause of how Vite processes dynamic imports, there are several limitations to keep in mind when\nwriting the import path. They are listed here:\n[https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations).\n\n### Example\n\n```ts\nimport { createComponentLoader } from '@288-toolkit/component-loader';\n\nconst loadComponents = createComponentLoader([\n\t{\n\t\tkey: 'relatedItems',\n\t\tgetImport: (entry: CardEntry) => import(`../cards/${entry.type}.svelte`)\n\t},\n\t// Dynamically import all modules components\n\t{\n\t\tkey: 'entry.modules',\n\t\tgetImport: (entry: ModuleEntry) => import(`../modules/${entry.section}.svelte`)\n\t},\n\t// Dynamically import card components on a module\n\t{\n\t\tkey: 'entry.modules.cardItems',\n\t\tgetImport: (entry: CardEntryInsideAModule) =>\n\t\t\timport(`../cards/${entry.unique.property}.svelte`)\n\t},\n\t// The properties can be at any level\n\t{\n\t\tkey: 'entry.content.blocks.items.icons',\n\t\tgetImport: (entry: IconEntry) => import(`../icons/${entry.iconName}.svelte`)\n\t}\n]);\n```\n\nYou can now load components from a universal load function:\n\n`+page.ts`\n\n```ts\nimport { loadComponents } from './loadComponents';\n\nexport const load = async (data) => {\n\treturn loadComponents(data);\n};\n```\n\nThis component can then be rendered in the templates, usually with the `ComponentSelector.svelte`\nhelper.\n\n## `ComponentSelector.svelte`\n\nAfter having dynamically loaded the components, we need to render them. To do so, you can use the\n`ComponentSelector.svelte` component.\n\nBy default, `ComponentSelector` renders all components by passing them an `entry` prop corresponding\nto their associated data.\n\nYou can also use the default slot to render the components in any way you like. The slot receives\nthe `component` and `entry` props.\n\n### Example\n\n```svelte\n<script lang=\"ts\">\n\timport ComponentSelector from '@288-toolkit/component-loader';\n\n\texport let data;\n\n\tconst { modules } = data.entry;\n</script>\n\n<ComponentSelector entries={modules} />\n\n<ComponentSelector entries={modules} let:component let:entry>\n\t<section>\n\t\t<svelte:component this={component} data={entry} darkMode />\n\t</section>\n</ComponentSelector>\n```\n","readmeFilename":"README.md"}