Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Routing be a feature of pages #67

Closed
mlhaufe opened this issue Jan 6, 2024 · 0 comments · Fixed by #69
Closed

Refactor Routing be a feature of pages #67

mlhaufe opened this issue Jan 6, 2024 · 0 comments · Fixed by #69
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@mlhaufe
Copy link
Contributor

mlhaufe commented Jan 6, 2024

Currently routing requires a standalone table initialized in Application._initRouter():

this.#router = new Router([
    ['/', (await import('./pages/Home.mjs')).Home],
    ['/not-found', (await import('./pages/NotFound.mjs')).NotFound],
    ['/projects', (await import('./pages/projects/Projects.mjs')).Projects],
    ['/environments', (await import('./pages/environments/Environments.mjs')).Environments],
    ['/environments/new-entry', (await import('./pages/environments/NewEnvironment.mjs')).NewEnvironment],
    ['/environments/:slug', (await import('./pages/environments/Environment.mjs')).Environment],
    ['/environments/:slug/glossary', (await import('./pages/environments/Glossary.mjs')).Glossary],
    ['/goals', (await import('./pages/goals/Goals.mjs')).Goals],
    ['/goals/new-entry', (await import('./pages/goals/NewGoals.mjs')).NewGoals],
    ['/goals/:slug', (await import('./pages/goals/Goal.mjs')).Goal],
    ['/goals/:slug/rationale', (await import('./pages/goals/Rationale.mjs')).Rationale],
    ['/goals/:slug/functionality', (await import('./pages/goals/Functionality.mjs')).Functionality],
    ['/goals/:slug/stakeholders', (await import('./pages/goals/Stakeholders.mjs')).Stakeholders],
    ['/goals/:slug/use-cases', (await import('./pages/goals/UseCases.mjs')).UseCases],
    ['/goals/:slug/limitations', (await import('./pages/goals/Limitations.mjs')).Limitations],
]);
this.#router.addEventListener('route', this);

Navigating to a page is accomplished via self.navigation.navigate(pathname)

A problem is that if a route changes, there is no error or warning of usage sites needing to change (Stringly typed)

Additionally, the parameters of the routes currently have to be parsed by subtypes of Page such as in SlugPage:

class SlugPage extends Page {
    // /parent/:slug/foo
    #slug = new URL(location.href, document.location.origin).pathname.split('/')[2];

    constructor(properties: Properties<SlugPage>, children: (string | Element)[]) {
        super(properties, children);

        // ...
    }

    get slug() {
        return this.#slug;
    }
}

Routing should be integrated into the Page class and initiating a route should accomplished via a method call on the page object itself instead of via self.navigate. Additionally, route parameters should be automatically available.

@mlhaufe mlhaufe added the enhancement New feature or request label Jan 6, 2024
@mlhaufe mlhaufe added this to the v0.4.0 milestone Jan 6, 2024
@mlhaufe mlhaufe self-assigned this Jan 6, 2024
@mlhaufe mlhaufe linked a pull request Jan 8, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant