egjs-conveyer
egjs-conveyer copied to clipboard
naver
doesn't works with Sveltekit
i've written example code in Sveltekit
`
const { ref, } = useConveyer(); `
<div class="examples">
<div class="items horizontal" use:ref>
<div class="item">1</div>
<div class="item">2</div>
</div>
</div>
i received error message "Function called outside component initialization"
@luxmeroz
Thanks for reporting the issue.
I added a svelte field. @egjs/[email protected] Can you test it?
I'm also experiencing the issue. I installed the beta version you mentioned and got this error:
window is not defined ReferenceError: window is not defined at __proto.destroy (/Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@egjs/conveyer/dist/conveyer.cjs.js:686:5) at Object.destroy (/Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@egjs/conveyer/dist/conveyer.cjs.js:819:14) at Object.destroy (/Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@cfcs/core/dist/cfcs.cjs.js:487:70) at eval (/node_modules/@egjs/svelte-conveyer/dist/conveyer.esm.js:120:17) at run (/node_modules/svelte/internal/index.mjs:18:12) at Array.forEach (<anonymous>) at run_all (/node_modules/svelte/internal/index.mjs:24:9) at Object.render (/node_modules/svelte/internal/index.mjs:1885:13) at render_response (file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:105:27) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
@daybrush it fixed the error, thanks! But it still doesn't work properly for me, I can't horizontally drag a scrollable element..
I'm able to drag the scrollbar and use my touchpad to scroll horizontally, but I can't drag:
https://user-images.githubusercontent.com/52565351/209520238-1ccdbcd2-d5f6-4e66-bb3b-c4ac66a613aa.mov
@Pieter0313 @luxmeroz
Test @egjs/[email protected] version
Thank you :)
https://codesandbox.io/s/jolly-artem-h56p5g?file=/App.svelte
Thank you so much! It works now :)
One more question; can I use multiple of these conveyers on one page?
@luxmeroz @Pieter0313
Updated to version 1.4.7. Nothing has changed from the beta 5 version.
Thank you :)
@Pieter0313
yes. Declare multiple conveyors.
const { ref: ref1 } = useConveyer();
const { ref: ref2 } = useConveyer();
const { ref: ref3 } = useConveyer();
<div class="container" use:ref1></div>
<div class="container" use:ref2></div>
<div class="container" use:ref3></div>
Hi again, I'm getting the following error when trying to build my site:
file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/.svelte-kit/output/server/entries/pages/_page.svelte.js:6
import { adaptReactive, camelize } from "@cfcs/core";
^^^^^^^^^^^^^
SyntaxError: Named export 'adaptReactive' not found. The requested module '@cfcs/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@cfcs/core';
const { adaptReactive, camelize } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:36
throw new Error(format(details));
^
Error: 500 /
at file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:36:11
at save (file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:349:4)
at visit (file:///Users/pieterseegers/Documents/Websites/Avatary/avatary/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:199:3)
Do you know if this is because of egjs-conveyer? I think it is but i'm not sure
@Pieter0313
Changed the CommonJS version of @cfcs/core to exports.
Test 1.4.8-beta.0 version.
Hey @daybrush, I'm back with another question:
I want to use svelte-lazy to only show my element when it's in the viewport, but with my current implementation of svelte-conveyer, I'm getting the error as the element i want to lazy-load is a conveyer and the ref is being initialized when the component is loaded. Because the element is not loaded yet, the ref is also not used yet which returns the following error:
Unhandled Promise Rejection: TypeError: param is not an Object. (evaluating '"value" in param')
This is a simplified version of my code:
<script>
import { useConveyer } from '@egjs/svelte-conveyer';
const { ref: ref1 } = useConveyer();
const { ref: ref2 } = useConveyer();
const { ref: ref3 } = useConveyer();
const { ref: ref4 } = useConveyer();
</script>
// ... my other conveyers ...
<Lazy onload={() => elementLoaded()}>
<div class="flex avatar-list items horizontal overflow-scroll h-28 -mb-4" use:ref3>
<a href="#" draggable="false" class="aspect-square mr-1.5 w-28 h-28">
<img loading="lazy" draggable="false" class="item" src="image.png" />
</a>
</div>
</Lazy>
Do you have an idea on how I can construct the conveyer after the element has been loaded?
@Pieter0313
use autoInit option
const { ref: ref1, init: init1 } = useConveyer({ autoInit: false });
const { ref: ref2, init: init2 } = useConveyer({ autoInit: false });
const { ref: ref3, init: init3 } = useConveyer({ autoInit: false });
const { ref: ref4, init: init4 } = useConveyer({ autoInit: false });
// after call
init1();
init2();
There is an option called autoInit.
Option to block init from onMounted and you can directly call init method.
hi, i get this error in sveltekit :
ReferenceError: Element is not defined
at __proto.init (D:\aromez\node_modules@egjs\conveyer\dist\conveyer.cjs.js:578:38)
at obj.
<script>
import { useConveyer } from "@egjs/svelte-conveyer";
const { scrollIntoView, ref, onBeginScroll, init: init1 } = useConveyer({horizontal: false, autoInit: false});
init1();
export let products;
onBeginScroll(() => {
console.log("begin scroll");
});
</script>
<div class="mt-16 sm:mt-20">
<div class="flex justify-center gap-5 overflow-auto py-4 sm:gap-8" use:ref>
{#each products as product, index (product) }
<div
class="{'product-'+index} relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
<img
alt=""
class="absolute inset-0 h-full w-full object-cover"
src="{product.image}"
/>
</div>
{/each}
</div>
<div class="absolute right-5">
<button
on:click={() => { scrollIntoView("start", {align: "end", duration: 500, excludeStand: true}); }} class="next p-2 rounded-full text-fuchsia-600 font-semibold shadow-lg hover:ring-2 ring-lilac-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z" />
</svg>
</button>
</div>
</div>
i try to find whats the problem, but i don't really understand. thanks for help
hi, i get this error in sveltekit :
ReferenceError: Element is not defined at __proto.init (D:\aromez\node_modules@egjs\conveyer\dist\conveyer.cjs.js:578:38) at obj. (D:\aromez\node_modules@cfcs\core\dist\cfcs.cjs.js:611:28) at eval (/src/lib/partials/Slider.svelte:12:2) at Object.$$render (/node_modules/svelte/internal/index.mjs:1999:22) at eval (/src/routes/+page.svelte:25:90) at Object.$$render (/node_modules/svelte/internal/index.mjs:1999:22) at Object.default (/.svelte-kit/generated/root.svelte:74:138) at eval (/src/routes/+layout.svelte:19:36) at Object.$$render (/node_modules/svelte/internal/index.mjs:1999:22) at eval (/.svelte-kit/generated/root.svelte:63:129)
<script> import { useConveyer } from "@egjs/svelte-conveyer"; const { scrollIntoView, ref, onBeginScroll, init: init1 } = useConveyer({horizontal: false, autoInit: false}); init1(); export let products; onBeginScroll(() => { console.log("begin scroll"); }); </script> <div class="mt-16 sm:mt-20"> <div class="flex justify-center gap-5 overflow-auto py-4 sm:gap-8" use:ref> {#each products as product, index (product) } <div class="{'product-'+index} relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2"> <img alt="" class="absolute inset-0 h-full w-full object-cover" src="{product.image}" /> </div> {/each} </div> <div class="absolute right-5"> <button on:click={() => { scrollIntoView("start", {align: "end", duration: 500, excludeStand: true}); }} class="next p-2 rounded-full text-fuchsia-600 font-semibold shadow-lg hover:ring-2 ring-lilac-600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062A1.125 1.125 0 013 16.81V8.688zM12.75 8.688c0-.864.933-1.405 1.683-.977l7.108 4.062a1.125 1.125 0 010 1.953l-7.108 4.062a1.125 1.125 0 01-1.683-.977V8.688z" /> </svg> </button> </div> </div>i try to find whats the problem, but i don't really understand. thanks for help
maybe i'm just dumb, i add the init1() in the onMount but still i'm struggling to implement it, can someone please help me out? thanks.
edited: sorry, maybe i'm just dumb, i set the horizontal to false when i try to scroll it horizontally. it works now but there is an issue. it causing the page so lagging, any idea how to fix this? Thanks again !
@fanboykun
init can be used when the DOM exists.
If you use it like that, there will be a problem with the "Element" check in the SSR.
CodeSandbox, StackBlitz If you give me an example, I'll check the performance problem.
@daybrush thanks for the reply here is the CodeSandbox
maybe i'm just doing something wrong that affected page performace. i'm gladly appriciate any guide or help, thanks
the implementation component placed in src/lib/partials/Slider.svelte