Skip to content

Commit 4dc9173

Browse files
committed
feat: major improvements to local UIKit workflow
1 parent 58bc6b3 commit 4dc9173

10 files changed

Lines changed: 728 additions & 8 deletions

File tree

.patternlabrc.js

Lines changed: 0 additions & 4 deletions
This file was deleted.
Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// const serve = require('/Users/ghows/sites/pl-node/packages/cli/bin/serve.js');
2+
// const config = require('/Users/ghows/sites/pl-node/packages/development-edition-engine-handlebars/patternlab-config.json');
3+
4+
// // console.log(config);
5+
// serve(config);
6+
7+
const path = require('path');
8+
const fs = require('fs-extra');
9+
10+
fs.mkdirp('./node_modules/@pattern-lab/');
11+
12+
fs.ensureSymlink(__dirname, './node_modules/@pattern-lab/uikit-workshop')
13+
.then(() => {
14+
console.log('success!');
15+
})
16+
.catch(err => {
17+
console.error(err);
18+
});
19+
20+
// // With a callback:
21+
// fs.ensureSymlink(
22+
// __dirname,
23+
// './node_modules/@pattern-lab/uikit-workshop',
24+
// // err => {
25+
// // fs.symlinkSync(__dirname, './node_modules/@pattern-lab/uikit-workshop');
26+
// // // symlink has now been created, including the directory it is to be placed in
27+
// // }
28+
// );
29+
30+
// '/Users/ghows/sites/pl-node/packages/uikit-workshop/node_modules/@pattern-lab/uikit-workshop/views/partials/general-header.mustache
31+
32+
const configKeysEndingWithASlash = [
33+
'root',
34+
'patterns',
35+
'data',
36+
'meta',
37+
'annotations',
38+
];
39+
40+
// const config = require('../development-edition-engine-handlebars/patternlab-config.json');
41+
42+
const config = require('./patternlab-config.json');
43+
44+
// Object.keys(config.paths.source).forEach(key => {
45+
// const value = config.paths.source[key];
46+
47+
// if (typeof value === 'string' && value.includes('source')) {
48+
// config.paths.source[key] = path.resolve(
49+
// __dirname,
50+
// '../development-edition-engine-handlebars/',
51+
// value
52+
// );
53+
// }
54+
55+
// if (configKeysEndingWithASlash.includes(key)) {
56+
// config.paths.source[key] = config.paths.source[key] + '/';
57+
// }
58+
// });
59+
60+
// Object.keys(config.paths.public).forEach(key => {
61+
// const value = config.paths.public[key];
62+
63+
// if (typeof value === 'string' && value.includes('public')) {
64+
// config.paths.public[key] = path.relative(
65+
// __dirname,
66+
// path.resolve(
67+
// __dirname,
68+
// '../development-edition-engine-handlebars/',
69+
// value
70+
// )
71+
// );
72+
// }
73+
74+
// if (configKeysEndingWithASlash.includes(key)) {
75+
// config.paths.public[key] = config.paths.public[key] + '/';
76+
// }
77+
78+
// if (key === 'styleguide') {
79+
// config.paths.public[key] = config.paths.public[key] + '/';
80+
// }
81+
// });
82+
83+
// Object.keys(config.paths.public).forEach(key => {
84+
// const value = config.paths.public[key];
85+
// if (typeof value === 'string' && value.includes('public')) {
86+
// config.paths.source[key] = path.relative(
87+
// __dirname,
88+
// path.resolve(
89+
// __dirname,
90+
// // 'public',
91+
// value
92+
// )
93+
// );
94+
// }
95+
// });
96+
// config.paths.public.root = path.relative(__dirname, 'public');
97+
98+
console.log(config);
99+
100+
const patternlab = require('@pattern-lab/core')(config);
101+
102+
// build, optionally watching or choosing incremental builds
103+
// patternlab.build({
104+
// cleanPublic: true,
105+
// watch: true,
106+
// });
107+
108+
// console.log(patternlab);
109+
110+
// or build, watch, and then self-host
111+
patternlab.build({
112+
watch: true,
113+
cleanPublic: true,
114+
});

