feat: add esm build

Also: - docs: adds demo
commonbaseapp · Jul 16, 2024 · 9c4ba7c · 9c4ba7c
1 parent a121b23
commit 9c4ba7c
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 16 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1 +1 @@
-module.exports = { extends: ["@commitlint/config-conventional"] };
+export default { extends: ["@commitlint/config-conventional"] };
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,27 @@
+<!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",
+          "react": "./react.js"
+        }
+      }
+    </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/demo/react.js b/demo/react.js
@@ -0,0 +1 @@
+export default {};
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 install",
     "check-style": "prettier --check src",
     "lint": "eslint src/**",
     "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": {
@@ -44,6 +53,7 @@
     "lint-staged": "15.2.7",
     "prettier": "2.8.8",
     "typescript": "5.3.x",
+    "vite": "^5.3.1",
     "vitest": "1.6.0"
   },
   "packageManager": "[email protected]",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/dezerialize.ts b/src/dezerialize.ts
@@ -33,8 +33,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
@@ -2,7 +2,7 @@ import fs from "fs";
 import { expect, test } from "vitest";
 import { z } from "zod";
 
-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,10 +1,10 @@
-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 { mapTypesToViews } from "./ui";
+export * from "./types.js";
+export { mapTypesToViews } from "./ui.js";
 
 type KeysOfUnion<T> = T extends T ? keyof T : never;
 export type SzPropertyKeysOf<T extends SzType> = KeysOfUnion<

diff --git a/src/infer.ts b/src/infer.ts
@@ -17,7 +17,7 @@ import {
   SzEnum,
   SzPromise,
   SzRef,
-} from "./types";
+} from "./types.js";
 
 type PrimitiveTypes = {
   string: string;

diff --git a/src/ui.ts b/src/ui.ts
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { SzInfer } from "./infer";
-import { SzType } from "./types";
+import { SzInfer } from "./infer.js";
+import { SzType } from "./types.js";
 
 type ShapeValueProps<Value> = {
   value: Value;

diff --git a/src/zerialize.ts b/src/zerialize.ts
@@ -24,8 +24,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/vite.config.mts b/vite.config.mts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     coverage: {
-      exclude: ["*.js", "node_modules"]
+      exclude: ["*.js", "demo", "node_modules"]
     }
   },
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = { extends: ["@commitlint/config-conventional"] };
		export default { extends: ["@commitlint/config-conventional"] };