alshdavid / pico-router Goto Github PK

const g1 = crayon.Group()
const g2 = crayon.Group('')
const g3 = crayon.Group('/')

Should all behave the same

Describe the bug
The readme uses the logo from https://www.svelteproducts.com/ which is 100% unrelated to svelte the framework

To Reproduce
Steps to reproduce the behavior:

1. Open readme

Expected behavior
Use the official project logo; e.g.
https://svelte.dev/svelte-logo-horizontal.svg

Description
When trying to use the demo I only get the error TypeError: app.history.currentEvent is undefined in the console.

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/alshdavid/crayon.git
2. cd crayon/examples/svelte-animated/
3. npm install
4. npm run dev
5. Point your browser to the server.

Expected behavior
A demo of how to use Crayon with Svelte and animations...

Desktop

• OS: Debian GNU/Linux 9.9 (stretch)
• Crayon: latest

Add them!

When a web app is added to a mobile device's homescreen and is in full screen mode, ensure the router works.

I experienced issues previously with react router, where I had to use a different method of routing for installable PWAs.

Just want to make sure it's not a problem here

Describe the bug
When programmatically routing using router.navigate, parameters are converted to lowercase. Could be due to URL encoding methods.

This code:

const id = 'WVPvZIHkGdoi1UlSsSdF';
nav.navigate(`/deal/${id}`);

produces this URL: /deal/wvpvzihkgdoi1ulsssdf

this is the route code:

app.path('/deal/:id', async (req, res) => {
      if(!$user && req.routePattern !== '/auth') {
        res.redirect('/auth');
      } else {
        const Deal = await import('./views/Deal.svelte');
        res.mount(Deal.default, { req, nav: app });
      }
    });

To Reproduce
Steps to reproduce the behavior:

1. Create route with param
2. Create button to navigate to route with param that has upper case letters
3. Click button
4. Check URL for lowercased param

Expected behavior
Expect route param to not be changed

Desktop (please complete the following information):

• OS: Mac OS 10.13.6
• Version of Crayon: 4.1.3
• Version of Crayon-Svelte: 1.0.10

Additional context
Was solved at one point by this PR: https://github.com/alshdavid/crayon/pull/31

I am trying your example svelte-animated and getting this error

TypeError: res.redirect is not a function

Is route guard middle ware doable?

is there docs for how to write a middleware controller to all me to preload route data or check for auth etc?

Currently the router has no preference between:

