vite-plugin-vanjs 0.1.19 → 0.1.21

package/README.md

@@ -5,7 +5,7 @@
 [![NPM Version](https://img.shields.io/npm/v/vite-plugin-vanjs.svg)](https://www.npmjs.com/package/vite-plugin-vanjs)
 [![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-vanjs.svg)](http://npm-stat.com/charts.html?package=vite-plugin-vanjs)
 
-A mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [vite](https://vite.dev) and tested with [vitest](https://vitest.dev). The plugin comes with a set of modules to streamline your workflow:
+An async first mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [vite](https://vite.dev) and tested with [vitest](https://vitest.dev). The plugin comes with a set of modules to streamline your workflow:
 * ***@vanjs/router*** - one of the most important part of an application which allows you to split code and lazy load page like components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
 * ***@vanjs/meta*** - allows you to create metadata for your pages as well as load additional assets with ease;
 * ***@vanjs/jsx*** - enables JSX transformation with automatic namespace resolution;

package/meta/tags.mjs

@@ -1,7 +1,8 @@
 import van from "vanjs-core";
 import { addMeta } from "./Head.mjs";
 
-/** @typedef {import("vanjs-core").PropsWithKnownKeys} PropsWithKnownKeys */
+/** @typedef {import("./types.d.ts").SupportedTags} SupportedTags */
+/** @typedef {import("vanjs-core").PropsWithKnownKeys<T = SupportedTags>} PropsWithKnownKeys<T> */
 /** @typedef {import("./types.d.ts").TagProps} TagProps */
 
 /**
@@ -31,9 +32,25 @@ export const Meta = (props) => {
 export const Link = (props) => {
   const { link } = van.tags;
   if (props.rel === "stylesheet") {
-    console.warn("Link doesn't support stylesheets.");
+    console.warn("Link doesn't support stylesheets, check the Wiki.");
   } else {
     addMeta(link(props));
   }
   return null;
 };
+
+/**
+ * Add a new `<script>` tag, not to be used for .js files
+ * Only to be used as `<script type="application/ld+json">`
+ * for SEO purposes.
+ * @type {(props: PropsWithKnownKeys<HTMLScriptElement>) => null}
+ */
+export const Script = (props) => {
+  const { script } = van.tags;
+  if (!props.type || props.type !== "application/ld+json") {
+    console.warn("Script doesn't support this type, check the Wiki.");
+  } else {
+    addMeta(script(props));
+  }
+  return null;
+};

package/meta/types.d.ts

@@ -15,6 +15,7 @@ export const initializeHeadTags: () => void | (() => Promise<void>);
 export type SupportedTags =
   | HTMLTitleElement
   | HTMLLinkElement
+  | HTMLScriptElement
   | HTMLMetaElement;
 
 export type AllHeadTags =

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vite-plugin-vanjs",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "author": "thednp",
   "license": "MIT",
-  "description": "A mini meta-framework for VanJS powered by Vite",
+  "description": "An async first mini meta-framework for VanJS powered by Vite",
   "repository": "https://github.com/thednp/vite-plugin-vanjs",
   "type": "module",
   "sideEffects": false,

package/plugin/helpers.mjs

@@ -7,6 +7,7 @@
 import { dirname, join, posix, win32 } from "node:path";
 import { existsSync } from "node:fs";
 import { readdir } from "node:fs/promises";
+import process from "node:process";
 
 /**
  * Get the file most probable route path for a given potential route.
@@ -194,10 +195,21 @@ export const processLayoutRoutes = (routes, config, pluginConfig) => {
  * Scan and process routes and return them
  * @type {typeof import("./types").getRoutes}
  */
-// export const scanRoutes = async (config, pluginConfig) => {}
 export const getRoutes = async (config, pluginConfig) => {
   const routes = await scanRoutes(config, pluginConfig);
-  return processLayoutRoutes(routes, config, pluginConfig);
+  const processed = processLayoutRoutes(routes, config, pluginConfig);
+  // istanbul ignore next - defaults can't be checked
+  const { excludeRoutes = [], excludeRoutesProd = [] } = pluginConfig;
+  const isProd = process.env.NODE_ENV === "production";
+  const allExcludes = [...excludeRoutes, ...(isProd ? excludeRoutesProd : [])];
+  if (allExcludes.length) {
+    return processed.filter((r) =>
+      !allExcludes.some((p) =>
+        r.routePath === p || r.routePath.startsWith(p + "/")
+      )
+    );
+  }
+  return processed;
 };
 
 /** @type {(route: RouteFile) => string} */

package/plugin/index.mjs

@@ -22,6 +22,8 @@ const toAbsolute = (p) => resolve(__dirname, p);
 const pluginDefaults = {
   routesDir: "src/routes",
   extensions: [".tsx", ".jsx", ".ts", ".js"],
+  excludeRoutes: [],
+  excludeRoutesProd: [],
 };
 
 // Define module mapping configuration

package/plugin/types.d.ts

@@ -10,6 +10,8 @@ import type { Plugin } from "vite";
 export type VanJSPluginOptions = {
   routesDir?: string;
   extensions?: string[];
+  excludeRoutes?: string[]; // NEW — excluded in all envs
+  excludeRoutesProd?: string[]; // NEW — excluded in production only
 };
 
 export declare const VitePluginVanJS: (

package/server/index.mjs

@@ -1,5 +1,4 @@
 import { basename } from "node:path";
-// import { routerState } from "../router/index.mjs";
 import * as dataCache from "../router/dataCache.mjs";
 export * from "../plugin/helpers.mjs";
 
@@ -20,7 +19,10 @@ export const renderToString = async (inputSource) => {
   if (typeof source === "boolean") {
     return String(source);
   }
-  if (typeof source === "object" && "render" in source) {
+  if (
+    source && typeof source === "object" && "render" in source &&
+    typeof source.render === "function"
+  ) {
     return source.render();
   }
   if (source instanceof Promise) {
@@ -46,25 +48,17 @@ export const renderToString = async (inputSource) => {
  * @param {string} file
  * @returns {string}
  */
+// return `<link rel="preload" href="${file}" as="style" crossorigin>`;
 function renderPreloadLink(file) {
   if (file.endsWith(".js")) {
-    return `<link rel="preload" href="${file}" as="script" crossorigin>`;
+    return `<link rel="modulepreload" href="${file}" crossorigin>`;
   } else if (file.endsWith(".css")) {
-    return `<link rel="preload" href="${file}" as="style" crossorigin>`;
+    return `<link rel="stylesheet" href="${file}" crossorigin>`;
   } else if (file.endsWith(".woff")) {
-    return `  <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
+    return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
   } else if (file.endsWith(".woff2")) {
-    return `  <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
-  } else if (file.endsWith(".gif")) {
-    return `<link rel="preload" href="${file}" as="image" type="image/gif">`;
-  } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
-    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`;
-  } else if (file.endsWith(".png")) {
-    return `<link rel="preload" href="${file}" as="image" type="image/png">`;
-  } else if (file.endsWith(".webp")) {
-    return `<link rel="preload" href="${file}" as="image" type="image/webp">`;
+    return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
   } else {
-    // @ts-ignore - this is server side code
     console.warn("Render error! File format not recognized: " + file);
     return "";
   }
@@ -131,7 +125,7 @@ export const getDataPreload = () => {
 
   if (cacheEntries.length > 0) {
     const json = JSON.stringify(cacheJSON);
-    return `<script id="data-cache">window.__DATA_CACHE=${json}</script>`;
+    return `<script id="data-cache">window.__DATA_CACHE=${json};</script>`;
   }
   return "";
 };