Example build instructions

Unless otherwise mentioned in the readme of a specific example project, the following instructions are valid for all browser examples included in this repo:

To avoid having to install duplicates of the various dev dependencies for each project, it's best to first build the entire mono repo once (takes about 2 mins) and then not require a separate yarn install for each example:

git clone https://github.com/thi-ng/umbrella.git

# first build the entire mono-repo
yarn install
yarn build

# then run example
cd umbrella/examples/<example>
yarn start

# or build production version
yarn build

Dev version

yarn start launches ParcelJS in development mode and automatically opens the example in your browser. Most examples also have a simple Hot module replacement handler defined.

Production version

yarn build executes Parcel in production mode, producing minified outputs in the example's /out directory.

Alternatively, you can run the build-examples script from the root dir of the repo:

scripts/build-examples hdom-basics [...others]

The only difference is that several post-processing steps are performed (e.g. gzipping outputs etc.)

Troubleshooting

Due to an issue with Parcel's tree shaking implementation the following examples produce corrupted outputs in their minified versions:

• geom-knn
• geom-tessel
• gesture-analysis
• hdom-canvas-shapes
• hdom-class
• xml-converter

A possible current workaround is to use WebPack like so:

# from the umbrella root dir
(cd examples/<example>/ && \
  ../../node_modules/.bin/webpack-cli \
  --entry ./src/index.ts \
  --resolve-extensions .js,.ts \
  --module-bind ts=ts-loader \
  --output out/index.min.js \
  --mode production)

Note: This will only build the JS file in the /out folder, but not create/transform the wrapper HTML file...