update monkey-patch ark to only output esm

apps/x/package.json

@@ -15,24 +15,23 @@
     "@stylexjs/cli": "^0.7.5",
     "@stylexjs/nextjs-plugin": "^0.7.5",
     "@types/node": "^20.4.5",
-    "@types/react": "18.2.17",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.10",
     "@urban-ui/tsconfig": "workspace:*",
     "typescript": "^5.4.3"
   },
   "dependencies": {
     "@stylexjs/stylex": "^0.7.5",
     "@urban-ui/flex": "workspace:*",
-    "@urban-ui/testx": "workspace:*",
     "@urban-ui/theme": "workspace:*",
     "clsx": "^2.0.0",
     "cva": "npm:class-variance-authority@^0.7.0",
     "lorem-ipsum": "^2.0.8",
-    "next": "14.1.4",
-    "react": "^18.2.0",
+    "next": "14.2.4",
+    "react": "^18.3.1",
     "react-aria": "^3.33.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-stately": "^3.31.0",
     "react-transition-group": "^4.4.5",
     "ts-pattern": "^5.1.0"

apps/x/src/app/components/button.tsx

@@ -22,7 +22,9 @@ const styles = stylex.create({
   },
 })
 
-export interface ButtonProps extends AriaButtonProps {}
+export interface ButtonProps extends AriaButtonProps {
+  contentEditable: 'inherit'
+}
 
 export function Button(props: ButtonProps) {
   const ref = useRef(null)

packages/core/theme/package.json

@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.2",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@urban-ui/tsconfig": "workspace:*",
     "del-cli": "^5.1.0",
     "react": "^18.2.0",

packages/layout/flex/__package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@urban-ui/flex",
+  "version": "0.4.0",
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "lint": "biome lint src",
+    "format": "biome format src --write",
+    "typecheck": "tsc",
+    "clean": "del dist",
+    "dev": "arc watch",
+    "build": "arc build",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "@stylexjs/stylex": "^0.7.5",
+    "@urban-ui/theme": "^0.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@happy-dom/global-registrator": "^14.7.1",
+    "@stylexjs/babel-plugin": "^0.7.5",
+    "@stylexjs/cli": "^0.7.5",
+    "@stylexjs/dev-runtime": "^0.7.5",
+    "@stylexjs/nextjs-plugin": "^0.7.5",
+    "@types/node": "^20.12.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@urban-ui/tsconfig": "workspace:*",
+    "bun-plugin-stylex": "^1.0.3",
+    "del-cli": "^5.1.0",
+    "react": "^18.3.0",
+    "typescript": "^5.4.3"
+  }
+}

packages/layout/flex/arc.config.ts

@@ -14,25 +14,14 @@ const config: Config = {
   rootDir: tsconfig.compilerOptions?.rootDir ?? 'src',
   events: {
     complete: async () => {
+      // -- Example of spawning stylex cli to generate css for this package
       console.log('🎉')
-      await spawn('del', ['disttest2'])
-      console.log(process.cwd(), __dirname)
-      await spawn('stylex', [
-        '--config',
-        path.join(__dirname, 'stylex.config.jsonc'),
-      ])
-      // await new Promise((res) => {
-      //   const pipe = cp.spawn('stylex', ['-i', 'disttest', '-o', 'disttest2'], {
-      //     stdio: [0, 1, 2],
-      //   })
-      //   pipe.on('data', (chunk) => {
-      //     console.log(chunk)
-      //   })
-      //   pipe.on('close', () => {
-      //     console.log('👩‍🎤')
-      //     res(null)
-      //   })
-      // })
+      // await spawn('del', ['disttest2'])
+      // console.log(process.cwd(), __dirname)
+      // await spawn('stylex', [
+      //   '--config',
+      //   path.join(__dirname, 'stylex.config.jsonc'),
+      // ])
       console.log('❤️')
     },
   },

packages/layout/flex/build.ts

@@ -0,0 +1,27 @@
+import path from 'node:path'
+import createStylexPlugin from 'bun-plugin-stylex'
+
+/**
+ * Example using bun-plugin-stylex to generate css
+ *
+ * The main problem is that this also generates the tokens, which makes sense as it needs those css variables
+ */
+
+const [stylexPlugin, generateCSS] = createStylexPlugin({
+  dev: false,
+  useCSSLayers: true,
+})
+
+await Bun.build({
+  entrypoints: ['./src/index.ts'],
+  outdir: './dist2',
+  minify: false,
+  plugins: [stylexPlugin],
+  external: ['@stylexjs/stylex', 'react'],
+})
+
+const generatedCSS = await generateCSS()
+
+if (generatedCSS) {
+  await Bun.write(path.resolve(__dirname, 'dist2/styles.css'), generatedCSS)
+}

packages/layout/flex/package.json

@@ -6,11 +6,7 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
+    ".": "./dist/index.js"
   },
   "license": "MIT",
   "scripts": {
@@ -39,11 +35,12 @@
     "@stylexjs/dev-runtime": "^0.7.5",
     "@stylexjs/nextjs-plugin": "^0.7.5",
     "@types/node": "^20.12.2",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@urban-ui/tsconfig": "workspace:*",
+    "bun-plugin-stylex": "^1.0.3",
     "del-cli": "^5.1.0",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
     "typescript": "^5.4.3"
   }
 }

