From 561d57bed3ff37533244f874bbdea94619da3e2e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 8 Oct 2021 11:08:53 +0200 Subject: [PATCH] Release (#16) * Create release * Update prettier prose-wrap Co-authored-by: github-actions[bot] Co-authored-by: Adam Bergman --- .changeset/blue-impalas-march.md | 5 -- .changeset/clean-bulldogs-attend.md | 5 -- .changeset/long-pears-invent.md | 5 -- .changeset/nasty-trainers-search.md | 5 -- .changeset/proud-llamas-beam.md | 5 -- .changeset/stupid-shrimps-greet.md | 5 -- .changeset/sweet-bobcats-admire.md | 7 -- .changeset/thirty-forks-punch.md | 5 -- .changeset/tidy-eagles-flash.md | 5 -- .changeset/tiny-shirts-hear.md | 5 -- .changeset/violet-maps-clap.md | 13 --- CHANGELOG.md | 91 ++++++++++--------- README.md | 135 ++++++++-------------------- package.json | 4 +- 14 files changed, 91 insertions(+), 204 deletions(-) delete mode 100644 .changeset/blue-impalas-march.md delete mode 100644 .changeset/clean-bulldogs-attend.md delete mode 100644 .changeset/long-pears-invent.md delete mode 100644 .changeset/nasty-trainers-search.md delete mode 100644 .changeset/proud-llamas-beam.md delete mode 100644 .changeset/stupid-shrimps-greet.md delete mode 100644 .changeset/sweet-bobcats-admire.md delete mode 100644 .changeset/thirty-forks-punch.md delete mode 100644 .changeset/tidy-eagles-flash.md delete mode 100644 .changeset/tiny-shirts-hear.md delete mode 100644 .changeset/violet-maps-clap.md diff --git a/.changeset/blue-impalas-march.md b/.changeset/blue-impalas-march.md deleted file mode 100644 index 4f38e82..0000000 --- a/.changeset/blue-impalas-march.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Fix broken translations diff --git a/.changeset/clean-bulldogs-attend.md b/.changeset/clean-bulldogs-attend.md deleted file mode 100644 index abe953f..0000000 --- a/.changeset/clean-bulldogs-attend.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Improve twig message extraction diff --git a/.changeset/long-pears-invent.md b/.changeset/long-pears-invent.md deleted file mode 100644 index 27bde45..0000000 --- a/.changeset/long-pears-invent.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Fix translations extraction inconsistencies diff --git a/.changeset/nasty-trainers-search.md b/.changeset/nasty-trainers-search.md deleted file mode 100644 index d850472..0000000 --- a/.changeset/nasty-trainers-search.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Remove metafile plugin diff --git a/.changeset/proud-llamas-beam.md b/.changeset/proud-llamas-beam.md deleted file mode 100644 index 318ad68..0000000 --- a/.changeset/proud-llamas-beam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Only run translations plugin on build diff --git a/.changeset/stupid-shrimps-greet.md b/.changeset/stupid-shrimps-greet.md deleted file mode 100644 index f6096a4..0000000 --- a/.changeset/stupid-shrimps-greet.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': minor ---- - -Add env variable support similar to CRA diff --git a/.changeset/sweet-bobcats-admire.md b/.changeset/sweet-bobcats-admire.md deleted file mode 100644 index cd65d60..0000000 --- a/.changeset/sweet-bobcats-admire.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': major ---- - -Drop tailwind support - -Running tailwind as part of the dev flow took to long. Tailwind needs to run outside of the wp-bundler context. diff --git a/.changeset/thirty-forks-punch.md b/.changeset/thirty-forks-punch.md deleted file mode 100644 index 22e5bae..0000000 --- a/.changeset/thirty-forks-punch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': minor ---- - -Rewrite postcss plugin diff --git a/.changeset/tidy-eagles-flash.md b/.changeset/tidy-eagles-flash.md deleted file mode 100644 index 850fabc..0000000 --- a/.changeset/tidy-eagles-flash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Fix issue with extracting domains from \_n_noop diff --git a/.changeset/tiny-shirts-hear.md b/.changeset/tiny-shirts-hear.md deleted file mode 100644 index ae561a7..0000000 --- a/.changeset/tiny-shirts-hear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': patch ---- - -Fix issues in error output diff --git a/.changeset/violet-maps-clap.md b/.changeset/violet-maps-clap.md deleted file mode 100644 index 0b2cd05..0000000 --- a/.changeset/violet-maps-clap.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -'@fransvilhelm/wp-bundler': major ---- - -Add proper dev server with reload on change - -This version includes a new dev server. The server is automatically started when running `wp-bundler --watch`. - -The server will listen for changes to your source files, including `.php` and `.twig` files. If a change is detected the -page will be reloaded and the changes applied. - -If a change only affects `.css`-files the page will not be reloaded. Instead all your css will be "hot-reladed" on the -page without requiring a refresh. diff --git a/CHANGELOG.md b/CHANGELOG.md index b036edd..938cbb3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,66 +1,77 @@ # @fransvilhelm/wp-bundler +## 2.0.0 + +### Major Changes + +- Drop tailwind support (by [@adambrgmn](https://github.com/adambrgmn) in [#18](https://github.com/adambrgmn/wp-bundler/pull/18)) + + Running tailwind as part of the dev flow took to long. Tailwind needs to run outside of the wp-bundler context. + +- Add proper dev server with reload on change (by [@adambrgmn](https://github.com/adambrgmn) in [#21](https://github.com/adambrgmn/wp-bundler/pull/21)) + + This version includes a new dev server. The server is automatically started when running `wp-bundler --watch`. + + The server will listen for changes to your source files, including `.php` and `.twig` files. If a change is detected the page will be reloaded and the changes applied. + + If a change only affects `.css`-files the page will not be reloaded. Instead all your css will be "hot-reladed" on the page without requiring a refresh. + +### Minor Changes + +- Add env variable support similar to CRA (by [@adambrgmn](https://github.com/adambrgmn) in [#22](https://github.com/adambrgmn/wp-bundler/pull/22)) +- Rewrite postcss plugin (by [@adambrgmn](https://github.com/adambrgmn) in [#17](https://github.com/adambrgmn/wp-bundler/pull/17)) + +### Patch Changes + +- Fix broken translations (by [@adambrgmn](https://github.com/adambrgmn) in [#17](https://github.com/adambrgmn/wp-bundler/pull/17)) +- Improve twig message extraction (by [@adambrgmn](https://github.com/adambrgmn) in [#20](https://github.com/adambrgmn/wp-bundler/pull/20)) +- Fix translations extraction inconsistencies (by [@adambrgmn](https://github.com/adambrgmn) in [#15](https://github.com/adambrgmn/wp-bundler/pull/15)) +- Remove metafile plugin (by [@adambrgmn](https://github.com/adambrgmn) in [#17](https://github.com/adambrgmn/wp-bundler/pull/17)) +- Only run translations plugin on build (by [@adambrgmn](https://github.com/adambrgmn) in [#15](https://github.com/adambrgmn/wp-bundler/pull/15)) +- Fix issue with extracting domains from \_n_noop (by [@adambrgmn](https://github.com/adambrgmn) in [#21](https://github.com/adambrgmn/wp-bundler/pull/21)) +- Fix issues in error output (by [@adambrgmn](https://github.com/adambrgmn) in [#17](https://github.com/adambrgmn/wp-bundler/pull/17)) + ## 1.2.0 ### Minor Changes -- Extract translations from style.css (by [@adambrgmn](https://github.com/adambrgmn) in - [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) -- Extract translations from twig files (by [@adambrgmn](https://github.com/adambrgmn) in - [#11](https://github.com/adambrgmn/wp-bundler/pull/11)) -- Extract translator comments when extracting translations (by [@adambrgmn](https://github.com/adambrgmn) in - [#10](https://github.com/adambrgmn/wp-bundler/pull/10)) -- Extract translations from PHP files as part of the build step (by [@adambrgmn](https://github.com/adambrgmn) in - [#10](https://github.com/adambrgmn/wp-bundler/pull/10)) +- Extract translations from style.css (by [@adambrgmn](https://github.com/adambrgmn) in [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) +- Extract translations from twig files (by [@adambrgmn](https://github.com/adambrgmn) in [#11](https://github.com/adambrgmn/wp-bundler/pull/11)) +- Extract translator comments when extracting translations (by [@adambrgmn](https://github.com/adambrgmn) in [#10](https://github.com/adambrgmn/wp-bundler/pull/10)) +- Extract translations from PHP files as part of the build step (by [@adambrgmn](https://github.com/adambrgmn) in [#10](https://github.com/adambrgmn/wp-bundler/pull/10)) ### Patch Changes -- Ensure uniq references in po(t) files (by [@adambrgmn](https://github.com/adambrgmn) in - [#8](https://github.com/adambrgmn/wp-bundler/pull/8)) -- Fix writing out proper po file (by [@adambrgmn](https://github.com/adambrgmn) in - [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) -- Emit proper translator comments (by [@adambrgmn](https://github.com/adambrgmn) in - [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) -- Properly minify css after postcss (by [@adambrgmn](https://github.com/adambrgmn) in - [#13](https://github.com/adambrgmn/wp-bundler/pull/13)) -- Enable ignoring folders for message extraction (by [@adambrgmn](https://github.com/adambrgmn) in - [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) -- Fix merging po and pot files (by [@adambrgmn](https://github.com/adambrgmn) in - [#13](https://github.com/adambrgmn/wp-bundler/pull/13)) +- Ensure uniq references in po(t) files (by [@adambrgmn](https://github.com/adambrgmn) in [#8](https://github.com/adambrgmn/wp-bundler/pull/8)) +- Fix writing out proper po file (by [@adambrgmn](https://github.com/adambrgmn) in [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) +- Emit proper translator comments (by [@adambrgmn](https://github.com/adambrgmn) in [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) +- Properly minify css after postcss (by [@adambrgmn](https://github.com/adambrgmn) in [#13](https://github.com/adambrgmn/wp-bundler/pull/13)) +- Enable ignoring folders for message extraction (by [@adambrgmn](https://github.com/adambrgmn) in [#14](https://github.com/adambrgmn/wp-bundler/pull/14)) +- Fix merging po and pot files (by [@adambrgmn](https://github.com/adambrgmn) in [#13](https://github.com/adambrgmn/wp-bundler/pull/13)) ## 1.1.1 ### Patch Changes -- Update po files with translations as well (by [@adambrgmn](https://github.com/adambrgmn) in - [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) -- Fix issue where scripts loaded in the block editor weren't loaded as modules (by - [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) -- allow defining css dependencies on scripts (by [@adambrgmn](https://github.com/adambrgmn) in - [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) -- Add lodash as as we built-in global (by [@adambrgmn](https://github.com/adambrgmn) in - [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) -- Fix purging tailwind classes (by [@adambrgmn](https://github.com/adambrgmn) in - [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) -- Skip marking node globals as external (by [@adambrgmn](https://github.com/adambrgmn) in - [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) - - Doing this hides errors that should otherwise be surfaced. Because marking them as just "external" forces the browser - to try and import these libraries (`import fs from 'fs'`) in the browser. Which ofcourse blows up. Now we instead rely - on esbuild to report errors when our scripts (or their dependencies) tries to import any built-in node modules. +- Update po files with translations as well (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) +- Fix issue where scripts loaded in the block editor weren't loaded as modules (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) +- allow defining css dependencies on scripts (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) +- Add lodash as as we built-in global (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) +- Fix purging tailwind classes (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) +- Skip marking node globals as external (by [@adambrgmn](https://github.com/adambrgmn) in [#6](https://github.com/adambrgmn/wp-bundler/pull/6)) + + Doing this hides errors that should otherwise be surfaced. Because marking them as just "external" forces the browser to try and import these libraries (`import fs from 'fs'`) in the browser. Which ofcourse blows up. Now we instead rely on esbuild to report errors when our scripts (or their dependencies) tries to import any built-in node modules. ## 1.1.0 ### Minor Changes -- Fix dependency issues (by [@adambrgmn](https://github.com/adambrgmn) in - [#4](https://github.com/adambrgmn/wp-bundler/pull/4)) +- Fix dependency issues (by [@adambrgmn](https://github.com/adambrgmn) in [#4](https://github.com/adambrgmn/wp-bundler/pull/4)) ## 1.0.0 ### Major Changes -- Initial implementation (by [@adambrgmn](https://github.com/adambrgmn) in - [#1](https://github.com/adambrgmn/wp-bundler/pull/1)) +- Initial implementation (by [@adambrgmn](https://github.com/adambrgmn) in [#1](https://github.com/adambrgmn/wp-bundler/pull/1)) This is the initial release of the `wp-bundler` cli. diff --git a/README.md b/README.md index 530badc..160121a 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,8 @@ # WP Bundler -WP Bundler is a minimal and fast bundler for your WordPress front end assets. It is a "thin" wrapper around -[`esbuild`](https://esbuild.github.io/) with built-in support for translations. It handles all of your front end assets -including Javascript (with Typescript and React support), CSS (with Tailwind support) and other static assets imported -in these, e.g. images and fonts. +WP Bundler is a minimal and fast bundler for your WordPress front end assets. It is a "thin" wrapper around [`esbuild`](https://esbuild.github.io/) with built-in support for translations. It handles all of your front end assets including Javascript (with Typescript and React support), CSS (with Tailwind support) and other static assets imported in these, e.g. images and fonts. -It will output modern Javascript for modern browsers as well as a "legacy" version of your scripts for older browsers -meaning that you will not send unneccessary content to modern browsers, while keeping the same functionality for older -browsers as well. +It will output modern Javascript for modern browsers as well as a "legacy" version of your scripts for older browsers meaning that you will not send unneccessary content to modern browsers, while keeping the same functionality for older browsers as well. - [Installation](#installation) - [Configuration](#configuration) @@ -55,8 +50,7 @@ Then configure the scripts in your `package.json`. ## Configuration -All configuration related to `wp-bundler` resides in your projects `package.json`, under the key `wp-bundler`. Below is -an example configuration with all available configuration options used: +All configuration related to `wp-bundler` resides in your projects `package.json`, under the key `wp-bundler`. Below is an example configuration with all available configuration options used: ```json { @@ -81,52 +75,42 @@ an example configuration with all available configuration options used: } ``` -The app uses schema validation logic to validate the configuration. The actual schema can be found in -[`./src/schema.ts`](./src/schema.ts). +The app uses schema validation logic to validate the configuration. The actual schema can be found in [`./src/schema.ts`](./src/schema.ts). ### `BundlerConfig.entryPoints` (required) - **Type:** `Record` -`entryPoints` is used to tell the bundler which source files we care about. It should be an object with string values. -The keys (`app` and `admin`) in the above example can later be used to load the assets with the -[`AssetLoader`](#asset-loader). +`entryPoints` is used to tell the bundler which source files we care about. It should be an object with string values. The keys (`app` and `admin`) in the above example can later be used to load the assets with the [`AssetLoader`](#asset-loader). -The values should point to source files, most often it is `.js` (or `.ts`) files, but it can also be `.css` files. The -files will be bundled by `esbuild` and placed in the output directory (same directory as your `package.json`). +The values should point to source files, most often it is `.js` (or `.ts`) files, but it can also be `.css` files. The files will be bundled by `esbuild` and placed in the output directory (same directory as your `package.json`). The paths should be referenced as relative to your projects root directory. -You don't have to specify one entry point for css and one for js if they are tightly coupled. Instead you can import the -css from your js source (`import './app.css'`). +You don't have to specify one entry point for css and one for js if they are tightly coupled. Instead you can import the css from your js source (`import './app.css'`). ### `BundlerConfig.outdir` (optional) - **Type:** `string` - **Default:** `'dist'` -`outdir` is the directory in which to put your assets. It should be referenced as relative to your projects root -directory (same directory as your `package.json`). +`outdir` is the directory in which to put your assets. It should be referenced as relative to your projects root directory (same directory as your `package.json`). ### `BundlerConfig.sourcemap` (optional) - **Type:** `boolean` - **Default:** `undefined` -Tell the bundler to output sourcemaps together with the bundled output. This option is optional and defaults to `true` -when you run `wp-bundler dev` and `false` when you run `wp-bundler build`. +Tell the bundler to output sourcemaps together with the bundled output. This option is optional and defaults to `true` when you run `wp-bundler dev` and `false` when you run `wp-bundler build`. ### `BundlerConfig.externals` (optional) - **Type:** `Record` - **Default:** `undefined` -If you are loading some libraries from e.g. a cdn or in some other fashion you can tell `wp-bundler` to ignore those -libraries and instead "import" them from the `window` object. The key should be the name of the dependency and the value -should be the key used to access it from `window`. +If you are loading some libraries from e.g. a cdn or in some other fashion you can tell `wp-bundler` to ignore those libraries and instead "import" them from the `window` object. The key should be the name of the dependency and the value should be the key used to access it from `window`. -**Example:** Given the following config: `{ "externals": { "lodash": "_" } }` the library will skip bundling `lodash` -and instead access it from `window._`. +**Example:** Given the following config: `{ "externals": { "lodash": "_" } }` the library will skip bundling `lodash` and instead access it from `window._`. Built-in dependencies, e.g. jQuery, React and WordPress libraries are [handled automatically](#external-dependencies). @@ -135,59 +119,44 @@ Built-in dependencies, e.g. jQuery, React and WordPress libraries are [handled a - **Type:** `{ path?: string; namespace?: string }` - **Default:** `{ path: './AssetLoader.php', namespace: 'WPBundler' }` -The `AssetLoader` is a php file that is emitted as part of the `build` and `dev` scripts. It can be used to load assets -as part of the WordPress workflow. With these options you can specify the location of the emitted `AssetLoader` and also -which namespace should be used. [Read more](#asset-loader). +The `AssetLoader` is a php file that is emitted as part of the `build` and `dev` scripts. It can be used to load assets as part of the WordPress workflow. With these options you can specify the location of the emitted `AssetLoader` and also which namespace should be used. [Read more](#asset-loader). ### `BundlerConfig.translations` (optional) - **Types:** `{ domain: string; pot: string; pos?: string[] }` - **Default:** `undefined` -Configure if translations are enabled and if so where translations should live and how to handle them. -[Read more](#translations). +Configure if translations are enabled and if so where translations should live and how to handle them. [Read more](#translations). ## Development -During development a minimal web-socket server is initiated and a small dev client is injected on all your apps pages. -This means that as soon as you make changes to any of you source files the page will automatically reload. If you only -change a `.css` file the page will not be reloaded, instead the css will be replaced "in-flight". +During development a minimal web-socket server is initiated and a small dev client is injected on all your apps pages. This means that as soon as you make changes to any of you source files the page will automatically reload. If you only change a `.css` file the page will not be reloaded, instead the css will be replaced "in-flight". -By default the web socket will be setup to listen on `localhost` and port `3000`. You can configure this by passing -flags to the CLI; `wp-bundler --watch --host --port `. +By default the web socket will be setup to listen on `localhost` and port `3000`. You can configure this by passing flags to the CLI; `wp-bundler --watch --host --port `. ## Asset types -`wp-bundler` can handle the same asset types as [`esbuild`](https://esbuild.github.io/content-types/) can. Outside of -what's setup by default by `esbuild` it will also handle font files (`.ttf`, `.eot`, `.woff` and `.woff2`). +`wp-bundler` can handle the same asset types as [`esbuild`](https://esbuild.github.io/content-types/) can. Outside of what's setup by default by `esbuild` it will also handle font files (`.ttf`, `.eot`, `.woff` and `.woff2`). ### Javascript and Typescript -Javascript and Typescript is mainly compiled for modern browsers. During development that's the only version emitted. -But when building for production an extra version of all js is also emitted, a "nomodule" version which is compiled to -work with older browsers. It uses [`swc`](https://swc.rs/) under the hood to make the compilation fast. +Javascript and Typescript is mainly compiled for modern browsers. During development that's the only version emitted. But when building for production an extra version of all js is also emitted, a "nomodule" version which is compiled to work with older browsers. It uses [`swc`](https://swc.rs/) under the hood to make the compilation fast. -The "modern" bundle is loaded in a script tag with `type="module"` specified, and the version for older browsers are -loaded with `nomodule` set on the script tag. +The "modern" bundle is loaded in a script tag with `type="module"` specified, and the version for older browsers are loaded with `nomodule` set on the script tag. ### CSS -Your css is "post processed" by [`postcss`](https://postcss.org/). `wp-bundler` uses -[`postcss-preset-env`](https://preset-env.cssdb.org/) to compile the css to a version that is more friendly to older -browsers. See `postcss-preset-env`'s documentation for details around which features are available for compilation. +Your css is "post processed" by [`postcss`](https://postcss.org/). `wp-bundler` uses [`postcss-preset-env`](https://preset-env.cssdb.org/) to compile the css to a version that is more friendly to older browsers. See `postcss-preset-env`'s documentation for details around which features are available for compilation. ## Asset loader -As part of both the `dev` and `build` commands a special "asset loader" php class is created (you can configure its -location by defining `assetLoader.path` in your `wp-bundler` config). +As part of both the `dev` and `build` commands a special "asset loader" php class is created (you can configure its location by defining `assetLoader.path` in your `wp-bundler` config). -The file gets emitted with the most recent versions of you assets. These assets can then be loaded as part of the -WordPress flow. +The file gets emitted with the most recent versions of you assets. These assets can then be loaded as part of the WordPress flow. ### Usage -If you are not using some kind of autoloader for your project you need to require the file to make the `AutoLoader` -class available in your environment. Your theme's `functions.php` is probably a suitable file for this. +If you are not using some kind of autoloader for your project you need to require the file to make the `AutoLoader` class available in your environment. Your theme's `functions.php` is probably a suitable file for this. You also need to call the static `prepare` method on the class in order to setup some necessary action and filter hooks. @@ -196,9 +165,7 @@ require_once __DIR__ . '/AssetLoader.php'; \WPBundler\AssetLoader::prepare(); ``` -After that you should be able to use the `AssetLoader` class anywhere in your application code. The loader will take -care of loading both javascript and css emitted by the bundler. All methods are static, no need to call -`new \WPBundler\AssetLoader()`. +After that you should be able to use the `AssetLoader` class anywhere in your application code. The loader will take care of loading both javascript and css emitted by the bundler. All methods are static, no need to call `new \WPBundler\AssetLoader()`. ```php // Enqueue the script as parth of the `wp_enqueue_scripts` action hook @@ -221,14 +188,9 @@ See the [`AssetLoader`](./assets/AssetLoader.php) implementation for more inform ## External dependencies -`wp-bundler` will automatically recognize external modules that are already built into and distributed by WordPress. -These dependencies will not be included in your bundle and instead automatically loaded as dependencies by the -`AutoLoader`. +`wp-bundler` will automatically recognize external modules that are already built into and distributed by WordPress. These dependencies will not be included in your bundle and instead automatically loaded as dependencies by the `AutoLoader`. -This means that as long as you use any of the built-in dependencies (`@wordpress/*`, `react`, `jquery` etc.) you don't -have to specify them in the `$deps` array. Though if you specifiy other externals in your bundler config -(`config.externals`) you need to register them with `wp_register_script` and specify them as dependencies of your asset -(`AssetLoader::enqueueAsset('app' ['dependency-handle']);`). +This means that as long as you use any of the built-in dependencies (`@wordpress/*`, `react`, `jquery` etc.) you don't have to specify them in the `$deps` array. Though if you specifiy other externals in your bundler config (`config.externals`) you need to register them with `wp_register_script` and specify them as dependencies of your asset (`AssetLoader::enqueueAsset('app' ['dependency-handle']);`). The following dependencies are automatically detected and loaded by `wp-bundler`: @@ -236,24 +198,15 @@ The following dependencies are automatically detected and loaded by `wp-bundler` - ReactDOM (`import ReactDOM from 'react-dom'`) - jQuery (`import $ from 'jquery'`) -_Note that accessing `window.$('.whatever')` is not recognized by `wp-bundler` and you therefore need to specify -`jquery` as a dependency of you asset._ +_Note that accessing `window.$('.whatever')` is not recognized by `wp-bundler` and you therefore need to specify `jquery` as a dependency of you asset._ -Outside of that all `@wordpress/*` packages are automatically identified by the bundler and excluded from the bundle, -then enqueued by the `AssetLoader`. For example if you, somewhere in your source code, do -`import api from '@wordpress/api-fetch'` the `AssetLoader` will automatically define `wp-api-fetch` as a dependency of -the asset that depends on it. +Outside of that all `@wordpress/*` packages are automatically identified by the bundler and excluded from the bundle, then enqueued by the `AssetLoader`. For example if you, somewhere in your source code, do `import api from '@wordpress/api-fetch'` the `AssetLoader` will automatically define `wp-api-fetch` as a dependency of the asset that depends on it. ## Translations -Translation support is one of the main reasons this project was created in the beginning. None of the other projects -that I've found cares about translations, at all. And `wp-cli i18n make-pot` and `wp-cli i18n make-json` are very -limited in what the can do. For example they can't extract translations from Typescript files or scripts created by a -bundler. +Translation support is one of the main reasons this project was created in the beginning. None of the other projects that I've found cares about translations, at all. And `wp-cli i18n make-pot` and `wp-cli i18n make-json` are very limited in what the can do. For example they can't extract translations from Typescript files or scripts created by a bundler. -`wp-bundler` uses ast processing to find all translations in your source code and then generate `jed` formatted -translation files for all the scripts that needs it. The translations are automatically loaded by the `AssetLoader` when -you register/enqueue an asset. +`wp-bundler` uses ast processing to find all translations in your source code and then generate `jed` formatted translation files for all the scripts that needs it. The translations are automatically loaded by the `AssetLoader` when you register/enqueue an asset. `wp-bundler` will look for calls to the `__`, `_x`, `_n` and `_nx` methods. And all the below calls will be recognized: @@ -266,33 +219,26 @@ window.wp.i18n._x('Foo', 'context', 'domain'); wp.i18n._nx('Foo', 'Foos', 2, 'context', 'domain'); ``` -_Note that using `window.wp.i18n.{method}` will not recognize `wp-i18n` as a dependency of your script. In that case you -need to specify it as a dependency when you register/enqueue the asset._ +_Note that using `window.wp.i18n.{method}` will not recognize `wp-i18n` as a dependency of your script. In that case you need to specify it as a dependency when you register/enqueue the asset._ -All translations found will also be emitted to a translations template file (`.pot`) of your choice. That means that -every time you add a new translation a new entry will be created in your pot file, even in development mode. +All translations found will also be emitted to a translations template file (`.pot`) of your choice. That means that every time you add a new translation a new entry will be created in your pot file, even in development mode. -The `.po` files, configured in `translations.pos`, will then be used to emit `jed` formatted json files that the -WordPress i18n package can handle. +The `.po` files, configured in `translations.pos`, will then be used to emit `jed` formatted json files that the WordPress i18n package can handle. ### PHP and Twig translations -The bundler will also look for, and extract, translations from your projects `.php` and `.twig` files. It will find all -of these files in you project, but ignoring the `vendor` and `node_modules` folders. This means that using this package -means you are no longer need to use `wp-cli i18n make-pot/make-json` to extract and generate translations. +The bundler will also look for, and extract, translations from your projects `.php` and `.twig` files. It will find all of these files in you project, but ignoring the `vendor` and `node_modules` folders. This means that using this package means you are no longer need to use `wp-cli i18n make-pot/make-json` to extract and generate translations. `.mo` files will also me compiled from all your `.po` files. ## Environment variables -You can define environment variables in a `.env` file located in the root of you project, right by you `package.json` -file. `wp-bundler` will inject any env variable defined in those that starts with `WP_`. +You can define environment variables in a `.env` file located in the root of you project, right by you `package.json` file. `wp-bundler` will inject any env variable defined in those that starts with `WP_`. - `WP_API_KEY` => injected - `API_KEY` => not injected -Then in your application code you can access those by reading `process.env.WP_API_KEY` (or whatever the variable was -called). +Then in your application code you can access those by reading `process.env.WP_API_KEY` (or whatever the variable was called). The variables defined in `.env` will not override any environment variables already set. @@ -306,16 +252,12 @@ Except environment variable prefixed with `WP_` `wp-bundler` will also inject th ### Other `.env` files -Except the `.env` file you can use a few other `.env` files to inject variables from. The list below defines which files -are read during which script. Files to the left have more priority than files to the right. Meaning that variables -coming from a file to the left will override a variable coming from a file to the right. +Except the `.env` file you can use a few other `.env` files to inject variables from. The list below defines which files are read during which script. Files to the left have more priority than files to the right. Meaning that variables coming from a file to the left will override a variable coming from a file to the right. - `wp-bundler` (or `--mode prod`): `.env.production.local` > `.env.local` > `.env.production` > `.env` - `wp-bundler --watch` (or `--mode dev`): `.env.development.local` > `.env.local` > `.env.development` > `.env` -With this structure you could have a `.env` file tracked by `git` and then allow developers to override these defaults -with their own `.env.local` files, which should not be checked into `git`. This is the same mechanism as -[`create-react-app` uses](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env). +With this structure you could have a `.env` file tracked by `git` and then allow developers to override these defaults with their own `.env.local` files, which should not be checked into `git`. This is the same mechanism as [`create-react-app` uses](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env). ## Other WordPress focused bundlers @@ -326,8 +268,7 @@ The following projects might interest you if `wp-bundler` doesn't meet your requ ## Roadmap -Development of this module is still in a very early stage. It covers most of the basic needs and is used by its creator -in a rather large production environment. But there are still things that can be improved. +Development of this module is still in a very early stage. It covers most of the basic needs and is used by its creator in a rather large production environment. But there are still things that can be improved. Below are a few things that migth come in the future. diff --git a/package.json b/package.json index 433db2b..69512c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fransvilhelm/wp-bundler", - "version": "1.2.0", + "version": "2.0.0", "description": "A fast bundler tailored for WordPress based on esbuild", "main": "dist/index.js", "bin": { @@ -112,7 +112,7 @@ "prettier": { "singleQuote": true, "trailingComma": "all", - "proseWrap": "always", + "proseWrap": "never", "printWidth": 120 }, "lint-staged": {