davekeehl / svelte-reveal Goto Github PK

Describe the bug

Error, in the demo

Reproduction

Open the demo

System Info

Not sure

Severity

Critical

Additional Information

No response

To-Do:

• Create properties (mobile, tablet, laptop, desktop, etc)
• Create css media-queries
• Update API
• Test new API functions
• Fix media queries syntax
• Combine queries
• Check in demo

I've noticed I made a pretty dumb error that results in the stylesheet used by svelte-reveal being overridden by each new targeted element. Hence, at this state the library works fine for only one element, but when you have multiple ones every transition style can't be configured singularly.

This is a major bug that needs to be fixed ASAP and a hotfix branch will be created right away.

To-Do:

• Generate a UID for each targeted element
• Create a CSS class for each UID with the proper options in it
• Update test suite to check that everything is added properly (this will probably come as soon as the bug is fixed)

To-Do:

• Fade-in + 360 spin

Possible solutions:

• Adding objects "in" and "out" as options
• Creating separate functions revealIn and revealOut that share logic with reveal

When specifying in/out the default transition must be disabled.

To-Do:

• Change logs to support colors
• Add option to turn on/off colors
• Add option to choose a custom color

To-Do:

• Add comments to functions
• Add comments to types

Describe the bug

This commit (18d0f6d) adds extra CSS properties to the element. This breaks other CSS layouts if display is set to flex or grid etc.

The correct way to do this to let the user set display: block on the element if needed.

Reproduction

Any example shows the properties being applied.

System Info

Latest version, all browsers.

Severity

Serious, but I can work around it

Additional Information

Happy to submit a PR with a fix.

To-Do:

• Check on Chrome
• Check on Safari
• Check on Firefox
• Check on Edge
• Check on Opera
• Add vendor prefixes (PostCSS?)

It would be ideal if users were required to specify the Svelte Reveal version and the type of Svelte app environment (e.g. Svelte + Vite, SvelteKit, Astro + Svelte, others).

svelte-reveal currently injects inline styles in the targeted elements in order to perform the transitions. Although it works and there are ways to avoid clashing styles, I think it's better to switch to CSS classes.

That is going to be beneficial in the long-run and will avoid fixing many edge cases in the future.

To-Do:

• Create Dockerfile
• Connect DockerHub to GitHub repository
• Setup CD to upload a new image on new master push events

To-Do:

• "Slap"

To-Do:

• Create sidebar
• Create editor

There seems to be something particular about the way SvelteKit renders the content of a page. The same code that works flawlessly with Svelte doesn't produce the same result in SvelteKit, except in few isolated situations.

To-Do:

• Create reproduction repositories for Svelte and SvelteKit
• File a bug report for SvelteKit

Reproduction repositories:

• Svelte: https://github.com/DaveKeehl/svelte-reveal-issue-81-svelte
• SvelteKit: https://github.com/DaveKeehl/svelte-reveal-issue-81-sveltekit

Currently the two GitHub actions workflows work fine and get the job done, but there's still room for improvement. In particular:

• The release workflow trigger could be enhanced to avoid creating dummy PRs in case somethings goes wrong
• The release workflow is triggered twice per commit in PRs

To-Do:

• Create custom events
• Test new events

Events:

• Reveal start
• Reveal end
• Mount
• Update
• Destroy

Describe the bug

List revealed in wrong order for the first rendered component of that type. Using sveltekit with SSG ('@sveltejs/adapter-static'). Tried wrapping app in if statement as per docs, pre-building RevealOptions and setting ssr=false but still can't find a fix. When hot reloading after a code change reveal order works correctly. Issue with initial component mount?

Reproduction

Code for component in question:

<script lang="ts">
	import { reveal } from 'svelte-reveal';
	import type { RevealOptions } from 'svelte-reveal';
	export let delay: number = 0;
	export let stagger: number = 0;
	export let header: string;
	export let items: string[];

	const headerRevealOptions: RevealOptions = { transition: 'fade', delay: delay };
    const itemsRevealOptions: RevealOptions[] = [];
    for (let index = 0; index < items.length; index++) {
        const element: RevealOptions = { transition: 'fade', delay: delay+stagger*(index+1) };
        itemsRevealOptions.push(element);
    }
</script>

