kbrsh / moon-router Goto Github PK

Sorry so long since last seen. Anyway, I am back playing with this. I created an About.moon component so that I could just require it instead of trying to do it in one file. However, it is not loading. Have a look.

/*=============================
  Primary Application Code
=============================*/


const Moon = require("moonjs");
const MoonRouter = require("moon-router");

require("./components/home.moon")(Moon); // register header
require("./components/About.moon")(Moon);

Moon.use(MoonRouter);

const router = new MoonRouter({
	"default": "/",
	"map": {
		"/": "home",
		"/about": "About",
		"/contact": "Contact"
	}
});





Moon.component("Contact", {
	template: "<div><router-link to=\"/about\">About</router-link><h1>Contact</h1></div>"
});

new Moon({
	el: "#app",
	router
});

@kbrsh

<router-link class="add-picture-button mdl-button mdl-js-button mdl-button--fab" to="/post">
  <i class="material-icons">add</i>
</router-link>

render to:

<a href="#/post">
  <i class="material-icons m-scope-ykj5am">add</i>
</a>

lost the class attr.

Given the following,

export const router = new MoonRouter({
  default: '/',
  map: {
    '/': 'Home',
    '/contact': 'Contact',
    '/*': 'NotFound'
  }
})

I would like to have something like this.
router.resetRouter({'/','Goo','/*','NotFound'});

thus resulting in a final map that looks like this;

map: {
    '/': 'Goo',
    '/*': 'NotFound'
  }

Back story: I can dynamically inject a <script goo.bundle.js> into the Head.
It has a bunch of pages and a private route table. I now need to dynamically change the master route table at runtime to reflect the new routes. i.e usually just add them in.

Its just another form of lazying loading, where my goo.bundle.js, can be fetched from any url and doesn't need to be built as part of the original app.

What is the best way to change the master route table at runtime?

Title says it all. But, we need to be able to at the very least be able to change the active and hover classes.

I'm trying to navigate through code! I have seen an example in tests but it seems I can't do that in my code!

Is there any other way to navigate in code?

Hi is it possible to have the HTML5 history API so the user wont see the /#/path in the address bar?

I was wondering, I keep getting not defined for the h1

<Header content="Findborg"></Header>

I am trying to use the prop in the index page, I tried placing the above between the <router-view></router-view> which was a kinda hack I used with vue. But, it will not work for me now. Can you show me a better way to do this using the router?

I'm trying to get a basic example with moon-router working but I'm only getting:

Uncaught TypeError: Cannot read property 'length' of undefined
    at createNodeFromVNode (moon.js:376)
    at hydrate (moon.js:725)
    at hydrate (moon.js:778)
    at Moon.patch (moon.js:2038)
    at Moon.build (moon.js:2068)
    at Moon.mount (moon.js:2000)
    at Moon.init (moon.js:2079)
    at Moon.init (moon-router.js:179)
    at new Moon (moon.js:1770)
    at Object.module.exports (main.js:21)

The basic example I'm attempting is

Moon.use(MoonRouter);

Moon.component('app-root', {
    template: '<p>Root component!</p>',
});

Moon.component('app-hello', {
    template: '<p>Hello component!</p>',
});

const router = new MoonRouter({
    default: '/',
    map: {
        '/': 'app-root',
        '/hello': 'app-hello'
    }
});

const app = new Moon({
    el: '#app',
    router: router,
    data: {
        text: 'Hello router!',
    },
});

<div id="app">
    <p>{{ text }}</p>

    <router-view></router-view>
</div>

• JSFiddle
• CodeSandbox

This bug took me 1 hour.

This will work:
https://jsfiddle.net/2h4mj2xt/1/

This will break:
https://jsfiddle.net/2h4mj2xt/3/

Seems like if there is no whitespace before/after <router-view> tag, the router won't work.

Anyway, moon.js is a great library.

Router links are not available on IOS 10.3.2 (14F89) or IOS 10.0.1 (14A403) but works OK on IOS 11.2 (15C114)

Reproduction link
https://jsfiddle.net/9tbe6b22/

Steps to reproduce
1.- Open fiddle
2.- The router links are not available for IOS 10 (ipad mini 4 and ipad pro devices) either on Safari or Chrome browsers but they are available and work as expected on IOS 11 (ipad mini 4)

You should be able to access the router links but they are not available.

Hello, thx again for moon <3, i'm wondering if moon-router accept nested router i tried with children but couldn't figured out to achieve that with map object, and i couldn't find it in the documentation.
could you please tell how can we achieve that with moon router, thx in advance.

such as beforeEnter?

Hey,
so I am building a SPA using Moon. I use the router in history mode to avoid the Hashbang URL. Altough I provide the history mode setting I still get the hashbang.
I am not usually a JS-dev andddd the Browser Console was empty so I do not know what I could provide to make this Issue more helpful. So here is a little code I used.

     Moon.use(MoonRouter);
     const router = new MoonRouter({
        default: "/",
        map: {
          "/": "Root",
          "/hello": "Hello"
        },
        mode: "history"
      });
      Moon.component("Root", {
        data : function() {
          header.set('title', "ROOT");
        },
        template: `<div>
          <h1>Welcome to "/"</h1>
          <router-link to="/hello">To /hello</router-link>
        </div>`
      });
      Moon.component("Hello", {
        data : function() {
          header.set('title', "HELLO");
        },
        template: `<div>
          <h1>You have Reached "/hello"</h1>
          <router-link to="/">Back Home</router-link>
        </div>`
      });
      const header = new Moon({
        el: "title",
        data: {
          title: "Loading..."
        }
      });
      new Moon({
        el: "#app",
        router: router
      });

Loving Moon!! You should be very proud @kbrsh !

Just curious about programmatically transitioning, similar to the Vue.js router.push("/home") as an example. https://router.vuejs.org/en/essentials/navigation.html

Basically after a "button" click inside a method function I want to route.. instead of an explicit link..

Again great work!

Could you put together a very basic example using webpack?
Maybe three link example. Two pages with the second with an update able section.
I thought I had seen one somewhere but can't find it now.

I spent 1 hour on this problem.

This will work:

const Moon = window.Moon = require("moonjs");
const MoonRouter = window.MoonRouter = require("moon-router");
Moon.use(MoonRouter);
const router = new MoonRouter({
    default: "/",
    map: {
        "/": "Root",
        "/hello": "Hello",
    }
});
Moon.component("Root", {
    template: `<div>
      <h1>Welcome to "/"</h1>
      <router-link to="/hello">To /hello</router-link>
    </div>`
});
Moon.component("Hello", {
    template: `<div>
      <h1>You have Reached "/hello"</h1>
      <router-link to="/">Back Home</router-link>
    </div>`
});
const app = new Moon({
    el: '#app',
    router: router
})

This will break:

const Moon = window.Moon = require("moonjs");
const MoonRouter = window.MoonRouter = require("moon-router");
Moon.use(MoonRouter);
Moon.component("Root", {
    template: `<div>
      <h1>Welcome to "/"</h1>
      <router-link to="/hello">To /hello</router-link>
    </div>`
});
Moon.component("Hello", {
    template: `<div>
      <h1>You have Reached "/hello"</h1>
      <router-link to="/">Back Home</router-link>
    </div>`
});
const router = new MoonRouter({
    default: "/",
    map: {
        "/": "Root",
        "/hello": "Hello",
    }
});
const app = new Moon({
    el: '#app',
    router: router
})

Yeah I know it is documented but is there anyway to change this behavior?

I use <router-view></router-view> in a .moon file but then the <router-link> not working(when clicked, the window location has changed but the page not update)

should <router-view>can be only used in the root moon element?