# zui-bundle

ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollup. But if you really just need to get ZUI (all of ZUI) into your project and don't want to configure a build process, this is the package for you.

zui-bundle creates two artifacts:

- dist/js/zui.js: All of the JS components (e.g. custom elements) of ZUI
- dist/css/zui.css: All of the separate CSS sheets merged into one (e.g. fouc, fonts, etc.)

You'll want both most likely.

## Installation

_npm_:

```shell
> npm i --save @zywave/zui-bundle
```

_yarn_:

```shell
> yarn add @zywave/zui-bundle
```

## Run `zui-bundle` locally

Relative to this directory:

1. `yarn run build:after`
1. `yarn run demo`

### Debugging

**Note:** This bundle doesn't observe the "source" of ZUI, but rather the built outputs of each and every package. If you make a change in a TypeScript file in a component, you will need to rebuild that package prior to building the bundle.

The generated output from Rollup is quite hard to read. This is done purposefully, not to be difficult to read, but to reduce bytes in our final output. However, sometimes, you really just want to see the full bundle in its legible glory.

There are a few plugins in the rollup.config.js file in this package that you can "turn off" by commenting them out:

1. `terser`
1. `cleanup`

By commenting those plugins, and then rebuilding the bundle, you'll more easily be able to debug this package.

See [the documentation site](http://zui.zywave.com/) for more information.
