Use case - building a component library and importing into other projects

[happybeing]

This issue is to ask if this is a sensible use case for svench right now, and if so are you able to guide me in setting this up? No worries if not, I want to get on and can come back to svench later.

---

I'd like to keep Svench outside my project for two reasons. Firstly because I want to test create components I can import into other projects (private for now), secondly because integrating Svench messes with stuff I don't understand (e.g. rollup configs) and I'm wary of breaking things in the project and making them hard to debug.

So I checked out the basics of Svench/example and it looks great so am trying to figure out how to use it to build a new library svelte-iux and import the components from there into my other projects and I'm quickly out of my depth.

So this issue is to ask if this is a sensible use case for svench right now, and if so are you able to guide me in setting this up?

I began by making a copy of svench/examples as svelte-iux, changed the module name from svelte-app to svelte-iux but from there I'm stuck as I'm not sure how to modify the package.json and rollup configs to make my components (actually just the svench/examples for now) available to my other project. I got as far as yarn linking to the local svelte-iux but I can't get my project build to resolve svelte-iux.

So I undid the yarn links and tried imported a svench/example component directly into my project:

import {Child} from '../../../src/svelte/components/svelte-iux/public/build/bundle.js';

This compiles, but if I use in my app.svelte I the project just serves a page with "Hello Svench!" etc. on it and my other components disappear.

I know you may not be able to help, but wonder if there's a way to do this. In the mean time I will try to set up a stand-alone component lib and get that working, and maybe try adding Svench later if you can suggest how that would integrate with a module containing a library of svelte components.

[rixo]

I think the use case is sensible. Right now is the question... If you're interested in riding along development, no problem, I can help. But expect things to move a bit before stable.

