routify
routify copied to clipboard
roxiness
Routify application capturing anchors outside of the application target/context
I have create a routify application that bootstrap inside a div and the structure is like
<-- Header --> <-- some-content --> <-- routify-app --> <-- some-content --> <-- footer -->
The problem is the anchors in footer are being captured by routify. Routify should work/replace content inside the div and not on the outside.
I 've created an example repo https://github.com/nopantsmonkey/routify-app-scope-bug To me this looks like a major issue to me please have a look
package.json npm run dev
version "@sveltech/routify": "^1.9.1", "svelte": "^3.23.2",
This sounds like something we should be able to fix. As a temporary workaround, you can use <a target="_self" ...>.
Just out of curiosity, is there a reason you keep your half the app outside of the Routify scope?
I'm not sure if Routify really supports this use case.
I think it should, IMHO we should respect App's target property and work within the scope like all the frameworks/library to prevent any unforeseen issues like this.
As a temporary workaround, you can use <a target="_self" ...>
Yea, before bootstraping the application I updated all the anchors on the page without a target attribute with target=_self for now
[...document.querySelectorAll('a')].filter(a => a.href.indexOf(location.host) > -1 && !a.target).forEach(a => a.setAttribute('target', '_self'));
Just out of curiosity, is there a reason you keep your half the app outside of the Routify scope?
We actually load App Shell (Header, Footer, relevant scripts from the server) and load the rest of the application on the client. We primarily work with angular but have some part of our application written in jquery and we are replacing some part of our legacy application from jquery, server rendered chunks to svelte therefore we need to render the svelte component in a specific section
<-- some scripts -->
<-- Header -->
<-- some content -->
<-- this is where we render apps/framework -->
<-- some content -->
<-- Footer -->
<-- some scripts -->
we replace the framework/apps part with anything like angular, svelte, jquery, static content anything but all the other things are rendered from the server
hi I have a workaround.
in body of __app.html
add <app></app> to the body where you want to
<body>
<noscript>Please enable Javascript for best experience.</noscript>
<app></app>
<!-- All JavaScript Files-->
<script src="/theme_pack/js/bootstrap.bundle.min.js"></script>
</body>
in main.js
change the target of HMR option to document.body.getElementsByTagName('app')[0]
import HMR from "@roxi/routify/hmr";
import App from "./App.svelte";
const app = HMR(App, { target: document.body.getElementsByTagName('app')[0] }, "routify-app");
export default app;
