New exports (#29)

* Publish themes as ESM wrapper modules for npm consumers

Instead of requiring raw JSON imports (which break in Node ESM without
import attributes), the build now generates dist/*.mjs wrappers that
inline each theme as `export default Object.freeze(JSON.parse(...))`,
following the same pattern as @shikijs/themes.

* Bump version

* Add build step to npm publish job and verify dist in CI

The npm publish job was missing install + build steps, so dist/ would
not exist when publishing. Also adds a verification step to the test
workflow to confirm all ESM wrapper modules are generated.

Author: mdo

.github/workflows/publish.yml

@@ -56,6 +56,12 @@ jobs:
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build theme
+        run: npm run build
+
       - name: Publish to npm
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -44,6 +44,20 @@ jobs:
           fi
           echo "✅ All theme files generated successfully"
 
+      - name: Verify ESM wrapper modules exist
+        run: |
+          for theme in pierre-dark pierre-light pierre-dark-vibrant pierre-light-vibrant; do
+            if [ ! -f "dist/${theme}.mjs" ]; then
+              echo "❌ dist/${theme}.mjs not generated"
+              exit 1
+            fi
+          done
+          if [ ! -f "dist/index.mjs" ]; then
+            echo "❌ dist/index.mjs not generated"
+            exit 1
+          fi
+          echo "✅ All ESM wrapper modules generated successfully"
+
       - name: Check file sizes
         run: |
           light_size=$(wc -c < themes/pierre-light.json)

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 node_modules/
 build
+dist
 *.vsix

.vscodeignore

@@ -7,3 +7,4 @@
 /package-lock.json
 /src/
 /build/
+/dist/

README.md

@@ -11,6 +11,30 @@ OPEN POSITIONS: [Systems Engineer](https://pierre.computer/careers/systems-engin
 
 ~~~
 
-Overview: 
- - Light and dark themes for Visual Studio Code, Cursor, Zed, and Shiki. 
+Overview:
+ - Light and dark themes for Visual Studio Code, Cursor, Zed, and Shiki.
  - Built for [Diffs.com](https://diffs.com)
+
+~~~
+
+Usage:
+
+ VS Code / Cursor:
+  1. Install "Pierre Theme" from the Extensions marketplace
+  2. Cmd+Shift+P > "Color Theme" > select Pierre Light or Pierre Dark
+
+ Shiki / npm:
+  npm install @pierre/theme
+
+  import pierreDark from '@pierre/theme/pierre-dark'
+  import pierreLight from '@pierre/theme/pierre-light'
+
+  Available themes:
+   - @pierre/theme/pierre-dark
+   - @pierre/theme/pierre-light
+   - @pierre/theme/pierre-dark-vibrant   (Display P3)
+   - @pierre/theme/pierre-light-vibrant  (Display P3)
+
+ Zed:
+  Install "Pierre" from the Zed extension registry
+```

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@pierre/theme",
   "displayName": "Pierre Theme",
   "description": "Pierre theme for Shiki, VS Code, and more",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "publisher": "pierrecomputer",
   "icon": "icon.png",
   "galleryBanner": {
@@ -47,14 +47,24 @@
     "build": "ts-node src/build.ts",
     "test": "npm run build && ts-node src/test.ts",
     "start": "nodemon --watch src --ext ts --exec npm run build",
-    "package": "ts-node src/package-vsix.ts"
+    "package": "ts-node src/package-vsix.ts",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@vscode/vsce": "^3.2.2",
     "nodemon": "^3.1.11",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"
   },
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./pierre-dark": "./dist/pierre-dark.mjs",
+    "./pierre-light": "./dist/pierre-light.mjs",
+    "./pierre-dark-vibrant": "./dist/pierre-dark-vibrant.mjs",
+    "./pierre-light-vibrant": "./dist/pierre-light-vibrant.mjs",
+    "./themes/*": "./themes/*"
+  },
   "publishConfig": {
     "access": "public"
   }

package.json

@@ -37,3 +37,24 @@ const zedTheme = makeZedThemeFamily("Pierre", "pierrecomputer", [
 
 writeFileSync("zed/themes/pierre.json", JSON.stringify(zedTheme, null, 2), "utf8");
 console.log("Wrote zed/themes/pierre.json");
+
+// ============================================
+// ESM wrapper modules (for npm / Shiki consumers)
+// ============================================
+mkdirSync("dist", { recursive: true });
+
+const themeNames: string[] = [];
+
+for (const { file, theme } of vscodeThemes) {
+  const name = file.replace("themes/", "").replace(".json", "");
+  themeNames.push(name);
+  const json = JSON.stringify(theme);
+  const escaped = json.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  const mjs = `export default Object.freeze(JSON.parse('${escaped}'))\n`;
+  writeFileSync(`dist/${name}.mjs`, mjs, "utf8");
+  console.log("Wrote", `dist/${name}.mjs`);
+}
+
+const indexMjs = `export const themeNames = ${JSON.stringify(themeNames)}\n`;
+writeFileSync("dist/index.mjs", indexMjs, "utf8");
+console.log("Wrote dist/index.mjs");

src/build.ts

@@ -1,7 +1,7 @@
 id = "pierre-theme"
 name = "Pierre"
 description = "A warm, orange-accented color theme with light and dark variants"
-version = "0.0.24"
+version = "0.0.25"
 schema_version = 1
 authors = ["pierrecomputer"]
 repository = "https://github.com/pierrecomputer/pierre-theme"