vite-plugin-vanjs 0.0.3 → 0.0.4

package/server/index.mjs

@@ -0,0 +1,97 @@
+import { basename } from "node:path";
+
+/**
+ * @type {typeof import("./types.d.ts").renderToString}
+ */
+export const renderToString = async (inputSource) => {
+  const source = typeof inputSource === "function"
+    ? inputSource()
+    : inputSource;
+  if (typeof source === "number") {
+    return String(source);
+  }
+  if (typeof source === "string") {
+    return source.trim();
+  }
+  if (typeof source === "boolean") {
+    return String(source);
+  }
+  if (typeof source === "object" && "render" in source) {
+    return source.render();
+  }
+  if (source instanceof Promise) {
+    return renderToString(await source);
+  }
+  /* istanbul ignore else */
+  if (Array.isArray(source)) {
+    const elements = [];
+    for (const el of source) {
+      elements.push(await renderToString(el));
+    }
+    return elements.join("");
+  }
+  // return String(source)
+
+  // no source provided
+  // @ts-ignore - this is server side code
+  console.warn("Render error! Source not recognized: " + source);
+  return "";
+};
+
+/**
+ * @param {string} file
+ * @returns {string}
+ */
+function renderPreloadLink(file) {
+  if (file.endsWith(".js") || file.endsWith(".mjs")) {
+    return `<link rel="modulepreload" as="script" crossorigin href="${file}">`;
+  } else if (file.endsWith(".css")) {
+    return `<link rel="stylesheet" href="${file}">`;
+  } else if (file.endsWith(".woff")) {
+    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">`;
+  } else {
+    // @ts-ignore - this is server side code
+    console.warn("Render error! File format not recognized: " + file);
+    return "";
+  }
+}
+
+/**
+ * @type {typeof import("./types.d.ts").renderPreloadLinks}
+ */
+export function renderPreloadLinks(modules, manifest) {
+  let links = "";
+  const seen = new Set();
+  modules.forEach((id) => {
+    const files = manifest[id];
+    /* istanbul ignore else */
+    if (files?.length) {
+      files.forEach((file) => {
+        /* istanbul ignore else */
+        if (!seen.has(file)) {
+          seen.add(file);
+          const filename = basename(file);
+          /* istanbul ignore next - impossible to test */
+          if (manifest[filename]) {
+            for (const depFile of manifest[filename]) {
+              links += renderPreloadLink(depFile);
+              seen.add(depFile);
+            }
+          }
+          links += renderPreloadLink(file);
+        }
+      });
+    }
+  });
+  return links;
+}

package/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "server",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./types.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "import": "./index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "mini-van-plate": "*",
+    "vanjs-core": "*",
+    "vanjs-ext": "*"
+  },
+  "sideEffects": false
+}

package/server/types.d.ts

@@ -0,0 +1,38 @@
+/// <reference path="global.d.ts" />
+import type { Element as VanElement, TagFunc } from "mini-van-plate/van-plate";
+
+/**
+ * A function that takes a list of files and a manifest and returns a string
+ * representing the HTML markup for preload links.
+ * @param files the list of files
+ * @param manifest the vite manifest
+ * @returns HTML string
+ */
+export const renderPreloadLinks: (
+  files: string[],
+  manifest: Record<string, string[]>,
+) => string;
+
+type ValidVanNode =
+  | boolean
+  | number
+  | string
+  | VanElement
+  | TagFunc;
+
+type VanComponent = () => ValidVanNode | ValidVanNode[];
+export type Source =
+  | Promise<ValidVanNode>
+  | VanComponent
+  | (() => VanComponent)
+  | ValidVanNode
+  | ValidVanNode[]
+  | undefined;
+
+/**
+ * A function that takes a multitude of source types and returns a string
+ * representing the HTML output.
+ * @param source the source
+ * @returns HTML string
+ */
+export const renderToString: (source: Source) => Promise<string>;

package/setup/package.json

@@ -2,11 +2,11 @@
   "name": "setup",
   "main": "./index.mjs",
   "module": "./index.mjs",
-  "types": "./index.d.ts",
+  "types": "./types.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types.d.ts",
       "import": "./index.mjs"
     },
     "./van": {

package/setup/van.d.ts

@@ -0,0 +1 @@
+export type { Van } from "vanjs-core";

package/setup/vanX.d.ts

@@ -0,0 +1 @@
+export * from "vanjs-ext";

package/setup/vanX.mjs

@@ -10,5 +10,5 @@ export const {
   list,
   replace,
   compact,
-} = "default" in vanX ? vanX.default : vanX;
+} = "default" in vanX ? vanX.default : /* istanbul ignore next */ vanX;
 export default vanX;

package/src/index.mjs