<div use:reveal={headerRevealOptions} class="flex flex-col">
	<div class="text-2xl">{header}</div>
	<ul class="list-none">
		{#each items as item, i (item)}
			<li use:reveal={itemsRevealOptions[i]} class="text-xl">
				{item}
			</li>
		{/each}
	</ul>
</div>

<style>
	ul {
		border-left: 0.2rem solid goldenrod;
		margin-left: 1rem;
		margin-top: 0.5rem;
	}
	ul li {
		position: relative;
		margin-left: 1.5rem;
		padding-left: 0.5rem;
		top: 0.75rem;
	}

	ul li::before {
		content: '';
		display: block;
		width: 1.5rem;
		height: 0.2rem;
		background-color: goldenrod;
		position: absolute;
		left: -1.5rem;
		top: 0.8rem;
	}
</style>

System Info

Windows 11, Node v18.16.1, SvelteKit, Google Chrome

Severity

Serious, but I can work around it

Additional Information

Current workaround: create component of same type with 0 delay and making it invisible seems to work without affecting page layout

To-Do:

• Test Intersection Observer
• Test main reveal function

To-Do:

• Feature request
• Bug report

To complete the presets management system it would be ideal to extends the current Svelte Reveal API to add way to add/remove/remove presets.

It's time to move the documentation (currently sitting in the README) elsewhere, to offer a better UX.

Describe the bug

Whenever I add a transition to any element to my components it will appear as the last one in my divider.

In the screenshot provided above I added a reveal transition to the Text 1 header and it jumps down whenever I reload my page and the animation statrts

Reproduction

I am currently working on a website for an app in a private repo, I wanna publish it as soon as it's ready so I could add a dev there as a contributor to test it. Here is the code for my component where the issue exists:

<script>
	import HeroImage from '../../components/quarks/HeroImage.svelte';
	import Button from '../quarks/Downy.svelte';
	import { reveal } from 'svelte-reveal';
	
	function handleClick() {
		const el = document.querySelector('#aw');
		if (!el) return;
		el.scrollIntoView(true);
	}
</script>

<section id="home" class="wrapper">
	<div>
		<h1 use:reveal>Text 1</h1>
		<h1>Text 2</h1>
		<h3>Text 3</h3>
		<h4>Text 4</h4>
</section>

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 8.06 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Safari: 17.3.1

Severity

Blocking

Additional Information

No response

Reference: https://code.visualstudio.com/docs/remote/containers

To-do:

• Install Jest
• Create test directory
• Create initial test suite with dummy tests
• Setup CI/CD pipeline
• Populate suite with unit tests

Describe the bug

Relation on styles.
inline styles break svelte-reveal

for example color: #ff000088 or color: #eee7 will just leave it transparent

#174 transiton in invisbly setted for element making it wierd on resize for example.

Reproduction

System Info

ubuntu, firefox, sveltekit

Severity

Annoyance

Additional Information

my first bug report in life ever ))

Currently vendor prefixes are added programmatically to every CSS property. A better solution would be to install and integrate autoprefixer, so that this task is done automatically.

Some resources:

• https://github.com/postcss/autoprefixer#javascript
• https://raw.githubusercontent.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js
• https://github.com/autoprefixer/autoprefixer.github.io/blob/master/src/main.js

Describe the bug

4:10:08 PM [vite] Error when evaluating SSR module /src/routes/index.svelte:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/neurobro/dev/sveltekit-skeleton/node_modules/svelte-reveal/dist/index.js from /home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js not supported.
Instead change the require of index.js in /home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js to a dynamic import() which is available in all CommonJS modules.
at nodeRequire (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66559:17)
at ssrImport (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66501:20)
at eval (/src/routes/index.svelte:31:38)
at async instantiateModule (/home/neurobro/dev/sveltekit-skeleton/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:66544:9)

Reproduction

[Bug]: Sveltekit (mainly vite) does not work with require() in node_modules/svelte-reveal/dist/index.js

It needs to be converted to import(), I think

package.json using
{
"type": "module"
}

System Info

Windows 10, Firefox

Severity

Blocking

Additional Information

p.s. your repo has some of the tidiest code I have seen. Excellent work :)

Use visibility: hidden instead of display: none.

To-Do:

• Mockup the website UI
• Write an example for every option and API function
• #35
• Deploy website

Describe the bug

when creating the observer like

<div use:reveal={{ transition: "fly", debug: true, ref: "a", threshold: 0.2, marginBottom: 100, marginTop: 100 }}>

the lib options (transition, x, debug, ref, ...) are correctly used, but the Observer options (threshold, marginBottom, ...) are ignored.

This is I guess due to passing config.observer directly in createObserver() instead of creating an object with the user's parameters.

Changing the Observer options through the API (setObserverThreshold, setObserverRootMargin, ...) works fine.

Reproduction

<div use:reveal={{ transition: "fly", debug: true, ref: "a", threshold: 0.2, marginBottom: 100, marginTop: 100 }}>

the applied threshold will be the default 0.6 instead of the desired 0.2. Same for margins and root.

System Info

this is not system-dependant

Severity

Serious, but I can work around it

Additional Information

No response