search

rixo / svench

A lightweight workbench to develop your Svelte components in isolation
svench-docs.vercel.app
208 stars 6 forks source link

Where to put index.svench? #9

Closed happybeing closed 4 years ago

happybeing commented 4 years ago

The home page says:

Create an index.svench file at the root of your Svench directory to customize this page.

But I'm not able to figure out where this goes. Is it currently working?

rixo commented 4 years ago

It should be src/index.svench, src being the "Svench directory".

But yes, I've just checked in the component template and it seems to be broken currently.

I'll look into it and add an index to the template as an example.

rixo commented 4 years ago

Should be fixed in svench@next (0.0.9-8).

I've added an example index file to the component template: https://github.com/rixo/svench-component-template/blob/master/src/index.svench.svx

index.svench is also available for sections (that are just special directories), directories (that are just special components), and (you guessed it) components! But from what I saw it wasn't broken, so I think you've already found that!

happybeing commented 4 years ago

I'm having trouble updating. Tried: yarn add svench@next

Which caused error with yarn dev so I did yarn upgrade

Same. Tried git pull upstream master (from template). This cause missing module, so did: yarn add -D rollup-plugin-delete And now yarn dev is giving:

bundles .svench/svench.js → public/svench...
[HMR] Listening on port 33440
[HMR] Serving from RAM at http://127.0.0.1:33440
[!] (plugin svelte (hot)) TypeError: Cannot read property 'preprocess' of undefined
node_modules/svench/src/Svench.svelte
TypeError: Cannot read property 'preprocess' of undefined
    at markup (/home/mrh/src/svelte/components/svelte-iux/rollup.config.js:88:34)
    at preprocess (/home/mrh/src/svelte/components/svelte-iux/node_modules/svelte/compiler.js:26614:34)
    at Object.transform (/home/mrh/src/svelte/components/svelte-iux/node_modules/rollup-plugin-svelte-hot/index.js:284:26)
    at /home/mrh/src/svelte/components/svelte-iux/node_modules/rollup/dist/shared/rollup.js:18003:25

Looks like I'm nearly there, but not sure what this is. Looks like the call to svench() in the rollup config is not returning $ but I'm not clear what's going on there.

rixo commented 4 years ago

Hmm... Made it to work in https://github.com/theWebalyst/svelte-iux/pull/1

I had to overcome a few hurdles but I didn't get the exact same error as you... Hope this will work for you too!

I've made a few enhancements to the component template... The most notable change is that I've now made Mdsvex a dependency of Svench. This was a hard decision because I'm not too much a fan of the hard coupling, but nice integration requires quite a bit of non trivial work (configuration extensions, adding classes to mdsvex elements...), and this can't be automatized by Svench if it hasn't a deep control of the Mdsvex preprocessor :-/ I guess I could make that a svench-plugin-mdsvex or something but here again, I'm not too sure... Mdsvex enables pretty important use cases for Svench... Anyway, that would be too much maintenance to have independent Svench plugins at this stage. So here we are, Mdsvex is currently embarked with Svench!

This $ solution in the config is horrible :sweat_smile: This is hidden from view with svenchify, but I need to come up with something cleaner / more intelligible for the "component template" format, eventually...

Ah! You should also get preliminary Nollup support with the PR! You should be able to try it with yarn svench:nollup. We're still actively working on the Nollup integration currently (at Nollup too!) so, if you try it and see anything obviously not working, feedback would be very appreciated :D

rixo commented 4 years ago

I've also updated the upgrade instructions in the README, thanks to your feedback :)

# update from upstream
git pull upstream master

# -> this is the point where you might have to resolve a merge conflict or two...

# upstream dependencies might have changed, so reinstall
yarn
happybeing commented 4 years ago

Thanks! Still stuck though, and this is odd. First I tried merging your changes into a branch on my dev repo. That didn't work, so I have instead just cloned your fork and checked out rixo. In both cases I get the same error.

Here's the full process of the latter and the error:

git clone https://github.com/rixo/svelte-iux svelte-iux-rixo
cd svelte-iux-rixo
git checkout rixo
yarn && yarn dev