@@ -10,18 +10,16 @@ export default function VitePluginVanJS() {
     enforce: "pre",
     config() {
       return {
-        build: {
-          optimizeDeps: {
-            include: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
-          },
-          dedupe: ["vanjs-core", "vanjs-ext", "mini-van-plate"],
-        },
         resolve: {
           alias: {
-            "@vanjs/jsx": resolve(__dirname, "../jsx"),
             "@vanjs/setup": resolve(__dirname, "../setup"),
             "@vanjs/van": resolve(__dirname, "../setup/van"),
             "@vanjs/vanX": resolve(__dirname, "../setup/vanX"),
+            "@vanjs/client": resolve(__dirname, "../client"),
+            "@vanjs/server": resolve(__dirname, "../server"),
+            "@vanjs/meta": resolve(__dirname, "../meta"),
+            "@vanjs/router": resolve(__dirname, "../router"),
+            "@vanjs/jsx": resolve(__dirname, "../jsx"),
           },
         },
         esbuild: {
@@ -32,20 +30,23 @@ export default function VitePluginVanJS() {
       };
     },
     transform(code, id) {
-      let newCode = code;
+      let newCode = String(code);
 
       const vanCoreReg = /import\s*.*\s*from\s*['"]vanjs-core['"]/g;
       const vanExtReg = /import\s*.*\s*from\s*['"]vanjs-ext['"]/g;
       const isSetupFile = /vite-plugin-vanjs[\\/]setup/.test(id);
       const isVanXFile = /vanjs-ext[\\/]src[\\/]van-x/.test(id);
 
+      /* istanbul ignore else */
       if (!isSetupFile && !isVanXFile) {
+        /* istanbul ignore next - the plugin works, istanbul isn't instrumenting this part properly */
         if (vanCoreReg.test(newCode)) {
           newCode = newCode.replace(
             vanCoreReg,
             (match) => match.replace("vanjs-core", "@vanjs/van"),
           );
         }
+        /* istanbul ignore next - the plugin works, istanbul isn't instrumenting this part properly */
         if (vanExtReg.test(newCode)) {
           newCode = newCode.replace(
             vanExtReg,

package/src/types.d.ts

@@ -1,4 +1,29 @@
-import type { Plugin } from "vite";
-export * from "../jsx";
-export * from "../setup";
-export default function VitePluginVanJS(): Plugin;
+export * from "../jsx/types";
+export * from "../setup/types";
+export * from "../router/types";
+export * from "../meta/types";
+export * from "../server/types";
+export * from "../client/types";
+
+declare const VitePluginVanJS: () => {
+  name: "string";
+  enforce: "pre" | "post" | undefined;
+  apply: "build";
+  config(): {
+    resolve: {
+      alias: Record<string, string>;
+    };
+    esBuild: {
+      jsx: "string";
+      jsxFactory: "string";
+      jsxFragment: "string";
+    };
+  };
+  transform(code: string, id?: string): {
+    code: string;
+    map: null;
+  };
+};
+export default VitePluginVanJS;
+
+export {};

package/tsconfig.json

@@ -26,8 +26,20 @@
     "noEmit": true,
     "checkJs": true,
     "jsx": "preserve",
-    "jsxImportSource": "vite-plugin-vanjs",
+    "jsxImportSource": "@vanjs/jsx",
+    // "types": ["vanjs-core", "vanjs-ext", "mini-van-plate"],
   },
-  "include": ["./src/**/*.ts", "./jsx/*.d.ts", "setup/**/*"],
+  "include": [
+    "./tests/*.ts",
+    "./tests/*.tsx",
+    "./src/*.ts",
+    "./jsx/*.ts",
+    "./setup/*.ts",
+    "./router/*.ts",
+    "./meta/*.ts",
+    "./server/*.ts",
+    "./client/*.ts",
+    // "./tests/vite-env.d.ts"
+  ],
   "exclude": ["node_modules", "experiments", "coverage"],
 }

package/jsx/index.d.ts

@@ -1,16 +0,0 @@
-/// <reference path="global.d.ts" />
-import type { JSX } from "./jsx.d.ts";
-import type { Fragment } from "./fragment.d.ts";
-
-declare function jsx(
-  type: any,
-  props: any,
-): () =>
-  | (Node & {
-    [key: string]: any;
-  })
-  | (Node & {
-    [key: string]: any;
-  })[];
-
-export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs };

package/jsx/utils.mjs

@@ -1,24 +0,0 @@
-export const setAttribute = (element, key, value) => {
-  if (value == null || value === false || value === "") {
-    element.removeAttribute(key);
-  } else {
-    const attr = value === true ? "" : String(value);
-    element.setAttribute(key, attr);
-  }
-};
-
-export const styleToString = (style) => {
-  return typeof style === "string"
-    ? style
-    : typeof style === "object"
-    ? Object.entries(style).reduce((acc, key) =>
-      acc +
-      key[0]
-        .split(/(?=[A-Z])/)
-        .join("-")
-        .toLowerCase() +
-      ":" +
-      key[1] +
-      ";", "")
-    : "";
-};