<commit_before># Plone Mockup

Mockup is the JavaScript stack of the Plone Classic UI.


## Install

- Have a current node.js installed.

- Run: ``npx yarn install``:
  We are using yarn instead of npm.
  ``npx`` is for running a npm package command - or downloading and installing it first.

- Run: ``yarn start``:
  This starts up the webpack build process in watch mode.
  Any JavaScript changes are immediately compiled.
  For some changes - like for adding new packages via ``yarn add`` and then using it you might need to restart.
  The command also spins up a development server for our 11ty based documentation and demo pages.

- Go to ``http://localhost:8000``:
  On this port our demo and documentation pages are served.


## Running tests

- ``jest``: Run all tests
- ``jest src/pat/PATH-TO-PATTERN``: Run a specific test suite
- ``jest src/pat/PATH-TO-PATTERN -t "Test name"``: Run a specific test matching "Test name" from a specific test suite.
- ``jest --watch``: Run the interactive test runner.


## Debugging tests

The tests are based on jsdom - a library mocking DOM and HTML standards in JavaScript.
No real browsers are involved, which make the tests run really fast.

Still, you can connect to the Chome debugging interface via:

```
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/PATH-TO-PATTERN``
```

Connect in chrome via:

```
chrome://inspect
```

You can pass Jest any parameter it accepts, like `-t TESTPATTERN`::

```
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/PATH-TO-PATTERN -t test.name
```

You can put some ``debugger;`` statements to the code to break the execution and investigate.


## Developing external Packages

If you want to work on ony external package like Patternslib or any external Mockup pattern you can do so by linking those packages into the node_modules folder via ``yarn link``.


1) Check out the external package you want to develop on.

2) Make sure you have installed the dependencies in the development package (e.g. by running ``yarn install``). (TODO: verify that!)

3) Run ``yarn link`` in the external development package to register it with yarn.

4) Run ``yarn link "PACKAGE-NAME"`` in mockup to create the node_modules symlink.


After developing you might want to run ``yarn unlink "PACKAGE-NAME"`` to unlink the development package.


For more information see:

- https://classic.yarnpkg.com/en/docs/cli/link/
- https://classic.yarnpkg.com/en/docs/cli/unlink
- https://docs.npmjs.com/cli/v7/commands/npm-link


**Please note:**: Make sure to unlink and reinstall development pacakges before building a production bundle.
In doubt, remove the node_modules directory and re-install.


## Bundle build analyzation

https://survivejs.com/webpack/optimizing/build-analysis/
https://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plugin/

Build the stats.json file:

```
npx yarn build:stats
```

Check dependency tree and why which package was included:
https://www.npmjs.com/package/whybundled

```
npx whybundled stats.json
```

Visualize dependency tree and analyze bundle size:
https://www.npmjs.com/package/webpack-bundle-analyzer

```
webpack-bundle-analyzer stats.json
```<commit_msg>Add another npx<commit_after># Plone Mockup

Mockup is the JavaScript stack of the Plone Classic UI.


## Install

- Have a current node.js installed.

- Run: ``npx yarn install``:
  We are using yarn instead of npm.
  ``npx`` is for running a npm package command - or downloading and installing it first.

- Run: ``yarn start``:
  This starts up the webpack build process in watch mode.
  Any JavaScript changes are immediately compiled.
  For some changes - like for adding new packages via ``yarn add`` and then using it you might need to restart.
  The command also spins up a development server for our 11ty based documentation and demo pages.

- Go to ``http://localhost:8000``:
  On this port our demo and documentation pages are served.


## Running tests

- ``jest``: Run all tests
- ``jest src/pat/PATH-TO-PATTERN``: Run a specific test suite
- ``jest src/pat/PATH-TO-PATTERN -t "Test name"``: Run a specific test matching "Test name" from a specific test suite.
- ``jest --watch``: Run the interactive test runner.


## Debugging tests

The tests are based on jsdom - a library mocking DOM and HTML standards in JavaScript.
No real browsers are involved, which make the tests run really fast.

Still, you can connect to the Chome debugging interface via:

```
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/PATH-TO-PATTERN``
```

Connect in chrome via:

```
chrome://inspect
```

You can pass Jest any parameter it accepts, like `-t TESTPATTERN`::

```
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/PATH-TO-PATTERN -t test.name
```

You can put some ``debugger;`` statements to the code to break the execution and investigate.


## Developing external Packages

If you want to work on ony external package like Patternslib or any external Mockup pattern you can do so by linking those packages into the node_modules folder via ``yarn link``.


1) Check out the external package you want to develop on.

2) Make sure you have installed the dependencies in the development package (e.g. by running ``yarn install``). (TODO: verify that!)

3) Run ``yarn link`` in the external development package to register it with yarn.

4) Run ``yarn link "PACKAGE-NAME"`` in mockup to create the node_modules symlink.


After developing you might want to run ``yarn unlink "PACKAGE-NAME"`` to unlink the development package.


For more information see:

- https://classic.yarnpkg.com/en/docs/cli/link/
- https://classic.yarnpkg.com/en/docs/cli/unlink
- https://docs.npmjs.com/cli/v7/commands/npm-link


**Please note:**: Make sure to unlink and reinstall development pacakges before building a production bundle.
In doubt, remove the node_modules directory and re-install.


## Bundle build analyzation

https://survivejs.com/webpack/optimizing/build-analysis/
https://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plugin/

Build the stats.json file:

```
npx yarn build:stats
```

Check dependency tree and why which package was included:
https://www.npmjs.com/package/whybundled

```
npx whybundled stats.json
```

Visualize dependency tree and analyze bundle size:
https://www.npmjs.com/package/webpack-bundle-analyzer

```
npx webpack-bundle-analyzer stats.json
```
{'fraction_non_alphanumeric': 0.10062111801242236, 'fraction_numerical': 0.004658385093167702, 'mean_word_length': 3.9930232558139536, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 14, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2291452', 'n_tokens_mistral': 1977, 'n_tokens_neox': 1848, 'n_words': 807}