feat: add esm build

Also: - docs: adds demo
commonbaseapp · Sep 5, 2024 · 0b0bf8d · 0b0bf8d
1 parent 7048838
commit 0b0bf8d
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 43 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx commitlint --edit ${1}
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm lint-staged
-pnpm install --frozen-lockfile
+pnpm install --frozen-lockfile
diff --git a/commitlint.config.mjs → commitlint.config.js b/commitlint.config.mjs → commitlint.config.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Zodex Demo</title>
+    <style>
+      textarea { width: 300px; height: 400px; }
+    </style>
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <script type="importmap">
+      {
+        "imports": {
+          "zod": "../node_modules/zod/lib/index.mjs"
+        }
+      }
+    </script>
+    <script type="module" src="index.js"></script>
+  </head>
+  <body>
+    <textarea id="js" placeholder="Put arbitrary JavaScript object here (e.g., `{a: 5}`)">{a: 5}</textarea>
+    <textarea id="zod" placeholder="Put Zod here (e.g., `z.object({a: z.number()})`">z.object({a: z.number()})</textarea>
+    <button id="zerialize">Zerialize</button>
+    <textarea id="zodexJSON" placeholder="Put Zodex JSON here (or zerialize a Zod expression)"></textarea>
+    <button id="dezerialize">Dezerialize and validate</button>
+  </body>
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,66 @@
+import { z } from "zod";
+import { zerialize, dezerialize } from "../dist/esm/index.js";
+
+const $ = (sel) => {
+  return document.querySelector(sel);
+};
+
+$("#dezerialize").addEventListener("click", () => {
+  let js;
+  try {
+    js = eval(`(${$("#js").value})`);
+  } catch (err) {
+    alert("Error evaluating JavaScript");
+    return;
+  }
+
+  let json;
+  try {
+    json = JSON.parse($("#zodexJSON").value);
+  } catch (err) {
+    alert("Error evaluating JSON");
+    return;
+  }
+
+  let dez;
+  try {
+    dez = dezerialize(json);
+  } catch (err) {
+    alert("Error dezerializing JSON");
+    return;
+  }
+
+  let parseObj;
+  try {
+    parseObj = dez.safeParse(js);
+  } catch (err) {
+    alert("Error parsing JavaScript");
+    return;
+  }
+
+  alert(JSON.stringify(parseObj, null, 2));
+});
+
+$("#zerialize").addEventListener("click", () => {
+  let zod;
+  try {
+    zod = eval(`(${$("#zod").value})`);
+  } catch (err) {
+    alert("Error evaluating Zod");
+    return;
+  }
+  let zer;
+  try {
+    zer = zerialize(zod);
+  } catch (err) {
+    alert("Error zerializing Zod");
+    return;
+  }
+
+  try {
+    $("#zodexJSON").value = JSON.stringify(zer, null, 2);
+  } catch (err) {
+    alert("Error stringifying Zod JSON object");
+    return;
+  }
+});
diff --git a/eslint.config.mjs → eslint.config.js b/eslint.config.mjs → eslint.config.js
@@ -5,22 +5,11 @@ import eslintConfigPrettier from "eslint-config-prettier";
 
 export default tseslint.config(
   {
-    ignores: [
-      "src/schema.zodex.json",
-      "dist/",
-      ".idea",
-      "coverage",
-    ],
+    ignores: ["src/schema.zodex.json", "dist/", ".idea", "coverage"],
   },
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
   eslintConfigPrettier,
-  {
-    files: ['*.cjs'],
-    languageOptions: {
-      globals: globals.node
-    }
-  },
   {
     files: ["demo/**/*.js"],
     languageOptions: {
@@ -40,5 +29,5 @@ export default tseslint.config(
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unused-vars": "off",
     },
-  },
+  }
 );
diff --git a/package.json b/package.json
@@ -2,8 +2,16 @@
   "name": "zodex",
   "version": "0.0.0-dev",
   "description": "Type-safe (de)serialization for Zod",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/schema.zodex.json": "./dist/schema.zodex.json"
+  },
   "keywords": [
     "zod",
     "serialization",
@@ -13,11 +21,12 @@
   "author": "Gregor Weber<[email protected]>",
   "license": "MIT",
   "scripts": {
+    "start": "vite serve demo",
     "prepare": "husky",
     "check-style": "prettier --check src",
     "lint": "eslint --no-warn-ignored .",
     "test": "vitest --coverage --silent=false --reporter=basic",
-    "build": "rm -rf dist && pnpm tsc && cp src/schema.zodex.json dist/schema.zodex.json",
+    "build": "rm -rf dist && pnpm tsc --module esnext --moduleResolution bundler --outDir dist/esm && pnpm tsc && echo '{\"type\": \"commonjs\"}' > dist/package.json && echo '{\"type\": \"module\"}' > dist/esm/package.json && cp src/schema.zodex.json dist/schema.zodex.json",
     "prepublish": "pnpm run build"
   },
   "peerDependencies": {
@@ -40,6 +49,7 @@
     "prettier": "2.8.8",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
+    "vite": "^5.4.3",
     "vitest": "2.0.5"
   },
   "packageManager": "[email protected]",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/dezerialize.ts b/src/dezerialize.ts
@@ -35,8 +35,8 @@ import {
   SzUnknown,
   SzVoid,
   SzRef,
-} from "./types";
-import { ZodTypes } from "./zod-types";
+} from "./types.js";
+import { ZodTypes } from "./zod-types.js";
 
 type DezerializerOptions = {
   superRefinements?: {

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -3,7 +3,7 @@ import { expect, test } from "vitest";
 import { z } from "zod";
 import { SzCatch } from "./types";
 
-import { dezerialize, SzType, zerialize, Zerialize } from "./index";
+import { dezerialize, SzType, zerialize, Zerialize } from "./index.js";
 
 const zodexSchemaJSON = JSON.parse(
   fs.readFileSync("./src/schema.zodex.json", "utf-8")

diff --git a/src/index.ts b/src/index.ts
@@ -1,9 +1,9 @@
-import { SzType } from "./types";
+import { SzType } from "./types.js";
 
-export * from "./dezerialize";
-export * from "./zerialize";
+export * from "./dezerialize.js";
+export * from "./zerialize.js";
 
-export * from "./types";
+export * from "./types.js";
 
 type KeysOfUnion<T> = T extends T ? keyof T : never;
 export type SzPropertyKeysOf<T extends SzType> = KeysOfUnion<

diff --git a/src/zerialize.ts b/src/zerialize.ts
@@ -25,8 +25,8 @@ import {
   SzUnknown,
   STRING_KINDS,
   SzRef,
-} from "./types";
-import { ZodTypes, ZTypeName } from "./zod-types";
+} from "./types.js";
+import { ZodTypes, ZTypeName } from "./zod-types.js";
 
 export const PRIMITIVES = {
   ZodString: "string",

diff --git a/tsconfig.json b/tsconfig.json
@@ -9,5 +9,5 @@
     "declaration": true,
     "outDir": "dist"
   },
-  "exclude": ["vite.config.mts", "dist", "node_modules", "**/*.test.ts"]
+  "exclude": ["vite.config.ts", "dist", "node_modules", "**/*.test.ts"]
 }
diff --git a/vite.config.mts b/vite.config.mts
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    coverage: {
+      exclude: [
+        "demo",
+        ".idea",
+        "dist",
+        "*.config.js",
+        "*.config.ts",
+        "node_modules",
+        "src/zod-types.ts",
+      ],
+    },
+  },
+});