@lolyjs/core 0.3.0-alpha.3 → 0.3.0-alpha.5

package/dist/runtime.mjs

@@ -128,132 +128,134 @@ function getOrCreateLink(rel, href) {
 }
 function applyMetadata(md) {
   if (!md) return;
-  if (md.title) {
-    document.title = md.title;
-  }
-  if (md.description) {
-    const meta = getOrCreateMeta('meta[name="description"]', { name: "description" });
-    meta.content = md.description;
-  }
-  if (md.robots) {
-    const meta = getOrCreateMeta('meta[name="robots"]', { name: "robots" });
-    meta.content = md.robots;
-  }
-  if (md.themeColor) {
-    const meta = getOrCreateMeta('meta[name="theme-color"]', { name: "theme-color" });
-    meta.content = md.themeColor;
-  }
-  if (md.viewport) {
-    const meta = getOrCreateMeta('meta[name="viewport"]', { name: "viewport" });
-    meta.content = md.viewport;
-  }
-  if (md.canonical) {
-    getOrCreateLink("canonical", md.canonical);
-  }
-  if (md.openGraph) {
-    const og = md.openGraph;
-    if (og.title) {
-      const meta = getOrCreateMeta('meta[property="og:title"]', { property: "og:title" });
-      meta.content = og.title;
-    }
-    if (og.description) {
-      const meta = getOrCreateMeta('meta[property="og:description"]', { property: "og:description" });
-      meta.content = og.description;
-    }
-    if (og.type) {
-      const meta = getOrCreateMeta('meta[property="og:type"]', { property: "og:type" });
-      meta.content = og.type;
-    }
-    if (og.url) {
-      const meta = getOrCreateMeta('meta[property="og:url"]', { property: "og:url" });
-      meta.content = og.url;
-    }
-    if (og.image) {
-      if (typeof og.image === "string") {
-        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
-        meta.content = og.image;
-      } else {
-        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
-        meta.content = og.image.url;
-        if (og.image.width) {
-          const metaWidth = getOrCreateMeta('meta[property="og:image:width"]', { property: "og:image:width" });
-          metaWidth.content = String(og.image.width);
-        }
-        if (og.image.height) {
-          const metaHeight = getOrCreateMeta('meta[property="og:image:height"]', { property: "og:image:height" });
-          metaHeight.content = String(og.image.height);
-        }
-        if (og.image.alt) {
-          const metaAlt = getOrCreateMeta('meta[property="og:image:alt"]', { property: "og:image:alt" });
-          metaAlt.content = og.image.alt;
-        }
-      }
+  requestAnimationFrame(() => {
+    if (md.title) {
+      document.title = md.title;
     }
-    if (og.siteName) {
-      const meta = getOrCreateMeta('meta[property="og:site_name"]', { property: "og:site_name" });
-      meta.content = og.siteName;
+    if (md.description) {
+      const meta = getOrCreateMeta('meta[name="description"]', { name: "description" });
+      meta.content = md.description;
     }
-    if (og.locale) {
-      const meta = getOrCreateMeta('meta[property="og:locale"]', { property: "og:locale" });
-      meta.content = og.locale;
+    if (md.robots) {
+      const meta = getOrCreateMeta('meta[name="robots"]', { name: "robots" });
+      meta.content = md.robots;
     }
-  }
-  if (md.twitter) {
-    const twitter = md.twitter;
-    if (twitter.card) {
-      const meta = getOrCreateMeta('meta[name="twitter:card"]', { name: "twitter:card" });
-      meta.content = twitter.card;
+    if (md.themeColor) {
+      const meta = getOrCreateMeta('meta[name="theme-color"]', { name: "theme-color" });
+      meta.content = md.themeColor;
     }
-    if (twitter.title) {
-      const meta = getOrCreateMeta('meta[name="twitter:title"]', { name: "twitter:title" });
-      meta.content = twitter.title;
+    if (md.viewport) {
+      const meta = getOrCreateMeta('meta[name="viewport"]', { name: "viewport" });
+      meta.content = md.viewport;
     }
-    if (twitter.description) {
-      const meta = getOrCreateMeta('meta[name="twitter:description"]', { name: "twitter:description" });
-      meta.content = twitter.description;
+    if (md.canonical) {
+      getOrCreateLink("canonical", md.canonical);
     }
-    if (twitter.image) {
-      const meta = getOrCreateMeta('meta[name="twitter:image"]', { name: "twitter:image" });
-      meta.content = twitter.image;
+    if (md.openGraph) {
+      const og = md.openGraph;
+      if (og.title) {
+        const meta = getOrCreateMeta('meta[property="og:title"]', { property: "og:title" });
+        meta.content = og.title;
+      }
+      if (og.description) {
+        const meta = getOrCreateMeta('meta[property="og:description"]', { property: "og:description" });
+        meta.content = og.description;
+      }
+      if (og.type) {
+        const meta = getOrCreateMeta('meta[property="og:type"]', { property: "og:type" });
+        meta.content = og.type;
+      }
+      if (og.url) {
+        const meta = getOrCreateMeta('meta[property="og:url"]', { property: "og:url" });
+        meta.content = og.url;
+      }
+      if (og.image) {
+        if (typeof og.image === "string") {
+          const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+          meta.content = og.image;
+        } else {
+          const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+          meta.content = og.image.url;
+          if (og.image.width) {
+            const metaWidth = getOrCreateMeta('meta[property="og:image:width"]', { property: "og:image:width" });
+            metaWidth.content = String(og.image.width);
+          }
+          if (og.image.height) {
+            const metaHeight = getOrCreateMeta('meta[property="og:image:height"]', { property: "og:image:height" });
+            metaHeight.content = String(og.image.height);
+          }
+          if (og.image.alt) {
+            const metaAlt = getOrCreateMeta('meta[property="og:image:alt"]', { property: "og:image:alt" });
+            metaAlt.content = og.image.alt;
+          }
+        }
+      }
+      if (og.siteName) {
+        const meta = getOrCreateMeta('meta[property="og:site_name"]', { property: "og:site_name" });
+        meta.content = og.siteName;
+      }
+      if (og.locale) {
+        const meta = getOrCreateMeta('meta[property="og:locale"]', { property: "og:locale" });
+        meta.content = og.locale;
+      }
     }
-    if (twitter.imageAlt) {
-      const meta = getOrCreateMeta('meta[name="twitter:image:alt"]', { name: "twitter:image:alt" });
-      meta.content = twitter.imageAlt;
+    if (md.twitter) {
+      const twitter = md.twitter;
+      if (twitter.card) {
+        const meta = getOrCreateMeta('meta[name="twitter:card"]', { name: "twitter:card" });
+        meta.content = twitter.card;
+      }
+      if (twitter.title) {
+        const meta = getOrCreateMeta('meta[name="twitter:title"]', { name: "twitter:title" });
+        meta.content = twitter.title;
+      }
+      if (twitter.description) {
+        const meta = getOrCreateMeta('meta[name="twitter:description"]', { name: "twitter:description" });
+        meta.content = twitter.description;
+      }
+      if (twitter.image) {
+        const meta = getOrCreateMeta('meta[name="twitter:image"]', { name: "twitter:image" });
+        meta.content = twitter.image;
+      }
+      if (twitter.imageAlt) {
+        const meta = getOrCreateMeta('meta[name="twitter:image:alt"]', { name: "twitter:image:alt" });
+        meta.content = twitter.imageAlt;
+      }
+      if (twitter.site) {
+        const meta = getOrCreateMeta('meta[name="twitter:site"]', { name: "twitter:site" });
+        meta.content = twitter.site;
+      }
+      if (twitter.creator) {
+        const meta = getOrCreateMeta('meta[name="twitter:creator"]', { name: "twitter:creator" });
+        meta.content = twitter.creator;
+      }
     }
-    if (twitter.site) {
-      const meta = getOrCreateMeta('meta[name="twitter:site"]', { name: "twitter:site" });
-      meta.content = twitter.site;
+    if (md.metaTags && Array.isArray(md.metaTags)) {
+      md.metaTags.forEach((tag) => {
+        let selector = "";
+        if (tag.name) {
+          selector = `meta[name="${tag.name}"]`;
+        } else if (tag.property) {
+          selector = `meta[property="${tag.property}"]`;
+        } else if (tag.httpEquiv) {
+          selector = `meta[http-equiv="${tag.httpEquiv}"]`;
+        }
+        if (selector) {
+          const meta = getOrCreateMeta(selector, {
+            name: tag.name,
+            property: tag.property,
+            httpEquiv: tag.httpEquiv
+          });
+          meta.content = tag.content;
+        }
+      });
     }
-    if (twitter.creator) {
-      const meta = getOrCreateMeta('meta[name="twitter:creator"]', { name: "twitter:creator" });
-      meta.content = twitter.creator;
+    if (md.links && Array.isArray(md.links)) {
+      md.links.forEach((link) => {
+        getOrCreateLink(link.rel, link.href);
+      });
     }
-  }
-  if (md.metaTags && Array.isArray(md.metaTags)) {
-    md.metaTags.forEach((tag) => {
-      let selector = "";
-      if (tag.name) {
-        selector = `meta[name="${tag.name}"]`;
-      } else if (tag.property) {
-        selector = `meta[property="${tag.property}"]`;
-      } else if (tag.httpEquiv) {
-        selector = `meta[http-equiv="${tag.httpEquiv}"]`;
-      }
-      if (selector) {
-        const meta = getOrCreateMeta(selector, {
-          name: tag.name,
-          property: tag.property,
-          httpEquiv: tag.httpEquiv
-        });
-        meta.content = tag.content;
-      }
-    });
-  }
-  if (md.links && Array.isArray(md.links)) {
-    md.links.forEach((link) => {
-      getOrCreateLink(link.rel, link.href);
-    });
-  }
+  });
 }
 
 // modules/runtime/client/AppShell.tsx