rixo / svench

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

Deployment as a static website #7

Open happybeing opened 4 years ago

happybeing commented 4 years ago

Is it intended that a component library can be published as a static site with the Svench UI and documentation? And if so should this work currently using the svench-component-template?

I moved my lib to a clone of the template and am trying to publish using now (Zeit) and a having some issues.

Firstly index.html tries to load build/svench.js which doesn't exist, so I modified that to point to svench/svench.js but now it is failing to load runtime/hmr-runtime.js

Before I go any further I thought I'd better ask if this should be possible! Thx

rixo commented 4 years ago

Yes it is intended that the workbench app can be built and published.

It probably doesn't work yet though. It probably requires some config tweak, and maybe a bug fix or two...

I'm gonna push the components template to now and add what's needed along the way.

happybeing commented 4 years ago

That's great. I'm just sketching things out for the library, component files and basic docs structure and wondering how this will fit together.

Do you have ideas/plans to allow Svench docs to work with to integrate with documentation in code comment (e.g. jsDocs)? I quite like writing API function descriptions etc in my code. I see people also implementing tests this way too though I haven't got into writing tests yet.

rixo commented 4 years ago

People write tests in code comments? omg, do you have examples / references on that?

But nope, sorry, no plan for API docs support.

Svench's main target use case is the development phase of components (in a programmatically -- hence repeatable -- controlled state).

Fortunately, along this process, you're accumulating examples, which brings you a long way toward some kind of styleguide. So I'm willing to fill the gaps to get an OK styleguide use case too.

Also, the development phase is the best time for some kind of "hot" note taking, so Svench aims at making it reasonably easy to throw a bit of textual descriptions in, and format it about correctly.

But API doc is a completely different endeavor. For once thing, Svench doesn't even really see the source files of the real components -- it sees only the source of the workbench components (i.e. .svench files), which is surely not what you're interested in. Plus that would require some kind of parsing and formatting that we don't do at all for the main use case, so that's out of scope for me.

However, I'm open to adding ways to add arbitrary items to the Svench menu, so you could use the Svench "shell" to display API docs pages for example, but you'll have to provide the full content yourself. But even that is not so easy, because we're entering client side router realm, so I'm not really sure what form it could take.

Actually, more work has been done in the direction of integrating Svench into a larger app (which is also easier) than integrating external content in Svench.

happybeing commented 4 years ago

I may be mistaken about tests in code, probably am thinking about it but I'll keep a look out now!

Fortunately, along this process, you're accumulating examples, which brings you a long way toward some kind of styleguide. So I'm willing to fill the gaps to get an OK styleguide use case too.

Sounds sensible.

However, I'm open to adding ways to add arbitrary items to the Svench menu, so you could use the Svench "shell" to display API docs pages for example, but you'll have to provide the full content yourself. But even that is not so easy, because we're entering client side router realm, so I'm not really sure what form it could take.

This might be handy so let me see what things look like. It may just not be something I need anyway, for this level of API - it's certainly much less complex than the kind of stuff I was thinking about, which is more JS module API rather than web components.

rixo commented 4 years ago

Component template... is alive!! :scream:

I've had to clean the Rollup config and npm scripts to make it work. Ah! And one thing to change to deploy with Now (it has been detected as a Svelte project): change the build script from npm run build to yarn build:svench.

I'm working on styling / theming beside this. Your queries really help a lot getting focus. Thanks :)

happybeing commented 4 years ago

:clap: awesome, thanks very much iUX+Svench is alive too: https://svelte-iux.now.sh

Thanks for responding to my wants so quickly. I'm now starting to get the idea of Svench and can I think start building stuff. Whether any of my components will be any use, who knows :grimacing:

happybeing commented 4 years ago

PS Not really an issue at this point, but something I'm noticing but not really sure of the cause is that I seem to need to restart my project dev server (as in client project of svelte-iux) and / or the Svench localhost instance after some changes, but not all. It may be when I add a new component, and some other cases like editing svelte-iux/src/index.js, but I'm not sure.

It has been pretty perplexing at times, thinking I've done something wrong in the component, the exports etc, but in fact I just needed to restart. May be worth a note in the README or something.

happybeing commented 4 years ago

@rixo I have some prototype components in Svench :partying_face: See https://svelte-iux.now.sh and click on the 'development' directory, top left.