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

Commit 87f7648

Browse files
adamdbradleydanbucholtz
adamdbradley
authored and
danbucholtz
committed
feat(errors): overlay build errors during development
1 parent 257166d commit 87f7648

Some content is hidden

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

41 files changed

+1613
-1123
lines changed

‎README.md

+18-6
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ In many cases, the defaults which Ionic provides covers most of the scenarios re
5757

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

60-
### NPM Config
60+
### package.json Config
6161

62-
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`.
62+
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`.
6363

6464
```
6565
"config": {
@@ -88,7 +88,7 @@ npm run build --rollup ./config/rollup.config.js
8888

8989
### Overriding Config Files
9090

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

104104
### Overriding Config Values
105105

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

115115

116-
### Ionic Environment Variable
116+
### Ionic Environment Variables
117117

118-
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`.
118+
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.
119+
120+
| Environment Variable | Description |
121+
|-------------------------|----------------------------------------------------------------------|
122+
| `IONIC_ENV` | Value can be either `prod` or `dev`. |
123+
| `IONIC_ROOT_DIR` | The absolute path to the project's root directory. |
124+
| `IONIC_TMP_DIR` | The absolute path to the project's temporary directory. |
125+
| `IONIC_SRC_DIR` | The absolute path to the app's source directory. |
126+
| `IONIC_WWW_DIR` | The absolute path to the app's public distribution directory. |
127+
| `IONIC_BUILD_DIR` | The absolute path to the app's bundled js and css files. |
128+
| `IONIC_APP_SCRIPTS_DIR` | The absolute path to the `@ionic/app-scripts` node_module directory. |
129+
130+
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`.
119131

120132
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.
121133

‎bin/ion-build-active.png

4.13 KB
Loading

‎bin/ion-build-error.png

3.66 KB
Loading

‎bin/ion-build-success.png

4.16 KB
Loading

‎bin/ion-dev.css

+268
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,271 @@
1+
#ion-diagnostics * {
2+
box-sizing: border-box;
3+
}
4+
5+
#ion-diagnostics {
6+
position: absolute;
7+
top: 0;
8+
left: 0;
9+
width: 100%;
10+
height: 100%;
11+
z-index: 99999;
12+
margin: 0;
13+
padding: 15px;
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
15+
font-size: 14px;
16+
line-height: 1.5;
17+
color: #333;
18+
background-color: #fff;
19+
word-wrap: break-word;
20+
box-sizing: border-box;
21+
-webkit-font-smoothing: antialiased;
22+
font-smoothing: antialiased;
23+
text-rendering: optimizeLegibility;
24+
text-size-adjust: none;
25+
overflow: auto;
26+
}
27+
28+
#ion-diagnostics .ion-diagnostic {
29+
margin-bottom: 40px;
30+
border: 1px solid #ddd;
31+
border-radius: 3px;
32+
}
33+
34+
#ion-diagnostics .ion-diagnostic-masthead {
35+
padding: 8px 12px 0 12px;
36+
}
37+
38+
#ion-diagnostics .ion-diagnostic-header {
39+
margin: 0;
40+
font-size: 18px;
41+
color: #222222;
42+
}
43+
44+
#ion-diagnostics .ion-diagnostic-message {
45+
margin-top: 4px;
46+
color: #666666;
47+
}
48+
49+
#ion-diagnostics .ion-diagnostic-file {
50+
position: relative;
51+
margin-top: 16px;
52+
border-top: 1px solid #ddd;
53+
}
54+
55+
#ion-diagnostics .ion-diagnostic-file-header {
56+
padding: 5px 10px;
57+
border-bottom: 1px solid #d8d8d8;
58+
border-top-left-radius: 2px;
59+
border-top-right-radius: 2px;
60+
background-color: #f7f7f7;
61+
}
62+
63+
#ion-diagnostics .ion-diagnostic-blob {
64+
overflow-x: auto;
65+
overflow-y: hidden;
66+
border-bottom-right-radius: 3px;
67+
border-bottom-left-radius: 3px;
68+
}
69+
70+
#ion-diagnostics .ion-diagnostic-table {
71+
border-spacing: 0;
72+
border-collapse: collapse;
73+
-moz-tab-size: 2;
74+
-o-tab-size: 2;
75+
tab-size: 2;
76+
}
77+
78+
#ion-diagnostics .ion-diagnostic-table td,
79+
#ion-diagnostics .ion-diagnostic-table th {
80+
padding: 0;
81+
}
82+
83+
#ion-diagnostics .ion-diagnostic-blob-num {
84+
padding-right: 10px;
85+
padding-left: 10px;
86+
width: 1%;
87+
min-width: 50px;
88+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
89+
font-size: 12px;
90+
line-height: 20px;
91+
color: rgba(0,0,0,0.3);
92+
text-align: right;
93+
white-space: nowrap;
94+
vertical-align: top;
95+
-webkit-user-select: none;
96+
-moz-user-select: none;
97+
-ms-user-select: none;
98+
user-select: none;
99+
border: solid #eee;
100+
border-width: 0 1px 0 0;
101+
}
102+
103+
#ion-diagnostics .ion-diagnostic-blob-num::before {
104+
content: attr(data-line-number);
105+
}
106+
107+
#ion-diagnostics .ion-diagnostic-error-line .ion-diagnostic-blob-num {
108+
background-color: #ffdddd;
109+
border-color: #f1c0c0;
110+
}
111+
112+
#ion-diagnostics .ion-diagnostic-error-line .ion-diagnostic-blob-code {
113+
background: rgba(255, 221, 221, 0.3);
114+
z-index: -1;
115+
}
116+
117+
#ion-diagnostics .ion-diagnostics-error-chr {
118+
position: relative;
119+
}
120+
121+
#ion-diagnostics .ion-diagnostics-error-chr::before {
122+
position: absolute;
123+
z-index: -1;
124+
top: -3px;
125+
left: 0px;
126+
width: 8px;
127+
height: 20px;
128+
background-color: #ffdddd;
129+
content: "";
130+
}
131+
132+
#ion-diagnostics .ion-diagnostic-blob-code {
133+
position: relative;
134+
padding-right: 10px;
135+
padding-left: 10px;
136+
line-height: 20px;
137+
vertical-align: top;
138+
overflow: visible;
139+
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
140+
font-size: 12px;
141+
color: #333;
142+
word-wrap: normal;
143+
white-space: pre;
144+
}
145+
146+
#ion-diagnostics .ion-diagnostic-blob-code::before {
147+
content: "";
148+
}
149+
150+
#ion-diagnostics .js-keyword,
151+
#ion-diagnostics .css-prop {
152+
color: #183691;
153+
}
154+
155+
#ion-diagnostics .js-comment,
156+
#ion-diagnostics .sass-comment {
157+
color: #969896;
158+
}
159+
160+
#ion-diagnostics .ion-diagnostics-system-info {
161+
font-size: 10px;
162+
color: #999;
163+
}
164+
165+
#ion-diagnostics {
166+
-webkit-transition: opacity 150ms ease-out;
167+
transition: opacity 150ms ease-out;
168+
}
169+
170+
#ion-diagnostics.ion-diagnostics-fade-out {
171+
opacity: 0;
172+
}
173+
174+
#ion-diagnostics-toast {
175+
position: absolute;
176+
top: 10px;
177+
right: 10px;
178+
left: 10px;
179+
z-index: 999999;
180+
display: block;
181+
margin: auto;
182+
max-width: 700px;
183+
border-radius: 3px;
184+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
185+
background: rgba(0,0,0,.9);
186+
-webkit-transform: translate3d(0px, -60px, 0px);
187+
transform: translate3d(0px, -60px, 0px);
188+
-webkit-transition: -webkit-transform 75ms ease-out;
189+
transition: transform 75ms ease-out;
190+
pointer-events: none;
191+
}
192+
193+
#ion-diagnostics-toast.ion-diagnostics-toast-active {
194+
-webkit-transform: translate3d(0px, 0px, 0px);
195+
transform: translate3d(0px, 0px, 0px);
196+
}
197+
198+
#ion-diagnostics-toast .ion-diagnostics-toast-content {
199+
display: flex;
200+
-webkit-align-items: center;
201+
-ms-flex-align: center;
202+
align-items: center;
203+
pointer-events: auto;
204+
}
205+
206+
#ion-diagnostics-toast .ion-diagnostics-toast-message {
207+
-webkit-flex: 1;
208+
-ms-flex: 1;
209+
flex: 1;
210+
padding: 15px;
211+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
212+
font-size: 14px;
213+
color: #fff;
214+
}
215+
216+
#ion-diagnostics-toast .ion-diagnostics-toast-spinner {
217+
position: relative;
218+
display: inline-block;
219+
width: 56px;
220+
height: 28px;
221+
}
222+
223+
#ion-diagnostics-toast svg:not(:root) {
224+
overflow: hidden;
225+
}
226+
227+
#ion-diagnostics-toast svg {
228+
position: absolute;
229+
top: 0;
230+
left: 0;
231+
width: 100%;
232+
height: 100%;
233+
-webkit-transform: translateZ(0);
234+
transform: translateZ(0);
235+
-webkit-animation: ion-diagnostics-spinner-rotate 600ms linear infinite;
236+
animation: ion-diagnostics-spinner-rotate 600ms linear infinite;
237+
}
238+
239+
@-webkit-keyframes ion-diagnostics-spinner-rotate {
240+
0% {
241+
-webkit-transform: rotate(0deg);
242+
transform: rotate(0deg);
243+
}
244+
100% {
245+
-webkit-transform: rotate(360deg);
246+
transform: rotate(360deg);
247+
}
248+
}
249+
250+
@keyframes ion-diagnostics-spinner-rotate {
251+
0% {
252+
-webkit-transform: rotate(0deg);
253+
transform: rotate(0deg);
254+
}
255+
100% {
256+
-webkit-transform: rotate(360deg);
257+
transform: rotate(360deg);
258+
}
259+
}
260+
261+
#ion-diagnostics-toast circle {
262+
fill: transparent;
263+
stroke: white;
264+
stroke-width: 4px;
265+
stroke-dasharray: 128px;
266+
stroke-dashoffset: 82px;
267+
}
268+
1269
._ionic-error-view {
2270
position: fixed;
3271
top: 0;

0 commit comments

Comments
 (0)