packages/uikit-workshop/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ src/bower_components/*
44
.DS_Store
55
/.eslintignore
66
dist
7+
public
8+
www
9+
dependencyGraph.json

packages/uikit-workshop/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,24 @@ In order to modify these assets you need to install the following:
2727
## Development Set-up
2828

2929
Read the [contribution guidelines](https://github.com/pattern-lab/patternlab-node/blob/master/packages/uikit-workshop/.github/CONTRIBUTING.md)
30+
31+
32+
## Working on Pattern Lab's UI Locally
33+
34+
### Step 1: Install Dependencies
35+
Run the following in the root of the Pattern Lab repo:
36+
37+
```
38+
yarn run setup
39+
```
40+
41+
### Step 2 (Optional)
42+
If you want to build using a fuller set of examples than what comes with the default Handlebars demo, run `yarn run preview:hbs`. Otherwise skip to step 3.
43+
44+
### Step 3
45+
Finally go into the UIKit folder and start up the local dev server which watches UIKit and the Handlebars demo for changes, live reloads, etc.
46+
47+
```
48+
cd packages/uikit-workshop
49+
yarn start
50+
```
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const webpackServer = require('./build/webpack-server.js');
2+
const path = require('path');
3+
const fs = require('fs-extra');
4+
5+
fs.mkdirp('./node_modules/@pattern-lab/');
6+
fs.ensureSymlink(__dirname, './node_modules/@pattern-lab/uikit-workshop');
7+
8+
const configKeysEndingWithASlash = [
9+
'root',
10+
'patterns',
11+
'data',
12+
'meta',
13+
'annotations',
14+
];
15+
16+
const configFilePath =
17+
'../development-edition-engine-handlebars/patternlab-config.json';
18+
const config = require(configFilePath);
19+
20+
// adjust the config to output to a temp `www` folder locally for testing
21+
Object.keys(config.paths.source).forEach(key => {
22+
const value = config.paths.source[key];
23+
24+
if (typeof value === 'string' && value.includes('source')) {
25+
config.paths.source[key] = path.relative(
26+
__dirname,
27+
path.resolve(__dirname, path.dirname(configFilePath), value)
28+
);
29+
}
30+
31+
if (configKeysEndingWithASlash.includes(key)) {
32+
config.paths.source[key] = config.paths.source[key] + '/';
33+
}
34+
});
35+
36+
console.log(config);
37+
38+
Object.keys(config.paths.public).forEach(key => {
39+
const value = config.paths.public[key];
40+
41+
if (typeof value === 'string' && value.includes('public')) {
42+
config.paths.public[key] = config.paths.public[key].replace(
43+
'public',
44+
'www'
45+
);
46+
}
47+
});
48+
49+
const patternlab = require('@pattern-lab/core')(config);
50+
51+
// build + start watch mode
52+
patternlab.build({
53+
watch: true,
54+
cleanPublic: true,
55+
});
56+
57+
webpackServer.serve(patternlab);
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const ejs = require('ejs');
4+
const webpack = require('webpack');
5+
6+
const data = {
7+
webpackVersion: webpack.version,
8+
webpackDevServerVersion: '2.4.1',
9+
progress: [[0]],
10+
};
11+
12+
/**
13+
* @typedef {object} WebpackDevServerWaitpageOptions
14+
* @property title {string}
15+
* @property theme {string}
16+
* @property template {string}
17+
* @property disableWhenValid {boolean}
18+
*/
19+
20+
/** @type {WebpackDevServerWaitpageOptions} */
21+
const defaultOptions = {
22+
title: 'Development Server',
23+
theme: 'pl-loading',
24+
disableWhenValid: true,
25+
};
26+
27+
/**
28+
* webpack-dev-server-waitpage middleware factory
29+
* @param server {Server} The server argument passed to webpack-dev-server's 'before' function
30+
* @param [options] {WebpackDevServerWaitpageOptions} An optional object of options (see Readme for more information)
31+
* @returns {Function} Koa compatible middleware
32+
*/
33+
const webpackDevServerWaitpage = (server, options) => {
34+
if (!server)
35+
throw new Error(
36+
`webpack-dev-server's compilers argument must be supplied as first parameter.`
37+
);
38+
39+
/** @type {WebpackDevServerWaitpageOptions} */
40+
options = Object.assign({}, defaultOptions, options);
41+
42+
const compilers = server.compilers;
43+
// || [server.middleware.context.compiler];
44+
for (let i = 0; i < compilers.length; i++) {
45+
new webpack.ProgressPlugin(function() {
46+
data.progress[i] = arguments;
47+
}).apply(compilers[i]);
48+
}
49+
50+
let template = options.template;
51+
if (!template) {
52+
if (
53+
fs
54+
.readdirSync(__dirname)
55+
.filter(x => x.endsWith('.ejs'))
56+
.map(x => x.slice(0, -4))
57+
.indexOf(options.theme) < 0
58+
)
59+
throw new Error(`Unknown theme provided: ${options.theme}`);
60+
template = fs.readFileSync(
61+
path.resolve(__dirname, options.theme + '.ejs'),
62+
'utf8'
63+
);
64+
}
65+
66+
// eslint-disable-next-line no-return-assign
67+
Object.keys(options).forEach(key => (data[key] = options[key])); // expend data with options
68+
69+
let wasValid = false;
70+
71+
return async (req, res, next) => {
72+
const valid = data.progress.every(p => p[0] === 1);
73+
wasValid = wasValid || valid;
74+
75+
if (
76+
valid || // already valid
77+
(options.disableWhenValid && wasValid) || // if after valid state should be disabled
78+
req.method !== 'GET'
79+
) {
80+
return await next();
81+
} else {
82+
res.setHeader('Content-Type', 'text/html');
83+
res.end(ejs.render(template, data));
84+
}
85+
};
86+
};
87+
88+
module.exports = webpackDevServerWaitpage;

0 commit comments

Comments
 (0)