mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
Merge pull request #12 from material-components/publish-demos
Automate publishing demos
This commit is contained in:
commit
65e55df5c8
3
.gitignore
vendored
3
.gitignore
vendored
@ -2,4 +2,5 @@ node_modules
|
||||
/build
|
||||
/coverage
|
||||
.DS_Store
|
||||
/lerna-debug.log
|
||||
/lerna-debug.log
|
||||
/gh-pages
|
@ -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)
|
||||
|
@ -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>
|
||||
|
@ -42,7 +42,7 @@ limitations under the License.
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
|
@ -63,7 +63,7 @@ limitations under the License.
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
|
@ -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>
|
||||
|
@ -72,7 +72,7 @@ limitations under the License.
|
||||
</mwc-formfield>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
<script>
|
||||
addEventListener('load', () => document.body.classList.remove('unresolved'));
|
||||
</script>
|
||||
</body>
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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
601
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -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
125
scripts/build/rollup-demos.js
Executable 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
67
scripts/publish-demos.sh
Executable 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
|
Loading…
Reference in New Issue
Block a user