yarn run v1.22.4
$ rollup --config --watch
loaded rollup.config.js with warnings
(!) Unused external imports
default imported from external module 'rehype-add-classes' but never used
[Svelte HMR] Setting css option to false (set hot.noDisableCss to true to bypass)
rollup v2.12.0
bundles .svench/svench.js → public/svench...
[HMR] Listening on port 33440
[HMR] Serving from RAM at http://127.0.0.1:33440
[!] (plugin svelte (hot)) TypeError: Cannot read property 'preprocess' of undefined
node_modules/svench/src/Svench.svelte
TypeError: Cannot read property 'preprocess' of undefined
    at markup (/home/mrh/src/svelte/components/svelte-iux-rixo/rollup.config.js:77:34)
    at preprocess (/home/mrh/src/svelte/components/svelte-iux-rixo/node_modules/svelte/compiler.js:26592:34)
    at Object.transform (/home/mrh/src/svelte/components/svelte-iux-rixo/node_modules/rollup-plugin-svelte-hot/index.js:290:26)
    at /home/mrh/src/svelte/components/svelte-iux-rixo/node_modules/rollup/dist/shared/rollup.js:18003:25
rixo commented 4 years ago

Oh ok, I managed to reproduce the issue now.

Can you try with yarn svench instead of yarn dev?

yarn svench (and yarn svench:nollup, fast! try it!) and yarn build:svench are intended to run & build the workbench.

yarn dev and yarn build are intended to build (and watch + build) your components / lib. They're essentially straight from the official template. They produce ESM and UMD builds of your compiled components, for consumption outside of a Svelte app (you need to use .svelte sources directly for consumption in a Svelte app).

I'm open to suggestion if you find this scripts layout confusing :sweat_smile:

Hmm. And I'm gonna check this yarn dev issue. It's supposed to work, even if I think that it might be of limited use in most cases.

rixo commented 4 years ago

OK I've fixed the dev / build scripts, and published updates to the component template (the fix itself was in Svench core).

I've updated my PR with the latest version of the template. You should merge it, in order to be able to keep updating from upstream. The more you wait, the harder it gets!

At this stage, I'm more than OK to help you with the upgrades / provide PRs like this. I'm learning a lot from other people's projects!

happybeing commented 4 years ago

Oh sorry, I'm so used to typing yarn dev. I've just merged your fork/branch into and yarn svench seems fine again, thanks! Maybe it was earlier tho :blush:

yarn && yarn dev gives:

rollup v2.12.0
bundles src/index.js → , src/index.js...
[HMR] Listening on port 33440
[HMR] Serving from RAM at http://127.0.0.1:33440
[!] Error: Cannot import the generated bundle
Error: Cannot import the generated bundle
    at Task.watchFile (/home/mrh/src/svelte/components/svelte-iux/node_modules/rollup/dist/shared/watch.js:769:19)
    at Task.updateWatchedFiles (/home/mrh/src/svelte/components/svelte-iux/node_modules/rollup/dist/shared/watch.js:751:18)
    at Task.run (/home/mrh/src/svelte/components/svelte-iux/node_modules/rollup/dist/shared/watch.js:720:18)
    at async Watcher.run (/home/mrh/src/svelte/components/svelte-iux/node_modules/rollup/dist/shared/watch.js:641:17)

I'll now go merge the template and see what happens.

happybeing commented 4 years ago

I was up to date with the template after merging your branch :smile: so no change.

rixo commented 4 years ago

I can reproduce this. There are a few issues... HMR shouldn't be running for your components' build (since there's no associated web site / app). And there's this mysterious Rollup error. I don't get it in the raw template :thinking:

Well, I'm on it!

rixo commented 4 years ago

Got it. It was the modified fields in package.json that directed the Rollup build to be written on the source file itself... I've sent another PR (just in case you didn't do it on purpose, you didn't merge the first one).

happybeing commented 4 years ago

Thanks. I've been merging manually but hadn't pushed back and have now merged and pushed the changes so we should be in sync. Doing things manually with github as a backup allows me to back out of things when I mess up, which has been known! :smile:

Thanks again for sorting this.