adding bookmarklet

This commit is contained in:
Benjamin Boudreau 2018-06-03 16:01:32 -04:00
parent 5a2184062e
commit 799221f411
11 changed files with 60 additions and 15 deletions

View File

@ -4,11 +4,11 @@
"description": "building an embeddable js widget with react", "description": "building an embeddable js widget with react",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "webpack-cli", "build": "webpack-cli --mode production",
"start": "webpack-serve --config ./webpack.config.js --mode development --open", "start": "webpack-serve --config ./webpack.config.js --mode development --open",
"test": "jest", "test": "jest",
"test-update-snapshots": "jest --updateSnapshot", "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": { "babel": {
"presets": [ "presets": [

View File

@ -8,7 +8,14 @@
<ul> <ul>
<li><a href="./blank.html">Widget on a blank page</a></li> <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="./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> </ul>
</body> </body>
</html> </html>

View File

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

View File

@ -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,
);

View File

@ -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);
});
});

View File

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

View File

@ -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', () => { describe('EmbeddableWidget', () => {
afterEach(() => { afterEach(() => {

View File

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