Decouple Skeleton from SvelteKit

[endigo9740]

Per this message on Reddit, it looks like more testing is needed to ensure Skeleton works for non-SvelteKit projects.

Process

1. ~Identify any and all component or utility where SvelteKits-specific options are used~
2. ~Evaluate solutions for adjusting each component to avoid dependency on SvelteKit~
3. ~Implement those changes~

Additional Install Instructions

We should expand Skeleton's install instruction to cover various configurations, including:

• Vite - via https://github.com/Brain-Bones/skeleton/issues/83
• Astro - via https://github.com/Brain-Bones/skeleton/issues/93
• Routify - (coming soon)
• (welcoming other suggestions here)

Components to Address

Menu Component

The Reddit user's issue has to do with the fact the Menu component is reliant on a feature that's specific to SvelteKit, the navigating module, which is used to close the menu when you navigate away from the current view.

[niktek]

New Svelte project with TS, added Skeleton and commented out the exports from within node_modules/.../index.js, these are the ones that error out:

export { default as CodeBlock } from "./CodeBlock/CodeBlock.svelte"; // fails to resolve highlight.js
export { default as LightSwitch } from "./LightSwitch/LightSwitch.svelte"; // refers to $app/env for browser
export { default as Menu } from "./Menu/Menu.svelte"; //refers to $app/stores

[endigo9740]

Ok, not too bad. Highlight.js is a required dependency for CodeBlocks. Follow the instruction on the doc to resolve that: https://skeleton.brainandbonesllc.com/utilities/codeblocks

LightSwitch uses the following to determine if the app is loaded in the browser, a lifecycle hook essentially: import { browser } from "$app/env";

Switching to a Svelte supported lifecycle hook may be enough to resolve that. Something like onMount: https://svelte.dev/tutorial/onmount

That just leaves the menu issue mentioned in the original post. Perhaps we could use an onDestory here: https://svelte.dev/tutorial/ondestroy

This seems reasonable. May require a bit of testing but I think we can make it happen!

[endigo9740]

@JensPfeifle has provided a great PR to help with the first half of this ticket.

https://github.com/Brain-Bones/skeleton/pull/82

This prunes the SvelteKit-specific features from either component per the suggestions above. However, I'll delay the merge until we can also document and provide instructions for how to install and setup Skeleton for other tools like Vite, Astro, etc.

The partial (but probably incomplete) list of those is in the original post above. I welcome anyone's instructions for documenting the process for each of these tools. Post them here and I'll find a means to merge it all together and update the homepage when ready.

[endigo9740]

Track progress on Vite/Svelte instruction here: https://github.com/Brain-Bones/skeleton/issues/83

[endigo9740]

FYI: https://github.com/Brain-Bones/skeleton/issues/86

CodeBlock will be disabled from the next release until further notice. We'll revisit a different way to implement this and reintroduce in a future update.

See also: https://github.com/Brain-Bones/skeleton/pull/82

This will ensure issues with the Menu and LightSwitch no longer affect Svelte apps that do not use SvelteKit.

[endigo9740]

Documentation for Astro is ready, per: https://github.com/Brain-Bones/skeleton/issues/93

[endigo9740]

Per the original post, #83 and #93 have been closed as these changes have been merged from Dev.

We're still needing proper QA testing for the new updates to the docs. This covers:

• Homepage - mainly "Getting Started" install instructions (each tab)
• Guide sections (Tailwind, Themes, Styles, etc)
• Newly introduce "Astro" guide section

Areas of focus will be the text copy messaging (it's it clear and concise), plus spelling/grammar/etc.

[bkcsfi]

Hi,

~~Sveltekit just changed $app/env to $app/environment, this broke my app because LightSwitch.svelte version 0.0.1 refers to $app/env~~

please disregard, upgrading to 0.32.19 fixed this. thanks

[endigo9740]

Yeah, the LightSwitch underwent a fairly large change in 0.32.19 that would correct this. Sorry for the confusion @bkcsfi

[endigo9740]

I'm feeling pretty confident about the three primary frameworks we support right now, so I'm going to go ahead and close this issue. If requests come in for Routify or similar we can always generate new tickets in the future.