Setup wise, it should be easier to setup a standalone Svench app than trying to collocate it with another app (the main use case I'm pursuing).

In this case, you're not interested in the build output of the Svench app. You shouldn't use precompiled Svelte components in a Svelte app, this causes bugs. Compiled components are intended to be use standalone.

That means you need to import the .svelte files from your lib directly into your consumer app. For example:

import Child from '../../../src/svelte/components/svelte-iux/src/Child.svelte';

You can still export your Svelte components from an index.js and access that instead, but you need to import the source so that the same Svelte module (same version, same location on disk) will compile them all.

src/index.js

export { default as Child } from './Child.svelte'
export { default as Foo } from './Foo.svelte'

Consumer:

import {Child} from '../../../src/svelte/components/svelte-iux/src/index.js';

Yarn link should work. To troubleshot, check that you have a symlink in node_modules that points to your svelte-iux project. If not maybe create it manually with ln...

Then you should be able to import with plain name:

import {Child} from 'svelte-iux/src/index.js';
// or
import Child from 'svelte-iux/src/Child.svelte';

To further simplify you can set the main field of your lib to src/index.js in package.json. Note that the "main" should actually be "svelte" or "browser", depending on your config. If you're an UI lib, it might make sense to set all of three:

package.json

{
  "main": "src/index.js",
  "svelte": "src/index.js",
  "browser": "src/index.js",
  ...
}

And then, this should work:

import {Child} from 'svelte-iux';

Hope this helps.

[happybeing]

Very helpful, so thanks again @rixo. I appreciate you taking the time to explain this so clearly.

I might explore Storybook a bit today and may come back to Svench when I have more understanding - I'll certainly keep an eye on it. I am in learn from very low base mode so am not sure how much I can help or would get in the way, esp as I'm not your main use case. If I don't like Storybook I'll be back :wink:

BTW I did a quick test using your first suggestion and of course it works: import Child from '../../../src/svelte/components/svench/example/src/Child.svelte';

And you've taught me the difference of import Child ... v import {Child} .... I can now see how to use the latter too. I should know this by now, but the build messages are too vague to trigger the right synapse in this creaky brain.

[happybeing]

UPDATE: Had a look at Storybook so I'm back! Storybook looks like a lot of overhead with little use for a one person or even small team, and from what I can see doesn't help with things that Svench does without so much overhead. They've put a lot of work in but I'm not impressed with the onboarding or the Storybook UX (e.g. in first tutorial there's lots of "go get this file off github", modify this config, rather than "clone this repo" followed by just working on what they want to teach).

Anyway I've made svelte-iux using the Svench example directory and am going to try making my components in there with Svench and see how it goes.

Thanks for your help.

[rixo]

Ah ah, wasn't waiting for you back so fast ;)

esp as I'm not your main use case

Actually, this use case is a subset of the main use case, so it is the main use case... Just easier in some respects.

As such, I figured it might be a very good first step for people to try Svench. I've released the last version of Svench and prepared a component lib template, inspired by your comment.

The hardest part with the whole of the main use case, as you have identified, is integrating / messing with an existing project config... I can see the difficulty of the task, but I hadn't fully appreciated that it could be perceived as prohibitively dangerous for people who are not in full command of Rollup's arcanes.

I have been thinking of "presets", that would give you one-liner integrations in known setups, like the official Svelte template... But I'm split on this idea. What I don't like is hiding the whole of what the Svench plugin is doing (changing input and output, producing a HTML entry point for Svench, and serving the result) from the user, hence hampering their capacity to understand, debug and later customize. But your comment makes me think twice... Any opinion on this?

Alternatively, just an idea for now, but would it be less intimidating if there was a command-line utility that would "inject" the Svench plugin into an existing Rollup config? I'm thinking something like this:

yarn svench -c rollup.config.js

It would customize the config at runtime (which would be pretty hard to automatize correctly for any setup unfortunately :-/) and run Rollup behind the scene. The value I see in doing this is that it would help people getting on board without risking to break their existing working config...

I'm glad you're back. You taking the time to try things and provide a feedback has been really helpful. It's a bit design-by-expressed-needs here, so hearing about other perspectives is very precious. Please don't take any pressure from this, I fully understand that using a tool under active development can be a drag over time, but if you're interested in working on making Svench more closely fitting to your specific needs, I'm willing to work with you and offer related assistance where I can :)

[happybeing]

Actually, this use case is a subset of the main use case, so it is the main use case... Just easier in some respects.

Cool!

As such, I figured it might be a very good first step for people to try Svench. I've released the last version of Svench and prepared a component lib template, inspired by your comment.

And very cool :smile:

I hadn't fully appreciated that it could be perceived as prohibitively dangerous for people who are not in full command of Rollup's arcanes.

Regard me as a very naive user. Do I still fit, or maybe even fit better what you are trying to achieve? I think the above is a widespread and important issue with lots of tools, and the whole web framework, node et al ecosystem. I expect you know what I mean. TL;DR it is big, complex and hard to get to the point where you have any idea what you need to know to get where you want to go. I found this even as a previously very experienced s/w dev returning after a break of about 15 years. I suspect many just give up.

I don't know a good way to solve this with svench or more broadly. I just know it has been worth learning what I needed to in order to get productive and able to help others get started. I still know nothing, but can build stuff, good stuff, just not (yet) good looking stuff. Anyway, back to your reply.

"Presets" sound like a reasonable approach, but I see the limitations and difficulties. So I'm not sure as noted. Maybe I'll think of something more helpful to say.

yarn svench -c rollup.config.js

Yes, this sounds helpful. I like it when people have written guides in their README which anyone can just follow and learn what it means later. It has been incredibly frustrating dealing with all the assumptions people leave out (such as required node version - node, I need node, what is that, and it has to be a certain version blah blah blah). I now know enough to work it out from scratch most of the time, but this is after five years plugging away learning as I go.

I'm glad you're back. You taking the time to try things and provide a feedback has been really helpful.

This is great to hear. :smile:

It's a bit design-by-expressed-needs here, so hearing about other perspectives is very precious. Please don't take any pressure from this, I fully understand that using a tool under active development can be a drag over time, but if you're interested in working on making Svench more closely fitting to your specific needs, I'm willing to work with you and offer related assistance where I can :)

