fix: build process and changesets version (#76)

* set a proper dependency version so it builds gracefully

* define types before hand

* update lockfile

* remove magefront types warmer

* replace fs-extra with fs

* update the workspace dependency range

* fix: patch changeset to avoid major bumps when a peer dep is updated

* add changesets

* chore: release 1.2.0 🎉

.changeset/config.json

@@ -8,5 +8,7 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": [],
-  "bumpVersionsWithWorkspaceProtocolOnly": true
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }

.gitignore

@@ -3,7 +3,6 @@ node_modules
 .pnpm-*
 .magefront-*
 dist
-types
 _*.md
 .turbo
 .secrets

package.json

@@ -12,7 +12,7 @@
     "changeset": "changeset",
     "changeset:publish": "pnpm run build && changeset publish",
     "ts-check": "tsc --noEmit",
-    "build": "npm run build --prefix=packages/magefront && pnpm -r build",
+    "build": "pnpm -r build",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand"
   },
   "devDependencies": {
@@ -30,5 +30,10 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@changesets/[email protected]": "patches/@[email protected]"
+    }
   }
 }

packages/magefront/CHANGELOG.md

@@ -1,5 +1,18 @@
 # magefront
 
+## 1.2.0
+
+### Minor Changes
+
+- f8da0cb: - Replace fs-extra with the node:fs functions
+  - Write types statically to reduce build time and overhead
+- f8da0cb: Set a proper (peer) dependency version in packages
+
+### Patch Changes
+
+- Updated dependencies [f8da0cb]
+  - [email protected]
+
 ## 1.1.1
 
 ### Patch Changes

packages/magefront/build.config.ts

@@ -5,16 +5,13 @@ export default defineBuildConfig({
     {
       input: './src/main',
       name: 'magefront',
-      declaration: true,
     },
     {
       input: './src/cli',
-      declaration: false,
     },
   ],
   rollup: {
     emitCJS: true,
   },
   clean: true,
-  declaration: true,
 })

packages/magefront/package.json

@@ -1,6 +1,6 @@
 {
   "name": "magefront",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "description": "A modern Magento 2 theme builder",
   "keywords": [
@@ -16,7 +16,8 @@
   "author": "Emmanuel Vodor <[email protected]>",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "repository": {
     "type": "git",
@@ -25,7 +26,7 @@
   },
   "main": "dist/magefront.cjs",
   "module": "dist/magefront.mjs",
-  "types": "dist/magefront.d.ts",
+  "types": "types/magefront.d.ts",
   "scripts": {
     "build": "unbuild"
   },
@@ -34,9 +35,8 @@
     "chokidar": "^3.5.3",
     "cli-table": "^0.3.11",
     "fast-glob": "^3.3.1",
-    "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
-    "magefront-preset-default": "workspace:~",
+    "magefront-preset-default": "workspace:^",
     "memoizee": "^0.4.15",
     "pretty-ms": "^8.0.0",
     "sade": "^1.8.1",
@@ -45,7 +45,6 @@
   "devDependencies": {
     "@types/browser-sync": "^2.27.0",
     "@types/cli-table": "^0.3.2",
-    "@types/fs-extra": "^11.0.1",
     "@types/memoizee": "^0.4.8",
     "@types/node": "^20.5.9"
   },
@@ -59,7 +58,7 @@
     ".": {
       "import": "./dist/magefront.mjs",
       "require": "./dist/magefront.cjs",
-      "types": "./dist/magefront.d.ts"
+      "types": "./types/magefront.d.ts"
     }
   }
 }

packages/magefront/src/actions/build.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
+import type { Action, PluginContext } from '../../types/magefront'
 import { getThemeDependencyTree } from '../magento/theme'
