withYak for ESM and CJS (#80)

- Changed default documentation for extending the next.js config to be `next.config.mjs`

README.md

@@ -39,17 +39,17 @@ Try it on [stackblitz](https://stackblitz.com/edit/stackblitz-starters-dfykqy?fi
 
 1. Install **next-yak** in your Next.js project.
 
-2. Add next-yak to your `next.config.js`:
+2. Add next-yak to your `next.config.mjs`:
 
 ```js
 // next.config.js
-const { withYak } = require("next-yak/withYak");
+import { withYak } from "next-yak/withYak";
 
 const nextConfig = {
   // your next.js config
 };
 
-module.exports = withYak(nextConfig);
+export default withYak(nextConfig);
 ```
 
 3. Ready to go:

packages/docs/docs/pages/getting-started.md

@@ -30,7 +30,19 @@ yarn add next-yak
 
 ### Enable next-yak
 
-Add next-yak to your `next.config.js`:
+Add next-yak to your `next.config.mjs` or `next.config.js`:
+
+:::code-group
+
+```js [next.config.mjs]
+import { withYak } from "next-yak/withYak";
+
+const nextConfig = {
+  // your next.js config
+};
+
+export default withYak(nextConfig);
+```
 
 ```js [next.config.js]
 const { withYak } = require("next-yak/withYak");
@@ -40,9 +52,10 @@ const nextConfig = {
 };
 
 module.exports = withYak(nextConfig);
-
 ```
 
+:::
+
 ### Start using next-yak
 
 With the installation and configuration done, you can now use next-yak directly in your components. Here's a simple example:

packages/next-yak/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -17,7 +17,8 @@
       "require": "./dist/runtime-internals/index.cjs"
     },
     "./withYak": {
-      "require": "./withYak/index.cjs"
+      "require": "./withYak/index.cjs",
+      "import": "./withYak/index.js"
     },
     "./context/baseContext": {
       "import": "./dist/context/baseContext.js",
@@ -45,7 +46,7 @@
     "build:baseContext": "tsup runtime/context/baseContext.tsx --target es2022 --external react --dts --format cjs,esm --sourcemap --out-dir dist/context/",
     "build:context:client": "tsup runtime/context/index.tsx --target es2022 --external react --external next-yak/context/baseContext --dts --format cjs,esm --sourcemap --out-dir dist/context/",
     "build:context:server": "tsup runtime/context/index.server.tsx --target es2022 --external react --external next-yak/context/baseContext --external ./index.js --format cjs,esm --sourcemap --out-dir dist/context/",
-    "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
+    "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs,esm --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
     "test": "vitest run",
     "test:types:code": "tsc -p tsconfig.json",
     "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
@@ -80,4 +81,4 @@
     "runtime",
     "withYak"
   ]
-}
+}

packages/next-yak/withYak/index.cjs

@@ -33,8 +33,12 @@ __export(withYak_exports, {
   withYak: () => withYak
 });
 module.exports = __toCommonJS(withYak_exports);
-var import_path = __toESM(require("path"), 1);
-var import_fs = require("fs");
+var import_node_path = __toESM(require("path"), 1);
+var import_node_url = require("url");
+var import_node_fs = require("fs");
+var import_node_path2 = require("path");
+var import_meta = {};
+var currentDir = typeof __dirname !== "undefined" ? __dirname : (0, import_node_path2.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
 var addYak = (yakOptions, nextConfig) => {
   const previousConfig = nextConfig.webpack;
   nextConfig.webpack = (webpackConfig, options) => {
@@ -43,7 +47,7 @@ var addYak = (yakOptions, nextConfig) => {
     }
     webpackConfig.module.rules.push({
       test: /\.tsx?$/,
-      loader: require.resolve("../loaders/tsloader.cjs"),
+      loader: import_node_path.default.join(currentDir, "../loaders/tsloader.cjs"),
       options: yakOptions,
       issuerLayer: {
         // prevent recursions when calling this.importModule
@@ -53,10 +57,13 @@ var addYak = (yakOptions, nextConfig) => {
     });
     webpackConfig.module.rules.push({
       test: /\.yak\.module\.css$/,
-      loader: require.resolve("../loaders/cssloader.cjs"),
+      loader: import_node_path.default.join(currentDir, "../loaders/cssloader.cjs"),
       options: yakOptions
     });
-    const yakContext = resolveYakContext(yakOptions.contextPath, webpackConfig.context);
+    const yakContext = resolveYakContext(
+      yakOptions.contextPath,
+      webpackConfig.context
+    );
     if (yakContext) {
       webpackConfig.resolve.alias["next-yak/context/baseContext"] = yakContext;
     }
@@ -65,11 +72,11 @@ var addYak = (yakOptions, nextConfig) => {
   return nextConfig;
 };
 function resolveYakContext(contextPath, cwd) {
-  const yakContext = contextPath ? import_path.default.resolve(cwd, contextPath) : import_path.default.resolve(cwd, "yak.context");
+  const yakContext = contextPath ? import_node_path.default.resolve(cwd, contextPath) : import_node_path.default.resolve(cwd, "yak.context");
   const extensions = ["", ".ts", ".tsx", ".js", ".jsx"];
   for (const extension in extensions) {
     const fileName = yakContext + extensions[extension];
-    if ((0, import_fs.existsSync)(fileName)) {
+    if ((0, import_node_fs.existsSync)(fileName)) {
       return fileName;
     }
   }

packages/next-yak/withYak/index.d.ts

@@ -0,0 +1,37 @@
+type YakConfigOptions = {
+    contextPath?: string;
+};
+/**
+ * Add Yak to your Next.js app
+ *
+ * @usage
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("next-yak/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * module.exports = withYak(nextConfig);
+ * ```
+ *
+ * With a custom yakConfig
+ *
+ * ```ts
+ * // next.config.js
+ * const { withYak } = require("next-yak/withYak");
+ * const nextConfig = {
+ *   // your next config here
+ * };
+ * const yakConfig = {
+ *   // your yak config
+ * };
+ * module.exports = withYak(yakConfig, nextConfig);
+ * ```
+ */
+declare const withYak: {
+    <T extends (Record<string, any> | ((...args: any[]) => Record<string, any>) | ((...args: any[]) => Promise<Record<string, any>>))>(yakOptions: YakConfigOptions, nextConfig: T): T;
+    <T extends (Record<string, any> | ((...args: any[]) => Record<string, any>) | ((...args: any[]) => Promise<Record<string, any>>))>(nextConfig: T, _?: undefined): T;
+};
+
+export { YakConfigOptions, withYak };