ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add package.json source

Browse Source
This commit is contained in:
ahocevar
2019-01-10 18:31:26 +01:00
parent f368fa1a28
commit 9372bc9157
3 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/resources/common.js
View File

@@ -7,6 +7,10 @@
jsClipboard.on('success', function(e) { jsClipboard.on('success', function(e) {
e.clearSelection(); e.clearSelection();
}); });
var pkgClipboard = new Clipboard('#copy-pkg-button');
pkgClipboard.on('success', function(e) {
e.clearSelection();
});
var codepenButton = document.getElementsByClassName('codepen-button')[0]; var codepenButton = document.getElementsByClassName('codepen-button')[0];
if (codepenButton) { if (codepenButton) {

10
examples/templates/example.html
View File

@@ -121,7 +121,6 @@
<html> <html>
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
<link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>{{#if extraHead.remote}} <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>{{#if extraHead.remote}}
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}} {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
@@ -137,7 +136,14 @@
<div class="source-controls"> <div class="source-controls">
<a class="copy-button" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a> <a class="copy-button" id="copy-js-button" data-clipboard-target="#example-js-source"><i class="fa fa-clipboard"></i> Copy</a>
</div> </div>
<pre><legend>index.js</legend><code id="example-js-source" class="language-js">{{ js.source }}</code></pre> <pre><legend>index.js</legend><code id="example-js-source" class="language-js">import 'ol/ol.css';
{{ js.source }}</code></pre>
</div>
<div class="row-fluid">
<div class="source-controls">
<a class="copy-button" id="copy-pkg-button" data-clipboard-target="#example-pkg-source"><i class="fa fa-clipboard"></i> Copy</a>
</div>
<pre><legend>package.json</legend><code id="example-pkg-source" class="language-js">{{ pkgJson }}</code></pre>
</div> </div>
</div> </div>

38
examples/webpack/example-builder.js
View File

@@ -10,6 +10,7 @@ const RawSource = require('webpack-sources').RawSource;
const readFile = promisify(fs.readFile); const readFile = promisify(fs.readFile);
const isCssRegEx = /\.css$/; const isCssRegEx = /\.css$/;
const isJsRegEx = /\.js(\?.*)?$/; const isJsRegEx = /\.js(\?.*)?$/;
const importRegEx = /^import .* from '(.*)';$/;
handlebars.registerHelper('md', str => new handlebars.SafeString(marked(str))); handlebars.registerHelper('md', str => new handlebars.SafeString(marked(str)));
@@ -83,6 +84,32 @@ function getJsSource(chunk, jsName) {
} }
} }
/**
* Gets dependencies from the js source.
* @param {string} jsSource Source.
* @return {Object<string, string>} dependencies
*/
function getDependencies(jsSource) {
const lines = jsSource.split('\n');
const dependencies = {
ol: pkg.version
};
for (let i = 0, ii = lines.length; i < ii; ++i) {
const line = lines[i];
const importMatch = line.match(importRegEx);
if (importMatch) {
const imp = importMatch[1];
if (!imp.startsWith('ol/') && imp != 'ol') {
const dep = imp.split('/')[0];
if (dep in pkg.devDependencies) {
dependencies[dep] = pkg.devDependencies[dep];
}
}
}
}
return dependencies;
}
/** /**
* A webpack plugin that builds the html files for our examples. * A webpack plugin that builds the html files for our examples.
* @param {Object} config Plugin configuration. Requires a `templates` property * @param {Object} config Plugin configuration. Requires a `templates` property
@@ -167,6 +194,17 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`, tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`,
source: jsSource source: jsSource
}; };
data.pkgJson = JSON.stringify({
name: name,
dependencies: getDependencies(jsSource),
devDependencies: {
parcel: '1.11.0'
},
scripts: {
start: 'parcel index.html',
build: 'parcel build --experimental-scope-hoisting --public-url . index.html'
}
}, null, 2);
// check for example css // check for example css
const cssName = `${name}.css`; const cssName = `${name}.css`;