Skip to content

Commit 4659e63

Browse files
author
Graham Butler
committed
add showroom boilerplate code
1 parent 5033a6a commit 4659e63

File tree

10 files changed

+860
-1
lines changed

10 files changed

+860
-1
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"description": "author-__ELEMENT_NAME__ custom element (web component).",
55
"main": "dist/author-__ELEMENT_NAME__.min.js",
66
"scripts": {
7-
"build": "npm run clean && rollup -c ./rollup.release.config.js",
7+
"build": "npm run clean && rollup -c ./rollup.release.config.js && npm run build-showroom",
8+
"build-showroom": "cd showroom/ && npm run build && cd ../",
89
"clean": "node clean.js",
910
"deploy": "npm run build && npm publish --access public",
1011
"test": "npm run build && karma start karma.conf.es6.js && karma start karma.conf.es6-modules.js && karma start karma.conf.es5.js && npm run test:syntax",

‎showroom/build.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
const fs = require('fs-extra')
2+
const path = require('path')
3+
4+
const ProductionLine = require('productionline-web')
5+
const TaskRunner = require('shortbus')
6+
const Chassis = require('@chassis/core')
7+
8+
class Builder extends ProductionLine {
9+
constructor (cfg) {
10+
super(cfg)
11+
12+
this.devMode = false
13+
}
14+
15+
copyComponent (cb) {
16+
fs.copySync(this.paths.component, this.outputDirectory('webcomponents'))
17+
18+
cb()
19+
}
20+
21+
copyCustomElements (cb) {
22+
this.walk(this.paths.authorElements).forEach(dir => {
23+
let filepath = path.join(dir, 'dist')
24+
this.walk(filepath).forEach(file => fs.copySync(filepath, this.outputDirectory('webcomponents')))
25+
})
26+
27+
cb()
28+
}
29+
30+
copyLibs (cb) {
31+
fs.copySync(this.paths.lib, this.outputDirectory('lib'))
32+
cb()
33+
}
34+
35+
processCss (minify = true, cb) {
36+
let chassis = new Chassis({
37+
minify,
38+
sourceMap: true,
39+
theme: path.join(this.SOURCE, 'css', 'main.theme'),
40+
layout: {
41+
minWidth: 320,
42+
maxWidth: 960
43+
}
44+
})
45+
46+
let tasks = new TaskRunner()
47+
48+
this.walk(this.paths.css).forEach(filepath => {
49+
tasks.add(`Process ${this.localDirectory(filepath)}`, cont => {
50+
chassis.process(filepath, (err, processed) => {
51+
if (err) {
52+
throw err
53+
}
54+
55+
if (processed.sourceMap) {
56+
this.writeFileSync(`${this.outputDirectory(filepath)}.map`, processed.sourceMap)
57+
}
58+
59+
this.writeFile(this.outputDirectory(filepath), this.applyHeader(processed.css, 'css'), cont)
60+
})
61+
})
62+
})
63+
64+
tasks.on('complete', cb)
65+
tasks.run()
66+
}
67+
68+
processJavascript (minify = true, cb) {
69+
let tasks = new TaskRunner()
70+
71+
this.walk(this.paths.javascript).forEach(filepath => {
72+
tasks.add(`Process ${this.localDirectory(filepath)}`, cont => {
73+
let dir = path.dirname(filepath)
74+
let output = this.transpile(filepath)
75+
76+
if (minify) {
77+
output = this.minify(output.code)
78+
}
79+
80+
this.writeFile(this.outputDirectory(filepath), this.applyHeader(output.code, 'js'), cont)
81+
})
82+
})
83+
84+
tasks.on('complete', cb)
85+
tasks.run()
86+
}
87+
88+
make (devMode = false) {
89+
this.clean()
90+
// this.copyAssets(true)
91+
this.addTask('Copy Libraries', next => this.copyLibs(next))
92+
this.addTask('Copy Component', next => this.copyComponent(next))
93+
this.addTask('Copy Custom Elements', next => this.copyCustomElements(next))
94+
this.buildHTML()
95+
this.addTask('Build JavaScript', next => this.processJavascript(!devMode, next))
96+
this.addTask('Build CSS', next => this.processCss(!devMode, next))
97+
}
98+
}
99+
100+
const builder = new Builder({
101+
header: `Built at ${new Date().toTimeString()}\nCopyright (c) ${new Date().getFullYear()} Author.io`,
102+
103+
commands: {
104+
'--prod' (cmd) {
105+
builder.make()
106+
},
107+
108+
'--dev' (cmd) {
109+
builder.make(true)
110+
111+
builder.watch((action, filepath) => {
112+
if (action === 'create' || action === 'update') {
113+
builder.make(true)
114+
builder.run()
115+
}
116+
})
117+
},
118+
119+
'--js-only' (cmd) {
120+
this.addTask('Build JavaScript', next => this.processJavascript(false, next))
121+
}
122+
}
123+
})
124+
125+
builder.paths = {
126+
apps: path.join(builder.SOURCE, '/apps'),
127+
javascript: path.join(builder.SOURCE, 'js', '/**/*.js'),
128+
css: path.join(builder.SOURCE, 'css', '/**/*.css'),
129+
lib: path.join(builder.SOURCE, 'lib'),
130+
component: path.resolve('..', 'dist'),
131+
authorElements: './node_modules/@author.io/element-*'
132+
}
133+
134+
builder.run()

‎showroom/package-lock.json‎

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎showroom/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "author-__ELEMENT_NAME__-showroom",
3+
"version": "1.0.0",
4+
"description": "Demo for author-__ELEMENT_NAME__ component",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "node build.js --prod",
8+
"build-dev": "node build.js --dev",
9+
"build-js": "node build.js --js-only",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"author": "Graham Butler",
13+
"license": "MIT",
14+
"devDependencies": {
15+
"@chassis/core": "^2.3.3",
16+
"productionline-web": "^1.1.8"
17+
},
18+
"dependencies": {
19+
"@author.io/element-base": "^1.1.1",
20+
"@author.io/element-control": "^1.0.8",
21+
"@author.io/element-menu": "^1.0.1",
22+
"@author.io/element-optgroup": "^1.0.1",
23+
"@author.io/element-optgroup-label": "^1.0.1",
24+
"@author.io/element-option": "^1.0.1",
25+
"@author.io/element-options": "^1.0.5-beta.3",
26+
"@author.io/element-select": "^1.0.7",
27+
"@author.io/element-selected-options": "^1.0.1"
28+
}
29+
}

