From 03da2c30fa220b503d056065b0e9752df90ee59c Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Mon, 2 Dec 2024 10:02:42 -0500
Subject: [PATCH] Prettier: split configs and use direct dependencies

---
 package.json                                  |  2 -
 packages/prettier-config-svelte/README.md     | 32 ++++++++++++++
 packages/prettier-config-svelte/package.json  | 42 +++++++++++++++++++
 .../prettier-config-svelte.js                 | 23 ++++++++++
 packages/prettier-config-svelte/tsconfig.json | 12 ++++++
 packages/prettier-config/README.md            | 31 ++++----------
 packages/prettier-config/package.json         | 35 ++++------------
 .../{base.cjs => prettier-config.js}          |  4 +-
 packages/prettier-config/svelte.cjs           | 14 -------
 packages/prettier-config/tsconfig.json        |  2 +-
 pnpm-lock.yaml                                | 18 +++++---
 .prettierrc.js => prettier.config.js          |  0
 tests/peers.spec.ts                           |  7 +++-
 tsconfig.json                                 |  5 ++-
 14 files changed, 148 insertions(+), 79 deletions(-)
 create mode 100644 packages/prettier-config-svelte/README.md
 create mode 100644 packages/prettier-config-svelte/package.json
 create mode 100644 packages/prettier-config-svelte/prettier-config-svelte.js
 create mode 100644 packages/prettier-config-svelte/tsconfig.json
 rename packages/prettier-config/{base.cjs => prettier-config.js} (92%)
 delete mode 100644 packages/prettier-config/svelte.cjs
 rename .prettierrc.js => prettier.config.js (100%)

diff --git a/package.json b/package.json
index f098e29..ae84f7d 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,6 @@
     "eslint-plugin-unicorn": "^56.0.1",
     "eslint-plugin-vitest": "^0.5.4",
     "prettier": "^3.4.1",
-    "prettier-plugin-svelte": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
     "semver": "^7.6.3",
     "svelte": "^5.4.0",
     "tailwindcss": "3.4.15",
diff --git a/packages/prettier-config-svelte/README.md b/packages/prettier-config-svelte/README.md
new file mode 100644
index 0000000..5b20672
--- /dev/null
+++ b/packages/prettier-config-svelte/README.md
@@ -0,0 +1,32 @@
+# Viam's Prettier Config for Svelte
+
+This module contains [Viam][]'s shared [Prettier][] configurations for Prettier v3 in [Svelte][] projects.
+
+[viam]: https://www.viam.com/
+[prettier]: https://prettier.io/
+[svelte]: https://svelte.dev/
+
+## Usage
+
+Use the [Svelte config](./prettier-config-svelte.js) for Svelte projects.
+
+```shell
+pnpm add --save-dev prettier @viamrobotics/prettier-config-svelte
+```
+
+```js
+// prettier.config.js
+export default '@viamrobotics/prettier-config-svelte';
+```
+
+You can also extend the configuration:
+
+```js
+// prettier.config.js
+import baseConfig from '@viamrobotics/prettier-config-svelte';
+
+export default {
+  ...baseConfig,
+  // other options here
+};
+```
diff --git a/packages/prettier-config-svelte/package.json b/packages/prettier-config-svelte/package.json
new file mode 100644
index 0000000..1ee8c6c
--- /dev/null
+++ b/packages/prettier-config-svelte/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@viamrobotics/prettier-config-svelte",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "version": "1.0.0",
+  "description": "Viam's shared Prettier configuration for Svelte projects.",
+  "type": "module",
+  "files": [
+    "**/*",
+    "!tsconfig.json"
+  ],
+  "types": "./dist/prettier-config-svelte.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/prettier-config-svelte.d.ts",
+      "default": "./prettier-config-svelte.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viamrobotics/js-config.git",
+    "directory": "packages/prettier-config-svelte"
+  },
+  "keywords": [
+    "prettier",
+    "prettierconfig",
+    "svelte"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "prettier": ">=3 <4",
+    "svelte": "*",
+    "tailwindcss": "*"
+  },
+  "dependencies": {
+    "@viamrobotics/prettier-config": "workspace:*",
+    "prettier-plugin-svelte": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.9"
+  }
+}
diff --git a/packages/prettier-config-svelte/prettier-config-svelte.js b/packages/prettier-config-svelte/prettier-config-svelte.js
new file mode 100644
index 0000000..c7cb63f
--- /dev/null
+++ b/packages/prettier-config-svelte/prettier-config-svelte.js
@@ -0,0 +1,23 @@
+import url from 'node:url';
+
+import baseConfig from '@viamrobotics/prettier-config';
+
+const sveltePlugin = url.fileURLToPath(
+  import.meta.resolve('prettier-plugin-svelte')
+);
+const tailwindPlugin = url.fileURLToPath(
+  import.meta.resolve('prettier-plugin-tailwindcss')
+);
+
+/** @satisfies {import('prettier').Config} */
+const config = {
+  ...baseConfig,
+  plugins: [sveltePlugin, tailwindPlugin],
+  svelteIndentScriptAndStyle: false,
+  tailwindAttributes: ['cx'],
+  tailwindFunctions: ['classnames', 'cx'],
+  // TODO(mc, 2024-12-01): https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/332
+  tailwindPreserveWhitespace: true,
+};
+
+export default config;
diff --git a/packages/prettier-config-svelte/tsconfig.json b/packages/prettier-config-svelte/tsconfig.json
new file mode 100644
index 0000000..599ad13
--- /dev/null
+++ b/packages/prettier-config-svelte/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@viamrobotics/typescript-config/base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "composite": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist"
+  },
+  "references": [{ "path": "../prettier-config" }],
+  "include": ["*.js"]
+}
diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md
index 4711f10..a350150 100644
--- a/packages/prettier-config/README.md
+++ b/packages/prettier-config/README.md
@@ -1,28 +1,28 @@
-# Shared Prettier Config for Viam
+# Viam's Prettier Config
 
