Refactor: Migrate project to ES6 modules #119
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit finalizes the transition to ES6 modules for client-side JavaScript. Key changes: - Updated the main script tag in `src/_includes/components/footer.njk` to use `type="module"`. This enables modern JavaScript module loading in the browser. - Verified that the existing JavaScript codebase in `src/assets/js/` is already using ES6 import/export syntax. - Confirmed that Eleventy data files (`*.11tydata.js`) are compatible with the Node.js ES module environment (`"type": "module"` in `package.json`). - Ensured the project builds successfully with these changes using `yarn build`. - Performed a basic runtime test by starting the development server (`yarn start`) and fetching the homepage. The project's build system (`esbuild` via Eleventy) was already configured to handle ES6 modules, so the primary changes involved updating the script inclusion method and verifying compatibility across the codebase.
This commit completes the transition to ES6 modules for client-side JavaScript and modernizes the PostCSS configuration. Key changes: - I updated the main script tag in `src/_includes/components/footer.njk` to use `type="module"`. This enables modern JavaScript module loading in the browser. - I verified that the existing JavaScript codebase in `src/assets/js/` is already using ES6 import/export syntax. - I confirmed that Eleventy data files (`*.11tydata.js`) are compatible with the Node.js ES module environment (`"type": "module"` in `package.json`). - I updated `postcss.config.cjs` to `postcss.config.js` and updated its syntax to use ES6 `import` and `export default`. - I ensured the project builds successfully with all these changes using `yarn build`, including correct CSS processing with the updated PostCSS configuration. - I performed basic runtime tests by starting the development server (`yarn start`) and fetching the homepage. The project's build system (`esbuild` via Eleventy for JS, and PostCSS for CSS) now consistently uses ES module patterns where applicable for both source code and configuration files.
This commit migrates the Eleventy configuration file (`.eleventy.js`) and the asset build script (`build-assets.js`) to TypeScript. Client-side JavaScript remains as ES6 modules. Key changes: - Added `typescript` and `@types/node` as dev dependencies. - Created `tsconfig.json` for TypeScript configuration, targeting a modern Node.js ES module environment. - Renamed `build-assets.js` to `build-assets.ts` and added type annotations. - Renamed `.eleventy.js` to `.eleventy.ts` and added type annotations, including `UserConfig` from `@11ty/eleventy`. - Updated `package.json` scripts (`watch`, `build`) to include a new `compile:config` script. This script uses `esbuild` to compile `.eleventy.ts` and `build-assets.ts` to JavaScript (ESM format) before Eleventy is run. - Refined `esbuild` commands in `compile:config` to correctly handle external dependencies for Node.js (e.g., `path`, `@11ty/eleventy`, `child_process`, `esbuild` itself) and inter-dependencies between the build scripts (`./build-assets.js` from `.eleventy.ts`). Both `yarn build` and `yarn start` have been verified to work correctly with the new TypeScript setup, ensuring that the site builds and serves as expected.
This commit encompasses several modernization efforts for the project's build process:
1. **Client-side JavaScript to ES Modules:**
* I updated the main script tag in `src/_includes/components/footer.njk` to use `type="module"`.
* I verified that the existing JavaScript codebase in `src/assets/js/` already uses ES6 import/export syntax.
2. **Build Scripts to TypeScript:**
* I migrated Eleventy configuration (`.eleventy.js` -> `.eleventy.ts`) and asset build script (`build-assets.js` -> `build-assets.ts`) to TypeScript.
* I added `typescript`, `@types/node` as dev dependencies.
* I created `tsconfig.json` for TypeScript configuration.
* I updated `package.json` scripts (`watch`, `build`) to include a `compile:config` script. This script uses `esbuild` to compile `.eleventy.ts`, `build-assets.ts` (and now `postcss.config.ts`) to JavaScript (ESM format) before Eleventy is run.
* I refined `esbuild` commands in `compile:config` to correctly handle external dependencies.
3. **PostCSS Configuration to TypeScript:**
* I migrated PostCSS configuration (`postcss.config.cjs` -> `postcss.config.js` (ESM) -> `postcss.config.ts`).
* I updated `tsconfig.json` to include `postcss.config.ts`.
* I added `postcss.config.ts` to the `compile:config` script in `package.json`.
* I installed `tsx` as a dev dependency to allow `postcss-load-config` to correctly process the TypeScript configuration file, even when a compiled `.js` version is present and specified.
I have verified that all build and development server processes (`yarn build`, `yarn start`) work correctly with these changes. Your project now uses a more modern and type-safe toolchain for its configuration and asset bundling processes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit finalizes the transition to ES6 modules for client-side JavaScript.
Key changes:
src/_includes/components/footer.njkto usetype="module". This enables modern JavaScript module loading in the browser.src/assets/js/is already using ES6 import/export syntax.*.11tydata.js) are compatible with the Node.js ES module environment ("type": "module"inpackage.json).yarn build.yarn start) and fetching the homepage.The project's build system (
esbuildvia Eleventy) was already configured to handle ES6 modules, so the primary changes involved updating the script inclusion method and verifying compatibility across the codebase.