search

naver / egjs-conveyer

Conveyer adds Drag gestures to your Native Scroll.
https://naver.github.io/egjs-conveyer/
MIT License
111 stars 8 forks source link

doesn't works with Sveltekit #27

Open luxmeroz opened 1 year ago

luxmeroz commented 1 year ago

i've written example code in Sveltekit

``

<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"

daybrush commented 1 year ago

@luxmeroz

Thanks for reporting the issue.

I added a svelte field. @egjs/svelte-conveyer@1.4.7-beta.0 Can you test it?

Pieter0313 commented 1 year ago

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 commented 1 year ago

@Pieter0313 @luxmeroz

Test @egjs/svelte-conveyer@1.4.7-beta.2 version

Thank you :)

Pieter0313 commented 1 year ago

@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

daybrush commented 1 year ago

@Pieter0313 @luxmeroz

Test @egjs/svelte-conveyer@1.4.7-beta.5 version

Thank you :)

https://codesandbox.io/s/jolly-artem-h56p5g?file=/App.svelte

Pieter0313 commented 1 year ago

Thank you so much! It works now :)

One more question; can I use multiple of these conveyers on one page?

luxmeroz commented 1 year ago

@daybrush

thank you finally it works fine! have a nice day!

daybrush commented 1 year ago

@luxmeroz @Pieter0313

Updated to version 1.4.7. Nothing has changed from the beta 5 version.

Thank you :)

daybrush commented 1 year ago

@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>
Pieter0313 commented 1 year ago

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

daybrush commented 1 year ago

@Pieter0313

Changed the CommonJS version of @cfcs/core to exports.

Test 1.4.8-beta.0 version.

Pieter0313 commented 1 year ago

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?

daybrush commented 1 year ago

@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.

fanboykun commented 1 year ago

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

fanboykun commented 1 year ago

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 !

daybrush commented 1 year ago

@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.

fanboykun commented 1 year ago

@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