From 9372bc9157e33318589a64dd6e1176f3c4056efd Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Thu, 10 Jan 2019 18:31:26 +0100
Subject: [PATCH] Add package.json source

---
 examples/resources/common.js        |  4 +++
 examples/templates/example.html     | 10 ++++++--
 examples/webpack/example-builder.js | 38 +++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/examples/resources/common.js b/examples/resources/common.js
index 8bfed4ab7b..0257267e5d 100644
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -7,6 +7,10 @@
   jsClipboard.on('success', function(e) {
     e.clearSelection();
   });
+  var pkgClipboard = new Clipboard('#copy-pkg-button');
+  pkgClipboard.on('success', function(e) {
+    e.clearSelection();
+  });
 
   var codepenButton = document.getElementsByClassName('codepen-button')[0];
   if (codepenButton) {
diff --git a/examples/templates/example.html b/examples/templates/example.html
index f3a0df0734..d5a72c96d6 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -121,7 +121,6 @@
 &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
-    &lt;link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
     &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
     &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
@@ -137,7 +136,14 @@
         <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>
         </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>
 
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 218b6d37d9..2b5ed31eb8 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -10,6 +10,7 @@ const RawSource = require('webpack-sources').RawSource;
 const readFile = promisify(fs.readFile);
 const isCssRegEx = /\.css$/;
 const isJsRegEx = /\.js(\?.*)?$/;
+const importRegEx = /^import .* from '(.*)';$/;
 
 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.
  * @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>`,
     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
   const cssName = `${name}.css`;