feat: add esm build

Also: - docs: adds demo
commonbaseapp · Jun 21, 2024 · fa8aaef · fa8aaef
1 parent ad9764d
commit fa8aaef
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 15 deletions.
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.mjs"
+        }
+      }
+    </script>
+    <script type="module" src="index.mjs"></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.mjs b/demo/index.mjs
@@ -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.mjs b/demo/react.mjs
@@ -0,0 +1 @@
+export default {};
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "zodex",
   "version": "0.0.0-dev",
   "description": "Type-safe (de)serialization for Zod",
+  "type": "commonjs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "keywords": [
@@ -13,11 +14,12 @@
   "author": "Gregor Weber<[email protected]>",
   "license": "MIT",
   "scripts": {
+    "start": "static",
     "prepare": "husky install",
     "check-style": "prettier --check src",
     "lint": "eslint src/**",
     "test": "vitest --coverage --silent=false",
-    "build": "rm -rf dist && pnpm tsc",
+    "build": "rm -rf dist && pnpm tsc --module esnext --moduleResolution bundler --outDir dist/esm && pnpm tsc",
     "prepublish": "pnpm run build"
   },
   "peerDependencies": {
@@ -31,6 +33,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@brettz9/node-static": "^0.1.1",
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
     "@types/react": "18.3.3",

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

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -1,7 +1,7 @@
 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 p = <
   Schema extends z.ZodFirstPartySchemaTypes,

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
@@ -16,7 +16,7 @@ import {
   SzFunction,
   SzEnum,
   SzPromise,
-} 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
@@ -23,8 +23,8 @@ import {
   SzType,
   SzUnknown,
   STRING_KINDS,
-} 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"]
     }
   },
 });