From 799221f4114bf3fa8782613c2e0b01daf92cf1f2 Mon Sep 17 00:00:00 2001 From: Benjamin Boudreau Date: Sun, 3 Jun 2018 16:01:32 -0400 Subject: [PATCH] adding bookmarklet --- package.json | 4 +-- public/index.html | 9 ++++++- .../__snapshots__/widget.test.js.snap | 0 src/{ => components}/widget.js | 0 src/{ => components}/widget.scss | 0 src/{ => components}/widget.test.js | 2 +- src/outputs/bookmarklet.js | 12 +++++++++ src/outputs/bookmarklet.test.js | 15 +++++++++++ .../embeddable-widget.js} | 2 +- .../embeddable-widget.test.js} | 4 +-- webpack.config.js | 27 +++++++++++++------ 11 files changed, 60 insertions(+), 15 deletions(-) rename src/{ => components}/__snapshots__/widget.test.js.snap (100%) rename src/{ => components}/widget.js (100%) rename src/{ => components}/widget.scss (100%) rename src/{ => components}/widget.test.js (94%) create mode 100644 src/outputs/bookmarklet.js create mode 100644 src/outputs/bookmarklet.test.js rename src/{index.js => outputs/embeddable-widget.js} (95%) rename src/{index.test.js => outputs/embeddable-widget.test.js} (91%) diff --git a/package.json b/package.json index 31148f6..b5c2f0c 100644 --- a/package.json +++ b/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": [ diff --git a/public/index.html b/public/index.html index 69dfa14..dee352c 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,14 @@ diff --git a/src/__snapshots__/widget.test.js.snap b/src/components/__snapshots__/widget.test.js.snap similarity index 100% rename from src/__snapshots__/widget.test.js.snap rename to src/components/__snapshots__/widget.test.js.snap diff --git a/src/widget.js b/src/components/widget.js similarity index 100% rename from src/widget.js rename to src/components/widget.js diff --git a/src/widget.scss b/src/components/widget.scss similarity index 100% rename from src/widget.scss rename to src/components/widget.scss diff --git a/src/widget.test.js b/src/components/widget.test.js similarity index 94% rename from src/widget.test.js rename to src/components/widget.test.js index 2ba70e5..f5075c8 100644 --- a/src/widget.test.js +++ b/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('', () => { test('open/close', async () => { diff --git a/src/outputs/bookmarklet.js b/src/outputs/bookmarklet.js new file mode 100644 index 0000000..a1ebb41 --- /dev/null +++ b/src/outputs/bookmarklet.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Widget from '../components/widget'; + + const component = ; + const el = document.createElement('div'); + document.body.appendChild(el); + console.log('running bookmarklet'); + ReactDOM.render( + component, + el, + ); diff --git a/src/outputs/bookmarklet.test.js b/src/outputs/bookmarklet.test.js new file mode 100644 index 0000000..9c3d179 --- /dev/null +++ b/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); + }); +}); diff --git a/src/index.js b/src/outputs/embeddable-widget.js similarity index 95% rename from src/index.js rename to src/outputs/embeddable-widget.js index f66e660..91b00b3 100644 --- a/src/index.js +++ b/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; diff --git a/src/index.test.js b/src/outputs/embeddable-widget.test.js similarity index 91% rename from src/index.test.js rename to src/outputs/embeddable-widget.test.js index dfb4757..d2a4db8 100644 --- a/src/index.test.js +++ b/src/outputs/embeddable-widget.test.js @@ -1,5 +1,5 @@ -import EmbeddableWidget from './index'; -import { waitForSelection } from './test-helpers'; +import EmbeddableWidget from './embeddable-widget'; +import { waitForSelection } from '../test-helpers'; describe('EmbeddableWidget', () => { afterEach(() => { diff --git a/webpack.config.js b/webpack.config.js index ab62c32..72e5f91 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,8 +2,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const devMode = process.env.NODE_ENV !== 'production'; -module.exports = { - mode: 'development', +const defaultConfig = { + 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', + }, +}];