Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

Commit

Permalink
feat(errors): overlay build errors during development
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamdbradley @danbucholtz
adamdbradley authored and danbucholtz committed Nov 9, 2016
1 parent 257166d commit 87f7648
Show file tree
Hide file tree
Showing 41 changed files with 1,613 additions and 1,123 deletions.
24 changes: 18 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ In many cases, the defaults which Ionic provides covers most of the scenarios re

[Default Config Files](https://github.com/driftyco/ionic-app-scripts/tree/master/config)

### NPM Config
### package.json Config

Within the `package.json` file, NPM also provides a handy [config](https://docs.npmjs.com/misc/config#per-package-config-settings) property. Below is an example of setting a custom config file using the `config` property in a project's `package.json`.
Within the `package.json` file, there's also a handy [config](https://docs.npmjs.com/misc/config#per-package-config-settings) property which can be used. Below is an example of setting a custom config file using the `config` property in a project's `package.json`.

```
"config": {
Expand Down Expand Up @@ -88,7 +88,7 @@ npm run build --rollup ./config/rollup.config.js

### Overriding Config Files

| Config File | NPM Config Property | Cmd-line Flag |
| Config File | package.json Config | Cmd-line Flag |
|-------------|---------------------|-----------------------|
| CleanCss | `ionic_cleancss` | `--cleancss` or `-e` |
| Copy | `ionic_copy` | `--copy` or `-y` |
Expand All @@ -103,7 +103,7 @@ npm run build --rollup ./config/rollup.config.js

### Overriding Config Values

| Config Values | NPM Config Property | Cmd-line Flag | Defaults |
| Config Values | package.json Config | Cmd-line Flag | Defaults |
|-----------------|---------------------|---------------|-----------------|
| bundler | `ionic_bundler` | `--bundler` | `webpack` |
| source map type | `ionic_source_map` | `--sourceMap` | `eval` |
Expand All @@ -113,9 +113,21 @@ npm run build --rollup ./config/rollup.config.js
| build directory | `ionic_build_dir` | `--buildDir` | `build` |


### Ionic Environment Variable
### Ionic Environment Variables

The `process.env.IONIC_ENV` environment variable can be used to test whether it is a `prod` or `dev` build, which automatically gets set by any command. By default the `build` task is `prod`, and the `watch` task is `dev`. Note that `ionic serve` uses the `watch` task. Additionally, using the `--dev` command line flag will force the build to use `dev`.
These environment variables are automatically set to [Node's `process.env`](https://nodejs.org/api/process.html#process_process_env) property. These variables can be useful from within custom configuration files, such as custom `webpack.config.js` file.

| Environment Variable | Description |
|-------------------------|----------------------------------------------------------------------|
| `IONIC_ENV` | Value can be either `prod` or `dev`. |
| `IONIC_ROOT_DIR` | The absolute path to the project's root directory. |
| `IONIC_TMP_DIR` | The absolute path to the project's temporary directory. |
| `IONIC_SRC_DIR` | The absolute path to the app's source directory. |
| `IONIC_WWW_DIR` | The absolute path to the app's public distribution directory. |
| `IONIC_BUILD_DIR` | The absolute path to the app's bundled js and css files. |
| `IONIC_APP_SCRIPTS_DIR` | The absolute path to the `@ionic/app-scripts` node_module directory. |

The `process.env.IONIC_ENV` environment variable can be used to test whether it is a `prod` or `dev` build, which automatically gets set by any command. By default the `build` task is `prod`, and the `watch` and `serve` tasks are `dev`. Additionally, using the `--dev` command line flag will force the build to use `dev`.

Please take a look at the bottom of the [default Rollup config file](https://github.com/driftyco/ionic-app-scripts/blob/master/config/rollup.config.js) to see how the `IONIC_ENV` environment variable is being used to conditionally change config values for production builds.

Expand Down
Binary file added bin/ion-build-active.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bin/ion-build-error.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bin/ion-build-success.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
268 changes: 268 additions & 0 deletions bin/ion-dev.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,271 @@
#ion-diagnostics * {
box-sizing: border-box;
}

#ion-diagnostics {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
margin: 0;
padding: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
color: #333;
background-color: #fff;
word-wrap: break-word;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-size-adjust: none;
overflow: auto;
}

#ion-diagnostics .ion-diagnostic {
margin-bottom: 40px;
border: 1px solid #ddd;
border-radius: 3px;
}

#ion-diagnostics .ion-diagnostic-masthead {
padding: 8px 12px 0 12px;
}

#ion-diagnostics .ion-diagnostic-header {
margin: 0;
font-size: 18px;
color: #222222;
}

#ion-diagnostics .ion-diagnostic-message {
margin-top: 4px;
color: #666666;
}

#ion-diagnostics .ion-diagnostic-file {
position: relative;
margin-top: 16px;
border-top: 1px solid #ddd;
}

#ion-diagnostics .ion-diagnostic-file-header {
padding: 5px 10px;
border-bottom: 1px solid #d8d8d8;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #f7f7f7;
}

#ion-diagnostics .ion-diagnostic-blob {
overflow-x: auto;
overflow-y: hidden;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

#ion-diagnostics .ion-diagnostic-table {
border-spacing: 0;
border-collapse: collapse;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}

#ion-diagnostics .ion-diagnostic-table td,
#ion-diagnostics .ion-diagnostic-table th {
padding: 0;
}

#ion-diagnostics .ion-diagnostic-blob-num {
padding-right: 10px;
padding-left: 10px;
width: 1%;
min-width: 50px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
line-height: 20px;
color: rgba(0,0,0,0.3);
text-align: right;
white-space: nowrap;
vertical-align: top;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: solid #eee;
border-width: 0 1px 0 0;
}

#ion-diagnostics .ion-diagnostic-blob-num::before {
content: attr(data-line-number);
}

#ion-diagnostics .ion-diagnostic-error-line .ion-diagnostic-blob-num {
background-color: #ffdddd;
border-color: #f1c0c0;
}

#ion-diagnostics .ion-diagnostic-error-line .ion-diagnostic-blob-code {
background: rgba(255, 221, 221, 0.3);
z-index: -1;
}

#ion-diagnostics .ion-diagnostics-error-chr {
position: relative;
}

#ion-diagnostics .ion-diagnostics-error-chr::before {
position: absolute;
z-index: -1;
top: -3px;
left: 0px;
width: 8px;
height: 20px;
background-color: #ffdddd;
content: "";
}

#ion-diagnostics .ion-diagnostic-blob-code {
position: relative;
padding-right: 10px;
padding-left: 10px;
line-height: 20px;
vertical-align: top;
overflow: visible;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 12px;
color: #333;
word-wrap: normal;
white-space: pre;
}

#ion-diagnostics .ion-diagnostic-blob-code::before {
content: "";
}

#ion-diagnostics .js-keyword,
#ion-diagnostics .css-prop {
color: #183691;
}

#ion-diagnostics .js-comment,
#ion-diagnostics .sass-comment {
color: #969896;
}

#ion-diagnostics .ion-diagnostics-system-info {
font-size: 10px;
color: #999;
}

#ion-diagnostics {
-webkit-transition: opacity 150ms ease-out;
transition: opacity 150ms ease-out;
}

#ion-diagnostics.ion-diagnostics-fade-out {
opacity: 0;
}

#ion-diagnostics-toast {
position: absolute;
top: 10px;
right: 10px;
left: 10px;
z-index: 999999;
display: block;
margin: auto;
max-width: 700px;
border-radius: 3px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: rgba(0,0,0,.9);
-webkit-transform: translate3d(0px, -60px, 0px);
transform: translate3d(0px, -60px, 0px);
-webkit-transition: -webkit-transform 75ms ease-out;
transition: transform 75ms ease-out;
pointer-events: none;
}

#ion-diagnostics-toast.ion-diagnostics-toast-active {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}

#ion-diagnostics-toast .ion-diagnostics-toast-content {
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
pointer-events: auto;
}

#ion-diagnostics-toast .ion-diagnostics-toast-message {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #fff;
}

#ion-diagnostics-toast .ion-diagnostics-toast-spinner {
position: relative;
display: inline-block;
width: 56px;
height: 28px;
}

#ion-diagnostics-toast svg:not(:root) {
overflow: hidden;
}

#ion-diagnostics-toast svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: ion-diagnostics-spinner-rotate 600ms linear infinite;
animation: ion-diagnostics-spinner-rotate 600ms linear infinite;
}

@-webkit-keyframes ion-diagnostics-spinner-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes ion-diagnostics-spinner-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

#ion-diagnostics-toast circle {
fill: transparent;
stroke: white;
stroke-width: 4px;
stroke-dasharray: 128px;
stroke-dashoffset: 82px;
}

._ionic-error-view {
position: fixed;
top: 0;
Expand Down
Loading

0 comments on commit 87f7648

Please sign in to comment.