Skip to content

Commit 73e1702

Browse files
committed
docs: update website
1 parent 8d6be75 commit 73e1702

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1509
-900
lines changed

site/.eslintrc

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
2+
"root": true,
23
"extends": "@wpackio/eslint-config",
34
"rules": {
5+
"prettier/prettier": "off",
46
"react/jsx-filename-extension": "off",
57
"react/prop-types": "off",
68
"import/prefer-default-export": "off",

site/.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.cache/
2+
public/
3+
package.json

site/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
This website is live under [https://wpack.io](https://wpack.io).
22

3-
Made with [GatsbyJS](https://www.gatsbyjs.org/) and hosted with [Netlify](https://www.netlify.com/).
3+
Made with [GatsbyJS](https://www.gatsbyjs.org/) and hosted with
4+
[Netlify](https://www.netlify.com/).

site/docs/apis/node-api.md

+33-36
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ shortTitle: Nodejs API
77
While `@wpackio/scripts` is meant to be used as a CLI tool, it does expose all
88
of the necessary node.js APIs to create your own CLI.
99

10-
For now, the best place to check the exports is [the file](https://github.com/swashata/wp-webpack-script/blob/master/packages/scripts/src/index.ts) itself. Since we
11-
develop in typescript and ship all `.d.ts` files, you will get IDE intellisense
12-
by default.
10+
For now, the best place to check the exports is
11+
[the file](https://github.com/swashata/wp-webpack-script/blob/master/packages/scripts/src/index.ts)
12+
itself. Since we develop in typescript and ship all `.d.ts` files, you will get
13+
IDE intellisense by default.
1314

1415
Here are the documentation for a few APIs which are useful.
1516

@@ -80,18 +81,21 @@ interface PresetOptions {
8081
}
8182
```
8283

83-
More information can be found in the [source repository](https://github.com/swashata/wp-webpack-script/tree/master/packages/babel-preset-base).
84+
More information can be found in the
85+
[source repository](https://github.com/swashata/wp-webpack-script/tree/master/packages/babel-preset-base).
8486

8587
#### `typeChecker`
8688

87-
Whether to include preset for `'flow'` or `'typescript'`. Leave `undefined` to ignore both.
89+
Whether to include preset for `'flow'` or `'typescript'`. Leave `undefined` to
90+
ignore both.
8891

8992
Possible values are `'flow'`, `'typescript'` or `undefined`.
9093

9194
## `getDefaultBabelPresetOptions`
9295

93-
Get default options for [@wpackio/babel-preset-base](https://github.com/swashata/wp-webpack-script/tree/master/packages/babel-preset-base) considering whether project
94-
has react and whether it is in development mode.
96+
Get default options for
97+
[@wpackio/babel-preset-base](https://github.com/swashata/wp-webpack-script/tree/master/packages/babel-preset-base)
98+
considering whether project has react and whether it is in development mode.
9599

96100
### Usage
97101

@@ -125,10 +129,7 @@ module.exports = {
125129
loader: 'babel-loader',
126130
options: {
127131
presets: getBabelPresets(
128-
getDefaultBabelPresetOptions(
129-
true,
130-
isDev
131-
),
132+
getDefaultBabelPresetOptions(true, isDev),
132133
undefined
133134
),
134135
},
@@ -150,15 +151,17 @@ module.exports = {
150151
## `getFileLoaderOptions`
151152

152153
Get options for file-loader. This takes into account the application directory,
153-
development or production mode and public path for file-loader usage from css files.
154+
development or production mode and public path for file-loader usage from css
155+
files.
154156

155-
If you want to use `file-loader` for your own custom asset management, then
156-
do use this API for dynamically setting the option. This ensures a few things, like
157+
If you want to use `file-loader` for your own custom asset management, then do
158+
use this API for dynamically setting the option. This ensures a few things, like
157159

158160
1. All assets are put inside `assets` directory.
159161
2. Assets works for CSS files where relative path is necessary.
160162

161-
More information can be found in [`file-loader` tutorial](/tutorials/using-file-loader/).
163+
More information can be found in
164+
[`file-loader` tutorial](/tutorials/using-file-loader/).
162165

163166
### Usage
164167

@@ -184,11 +187,7 @@ module.exports = {
184187
use: [
185188
{
186189
loader: 'file-loader',
187-
options: getFileLoaderOptions(
188-
appDir,
189-
isDev,
190-
false
191-
),
190+
options: getFileLoaderOptions(appDir, isDev, false),
192191
},
193192
],
194193
},
@@ -218,13 +217,15 @@ Whether or not to set publicPath for `file-loader`, depending on `isDev`.
218217

219218
## `issuer`
220219

221-
The API consists a family of [`webpack issuer`](https://webpack.js.org/configuration/module/#ruleissuer) utilities. Use them in conjunction with [`file-loader`](/tutorials/using-file-loader/) or
222-
`url-loader`.
220+
The API consists a family of
221+
[`webpack issuer`](https://webpack.js.org/configuration/module/#ruleissuer)
222+
utilities. Use them in conjunction with
223+
[`file-loader`](/tutorials/using-file-loader/) or `url-loader`.
223224

224-
- `issuerForNonStyleFiles`: Tests if files are not, `css`, `sass` and `scss`.
225-
- `issuerForStyleFiles`: Tests if files are one of `css`, `sass` or `scss`.
226-
- `issuerForNonJsTsFiles`: Tests if files are not, `js`, `jsx`, `ts` and `tsx`.
227-
- `issuerForJsTsFiles`: Tests if files are one of `js`, `jsx`, `ts` and `tsx`.
225+
- `issuerForNonStyleFiles`: Tests if files are not, `css`, `sass` and `scss`.
226+
- `issuerForStyleFiles`: Tests if files are one of `css`, `sass` or `scss`.
227+
- `issuerForNonJsTsFiles`: Tests if files are not, `js`, `jsx`, `ts` and `tsx`.
228+
- `issuerForJsTsFiles`: Tests if files are one of `js`, `jsx`, `ts` and `tsx`.
228229

229230
### Usage
230231

@@ -255,11 +256,7 @@ module.exports = {
255256
use: [
256257
{
257258
loader: 'file-loader',
258-
options: getFileLoaderOptions(
259-
appDir,
260-
isDev,
261-
false
262-
),
259+
options: getFileLoaderOptions(appDir, isDev, false),
263260
},
264261
],
265262
},
@@ -275,8 +272,8 @@ module.exports = {
275272

276273
## `loader`
277274

278-
When you want to extend webpack config you might run into issues when
279-
specifying loaders directly like
275+
When you want to extend webpack config you might run into issues when specifying
276+
loaders directly like
280277

281278
```js
282279
const module = {
@@ -291,9 +288,9 @@ const module = {
291288
};
292289
```
293290

294-
The above is would throw error saying, could not resolve `file-loader`. To
295-
ease up sharing loaders across configuration, `@wpackio/scripts` expose
296-
the following loaders.
291+
The above is would throw error saying, could not resolve `file-loader`. To ease
292+
up sharing loaders across configuration, `@wpackio/scripts` expose the following
293+
loaders.
297294

298295
```js
299296
const {

site/docs/apis/php-api.md

+48-38
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ order: 3
44
shortTitle: PHP API
55
---
66

7-
The following are the methods and options for [`\WPackio\Enqueue`](<(https://packagist.org/packages/wpackio/enqueue)>)
8-
class which comes with the composer package.
7+
The following are the methods and options for
8+
[`\WPackio\Enqueue`](<(https://packagist.org/packages/wpackio/enqueue)>) class
9+
which comes with the composer package.
910

1011
## Creating Instance
1112

@@ -28,7 +29,8 @@ It has to be same as you have defined in `wpackio.project.js` under `appName`.
2829

2930
#### `$outputPath` (`string`)
3031

31-
It has to be same as you have defined in `wpackio.project.js` under `outputPath`.
32+
It has to be same as you have defined in `wpackio.project.js` under
33+
`outputPath`.
3234

3335
#### `$version` (`string`)
3436

@@ -40,18 +42,19 @@ Either `"plugin"` or "`theme`", depending on your project.
4042

4143
#### `$pluginPath` (`string`|`false`)
4244

43-
Absolute path to the main plugin file. If you are using it for `theme`, then don't
44-
pass it, or just use `false`.
45+
Absolute path to the main plugin file. If you are using it for `theme`, then
46+
don't pass it, or just use `false`.
4547

4648
#### `$themeType` (`string`)
4749

48-
Defaults to `"regular"`. If you are applying this to a child theme, then make the value `"child"`.
50+
Defaults to `"regular"`. If you are applying this to a child theme, then make
51+
the value `"child"`.
4952

5053
## Instance API: `getAssets`
5154

52-
Get handle and Url of all assets from the entry-point.
53-
It doesn't enqueue anything for you, rather returns an associative array
54-
with handles and urls. You should use it to enqueue it on your own.
55+
Get handle and Url of all assets from the entry-point. It doesn't enqueue
56+
anything for you, rather returns an associative array with handles and urls. You
57+
should use it to enqueue it on your own.
5558

5659
### Usage
5760

@@ -170,14 +173,14 @@ $config = [
170173
];
171174
```
172175

173-
> **NOTE**: The `identifier` property was removed from `$config`. We need complete
174-
> control of the script `handle` to make sure common chunks, such as, `runtime`
175-
> is enqueued only once.
176+
> **NOTE**: The `identifier` property was removed from `$config`. We need
177+
> complete control of the script `handle` to make sure common chunks, such as,
178+
> `runtime` is enqueued only once.
176179
177180
### Return `array`
178181

179-
It returns an associative array with `js` and `css` asset handles and URLs
180-
for ready consumption using `wp_enqueue` API. A return may look like this
182+
It returns an associative array with `js` and `css` asset handles and URLs for
183+
ready consumption using `wp_enqueue` API. A return may look like this
181184

182185
```php
183186
$return = [
@@ -204,13 +207,13 @@ $return = [
204207
];
205208
```
206209

207-
It doesn't take care of internal dependencies by itself. The `register`
208-
method does.
210+
It doesn't take care of internal dependencies by itself. The `register` method
211+
does.
209212

210213
## Instance API: `register`
211214

212-
Register script handles with WordPress for an entrypoint inside a source.
213-
It does not enqueue the assets, just calls `wp_register_*` on the asset.
215+
Register script handles with WordPress for an entrypoint inside a source. It
216+
does not enqueue the assets, just calls `wp_register_*` on the asset.
214217

215218
This is useful if just registering script for things like gutenberg.
216219

@@ -235,7 +238,8 @@ $assets = $enqueue->register( 'app', 'main', [
235238

236239
All the assets within an `$entryPoint` has internal dependency upon each other.
237240

238-
Let us consider the following `manifest.json` file generated by `@wpackio/scripts`.
241+
Let us consider the following `manifest.json` file generated by
242+
`@wpackio/scripts`.
239243

240244
```json
241245
{
@@ -268,20 +272,20 @@ Here the asset `app/main.js` of `main` `entryPoint` depends on both
268272
1. `app/vendor~main.js`.
269273
2. `app/runtime.js`.
270274

271-
So if we were to `enqueue` only `app/main.js` it will not work, it need the
272-
two scripts in the page too.
275+
So if we were to `enqueue` only `app/main.js` it will not work, it need the two
276+
scripts in the page too.
273277

274278
Similarly for the asset `app/mobile.js`, of `mobile` `entryPoint`, we have
275279
internal dependency of
276280

277281
1. `app/vendor~mobile.js`.
278282
2. `app/runtime.js`.
279283

280-
Here `app/runtime.js` is a common dependency for both the entry-points. But
281-
we should enqueue it only once.
284+
Here `app/runtime.js` is a common dependency for both the entry-points. But we
285+
should enqueue it only once.
282286

283-
To make sure WordPress properly enqueues the dependencies and doesn't come
284-
up with duplicate scripts, `register` sets the scripts dependencies for you.
287+
To make sure WordPress properly enqueues the dependencies and doesn't come up
288+
with duplicate scripts, `register` sets the scripts dependencies for you.
285289

286290
So if you do something like this
287291

@@ -302,11 +306,12 @@ wp_enqueue_script(
302306
);
303307
```
304308

305-
You can be assured that `app/vendor~main.js` and `app/runtime.js` will both
306-
be enqueued.
309+
You can be assured that `app/vendor~main.js` and `app/runtime.js` will both be
310+
enqueued.
307311

308-
There isn't any magic behind it. We just set internal dependencies during
309-
call to [`wp_register_(script|style)`](https://github.com/swashata/wpackio-enqueue/blob/6411c4781ed58e62f746e01d081fd1838a212edf/inc/Enqueue.php#L146).
312+
There isn't any magic behind it. We just set internal dependencies during call
313+
to
314+
[`wp_register_(script|style)`](https://github.com/swashata/wpackio-enqueue/blob/6411c4781ed58e62f746e01d081fd1838a212edf/inc/Enqueue.php#L146).
310315

311316
## Instance API: `enqueue`
312317

@@ -360,16 +365,19 @@ $enqueue->getManifest( $name );
360365

361366
#### `$name` (`string`)
362367

363-
The name of the file entry as defined in `**wpackio.project.js**`. The `wpackio-scripts`
364-
internally creates a directory of the same name inside `outputPath`.
368+
The name of the file entry as defined in `**wpackio.project.js**`. The
369+
`wpackio-scripts` internally creates a directory of the same name inside
370+
`outputPath`.
365371

366-
`wpackio/enqueue` uses the same concept and looks for a file `manifest.json` inside
367-
the same directory and returns the content as an associative array (using `json_decode`).
372+
`wpackio/enqueue` uses the same concept and looks for a file `manifest.json`
373+
inside the same directory and returns the content as an associative array (using
374+
`json_decode`).
368375

369376
## Instance API: `getUrl`
370377

371378
Get public URL of an asset (script or style). It doesn't check whether the asset
372-
actually exists or not. It just calculates the plugin/theme URL from `$outputPath`.
379+
actually exists or not. It just calculates the plugin/theme URL from
380+
`$outputPath`.
373381

374382
This is meant to be used to get URL from `manifest.json` files directly.
375383

@@ -392,12 +400,13 @@ $enqueue->getManifest( $asset );
392400

393401
#### `$asset` (`string`)
394402

395-
The relative path of the asset (with forward `/` as director separator) for which
396-
URL is to be calculated.
403+
The relative path of the asset (with forward `/` as director separator) for
404+
which URL is to be calculated.
397405

398406
## Instance API: `getPrimaryJsHandle`
399407

400-
Get primary js handle from enqueued/registered assets. This is useful to localize/translate the script handle.
408+
Get primary js handle from enqueued/registered assets. This is useful to
409+
localize/translate the script handle.
401410

402411
### Usage
403412

@@ -421,7 +430,8 @@ Assets array as returned from enqueue or register.
421430

422431
## Instance API: `getPrimaryCssHandle`
423432

424-
Get primary css handle from enqueued/registered assets. This is useful to localize/translate the script handle.
433+
Get primary css handle from enqueued/registered assets. This is useful to
434+
localize/translate the script handle.
425435

426436
### Usage
427437

0 commit comments

Comments
 (0)