‎showroom/src/css/main.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@chassis init;
2+
@chassis include anchor buttons form-controls author-datalist;
3+
4+
.author-datalist {
5+
& pre {
6+
@chassis apply inline-block margin-bottom padding;
7+
background: var(--grey-n00);
8+
9+
& code {
10+
@chassis font-size small;
11+
}
12+
}
13+
14+
& ul {
15+
list-style: disc;
16+
@chassis apply inline-block margin-bottom;
17+
18+
& li {
19+
margin-left: 1em;
20+
}
21+
}
22+
23+
& .theme {
24+
@chassis font-size small;
25+
}
26+
27+
& > header {
28+
padding: 1.46em 0 .90169942em;
29+
border-bottom: 4px solid var(--header-border-color);
30+
31+
& h1 {
32+
flex: 1 1 auto;
33+
margin: 0 1em 0 0;
34+
@chassis font-size large;
35+
}
36+
37+
& .links {
38+
display: flex;
39+
align-items: center;
40+
41+
& a {
42+
margin-left: 1em;
43+
44+
&:first-of-type {
45+
margin-left: 0;
46+
}
47+
}
48+
}
49+
50+
@chassis viewport-width from medium {
51+
padding-top: 2.36em;
52+
53+
& .width.constraint {
54+
display: flex;
55+
}
56+
}
57+
}
58+
59+
& main {
60+
@chassis constrain-width;
61+
padding-bottom: 3.618em;
62+
63+
& > * {
64+
padding-top: 3.82em;
65+
}
66+
}
67+
68+
&[data-theme="dark"] {
69+
background: var(--grey-n10);
70+
color: white;
71+
}
72+
}

0 commit comments

Comments
 (0)