Sapper - draw just one component, without routing

[mihairaulea]

Problem outline

In Svelte, it was possible to draw just one component. It would then be easy to reload changes and focus work on that single component.

Motivation

This speeds up development considerably - it isolates complexity and limits the developer's concern. I understand writing unit tests would be a way of doing this(sometimes, specs are not 100% clear and writing a unit test is not desirable - in a startup you iterate through several layout possibilities in a week).

Example: While still working on the layout of the component and toying with functions that manipulate data.

Svelte solution

Here's how i would do this in Svelte: have a main.js, a main/main.js and a main/main.debug.js. The main.js instantiates the router, while main.debug.js instantiates just one component, like below:

import EnvTest from './components/test/EnvTest.svelte' ... app = new EnvTest({ target: document.body, props: { mockData: true } })

main.debug.js would get changed by each developer working on the project to instantiate the component they're currently working on. Rollup injects production as an env variable. main.js either imports main/main.js if production is true, or main/main.debug.js if false.

Possible solution - wishful thinking

instead of calling sapper.start, call sapper.drawComponent(component, target: document.body, props: { debugMode: true })

Possible solution 1

Add "dev:svelte": "rollup -c -w" to package.json, and a fork in rollup.config.js(init svelte vs sapper)

Possible solution 2

Use https://sapper.svelte.dev/docs/#goto_href_options to navigate programatically on app start to a route - and use a debug route where components can be injected.

Importance

We are currently able to have 4-5 developers working on a project by splitting work in this manner. If this will not be possible with sapper, it will be a deal-breaker as it disrupts our work flow.

Additional context

We're a UI consulting and product company: https://dashboardhero.dev/