Adding required dependencies `sass` and `node-sass` in the README / Getting started

gspasov commented 2 years ago

Before you start...

[X] Have you updated your dependencies? You might be using an old version of the library.
[X] Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

When adding ProgressRing to a SvelteKit project, when trying to build or run dev you arrive to the following error:

[vite-plugin-svelte] Error while preprocessing {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte - Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- {project-path}/node_modules/svelte-preprocess/dist/modules/utils.js
- {project-path}/node_modules/svelte-preprocess/dist/autoProcess.js
- {project-path}/node_modules/svelte-preprocess/dist/index.js
file: {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte
> Error while preprocessing {project-path}/node_modules/fluent-svelte/ProgressRing/ProgressRing.svelte - Cannot find any of modules: sass,node-sass

This error is simply fixed by adding sass and node-sass as dev dependencies to the project.

My proposal is to add this in the README description so that people are not confused when trying to use fluent-svelte.

Alternative solutions

Adding a description in the README with the prerequisite of installing sass and node-sass as dev dependencies to your project before adding fluent-svelte.

Relevant Assets

No response

Tropix126 commented 2 years ago

This is very strange and shouldn't be happening, as SvelteKit's package feature should be preprocessing the SCSS before it hits NPM. I'll look into it.

Tropix126 commented 2 years ago

Can you share the contents of the ProgressRing.svelte file in your node_modules folder?

gspasov commented 2 years ago

<script >import { createEventForwarder } from "../internal";
import { createEventDispatcher } from "svelte";
import { get_current_component } from "svelte/internal";
/** Determines a completion amount in percentage (0-100). If no value or an invalid value is provided, the ring will be indeterminate. */
export let value = undefined;
/** The size (diameter) of the ring in pixels. */
export let size = 32;
/** Specifies a custom class name for the ring. */
let className = "";
export { className as class };
/** Obtains a bound DOM reference to the ring's SVG element. */
export let element = null;
/** Obtains a bound DOM reference to the ring's fill circle element. */
export let circleElement = null;
const forwardEvents = createEventForwarder(get_current_component(), ["change"]);
const dispatch = createEventDispatcher();
let circumference;
$: indeterminate = typeof value === "undefined" || value === null || Number.isNaN(value);
$: dispatch("change", value);
$: if (circleElement)
    circumference = Math.PI * (circleElement.r.baseVal.value * 2);
$: if (value < 0) {
    value = 0;
}
else if (value > 100) {
    value = 100;
}
</script>

<!--
@component
ProgressRing provides visual feedback to to the user that a long-running operation is underway. It can mean that the user cannot interact with the app when the progress indicator is visible, and can also indicate how long the wait time might be. [Docs](https://fluent-svelte.vercel.app/docs/components/progressring)
- Usage:
    ```tsx
    <ProgressRing />
    <ProgressRing value={50} />

--> <svg use:forwardEvents bind:this={element} tabindex="-1" class="progress-ring {className}" class:indeterminate width={size} height={size} viewBox="0 0 16 16" role={value ? "progressbar" : "status"} aria-valuemin={!indeterminate ? 0 : undefined} aria-valuemax={!indeterminate ? 100 : undefined} aria-valuenow={value} {...$$restProps}

<circle bind:this={circleElement} cx="50%" cy="50%" r="7" stroke-dasharray="3" stroke-dashoffset={((100 - value) / 100) * circumference} />


I'm using version `1.5.1`
sorry for replying so late

Tropix126 commented 2 years ago

Ah, I see the issue; left in a src="./ProgressRing.scss" rather than @useing it so it's not being preprocessed right. Have fixed in https://github.com/Tropix126/fluent-svelte/commit/468a5dd148d8a5d6ffb5143ded29734f1433fe85.

Tropix126 / fluent-svelte