scripts/arc/src/transform.ts

@@ -119,22 +119,22 @@ const compile = createTask(
               })
             },
           ),
-          traceFn(
-            fileEvents['compile::cjs'],
-            ctx.ftrace.getTrace(filepath),
-            async () => {
-              return await transformFile({
-                code: file,
-                filename: filepath,
-                overrides: {
-                  module: {
-                    type: 'commonjs',
-                  },
-                },
-                plugins: [transformImports('cjs')],
-              })
-            },
-          ),
+          // traceFn(
+          //   fileEvents['compile::cjs'],
+          //   ctx.ftrace.getTrace(filepath),
+          //   async () => {
+          //     return await transformFile({
+          //       code: file,
+          //       filename: filepath,
+          //       overrides: {
+          //         module: {
+          //           type: 'commonjs',
+          //         },
+          //       },
+          //       plugins: [transformImports('cjs')],
+          //     })
+          //   },
+          // ),
         ])
 
         ctx.ftrace.getTrace(filepath).track(mCompile.end)
@@ -143,7 +143,7 @@ const compile = createTask(
           filepath: filepath,
           files: {
             esm: codeBlocks[0],
-            cjs: codeBlocks[1],
+            // cjs: codeBlocks[1],
           },
         }
       }),
@@ -170,10 +170,10 @@ const write = createTask(
           outDir: ctx.outDir,
         })
 
-        const cjsFilepath = generateOutputPath(files.cjs.filepath, 'cjs', {
-          strip: ctx.rootDir,
-          outDir: ctx.outDir,
-        })
+        // const cjsFilepath = generateOutputPath(files.cjs.filepath, 'cjs', {
+        //   strip: ctx.rootDir,
+        //   outDir: ctx.outDir,
+        // })
 
         ctx.ftrace.getTrace(filepath).track(measurement.start)
         await Promise.all([
@@ -195,24 +195,24 @@ const write = createTask(
                 return file
               },
             ),
-          pipe(
-            async () => await writeFile(cjsFilepath, files.cjs.code),
-            async (file) => {
-              debug('Write file:', file)
-              ctx.ftrace.getSizes(filepath).cjs = file.size
-              return file
-            },
-          ),
-          files.cjs.map &&
-            pipe(
-              async () =>
-                await writeFile(`${cjsFilepath}.map`, files.cjs.map as string),
-              async (file) => {
-                debug('Write file:', file)
-                ctx.ftrace.getSizes(filepath)['cjs::map'] = file.size
-                return file
-              },
-            ),
+          // pipe(
+          //   async () => await writeFile(cjsFilepath, files.cjs.code),
+          //   async (file) => {
+          //     debug('Write file:', file)
+          //     ctx.ftrace.getSizes(filepath).cjs = file.size
+          //     return file
+          //   },
+          // ),
+          // files.cjs.map &&
+          //   pipe(
+          //     async () =>
+          //       await writeFile(`${cjsFilepath}.map`, files.cjs.map as string),
+          //     async (file) => {
+          //       debug('Write file:', file)
+          //       ctx.ftrace.getSizes(filepath)['cjs::map'] = file.size
+          //       return file
+          //     },
+          //   ),
         ])
         ctx.ftrace.getTrace(filepath).track(measurement.end)
       }),

scripts/arc/src/transform/analytics.ts

@@ -14,7 +14,7 @@ export const fileEvents = {
   parse: 'parse',
   compile: 'compile',
   'compile::esm': 'compile::esm',
-  'compile::cjs': 'compile::cjs',
+  // 'compile::cjs': 'compile::cjs',
   // 'compile::umd': 'compile::umd',
   write: 'write',
 }