-This module contains [Viam][]'s shared [Prettier][] configurations for Prettier v3.
+This module contains [Viam][]'s shared [Prettier][] configuration for Prettier v3.
 
 [viam]: https://www.viam.com/
 [prettier]: https://prettier.io/
 
-## Base config
+## Usage
 
-Use the [base config](./base.js) for vanilla JavaScript / TypeScript projects.
+Use the [base config](./prettier-config.js) for vanilla JavaScript / TypeScript projects.
 
 ```shell
 pnpm add --save-dev prettier @viamrobotics/prettier-config
 ```
 
 ```js
-// .prettierrc.cjs
-module.exports = '@viamrobotics/prettier-config';
+// prettier.config.js
+export default '@viamrobotics/prettier-config';
 ```
 
 You can also extend the configuration:
 
 ```js
-// .prettierrc.cjs
-const baseConfig = require('@viamrobotics/prettier-config');
+// prettier.config.js
+import baseConfig from '@viamrobotics/prettier-config';
 
 export default {
   ...baseConfig,
@@ -32,17 +32,4 @@ export default {
 
 ## Svelte config
 
-Use the [Svelte config](./svelte.js) for Svelte projects.
-
-```shell
-pnpm add --save-dev \
-  @viamrobotics/prettier-config \
-  prettier \
-  prettier-plugin-svelte \
-  prettier-plugin-tailwindcss
-```
-
-```js
-// .prettierrc.cjs
-module.exports = '@viamrobotics/prettier-config/svelte';
-```
+See [@viamrobotics/prettier-config-svelte](../prettier-config-svelte/)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index e66d15c..f524c80 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -4,29 +4,18 @@
     "access": "public",
     "provenance": true
   },
-  "version": "0.3.6",
-  "description": "Common Prettier configuration for Viam projects.",
-  "type": "commonjs",
+  "version": "1.0.0",
+  "description": "Viam's shared Prettier configuration.",
+  "type": "module",
   "files": [
     "**/*",
     "!tsconfig.json"
   ],
-  "types": "dist/base.d.cts",
-  "typesVersions": {
-    "*": {
-      "svelte": [
-        "dist/svelte.d.cts"
-      ]
-    }
-  },
+  "types": "./dist/prettier-config.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/base.d.cts",
-      "default": "./base.cjs"
-    },
-    "./svelte": {
-      "types": "./dist/svelte.d.cts",
-      "default": "./svelte.cjs"
+      "types": "./dist/prettier-config.d.ts",
+      "default": "./prettier-config.js"
     }
   },
   "repository": {
@@ -40,16 +29,6 @@
   ],
   "license": "Apache-2.0",
   "peerDependencies": {
-    "prettier": ">=3 <4",
-    "prettier-plugin-svelte": ">=3 <4",
-    "prettier-plugin-tailwindcss": ">=0.4.0 <0.7"
-  },
-  "peerDependenciesMeta": {
-    "prettier-plugin-svelte": {
-      "optional": true
-    },
-    "prettier-plugin-tailwindcss": {
-      "optional": true
-    }
+    "prettier": ">=3 <4"
   }
 }
diff --git a/packages/prettier-config/base.cjs b/packages/prettier-config/prettier-config.js
similarity index 92%
rename from packages/prettier-config/base.cjs
rename to packages/prettier-config/prettier-config.js
index 7b423bb..1fa0949 100644
--- a/packages/prettier-config/base.cjs
+++ b/packages/prettier-config/prettier-config.js
@@ -1,5 +1,3 @@
-'use strict';
-
 /** @satisfies {import('prettier').Config} */
 const config = {
   // overrides
@@ -24,4 +22,4 @@ const config = {
   embeddedLanguageFormatting: 'auto',
 };
 
-module.exports = config;
+export default config;
diff --git a/packages/prettier-config/svelte.cjs b/packages/prettier-config/svelte.cjs
deleted file mode 100644
index 32b6c25..0000000
--- a/packages/prettier-config/svelte.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-const baseConfig = require('./base.cjs');
-
-/** @satisfies {import('prettier').Config} */
-const config = {
-  ...baseConfig,
-  plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
-  svelteIndentScriptAndStyle: false,
-  tailwindAttributes: ['cx'],
-  tailwindFunctions: ['classnames', 'cx'],
-};
-
-module.exports = config;
diff --git a/packages/prettier-config/tsconfig.json b/packages/prettier-config/tsconfig.json
index 1302d88..1420f64 100644
--- a/packages/prettier-config/tsconfig.json
+++ b/packages/prettier-config/tsconfig.json
@@ -7,5 +7,5 @@
     "emitDeclarationOnly": true,
     "outDir": "dist"
   },
-  "include": ["*.cjs"]
+  "include": ["*.js"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e568fd..75f3786 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,12 +62,6 @@ importers:
       prettier:
         specifier: ^3.4.1
         version: 3.4.1
-      prettier-plugin-svelte:
-        specifier: ^3.3.2
-        version: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
-      prettier-plugin-tailwindcss:
-        specifier: ^0.6.9
-        version: 0.6.9(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1)
       semver:
         specifier: ^7.6.3
         version: 7.6.3
@@ -88,6 +82,18 @@ importers:
 
   packages/prettier-config: {}
 
+  packages/prettier-config-svelte:
+    dependencies:
+      '@viamrobotics/prettier-config':
+        specifier: workspace:*
+        version: link:../prettier-config
+      prettier-plugin-svelte:
+        specifier: ^3.3.2
+        version: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1)
+
   packages/typescript-config: {}
 
 packages:
diff --git a/.prettierrc.js b/prettier.config.js
similarity index 100%
rename from .prettierrc.js
rename to prettier.config.js
diff --git a/tests/peers.spec.ts b/tests/peers.spec.ts
index 19900dc..2afd4e4 100644
--- a/tests/peers.spec.ts
+++ b/tests/peers.spec.ts
@@ -12,7 +12,12 @@ interface PackageJSON {
 }
 
 const repo = path.join(url.fileURLToPath(import.meta.url), '../..');
-const packages = ['eslint-config', 'prettier-config', 'typescript-config'];
+const packages = [
+  'eslint-config',
+  'prettier-config',
+  'prettier-config-svelte',
+  'typescript-config',
+];
 
 const getManifest = (pkgPath: string) =>
   JSON.parse(
diff --git a/tsconfig.json b/tsconfig.json
index 74f3914..6b63221 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,8 @@
   },
   "references": [
     { "path": "./packages/eslint-config" },
-    { "path": "./packages/prettier-config" }
+    { "path": "./packages/prettier-config" },
+    { "path": "./packages/prettier-config-svelte" }
   ],
-  "include": [".eslintrc.cjs", ".prettierrc.js", "./tests/**/*.ts"]
+  "include": [".eslintrc.cjs", "prettier.config.js", "./tests/**/*.ts"]
 }