-import type { Action, PluginContext } from '../types'
 
 /** Build the theme. If a configuration file is found, it will be used. */
 export const build: Action = async (context) => {

packages/magefront/src/actions/clean.ts

@@ -1,5 +1,5 @@
 import fs from 'node:fs'
-import { Action } from '../types'
+import type { Action } from '../../types/magefront'
 
 export const clean: Action = async (context) => {
   const { buildConfig } = context

packages/magefront/src/actions/context.ts

@@ -1,11 +1,11 @@
 import type { Logger } from 'winston'
+import type { ActionContext, MagefrontOptions } from '../../types/magefront'
 import { getBuildConfig } from '../config'
 import { createLogger } from '../logger'
 import { createMagentoContext } from '../magento/context'
 import { getLanguages } from '../magento/language'
 import { getModules } from '../magento/module'
 import { getThemes } from '../magento/theme'
-import { ActionContext, MagefrontOptions } from '../types'
 
 // Creates an ActionContext object to be passed to the build process.
 export const createActionContext = async (opts: MagefrontOptions, logger?: Logger): Promise<ActionContext> => {

packages/magefront/src/actions/deploy.ts

@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
-import fs from 'fs-extra'
+import fs from 'node:fs'
 import path from 'node:path'
-import { Action } from '../types'
+import type { Action } from '../../types/magefront'
 
 /** Deploy the built theme files from the temp directory to the `pub/static` dir. This is the third step in the build process. */
 export const deploy: Action = async (context) => {
@@ -32,7 +32,7 @@ export const deploy: Action = async (context) => {
     files.map(async (file) => {
       const filePath = await fs.promises.realpath(path.join(buildConfig.tmp, file))
       const destPath = path.join(dest, file)
-      return fs.copy(filePath, destPath)
+      return fs.promises.cp(filePath, destPath, { recursive: true })
     })
   )
 }

packages/magefront/src/actions/inheritance.ts

@@ -1,8 +1,8 @@
-import glob, { Pattern } from 'fast-glob'
-import fs from 'fs-extra'
+import glob, { type Pattern } from 'fast-glob'
+import fs from 'node:fs'
 import path from 'node:path'
+import type { Action } from '../../types/magefront'
 import { getThemeDependencyTree } from '../magento/theme'
-import type { Action } from '../types'
 
 /** Gather all the theme files and copy them to the temporary directory. When this is done, the `build` task should be run afterwards. */
 export const inheritance: Action = async (context) => {
@@ -19,14 +19,14 @@ export const inheritance: Action = async (context) => {
     await Promise.all(
       files.map(async (srcPath) => {
         const destPath = path.join(dest, srcPath.replace(src + '/', '/'))
-        await fs.rm(destPath, { recursive: true, force: true })
-        return fs.copy(path.join(rootPath, srcPath), destPath)
+        await fs.promises.rm(destPath, { recursive: true })
+        return fs.promises.cp(path.join(rootPath, srcPath), destPath, { recursive: true })
       })
     )
   }
 
   // Clean destination dir
-  fs.removeSync(tmp)
+  await fs.promises.rm(tmp, { recursive: true })
 
   // Add the Magento core lib resources as a dependency for everyone
   // Ignore the css docs and txt files

packages/magefront/src/actions/list.ts

@@ -1,7 +1,7 @@
 import Table from 'cli-table'
 import console from 'node:console'
+import type { MagentoContext } from '../../types/magefront'
 import { getThemes } from '../magento/theme'
-import type { MagentoContext } from '../types'
 
 /** List all the themes. */
 export const list = (magento: MagentoContext) => {

packages/magefront/src/actions/watch.ts

@@ -2,7 +2,7 @@ import chokidar from 'chokidar'
 import path from 'node:path'
 import { performance } from 'node:perf_hooks'
 import prettyMilliseconds from 'pretty-ms'
-import { Action } from '../types'
+import type { Action } from '../../types/magefront'
 import { instance } from './browser-sync'
 import { build } from './build'
 import { deploy } from './deploy'

packages/magefront/src/cli.ts

@@ -5,14 +5,14 @@ import process from 'node:process'
 import sade from 'sade'
 import winston from 'winston'
 import { version } from '../package.json' assert { type: 'json' }
+import type { MagefrontOptions } from '../types/magefront'
 import { browserSync } from './actions/browser-sync'
 import { createActionContext } from './actions/context'
 import { list } from './actions/list'
 import { watch } from './actions/watch'
 import { createLogger } from './logger'
 import { magefront } from './magefront'
 import { createMagentoContext } from './magento/context'
-import type { MagefrontOptions } from './types'
 import * as u from './utils'
 
 const program = sade('magefront', true)

packages/magefront/src/config.ts

@@ -1,7 +1,7 @@
 import memo from 'memoizee'
 import path from 'node:path'
+import type { BuildConfig, MagefrontOptions, MagentoContext, MagentoTheme, Plugin, Preset } from '../types/magefront'
 import { getThemes } from './magento/theme'
-import type { BuildConfig, MagefrontOptions, MagentoContext, MagentoTheme, Plugin, Preset } from './types'
 
 /** Get the build configuration for the given options. */
 export const getBuildConfig = memo(async (opts: MagefrontOptions, context: MagentoContext): Promise<BuildConfig> => {

packages/magefront/src/magefront.ts

@@ -1,13 +1,13 @@
 import k from 'kleur'
 import { performance } from 'node:perf_hooks'
 import prettyMilliseconds from 'pretty-ms'
-import { Logger } from 'winston'
+import type { Logger } from 'winston'
+import type { MagefrontOptions } from '../types/magefront'
 import { build } from './actions/build'
 import { clean } from './actions/clean'
 import { createActionContext } from './actions/context'
 import { deploy } from './actions/deploy'
 import { inheritance } from './actions/inheritance'
-import type { MagefrontOptions } from './types'
 
 /** Builds a Magento 2 theme. */
 // TODO: Remove the logger argument and implement it in the options

packages/magefront/src/magento/composer.ts

@@ -1,7 +1,7 @@
 import memo from 'memoizee'
 import fs from 'node:fs'
 import path from 'node:path'
-import type { ComposerPackage } from '../types'
+import type { ComposerPackage } from '../../types/magefront'
 
 /**
  * Get the list of packages installed.

packages/magefront/src/magento/context.ts

@@ -1,4 +1,4 @@
-import { MagefrontOptions, MagentoContext } from '../types'
+import type { MagefrontOptions, MagentoContext } from '../../types/magefront'
 import { getPackages } from './composer'
 
 export const createMagentoContext = (opts: MagefrontOptions): MagentoContext => {

packages/magefront/src/magento/language.ts

@@ -1,7 +1,7 @@
 import memo from 'memoizee'
 import fs from 'node:fs'
 import path from 'node:path'
-import type { MagentoContext, MagentoLanguage } from '../types'
+import type { MagentoContext, MagentoLanguage } from '../../types/magefront'
 import { getRegistrations } from './composer'
 
 /**

packages/magefront/src/magento/module.ts

@@ -2,7 +2,7 @@ import glob from 'fast-glob'
 import memo from 'memoizee'
 import fs from 'node:fs'
 import path from 'node:path'
-import type { MagentoContext, MagentoModule } from '../types'
+import type { MagentoContext, MagentoModule } from '../../types/magefront'
 import { getRegistrations } from './composer'
 
 /**

packages/magefront/src/magento/theme.ts

@@ -2,7 +2,7 @@ import glob from 'fast-glob'
 import memo from 'memoizee'
 import fs from 'node:fs'
 import path from 'node:path'
-import type { ComposerPackage, MagentoContext, MagentoTheme } from '../types'
+import type { ComposerPackage, MagentoContext, MagentoTheme } from '../../types/magefront'
 import { getRegistrations } from './composer'
 
 /**

packages/magefront/src/main.ts

@@ -1,9 +1,7 @@
 // Main module entry point if the package is installed as dependency.
 // Gives quick access to the magento related functions from the package.
 
-import type { Config } from './types'
-
-export type { Config, MagefrontOptions, MagentoLanguage, MagentoModule, MagentoTheme, Plugin, PluginContext, Preset } from './types'
+import type { Config } from '../types/magefront'
 
 export { magefront } from './magefront'