SC-Router router.go not a function (custom elements v1)

Leaving this here in case anyone knows. I’m trying to make the sc-router element using custom elements v1 spec. When I go to change routes I get “router.go is not a function at HTMLAnchorElement.onClick” and refers to this: https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/router-advanced/static/app.js#L27

Not sure why it’s working in v0 and not v1. Is there a different way to write .go() in v1? Here’s my code:

class scRouter extends HTMLElement {
	constructor() {
		super();
                this._onChanged = this._onChanged.bind(this);
	        this._routes = new Map();
	}

	static get is() { return 'sc-router'; }

    _onChanged () {
        const path = window.location.pathname;
        const routes = Array.from(this._routes.keys());
        const route = routes.find(r => r.test(path));
        const data = route.exec(path);

        if (!route) {
            return;
        }

        // Store the new view.
        this._newView = this._routes.get(route);

        // We don't want to create more promises for the outgoing view animation,
        // because then we get a lot of hanging Promises, so we add a boolean gate
        // here to stop if there's already a transition running.
        if (this._isTransitioningBetweenViews) {
        return Promise.resolve();
        }
        this._isTransitioningBetweenViews = true;

        // Assume that there's no outgoing animation required.
        let outViewPromise = Promise.resolve();

        // If there is a current view...
        if (this._currentView) {
        // ...and it's the one we already have, just update it.
        if (this._currentView === this._newView) {
            // No transitions, so remove the boolean gate.
            this._isTransitioningBetweenViews = false;

            return this._currentView.update(data);
        }

        // Otherwise animate it out, and take the Promise made by the view as an
        // indicator that the view is done.
        outViewPromise = this._currentView.out(data);
        }

        // Whenever the outgoing animation is done (which may be immediately if
        // there isn't one), update the references to the current view, allow
        // outgoing animations to proceed.
        return outViewPromise
        .then(_ => {
            this._currentView = this._newView;
            this._isTransitioningBetweenViews = false;
            return this._newView.in(data);
        });
    }

    go (url) {
        window.history.pushState(null, null, url);
        return this._onChanged();
    }

    addRoute (route, view) {
        if (this._routes.has(route))
        return console.warn(`Route already exists: ${route}`);

        this._routes.set(route, view);
    }

    _addRoutes () {
        let views = Array.from(document.querySelectorAll('sc-view'));
        views.forEach(view => {
        if (!view.route)
            return;

        this.addRoute(new RegExp(view.route, 'i'), view);
        }, this);
    }

    _removeRoute (route) {
        this._routes.delete(route);
    }

    _clearRoutes () {
        this._routes.clear();
    }

    connectedCallback() {
        window.addEventListener('popstate', this._onChanged);
        this._clearRoutes();
        this._addRoutes();
        this._onChanged();
    }

    disconnectedCallback () {
        window.removeEventListener('popstate', this._onChanged);
    }
}

window.customElements.define(scRouter.is, scRouter);

[robdodson]

You can’t transpile the custom element class to ES5 and pass it to customElements.define. customElements.define expects an actual class. That’s why you’re getting this error Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. and it’s not actually upgraded the sc-router element.

I’d suggest either don’t transpile to es5 or if you have to transpile, use the native-shim.js that comes with the custom elements polyfill https://github.com/webcomponents/custom-elements#known-issues

On Thu, Dec 22, 2016 at 3:00 PM, Matt Shull [e-mail] wrote:

@robdodson https://github.com/robdodson Here is a jsbin: https://jsbin.com/cufutiwobu/edit

You can see the last error in the console is this._clearRoutes is not a function and if you click on the link “inputs” it will tell you router.go is not a function at HTMLAnchorElement.onClick

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GoogleChrome/ui-element-samples/issues/71#issuecomment-268909803, or mute the thread https://github.com/notifications/unsubscribe-auth/ABBFDTHlVcQ01NPhltsECHyK8465sdKZks5rKwEXgaJpZM4LUXQm .

[itsMattShull]

@robdodson Here is a jsbin: https://jsbin.com/cufutiwobu/edit

You can see the last error in the console is this._clearRoutes is not a function and if you click on the link “inputs” it will tell you router.go is not a function at HTMLAnchorElement.onClick