Where to put index.svench?
happybeing opened this issue · comments
The home page says:
Create an
index.svenchfile 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?
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.
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!
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.
Hmm... Made it to work in happybeing/svelte-iux#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 😅 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
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
yarnThanks! 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
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 😅
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.
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!
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 😊
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.
I was up to date with the template after merging your branch 😄 so no change.
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 🤔
Well, I'm on it!
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).
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! 😄
Thanks again for sorting this.