{"id":19450962,"url":"https://github.com/rixo/svench-component-template","last_synced_at":"2025-04-25T04:30:21.118Z","repository":{"id":147724076,"uuid":"265717934","full_name":"rixo/svench-component-template","owner":"rixo","description":"Develop sharable Svelte components with Svench \u0026 HMR","archived":false,"fork":false,"pushed_at":"2020-10-30T15:21:08.000Z","size":50,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T15:44:35.947Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://svench-component-template.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rixo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-21T00:43:16.000Z","updated_at":"2021-05-18T05:59:50.000Z","dependencies_parsed_at":"2023-06-26T00:45:20.304Z","dependency_job_id":null,"html_url":"https://github.com/rixo/svench-component-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvench-component-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvench-component-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvench-component-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rixo%2Fsvench-component-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rixo","download_url":"https://codeload.github.com/rixo/svench-component-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250754495,"owners_count":21481822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T16:39:43.016Z","updated_at":"2025-04-25T04:30:21.095Z","avatar_url":"https://github.com/rixo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svench component template\n\nDevelop your sharable component(s) -- or lib -- with [Svench](https://github.com/rixo/svench) and HMR prewired.\n\nIdeal to try Svench without messing with your project's config ;)\n\n## Demo\n\nThis template is deployed at https://svench-component-template.now.sh/.\n\n## Install\n\n**NOTE** For now, it is recommended to clone the template (instead of degit), to be able to merge future updates to the config (since Svench is in early dev...).\n\n```bash\ngit clone git@github.com:rixo/svench-component-template.git my-lib\ncd my-lib\nyarn\nyarn svench\n```\n\nOpen your browser at http://localhost:4242.\n\nEdit a `.svench` file in `./src`.\n\n### Merging changes from the template\n\nSvench is currently under very active development. Integration with the build config / project setup is the subject of intensive research, so expects its API to change a lot.\n\nIn order to keep up with the changes, I advice that you keep the template's repo as a remote of your project. This way you'll be able to merge upstream changes. Ah! And maybe don't mess with the config too much in your project or the merge may be... hairy!\n\nRun these commands (e.g. after install) to keep the template's remote as `upstream` and add the address of your own repo as `origin`:\n\n```bash\ngit remote rename origin upstream\n# add yours\ngit remote add origin YOUR_GIT_REPO\n\n# push and track to your repo\ngit push -u origin master\n\n# -u is not needed on subsequent pushes\ngit push\ngit pull\n```\n\nPull from `upstream` when you want to merge latest changes from the template:\n\n```bash\n# update from upstream\ngit pull upstream master\n\n# -\u003e this is the point where you might have to resolve a merge conflict or two...\n\n# upstream dependencies might have changed, so reinstall\nyarn\n```\n\n## Usage\n\n### Scripts\n\n#### build\n\nBuild your component(s) in `dist`.\n\n#### dev\n\nWatch and build your component(s) in `dist`.\n\n#### svench\n\n~~~bash\nyarn svench\n~~~\n\nLaunch Svench app at http://localhost:4242, with watch.\n\n##### Nollup\n\nI'm very excited by the in-progress integration of Nollup, because it will mean a quantum leap in rebuild time for projects with the a lot of components.\n\nYou can preview the current progress with the script `yarn svench:nollup`. At this point, we're still using a patched branch of Nollup... (The `yarn svench:nollup:dev` script is useful when developping Svench itself -- it makes Nollup watches \u0026 reload Svench's own sources).\n\n#### build:svench\n\nBuild your workbench in `public`.\n\n## Styling\n\nCustom styling and theming is very much under development in Svench. This template implements some ideas to tackle the question of styling user content like markdown pages without leaking CSS into the views (i.e. the components behind demonstrated).\n\nWe add the `rehype-add-classes` to Mdsvex to add the `svench-content-md` to _every_ Mdsvex-rendered elements. This way we can achieve Svelte-like CSS scoping for our markdown content.\n\nNote: we can't rely on a generic class on containers, because every container element Svench can control also contains the views. This means that any inheritable CSS property (e.g. `color`, `font-size`...) set on the container would be inherited in the view. Also, coupling your target selector (e.g. `h1`) with the very specific class we add (`svench-content-md`) should prevent any selector collision with your actual components in the views.\n\n```css\nh1.svench-content-md {\n  font-size: 2em;\n}\n```\n\nThis templates also includes a PostCSS plugin and a custom svench entrypoint, in `.svench/svench.js`. This lets you add custom styles for your workbench in `.svench/svench.css`. You can also add a preprocessor like Sass or Less if you want. Refer to the instructions in [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss#with-sassstylusless).\n\nNote: don't try too hard to add a padding to your markdown pages... This is more a question of layout more than styling, and would need extra support for Svench itself... That is currently a work in progress!\n\n## Consuming components\n\nThis template follows instructions from the official template, regarding publishing of Svelte components. Notably, it has a `svelte` field in `package.json` that points to the components' source code.\n\nRefer to the [official component template](https://github.com/sveltejs/component-template#consuming-components) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frixo%2Fsvench-component-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frixo%2Fsvench-component-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frixo%2Fsvench-component-template/lists"}