Document using Skeleton with Vite/Svelte about skeleton HOT 7 CLOSED

NOTE edited this message to keep only relevant info

The documentation instruction for CodeBlock been updated to reflect the fact Highlight.js comes included with Skeleton v0.30.7:

https://skeleton.brainandbonesllc.com/utilities/codeblocks

from skeleton.

@JensPfeifle I just noticed you mentioned you were using Vite/Svelte in place of Sveltekit!

I'm terribly sorry, your original message may have been appropriate for the "decoupling" ticket. I apologize for my hastiness, if it's any excuse I had just woke up :)

All the same this may be better served in a dedicated ticket like this. Since you and couple others have expressed interest in using Skeleton outside of SvelteKit I'll go ahead and see what I can do to get this working. At least note what issues I find along the way and any potential work arounds. I'll follow up asap.

from skeleton.

Here's my current progress (NOTE: updating this frequently)

These instructions should provide a functional Vite/Svelte app that includes Skeleton.

Install Vite w/ Svelte and Typescript:

# npm 6.x
npm create vite@latest my-vite-skeleton-app --template svelte-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vite-skeleton-app -- --template svelte-ts

cd vite-skeleton-app
npm install
npm run dev

Install Tailwind via svelte-add:

npx svelte-add@latest tailwindcss
npm install

NOTE: you may want to cleanup your /src/App.svelte and /src/app.css after install

Follow the existing Skeleton docs for the following:

NOTE: /src/main.js replaces SvelteKit's /src/__layout.svelte

• Install skeleton: npm i @brainandbones/skeleton --save-dev
• Implement Skeleton's Tailwind configs
• (OPTIONAL) apply your own global css styles in app.css
• (OPTIONAL) install Tailwind plugins, like Forms

NOTE: TEMPORARY WORKAROUND UNTIL THE FOLLOWING PRs GO LIVE:

• #82
• #87

- Browse to `/node_modules/@brainandbones/skeleton/index.js`
- Comment and disabled: CodeBlock/LightSwitch/Menu

Start a local server:

npm run dev

Implement any desired Skeleton components. Here's an example using Button and Dialog:

There's a few issues of note here:

1. Disabling anything in a local Node package file is ill-advised, this is only for a proof-of-concept
2. #82 will negate Menu/Lightswitch issues
3. When the CodeBlock is allowed, I get similar issues to Jens (reported in the OP):

The issue appearas to be tied to the import method for Highlight.js within the CodeBlock component. I may recommend we remove the CodeBlock from public consumption until this issue can be solved. At least assuming a fix is not found in a timely manner!

Any help in resolving this is welcome!

from skeleton.

For reference - highlightjs/highlight.js#3527 there is a screen grab showing the exact error we get.

I've also gone ahead and asked them for any advice highlightjs/highlight.js#3597

from skeleton.

Great call @niktek, I've subbed to your new ticket and will monitor progress as well. I'll give the above ticket a full read when I return to this task. I've also broke this out to a dedicated ticket since it may extend beyond the life of this one.

Just to give everyone a heads up that sees this, I'm still leaning towards either a modification to the CodeBlock component or potentially removing it from public access within the Package in the next release. Then returning it when we have more time to revisit. I'd rather prioritize Skeleton working in Vite over the CodeBlock component for now. I think that's a worthwhile trade. But I'd welcome feedback on others on this plan of action.

from skeleton.

FYI: #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: #82

This handles issues with Menu/Lightswitch in Vite projects.

Between these two changes we should be ready to implement documentation instructions for using Skelton with Vite. I'll add these soon.

from skeleton.

THIS IS READY TO TEST!

Vite/Svelte instrunctions are now ready on branch feat/vite-svelte. View the commit here: 34438ed

Guided instruction appear under tabbed sections like so:

WARNING: if you attempt to follow these directions, you'll still need to adjust your local node_modules > Skeleton package > index.js and disabled CodeBlock/Menu/LightSwitch until the next release goes live.

I've also made updates to other guide pages and component docs as relevant. See the commit for details.

from skeleton.