You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+17-7Lines changed: 17 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,30 +15,40 @@
15
15
16
16
The result of these principles is that you can plug one set of components into a wide variety of applications; bringing UX consistency and developer familiarity to any web project.
17
17
18
-
A Yeoman generator is included for creating Web Components that meets these goals.
18
+
A Yeoman generator is included for creating web components that meet these goals.
_Note: You will need to use [Node](https://nodejs.org/en/) v.7 or higher._
30
40
31
41
## Command Line Helper Scripts
32
-
Many commands have an optional argument of a component name, if left off it will assume it should run on all components. These should run from the project root.
42
+
Many commands have an optional argument of space-separated component name(s), if left off it will assume it should run on all components. These should run from the project root.
Copy file name to clipboardExpand all lines: docs/content/develop/step-1a.md
+12-29Lines changed: 12 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -78,41 +78,23 @@ This will add these additional files to the standard set that is being served to
78
78
79
79
## Compile, watch, & preview
80
80
81
-
To watch for changes on all components and compile the code when changes are detected, run this from the PatternFly Elements root directory. This command will also launch the preview of the demo files.
81
+
To watch for changes on component(s) and compile the code when changes are detected, run the command below from the PatternFly Elements root directory. This command will also launch the preview of the demo files and Storybook.
82
82
83
83
```
84
-
npm run live-demo
84
+
npm run live-demo [component-name(s)]
85
85
```
86
86
87
-
## Compile & watch
88
-
89
-
You may find that you dislike watching all the elements at once. It may start up too slowly, consume too many system resources, or your OS may run out of file descriptors from watching too many files. If any of these are the case, you can shrink the set of elements being watched by running `npm run dev (component-name)`.
90
-
91
-
For example, to watch only `pfe-icon` and its dependencies:
92
-
93
-
```
94
-
npm run dev pfe-icon
95
-
```
96
-
97
-
*Note that this will also automatically begin watching dependencies of `pfe-icon`, such as `pfelement`.*
98
-
99
87
You may also specify multiple elements. For example, `pfe-card` and `pfe-cta` are often used together, so you may wish to watching them both.
100
88
101
89
```
102
-
npm run dev pfe-card pfe-cta
90
+
npm run live-demo pfe-card pfe-cta
103
91
```
104
92
105
-
## Preview changes
106
-
107
-
Remember that you may want to simultaneously run compile commands to watch for changes to your code. From the root of the PatternFly Elements repository, run the live-demo command which will open a browser to a listing of all the demo files.
108
-
109
-
```
110
-
npm run live-demo
111
-
```
112
-
113
-
From there you can change the URL to the demo page of the element you're working on. For example, if you want to preview the `pfe-card` component, then navigate in the browser to `http://localhost:1234/elements/pfe-card/demo`.
93
+
This command will open the browser to a listing of all the demo files: `http://localhost:8000/examples/`.
114
94
95
+
From there you can navigate to the demo page of the element you're working on. For example, if you want to preview the `pfe-card` component, then navigate in the browser to `http://localhost:8000/elements/pfe-card/demo`.
115
96
97
+
This command will also open the browser to the storybook instance. Read more about storybook below.
116
98
117
99
#### Storybook editor
118
100
@@ -121,27 +103,28 @@ Storybook is an interactive tool that allows consumers of the components to see
121
103
```
122
104
npm run storybook
123
105
```
106
+
124
107
Storybook will launch at [http://localhost:9001](http://localhost:9001).
125
108
126
109
## Testing
127
110
128
-
From the directory of the element you're working on, run the test script in the package.json file and Web Component Tester will use Mocha and Chai to execute your tests in the browser.
111
+
From the project's root directory, run the test command `npm test` and Web Component Tester will use Mocha and Chai to execute your tests in the browser.
129
112
130
113
```
131
-
npm test
114
+
npm test [component-name(s)]
132
115
```
133
116
134
117
## Final build
135
118
136
-
Prepare your element for distribution by running the build script in the package.json file located at the root of the element you're working on.
119
+
Prepare your element for distribution by running the build script at the root of the project.
137
120
138
121
```
139
-
npm run build
122
+
npm run build [component-name(s)]
140
123
```
141
124
142
125
The build script will merge the files in the `/src` directory and update the ES6 and ES5 versions of your element in the root of the element. These two files are the files that your applications will either require or import for use.
143
126
144
-
If you've been running `npm run dev`, the dev script runs the build script every time you save a file in the `/src` directory so running the build script might be redundant, but better safe than sorry.
127
+
If you've been running `npm run live-demo`, the script runs the build every time you save a file in the `/src` directory, so running the build script might be redundant, but better safe than sorry.
Copy file name to clipboardExpand all lines: docs/content/develop/step-2a.md
+3-14Lines changed: 3 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,25 +11,14 @@ tags = [ "develop" ]
11
11
12
12
Run this command from the project root to start the build, watch, and server processes, see others in the project README.
13
13
```shell
14
-
npm run live-demo
14
+
npm run live-demo [component-name(s)]
15
15
```
16
16
17
-
If you prefer to only watch specific component (this can be quicker), you'll need two terminal processes, start the watch process with:
18
-
```shell
19
-
# Replace pfe-cool-element with your component's name
20
-
npm run dev pfe-cool-element
21
-
```
22
-
23
-
Then run this to start the server:
24
-
```shell
25
-
npm start
26
-
```
27
-
28
-
The server will load on `localhost:8000` by default.
17
+
The server will load on `http://localhost:8000` by default.
29
18
30
19
31
20
32
-
Navigate to `http://localhost:1234/elements/pfe-cool-element/demo/` to view your element.
21
+
Navigate to `http://localhost:8000/elements/pfe-cool-element/demo/` to view your element.
33
22
34
23
You're off to a good start! You have a new custom element that extends the base PFElement class, uses shadow DOM, and has a built-in fallback for ShadyCSS in case shadow DOM isn't supported.
Copy file name to clipboardExpand all lines: docs/content/develop/step-2b.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -59,7 +59,7 @@ Here's how it should look in the browser:
59
59
60
60
61
61
62
-
Remember that any changes we make in the `/src` directory are being watched while the `npm run dev` command runs. When you save changes, the `merge` and `compile` tasks run from the gulpfile to update the ES6 and ES5 versions of the component in the root of your element.
62
+
Remember that any changes we make in the `/src` directory are being watched while the `npm run live-demo` command runs. When you save changes, the `merge` and `compile` tasks run from the gulpfile to update the ES6 and ES5 versions of the component in the root of your element.
0 commit comments