Merge pull request #15 from seriousben/multiple-outputs

adding bookmarklet

package.json

@@ -4,11 +4,11 @@
   "description": "building an embeddable js widget with react",
   "main": "index.js",
   "scripts": {
-    "build": "webpack-cli",
+    "build": "webpack-cli --mode production",
     "start": "webpack-serve --config ./webpack.config.js --mode development --open",
     "test": "jest",
     "test-update-snapshots": "jest --updateSnapshot",
-    "deploy": "webpack-cli && cp ./public/* ./dist/. && gh-pages -d dist"
+    "deploy": "npm run build && cp ./public/* ./dist/. && gh-pages -d dist"
   },
   "babel": {
     "presets": [

public/index.html

@@ -8,7 +8,14 @@
     <ul>
       <li><a href="./blank.html">Widget on a blank page</a></li>
       <li><a href="./embeddable-widget.js">Latest version of the widget</a></li>
-      <li><a href="./bookmarklet.js">Bookmarklet (Bookmark it for easy use)</a></li>
+      <li><a id="bookmarklet">Bookmarklet (Bookmark it for easy use)</a></li>
+      <li><a href="./bookmarklet.js">Bookmarklet Code</a></li>
+      <script>
+       var bookmarklet = "var s= document.createElement('script'); s.setAttribute('src', '"+window.location.href+"bookmarklet.js'); s.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(s);"
+       bookmarklet = '(function(){'+ bookmarklet +'})();'
+       document.querySelector('a#bookmarklet').setAttribute("href", "javascript:" + encodeURIComponent(bookmarklet));
+       console.log("DONE");
+      </script>
     </ul>
   </body>
 </html>

src/components/widget.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Widget from './widget';
-import { waitForSelection } from './test-helpers';
+import { waitForSelection } from '../test-helpers';
 
 describe('<Widget />', () => {
   test('open/close', async () => {

src/outputs/bookmarklet.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Widget from '../components/widget';
+
+  const component = <Widget />;
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  console.log('running bookmarklet');
+  ReactDOM.render(
+    component,
+    el,
+  );

src/outputs/bookmarklet.test.js

@@ -0,0 +1,15 @@
+import './bookmarklet';
+import ReactDOM from 'react-dom';
+
+describe('bookmarklet', () => {
+  afterEach(() => {
+    const el = document.querySelectorAll('body > div');
+    ReactDOM.unmountComponentAtNode(el[0]);
+    el[0].parentNode.removeChild(el[0]);
+  });
+
+  test('#mount document becomes ready', async () => {
+    const el = document.querySelectorAll('body > div');
+    expect(el).toHaveLength(1);
+  });
+});

src/outputs/embeddable-widget.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Widget from './widget';
+import Widget from '../components/widget';
 
 export default class EmbeddableWidget {
   static el;

src/outputs/embeddable-widget.test.js

@@ -1,5 +1,5 @@
-import EmbeddableWidget from './index';
+import EmbeddableWidget from './embeddable-widget';
-import { waitForSelection } from './test-helpers';
+import { waitForSelection } from '../test-helpers';
 
 describe('EmbeddableWidget', () => {
   afterEach(() => {

webpack.config.js

@@ -2,8 +2,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
 
-module.exports = {
+const defaultConfig = {
-  mode: 'development',
+  mode: 'production',
   plugins: [
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
@@ -33,15 +33,26 @@ module.exports = {
   resolve: {
     extensions: ['*', '.js', '.jsx'],
   },
-  entry: [
+
-    './src/index.js',
+};
-  ],
+
+module.exports = [{
+  ...defaultConfig,
+  entry: './src/outputs/embeddable-widget.js',
   output: {
     path: __dirname + '/dist',
     publicPath: '/',
-    filename: 'embeddable-widget.js',
+    filename: 'widget.js',
     library: 'EmbeddableWidget',
     libraryExport: 'default',
     libraryTarget: 'window',
-  }
+  },
-};
+}, {
+  ...defaultConfig,
+  entry: './src/outputs/bookmarklet.js',
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bookmarklet.js',
+  },
+}];