Skip to content

Commit

Permalink
Contributted
Browse files Browse the repository at this point in the history
  • Loading branch information
jiripudil committed Nov 14, 2020
1 parent c410f66 commit e2e7499
Show file tree
Hide file tree
Showing 57 changed files with 302 additions and 267 deletions.
112 changes: 112 additions & 0 deletions .docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
# Webpack

## Contents

- [Setup](#setup)
- [Usage](#usage)

## Setup

```bash
composer require contributte/webpack
```

## Usage

Register the extension in your config file, and configure it. The two `build` options are mandatory:

```yaml
extensions:
webpack: Contributte\Webpack\DI\WebpackExtension(%debugMode%, %consoleMode%)

webpack:
build:
directory: %wwwDir%/dist
publicPath: dist/
```
Now you can use the `{webpack}` macro in your templates. It automatically expands the provided asset name to the full path as configured:

```html
<script src="{webpack app.js}"></script>
```


### webpack-dev-server integration

You might want to use the Webpack's [dev server](https://www.npmjs.com/package/webpack-dev-server) to facilitate the development of client-side assets. But maybe once you're done with the client-side, you would like to build the back-end without having to start up the dev server.

This package effectively solves this problem: it automatically serves assets from the dev server if available (i.e. it responds within a specified timeout), and falls back to the build directory otherwise. All you have to do is configure the dev server URL. The dev server is enabled automatically in debug mode; you can override this setting via `enabled` option:

```yaml
webpack:
devServer:
enabled: %debugMode% # default
url: http://localhost:3000
timeout: 0.1 # (seconds) default
```

#### Ignored assets

You can also configure a set of asset names that should be ignored (i.e. resolved to an empty data URI) if the dev-server is available. This can be helpful e.g. if you use [`style-loader`](https://www.npmjs.com/package/style-loader) in development which does not emit any CSS files.

```yaml
webpack:
devServer:
ignoredAssets:
- main.css
```

#### Public URL (e.g. Docker usage)

Dev-server might have different URLs for different access points. For example, when running in Docker Compose setup, the Nette application accesses it via the internal Docker network, while you access it in the browser via the exposed port. For this, you can set up a different `publicUrl`.

```yaml
webpack:
devServer:
url: http://webpack-dev-server:3000 # URL over internal Docker network
publicUrl: http://localhost:3030 # exposed port from the dev-server container
```


### Asset resolvers and manifest file

You might want to include the Webpack's asset hash in its file name for assets caching (and automatic cache busting in new releases) in the user agent. But how do you reference the asset files in your code if their names are dynamic?

This package comes to the rescue. You can employ the [`webpack-manifest-plugin`](https://www.npmjs.com/package/webpack-manifest-plugin) or some similar plugin (see below) to produce a manifest file, and then configure the adapter to use it:

```yaml
webpack:
manifest:
name: manifest.json
```

This way, you can keep using the original asset names, and they get expanded automatically following the resolutions from the manifest file.

This package automatically optimizes this in production environment by loading the manifest file in compile time.


#### Manifest mappers

By default, the manifest loader supports the aforementioned `webpack-manifest-plugin`. If you use a different plugin that produces the manifest in a different format, you can implement and configure a mapper for it. This package comes bundled with a mapper for the [`assets-webpack-plugin`](https://www.npmjs.com/package/assets-webpack-plugin):

```yaml
webpack:
manifest:
name: manifest.json
mapper: Contributte\Webpack\Manifest\Mapper\AssetsWebpackPluginMapper
```

You can also implement your own mapper, simply extend `Contributte\Webpack\Manifest\ManifestMapper` and implement its `map()` method. It takes the parsed JSON content of the manifest file and is expected to return a flat array mapping asset names to file names.


### Debugger

In development environment, this package registers its own debug bar panel into Tracy, giving you the overview of

- what assets have been resolved and how;
- the path from where the assets are served;
- whether the dev server is enabled and available.

![Debug bar panel](debug_panel.png)
File renamed without changes
140 changes: 31 additions & 109 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,119 +1,41 @@
# Oops/WebpackNetteAdapter
# Webpack

[![Build Status](https://img.shields.io/github/workflow/status/o2ps/WebpackNetteAdapter/Test)](https://github.com/o2ps/WebpackNetteAdapter/actions?query=workflow%3ATest)
[![Code Coverage](https://img.shields.io/codecov/c/github/o2ps/WebpackNetteAdapter.svg)](https://codecov.io/gh/o2ps/WebpackNetteAdapter)
[![Downloads this Month](https://img.shields.io/packagist/dm/oops/webpack-nette-adapter.svg)](https://packagist.org/packages/oops/webpack-nette-adapter)
[![Latest stable](https://img.shields.io/packagist/v/oops/webpack-nette-adapter.svg)](https://packagist.org/packages/oops/webpack-nette-adapter)
[![License](https://img.shields.io/packagist/l/oops/webpack-nette-adapter)](https://packagist.org/packages/oops/webpack-nette-adapter)
[Webpack](https://github.com/webpack) integration into [Nette Framework](https://github.com/nette).

WebpackNetteAdapter is a tool that helps integrate your Nette Framework application with assets built via Webpack.
[![Build Status](https://img.shields.io/github/workflow/status/contributte/webpack/Test)](https://github.com/contributte/webpack/actions?query=workflow%3ATest)
[![Code Coverage](https://img.shields.io/codecov/c/github/contributte/webpack.svg)](https://codecov.io/gh/contributte/webpack)
[![Downloads this Month](https://img.shields.io/packagist/dm/contributte/webpack.svg)](https://packagist.org/packages/contributte/webpack)
[![Latest stable](https://img.shields.io/packagist/v/contributte/webpack.svg)](https://packagist.org/packages/contributte/webpack)
[![License](https://img.shields.io/packagist/l/contributte/webpack)](https://packagist.org/packages/contributte/webpack)

## Discussion / Help

## Installation and requirements
[![Join the chat](https://img.shields.io/gitter/room/contributte/contributte.svg?style=flat-square)](http://bit.ly/ctteg)

```bash
$ composer require oops/webpack-nette-adapter
```
## Documentation

Oops/WebpackNetteAdapter requires PHP >= 7.4.
- [Setup](.docs/README.md#setup)
- [Usage](.docs/README.md#usage)

## Version

## Usage
| State | Version | Branch | Nette | PHP |
|-------------|--------------|----------|----------|----------|
| stable | `^2.0` | `master` | `3.0+` | `>= 7.4` |
| development | `dev-master` | `master` | `3.0+` | `>= 7.4` |

Register the extension in your config file, and configure it. The two `build` options are mandatory:
## Maintainers

```yaml
extensions:
webpack: Oops\WebpackNetteAdapter\DI\WebpackExtension(%debugMode%, %consoleMode%)

webpack:
build:
directory: %wwwDir%/dist
publicPath: dist/
```
Now you can use the `{webpack}` macro in your templates. It automatically expands the provided asset name to the full path as configured:

```html
<script src="{webpack app.js}"></script>
```


### webpack-dev-server integration

You might want to use the Webpack's [dev server](https://www.npmjs.com/package/webpack-dev-server) to facilitate the development of client-side assets. But maybe once you're done with the client-side, you would like to build the back-end without having to start up the dev server.

WebpackNetteAdapter effectively solves this problem: it automatically serves assets from the dev server if available (i.e. it responds within a specified timeout), and falls back to the build directory otherwise. All you have to do is configure the dev server URL. The dev server is enabled automatically in debug mode; you can override this setting via `enabled` option:

```yaml
webpack:
devServer:
enabled: %debugMode% # default
url: http://localhost:3000
timeout: 0.1 # (seconds) default
```

#### Ignored assets

You can also configure a set of asset names that should be ignored (i.e. resolved to an empty data URI) if the dev-server is available. This can be helpful e.g. if you use [`style-loader`](https://www.npmjs.com/package/style-loader) in development which does not emit any CSS files.

```yaml
webpack:
devServer:
ignoredAssets:
- main.css
```

#### Public URL (e.g. Docker usage)

Dev-server might have different URLs for different access points. For example, when running in Docker Compose setup, the Nette application accesses it via the internal Docker network, while you access it in the browser via the exposed port. For this, you can set up a different `publicUrl`.

```yaml
webpack:
devServer:
url: http://webpack-dev-server:3000 # URL over internal Docker network
publicUrl: http://localhost:3030 # exposed port from the dev-server container
```


### Asset resolvers and manifest file

You might want to include the Webpack's asset hash in its file name for assets caching (and automatic cache busting in new releases) in the user agent. But how do you reference the asset files in your code if their names are dynamic?

WebpackNetteAdapter comes to the rescue. You can employ the [`webpack-manifest-plugin`](https://www.npmjs.com/package/webpack-manifest-plugin) or some similar plugin (see below) to produce a manifest file, and then configure the adapter to use it:

```yaml
webpack:
manifest:
name: manifest.json
```

This way, you can keep using the original asset names, and they get expanded automatically following the resolutions from the manifest file.

WebpackNetteAdapter automatically optimizes this in production environment by loading the manifest file in compile time.


#### Manifest mappers

By default, WebpackNetteAdapter supports the aforementioned `webpack-manifest-plugin`. If you use a different plugin that produces the manifest in a different format, you can implement and configure a mapper for it. WebpackNetteAdapter comes bundled with a mapper for the [`assets-webpack-plugin`](https://www.npmjs.com/package/assets-webpack-plugin):

```yaml
webpack:
manifest:
name: manifest.json
mapper: Oops\WebpackNetteAdapter\Manifest\Mapper\AssetsWebpackPluginMapper
```

You can also implement your own mapper, simply extend `Oops\WebpackNetteAdapter\Manifest\ManifestMapper` and implement its `map()` method. It takes the parsed JSON content of the manifest file and is expected to return a flat array mapping asset names to file names.


### Debugger

In development environment, WebpackNetteAdapter registers its own debug bar panel into Tracy, giving you the overview of

- what assets have been resolved and how;
- the path from where the assets are served;
- whether the dev server is enabled and available.

![Debug bar panel](doc/debug_panel.png)
<table>
<tbody>
<tr>
<td align="center">
<a href="https://github.com/jiripudil">
<img width="150" height="150" src="https://avatars1.githubusercontent.com/u/1042159?s=150&v=4">
</a>
<br/>
<a href="https://github.com/jiripudil">Jiří Pudil</a>
</td>
</tr>
</tbody>
</table>
9 changes: 5 additions & 4 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "oops/webpack-nette-adapter",
"description": "Webpack adapter for Nette Framework.",
"name": "contributte/webpack",
"description": "Webpack integration for Nette Framework.",
"keywords": ["nette", "webpack"],
"type": "library",
"license": "BSD-3-Clause",
"homepage": "https://github.com/contributte/webpack",
"authors": [
{
"name": "Jiří Pudil",
Expand All @@ -13,7 +14,7 @@
],
"support": {
"email": "me@jiripudil.cz",
"issues": "https://github.com/o2ps/WebpackNetteAdapter/issues"
"issues": "https://github.com/contributte/webpack/issues"
},
"require": {
"php": ">=7.4",
Expand All @@ -35,7 +36,7 @@
},
"autoload": {
"psr-4": {
"Oops\\WebpackNetteAdapter\\": "src/"
"Contributte\\Webpack\\": "src/"
}
},
"scripts": {
Expand Down
6 changes: 3 additions & 3 deletions src/AssetLocator.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter;
namespace Contributte\Webpack;

use Oops\WebpackNetteAdapter\AssetNameResolver\AssetNameResolverInterface;
use Oops\WebpackNetteAdapter\DevServer\DevServer;
use Contributte\Webpack\AssetNameResolver\AssetNameResolverInterface;
use Contributte\Webpack\DevServer\DevServer;

final class AssetLocator
{
Expand Down
2 changes: 1 addition & 1 deletion src/AssetNameResolver/AssetNameResolverInterface.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

interface AssetNameResolverInterface
{
Expand Down
2 changes: 1 addition & 1 deletion src/AssetNameResolver/CannotResolveAssetNameException.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

final class CannotResolveAssetNameException extends \RuntimeException
{
Expand Down
2 changes: 1 addition & 1 deletion src/AssetNameResolver/DebuggerAwareAssetNameResolver.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

final class DebuggerAwareAssetNameResolver implements AssetNameResolverInterface
{
Expand Down
2 changes: 1 addition & 1 deletion src/AssetNameResolver/IdentityAssetNameResolver.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

final class IdentityAssetNameResolver implements AssetNameResolverInterface
{
Expand Down
6 changes: 3 additions & 3 deletions src/AssetNameResolver/ManifestAssetNameResolver.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

use Oops\WebpackNetteAdapter\Manifest\CannotLoadManifestException;
use Oops\WebpackNetteAdapter\Manifest\ManifestLoader;
use Contributte\Webpack\Manifest\CannotLoadManifestException;
use Contributte\Webpack\Manifest\ManifestLoader;

final class ManifestAssetNameResolver implements AssetNameResolverInterface
{
Expand Down
2 changes: 1 addition & 1 deletion src/AssetNameResolver/StaticAssetNameResolver.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\AssetNameResolver;
namespace Contributte\Webpack\AssetNameResolver;

final class StaticAssetNameResolver implements AssetNameResolverInterface
{
Expand Down
2 changes: 1 addition & 1 deletion src/BasePath/BasePathProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\BasePath;
namespace Contributte\Webpack\BasePath;

interface BasePathProvider
{
Expand Down
2 changes: 1 addition & 1 deletion src/BasePath/NetteHttpBasePathProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter\BasePath;
namespace Contributte\Webpack\BasePath;

use Nette\Http\IRequest;

Expand Down
4 changes: 2 additions & 2 deletions src/BuildDirectoryProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

declare(strict_types=1);

namespace Oops\WebpackNetteAdapter;
namespace Contributte\Webpack;

use Oops\WebpackNetteAdapter\DevServer\DevServer;
use Contributte\Webpack\DevServer\DevServer;

/**
* @internal
Expand Down
Loading

0 comments on commit e2e7499

Please sign in to comment.