/users
/**

Update the pattern matching to be based on specificity which will allow /** to be used as a fallback route

Describe the bug
Routes are still mounted even with a middleware that should prevent access to them (via a simple redirect). The redirection works well, but it shouldn't even access the component before the redirection is done.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple protected route with a console.log inside. Let's say /user
2. Use a custom middleware that simply redirect to another route. Let's say /
3. Access /user, you will see your console.log inside your protected route display in console.

Expected behavior
The route shouldn't mount or execute anything since there is a middleware and it purpose is to perform actions before accessing the actual path.

Desktop (please complete the following information):

• OS: MacOS
• Crayon: ^2.0.5
• Crayon svelte: ^1.0.1
• Svelte: ^3.6.3
• Typescript: ^3.5.3
• Parcel plugin svelte: ^3.0.1
• Parcel bundler: ^1.12.3

Additional context
main.js:

import App from './App';
import crayon, { group } from 'crayon';
import svelte from 'crayon-svelte';
import Editor from './components/editor/Editor';
import Login from './components/auth/Login';

const app = crayon.create();
app.use(svelte.router());
const auth = group('/auth', group => {
    group.path('/login', async (req, res) => {
        await res.mount(App, {req, nav: app, component: Login});
    });
});

const secured = group('/bot');
secured.use((_, res) => {
    const session = localStorage.getItem('session');
    if (!session) {
        res.redirect('/auth/login');
    }
});
secured.path('/editor', async (req, res) => {
    await res.mount(App, {req, nav: app, component: Editor});
});
app.use(secured);
app.use(auth);
app.load();

App.svelte:

<script>
    export let component;
    export let req;
    export let nav;
</script>

<div>
     <svelte:component this={component} nav={nav} req={req}/>
</div>

Editor.svelte:

<script>
console.log("should not display");
</script>

Login.svelte:

<div>login page</div>

Is this project dead? It looks like multiple of its packages are missing from npm.

Solve this and update the pattern matching algorithm
https://repl.it/repls/GentlePleasantNasm

Also write this as a unit test in the code base

Description

The svelte-basic example from the repo doesn't build/work, giving an error [!] (plugin commonjs) TypeError: Cannot read property 'type' of null

To reproduce

$ git clone [email protected]:alshdavid/crayon.git
$ cd crayon/examples/svelte/svelte-basic
$ npm install
...
$ npm run dev
rollup v1.20.3
bundles src/main.js → public/bundle.js...
[!] (plugin commonjs) TypeError: Cannot read property 'type' of null
node_modules/crayon-svelte/dist/index.js
TypeError: Cannot read property 'type' of null
    at extractAssignedNames (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:48:22)
    at Scope.options.params.forEach.param (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:63:17)
    at Array.forEach (<anonymous>)
    at new Scope (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:62:28)
    at Object.enter (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:125:28)
    at visit (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/estree-walker/src/estree-walker.js:22:9)
    at visit (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/estree-walker/src/estree-walker.js:44:4)
    at visit (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/estree-walker/src/estree-walker.js:39:34)
    at visit (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/estree-walker/src/estree-walker.js:44:4)
    at visit (/private/tmp/crayon/examples/svelte/svelte-basic/node_modules/estree-walker/src/estree-walker.js:44:4)

1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] autobuild: `rollup -c -w`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] autobuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/panta/.npm/_logs/2019-08-30T09_04_35_033Z-debug.log
ERROR: "autobuild" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `run-p start:dev autobuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/panta/.npm/_logs/2019-08-30T09_04_35_094Z-debug.log

Expected behavior

To get the development server running

Desktop / environment

• macOS Mojave 10.14.6
• Crayon master (at 983fe37)

Need a more detailed Svelte example. Perhaps with 2-3 components and an animated transition. Info on where to put code (App.svelte?), etc...

Hi,

https://github.com/alshdavid/crayon/blob/0803146781fa2f9e5d57e05a6044a52b5643e211/examples/svelte/svelte-animated/src/main.js#L22

Shouldn't it be req.redirect instead of res.redirect ?

Same thing for app.path with res.mount.

Or should it be (res, req) => instead of (req, res) ?

Currently components are ungracefully removed when a router is destroyed

Implement the unmount method on the framework middlewares and trigger it when using the destroy method

Add push/pop support for preact

const app = crayon.create()

app.push(Component)
app.push(ComponentB)

app.pop()
app.pop()

I'd love to see a clear example of how to make a nested routing in svelte (or framework agnostic) to better comprehend how it works.
Readme points out how to do it, but marginally and without a real example.
Please 🙏🙏🙏

Hi,

Nice project that arrives right on time when I started playing seriously with Svelte.
Works greate, beside this little problem. When I hit reload (or the server reload the site because of sources changes) it gives a 404...

I guess that's not easy without a express like server running, but in that case couln't you support a # route instead of / ?

Thanks again,

Is it possible to route to a specific location on a different page, or to route back using the history to get to the same page location that you originally routed from?

Thanks!

It's not healthy for the Router market to be so dominated by the React Router. I want to level the playing field so that your Crayon router gets a fair crack of the whip. That's why I've written the Router Challenge. It aims to do for Routers what TodoMVC did for UI frameworks by offering the same SPA built in React using different Routers. For it to be successful I need your help. Will you take the Router Challenge and implement the SPA using your Crayon router, please?

Is your feature request related to a problem? Please describe.
Trying to add protected routes based on async auth data. Redirects don't prevent other routes from matching and rendering.

Describe the solution you'd like
Using the middleware option, be able to prevent rendering of predefined routes by using redirect or a separate mount call.

Additional context
Here is my router code, the middleware I have above isn't preventing other routes from rendering:

app = crayon.create();

    app.use(crayonSvelte.router(appEl));

    app.use(transition.loader());

    app.use(animate.defaults({
      name: transition.slideLeft,
      duration: 300
    }));

    app.use(animate.routes([
      { from: '/**', name: transition.slideRight  },
      { to: '/**', name: transition.slideLeft }
    ]));

    app.use((req, res, state) => {
      console.log(req);
      console.log(res);
      console.log(state);
      if(!$user && req.routePattern !== '/auth') {
        res.redirect('/auth');
      }
    });

    app.path('/', async (req, res) => {
      const Home = await import('./views/Home.svelte');
      res.mount(Home.default, { req, nav: app });
    });

    app.path('/auth', async (req, res) => {
      const Auth = await import('./components/Auth.svelte');
      res.mount(Auth.default, { req, nav: app });
    });

    app.path('/deals', async (req, res) => {
      const List = await import('./views/List.svelte');
      res.mount(List.default, { req, nav: app });
    });

    app.path('/search', async (req, res) => {
      const Search = await import('./views/Search.svelte');
      res.mount(Search.default, { req, nav: app });
    });

    app.path('/search/:category', async (req, res) => {
      const SearchCategory = await import('./views/SearchCategory.svelte');
      res.mount(SearchCategory.default, { req, nav: app });
    });

    app.path('/agenda', async (req, res) => {
      const Agenda = await import('./views/Agenda.svelte');
      res.mount(Agenda.default, { req, nav: app });
    });

    app.path('/profile', async (req, res) => {
      const Profile = await import('./views/Profile.svelte');
      res.mount(Profile.default, { req, nav: app });
    });

    app.path('/deal/:id', async (req, res) => {
      const Deal = await import('./views/Deal.svelte');
      res.mount(Deal.default, { req, nav: app });
    });

    app.load();

Hi, I am looking for clientside routing and found crayon.

Describe the bug
I just cloned the Repo for Svelte and run npm install for the basic example.
For some reason, it says in the console res.redirect, or res.mount is not a function

When npm install, it would install the latest version of both, crayon and crayon svelte.

When I try to use the examples provided in codesandbox here:

• Example 1
• Example 2
  it works. It uses a different version of this library.

  "dependencies": {
    "crayon": "3.0.5",
    "crayon-svelte": "1.0.5",
    "rxjs": "6.5.2",
    "svelte": "^3.0.0"
  },

When installing the provided example from this repo it will install:

[email protected],
[email protected]

so my guess is, something broke.

Allow animations to be set globally on a group, but ensure it doesn't affect animations outside the group.

I am defining the route like this

app.router.path('/', (req, res) => res.mount(() => res.mount(Test, { ...app, ...req })))

but I am getting this error

Uncaught (in promise) TypeError: Component is not a constructor
    at mounter.js:44
    at SvelteMounter.<anonymous> (mounter.js:23)
    at Generator.next (<anonymous>)
    at mounter.js:7
    at new Promise (<anonymous>)
    at __awaiter (mounter.js:3)
    at SvelteMounter.push (mounter.js:19)
    at mount.js:20
    at Generator.next (<anonymous>)
    at mount.js:7
livereload.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

I often don't use default exports, I'll use

import * as stuff from 'place'

This simply gives me all of the exported things on a module and reminds me of Go. This might not be something everyone likes, so might be worth re-exporting the important bits as default exports

Previsouly you could do a

import { RouterEventType } from 'crayon/types'

This no longer works. Where is it exported now?

Hello,

I was curious if it is possible to add the intro:true to the client-side app when mounting? I have a transition that plays on the initial load.

Thanks!