All this is good too. I don't take pressure unwillingly now but good to know you have no expectation I will. So this sounds awesome.

In turn you should consider whether to respond to a naive and I imagine not your target market user or not. I won't expect anything in this respect either, and have to add that my trying to make some components for an innovative UX is part of a bigger project rather than my thing, and an area I'm not experienced of confident in. So I don't know how successful it will be or how long I'll work on it. It might just not work very well or I might be not very good. I expect I can do enough to get the ideas across and some demo UI, but may look for more experienced help at that point.

Anyway, glad to have met you @rixo and hope we can help each other. Svench looks like a great project so if I can help a bit that will be win win. Now I'm going to try and ... make ... a ... component or two. There may be silence for a while!

[rixo]

Well, I don't have target markets. It's OSS, everybody does as they feel -- which, interestingly often leads to everybody doing their best.

I mean I just appreciate someone like you hanging around and offering perspectives on your experience with the tool, if you feel like it. Otherwise it's just me, doing me, for me, my way, and judging myself. A bit limiting IMO ^^ Your report are mindful also, which is truly appreciable.

Don't worry about being off topic or whatever. Helping people by sharing pieces of knowledge I happened to have encountered before them is one of my kinks. Just check my StackOverflow profile... So mixing tool project specific discussion and related user support is perfectly cool with me.

[happybeing]

Quick question. I'm using Svench to write an intro document that will probably go in my README at some point and notice that the h2,h3,h4 styles are all same sized font (1em) as defined in DefaultTheme.svelte which I'm not familiar with. I located it in:

./node_modules/svench/src/app/DefaultTheme.svelte

What's the best way to tweak those styles for Svench or in my svelte-iux project?

[rixo]

Well, actually this point has been a little stuck... I mean the styling of user content, mdsvex notably.

The problem is that views are contained in the user's component, so CSS for the markdown (or any user content in the component) targeting the component would leak into views (and the user's component inside them)...

/* this would affect any h1 in views */
.svench-component h1 {
  font-size: 2em;
}

One solution I imagine is to add a given class (e.g. svench-content) to every element rendered by Mdsvex.

You would then be able to add a global stylesheet like this, that would achieve the same kind of scoping as Svelte components:

h1.svench-content {
  font-size: 2em;
}

I'll try to see if I can plug together something working in the component template.

I wonder how much of this global CSS (typically for markdown content) should be included in Svench and how much should be left to the user... Mdsvex itself is a pretty hefty dep (5mb) that I'm not sure I want to include in the core. Need to think about this...

Regarding the h2, h3 rule in the theme, I think it is a mistake... I'm gonna remove it.

[happybeing]

I wrote a thing about iUX, any comment would be very welcome. It was supposed to be the TODO list I was writing using Svench/mdx but this is what fell out.

You only have yourself to blame :wink: see: https://github.com/theWebalyst/svelte-iux#svelte-iux-vision

[rixo]

@theWebalyst Took a quick look at your repo. Seems interesting. You practice Readme-driven development? Btw, if you feel like writing some docs for Svench, you're very welcome to do so... Even if we should still probably let things settles a little!

Regarding your styling problem, I've implemented the idea I mentioned earlier in the component template. This should already let you style your markdown content without leaking CSS into the views... You can check this new section in the README for details.

[happybeing]

Took a quick look at your repo. Seems interesting. You practice Readme-driven development?

Not really, I usually have stuff in a PIM (Zim) but decided to start leaning about Svench documentation by writing for that, which meant I had markdown, which was easily transferred to GitHub in order to share with some interested folks. I still find GitHub clunky for all but it's core activities.

Btw, if you feel like writing some docs for Svench, you're very welcome to do so... Even if we should still probably let things settles a little!

Nice try 🤣 ...who knows.

Now I'm off to check out your new docs. Thanks.

BTW you probably know it, but I've just been reading a very good book on CSS which has explained a lot of my past "WTF is going ons" and is a great reference for the future. At the end there's a decent index too: http://book.mixu.net/css/