easyroute-router / svelte-easyroute Goto Github PK
View Code? Open in Web Editor NEWConfig-based router for Svelte in style of Vue Router with SSR support
Home Page: https://easyroute.lyoha.info
License: MIT License
Config-based router for Svelte in style of Vue Router with SSR support
Home Page: https://easyroute.lyoha.info
License: MIT License
Hi thanks for developing this! I'm trying to use it with the svelte 3 webpack template and I followed all the instructions but I get the following error when I try to npm run dev
:
ERROR in ./node_modules/svelte-easyroute-webpack/RouterLink.svelte 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="router-link" on:click={navigateRouter}>
| {#if text && text !== ""}
| {text}
@ ./src/App.svelte 15:0-67 20:23-33 22:23-33
@ ./src/main.js
@ multi ./src/main.js
If I edit my webpack.config.js
to remove exclude: /node_modules/
under rules, it removes the error and everything works fine. Is this the intended way to set up the router? I'm not all that familiar with webpack, so the default setting of exclude: /node_modules/
came from the svelte webpack template
Here's a link to my project repo (it's just a very simple scaffold), where I noted the line in the webpack.config.js
file: https://github.com/ejolly/svelte_frontend_driven
nice work! is there some way to use nested route like vue-router
router : {children:[{ path: 'somePath', component: InnerComponent }]}
template: <router-view>
I have a simple router:
const router = new Router({
mode: 'hash',
routes: [
{
path: '/',
name: 'layout',
component: MainLayout,
children: [
{
path: '',
name: 'Dashboard',
component: Dashboard,
meta: {
title: 'Dashboard',
},
},
],
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
title: 'Login',
allowAnonymous: true,
},
},
],
})
router.beforeEach = async (to, from, next) => {
if (!to.meta.allowAnonymous && get(userStore) == null) {
next('/login')
} else {
document.title = to.meta.title
? `${to.meta.title} | ${window.config.appName}`
: window.config.appName
next()
}
}
export default router
when I try to navigate to /login, this works nicely, but as soon as I try to navigate to the dashboard, I'm getting this error in the console:
svelte-easyroute.umd.js:1 Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
at e (svelte-easyroute.umd.js:1)
at e.parsePaths (svelte-easyroute.umd.js:1)
at e.getPathInformation (svelte-easyroute.umd.js:1)
at new e (svelte-easyroute.umd.js:1)
at create_fragment$2 (App.svelte:3)
at init (index.mjs:1451)
at new MainLayout (App.svelte:3)
at Object.update [as p] (RouterOutlet.svelte:72)
at update (index.mjs:733)
at flush (index.mjs:702)
In the previous version (2.1.0) I used this pointed to PathService.parsePaths if that helps you.
So I tried to clone your repo and try the demo app, but that doesn't seem to work for me either. There I'm receiving
Cannot GET /
I didn't change anything in your example project, just installed necessary npm modules.
Can you help me with this please?
Здравствуйте, Алексей.
Прежде всего хочу вас поблагодарить за роутер для Svelte. Профессиональная, масштабная и доведенная до конца работа. Использую его в своем последнем проекте.
Вопрос у меня такой. Один из связанных с роутером компонентов содержит такой фрагмент:
<figure>
{#await DOTLoader}
<p class="graph-waiter">Ожидаются данные...</p>
{:then data}
<Graph {data} />
{:catch error}
<p class="graph-error">{error}<p>
{/await}
<figcaption>
<a target="_blank" href={url}>{name} в Википедии</a>
</figcaption>
</figure>
Полный его код здесь .
Пока я перехожу по другим ссылкам роутера, всё работает хорошо. Как только открываю этот компонент - переходы по прочим ссылкам перестают работать.
Похоже, дело в асинхронности, но как отладить - не соображу, подскажите, пожалуйста.
This router have any package we can install from to get typing ?
Importing anything from 'svelte-easyroute' eslint warning about not found types for it.
Hi, first off, this router looks really promising! Nice work!
While playing around with it in a sandbox, I noticed that currentRoute
is never populated on the initial load. It is only set when switching to another page - is this a bug? Please see the console at:
https://codesandbox.io/s/svelte-easyroute-simpliest-demo-forked-2k18c
One more thing, the beforeEach
doesn't seem to work properly either, the fullPath
is always identical on both from
and to
.
Another thing that I noticed is that apparently, useCurrentRoute
currently doesn't return a plain readable Svelte store. If it did, it would make the boilerplate for each component a bit more compact (using reactive $
code), and you would not have to unsubscribe manually. Any thoughts on this?
Hi,
Thanks for this router, it was working perfectly until the last update. Now I am getting RouterOutlet is not defined when using Rollup. I can see in router.js that the line // import RouterOutlet from './RouterOutlet.svelte'
is commented out. Was this done in error?
If I uncomment that line everything works again.
Thanks for you help!
I'm getting an error with the default svelte rollup template and it looks like this packages deps are all WebPack based.
Vue router has a really nice property on routes called props. If set to true
, it dispatches all the route params to the displayed component.
It could be something like:
{#if firstRouteResolved}
<svelte:component
this={currentComponent}
currentRoute={routeData}
router={_router}
outlet={outletElement}
{...(_router.currentRoute.props && _router.currentRouter.params)}
/>
{/if}
Note that I'm very new at Svelte.
There's also a 'function' mode to route props. One missed opportunity of vue-router is to not have async functions as props: you could have an async function that loads data, and the route switches only when the data is loaded.
Add a function prop to allow navigation to a requested route to simplify guarding rather than using component's onMount.
Please check out: https://codesandbox.io/s/svelte-easyroute-simpliest-demo-forked-8vku7
Without enabling the fallback route (currently commented out), there's no way to gracefully recover from an unknown route. If you click on 'Page Unknown' and then try to load 'Page 2' again, it won't work. The nested outlet remains blank (likely because it isn't there anymore, because Layout
has been unloaded as well). Going to 'Page 1' first, then to 'Page 2' does work.
While you can work around this (using the fallback route), I believe a valid route should recover itself without any special care from the developer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.