edge-city

edge-city is a next level meta-framework for react that runs only on edge runtimes

89c11a40 — Peter John

add dynamic css injection

Files changed (2) hide show

packages/example/routes/about/page.css CHANGED Viewed

@@ -1,3 +1,5 @@
 .about-page {
-  padding: 100px;
+  padding: 20px;
+  padding-bottom: 130px;
+  background-color: violet;
 }

packages/parotta/router.js CHANGED Viewed

@@ -10,10 +10,26 @@ const getRoute = (radixRouter, pathname) => {
   return matchedPage;
 }
+const loadCss = (pathname) => {
+  const href = `/routes${pathname === "/" ? "" : pathname}/page.css`;
+  const isLoaded = Array.from(document.getElementsByTagName("link"))
+    .map((link) => link.href.replace(window.origin, "")).includes(href);
+  if (!isLoaded) {
+    const fileref = document.createElement("link");
+    fileref.rel = "stylesheet";
+    fileref.type = "text/css";
+    fileref.href = href;
+    document.getElementsByTagName("head")[0].appendChild(fileref);
+  }
+}
 export const Router = ({ App, history, radixRouter }) => {
   const [Page, setPage] = useState(() => getRoute(radixRouter, history.location.pathname));
   useEffect(() => {
+    return history.listen(({ location }) => {
+      loadCss(location.pathname);
-    return history.listen(({ location }) => setPage(getRoute(radixRouter, location.pathname)));
+      setPage(getRoute(radixRouter, location.pathname));
+    });
   }, [])
   console.log('Router');
   return React.createElement(RouterContext.Provider, {