material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #12 from material-components/publish-demos

Browse Source 
Automate publishing demos
This commit is contained in:
Daniel Freedman 2018-05-08 14:57:33 -04:00 committed by GitHub
commit 65e55df5c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 560 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,4 +2,5 @@ node_modules
/build
/coverage
.DS_Store
/lerna-debug.log
/lerna-debug.log
/gh-pages

4
README.md
View File

@ -12,7 +12,7 @@ Web Components can be seamlessly incorporated into a wide range of usage context
Insert screenshot of a demo page, including a code snippet.
-->
**[Demos](demos/)**
**[Demos](https://material-components.github.io/material-components-web-components/demos/index.html)**
## Quick start
@ -62,7 +62,7 @@ To compile the component SASS run:
## Useful Links
- [All Components](packages/)
- [Demos](demos/)
- [Demos](https://material-components.github.io/material-components-web-components/demos/index.html)
- [Contributing](CONTRIBUTING.md)
- [Material.io](https://www.material.io) (external site)
- [Material Design Guidelines](https://material.io/guidelines) (external site)

2
demos/card.html
View File

@ -110,7 +110,7 @@ limitations under the License.
<div class="presentCard">
<demo-card></demo-card>
</div>
<script type="module">
<script>
addEventListener('load', () => document.body.classList.remove('unresolved'));
</script>
</body>

2
demos/checkbox.html
View File

@ -42,7 +42,7 @@ limitations under the License.
</div>
</main>
<script type="module">
<script>
addEventListener('load', () => document.body.classList.remove('unresolved'));
</script>
</body>

2
demos/chips.html
View File

@ -63,7 +63,7 @@ limitations under the License.
</main>
<script type="module">
<script>
addEventListener('load', () => document.body.classList.remove('unresolved'));
</script>
</body>

4
demos/fab.html
View File

@ -20,8 +20,8 @@ limitations under the License.
<title>fab demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
<script type="module" src="../node_modules/@material/mwc-fab/mwc-fab.js"></script>
<script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
<link rel="stylesheet" href="demo-component.css">
<style>
.light {
@ -68,7 +68,7 @@ limitations under the License.
</main>
<script type="module">
<script>
addEventListener('load', () => document.body.classList.remove('unresolved'));
</script>
</body>

2
demos/formfield.html
View File

@ -72,7 +72,7 @@ limitations under the License.
</mwc-formfield>
</main>
<script type="module">
<script>
addEventListener('load', () => document.body.classList.remove('unresolved'));
</script>
</body>

4
demos/index.html
View File

@ -24,9 +24,9 @@ limitations under the License.
<body>
<demo-view></demo-view>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module">
import {LitElement, html} from '@polymer/lit-element';
import {LitElement, html} from '@polymer/lit-element/lit-element.js';
import {style as listStyle} from '@material/mwc-list/mwc-list-item-css.js';
class DemoView extends LitElement {

2
demos/linear-progress.html
View File

@ -58,7 +58,7 @@ limitations under the License.
<mwc-linear-progress determinate reverse progress="0.2" buffer="0.6"></mwc-linear-progress>
</main>
<script type="module">
<script>
toggle.onclick = (e) => {
progress1.closed = !progress1.closed;
}

2
demos/menu.html
View File

@ -65,7 +65,7 @@ limitations under the License.
</div>
<div class="demo-log" id="log"></div>
</main>
<script type="module">
<script>
button.addEventListener('click', (e) => {
menu.setAnchorCorner(menu.Corner.BOTTOM_START);
menu.open = !menu.open;

601
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -16,7 +16,8 @@
"lint": "npm-run-all --parallel lint:*",
"test": "karma start --single-run",
"bootstrap": "npm install && ./scripts/bootstrap-unreleased.sh",
"update-styling": "./scripts/update-styling.sh"
"update-styling": "./scripts/update-styling.sh",
"update-gh-pages": "npm run bootstrap && ./scripts/publish-demos.sh"
},
"devDependencies": {
"@webcomponents/webcomponentsjs": "^2.0.0-0",
@ -24,11 +25,13 @@
"babel-loader": "^7.0.0",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-traverse": "^6.24.1",
"babel-types": "^6.24.1",
"babylon": "^6.16.1",
"chai": "^4.0.2",
"del-cli": "^1.1.0",
"dom5": "^3.0.0",
"eslint": "^4.10.0",
"eslint-config-google": "^0.8.1",
"eslint-plugin-mocha": "^4.8.0",
@ -50,7 +53,12 @@
"lerna": "^2.9.0",
"mocha": "^5.0.0",
"npm-run-all": "^4.1.1",
"polyserve": "^0.25.3",
"parse5": "^4.0.0",
"polyserve": "^0.27.10",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^3.0.4",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-uglify": "^3.0.0",
"webpack": "^3.9.0",
"webpack-dev-server": "^2.4.3"
},

125
scripts/build/rollup-demos.js Executable file
View File

@ -0,0 +1,125 @@
/**
@license
Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
const fs = require('fs');
const util = require('util');
const path = require('path');
const del = require('del');
const rollup = require('rollup');
const dom5 = require('dom5/lib/index-next.js');
const parse5 = require('parse5');
const babel = require('rollup-plugin-babel');
const nodeRes = require('rollup-plugin-node-resolve');
const uglify = require('rollup-plugin-uglify');
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
const pred = dom5.predicates;
const moduleFinder = pred.AND(
pred.hasTagName('script'),
pred.hasAttrValue('type', 'module'),
);
const file = process.argv[2];
if (!file) {
console.log('Need input file!');
process.exit(1);
}
const jsFile = `${path.dirname(file)}/${path.basename(file, '.html')}.js`;
const rollupOptions = {
input: jsFile,
plugins: [
nodeRes({
module: true,
jsnext: true,
main: true,
browser: true,
modulesOnly: true,
}),
babel({
presets: ['es2015-rollup'],
}),
uglify(),
],
};
const outputOptions = {
format: 'iife',
name: 'bundle',
};
async function build(scriptContent) {
await writeFile(jsFile, scriptContent, 'utf-8');
const bundle = await rollup.rollup(rollupOptions);
const {code} = await bundle.generate(outputOptions);
await del(jsFile);
return code;
}
async function prependES5Adapter(doc) {
const preamble = dom5.constructors.element('script');
dom5.setTextContent(preamble, 'if (!window.customElements) { document.write("<!--") }');
const es5Adapter = dom5.constructors.element('script');
const es5AdapterContent = await readFile(require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'), 'utf-8');
dom5.setTextContent(es5Adapter, es5AdapterContent);
const comment = dom5.constructors.comment('! do not remove');
const head = dom5.query(doc, pred.hasTagName('head'));
if (head.childNodes.length) {
const firstChild = head.childNodes[0];
dom5.insertBefore(head, firstChild, preamble);
dom5.insertBefore(head, firstChild, es5Adapter);
dom5.insertBefore(head, firstChild, comment);
} else {
dom5.append(head, preamble);
dom5.append(head, es5Adapter);
dom5.append(head, comment);
}
}
const removeNpmPath = /\.\.\/\.\.\/node_modules\//;
async function separateScripts() {
const content = await readFile(file, 'utf-8');
const imports = [];
const scripts = [];
const doc = parse5.parse(content);
const nodes = dom5.queryAll(doc, moduleFinder);
for (const node of nodes) {
const src = dom5.getAttribute(node, 'src');
if (src) {
const namePath = src.replace(removeNpmPath, '');
imports.push(`import "${namePath}";`);
} else {
scripts.push(dom5.getTextContent(node));
}
dom5.remove(node);
}
const newScript = dom5.constructors.element('script');
const moduleText = `${imports.join('\n')}\n${scripts.join(';\n')}`;
const newScriptContent = await build(moduleText);
dom5.setTextContent(newScript, newScriptContent);
const body = dom5.query(doc, pred.hasTagName('body'));
dom5.append(body, newScript);
await prependES5Adapter(doc);
await writeFile(file, parse5.serialize(doc), 'utf-8');
}
separateScripts();

67
scripts/publish-demos.sh Executable file
View File

@ -0,0 +1,67 @@
#!/usr/bin/env bash
##
# Copyright 2018 Google Inc. All Rights Reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
set -e
# Remove previous build
rm -rf gh-pages
# Get list of demos
demos=`ls demos/*.html`
# Clone gh-pages branch
git worktree add gh-pages origin/gh-pages
# Copy built source to gh-pages
cp -rf demos/* gh-pages/demos
# get list of demos to transform
files=(`ls gh-pages/demos/*.html`)
for file in ${files[@]}; do
# rollup bundle demos
node scripts/build/rollup-demos.js ${file}
# node scripts/build/rollup-demos.js gh-pages/demos/index.html
done
# Push to gh-pages
read -p "Test build/gh-pages/demos/index.html, then press 'y' to publish to gh-pages: " -n 1 -r
echo # (optional) move to a new line
if [[ $REPLY =~ ^[Yy]$ ]]
then
(cd gh-pages && git add -A && git commit -m 'Update gh-pages' && git push origin HEAD:gh-pages)
fi
# Bundled/compiled build currently not working well....
# # Run polymer build to do node module resolution on the demos, output to build/default
# polymer build --js-compile --module-resolution=node $fragments
# # Make a build/interim copy of build/default
# cp -rf build/default build/interim
# # Add babel-polyfill to the babel helpers injected build-entrypoint
# echo '<script src="../node_modules/babel-polyfill/dist/polyfill.js"></script>' >> build/default/build-entrypoint.html
# # Inject the babel helpers from the original entrypoint into each demo in interim
# for f in $demos; do sed '/<!--! do not remove -->/ r build/default/build-entrypoint.html' build/default/$f > build/interim/$f; done;
# # Install babel-polyfill
# (cd build/interim && npm install babel-polyfill)
# # Move webcomponents into the interim copy (for some reason --extra-dependencies on polymer build above was failing)
# cp -rf node_modules/@webcomponents/webcomponentsjs build/interim/node_modules/@webcomponents
# # Clear the build entrypoint file in the interim copy
# echo '' > build/interim/build-entrypoint.html
# # Bundle the interim demos
# (cd build/interim && polymer build --module-resolution=node --bundle $fragments --entrypoint build-entrypoint.html)
# # Blow away interim
# # rm -rf build/default
# # mv build/interim/build/default build/default
# # rm -rf build/interim