forked from Github/ocrcc-chatbox
adding bookmarklet
This commit is contained in:
parent
5a2184062e
commit
799221f411
@ -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": [
|
||||
|
@ -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>
|
||||
|
@ -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 () => {
|
12
src/outputs/bookmarklet.js
Normal file
12
src/outputs/bookmarklet.js
Normal 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,
|
||||
);
|
15
src/outputs/bookmarklet.test.js
Normal file
15
src/outputs/bookmarklet.test.js
Normal 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);
|
||||
});
|
||||
});
|
@ -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;
|
@ -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(() => {
|
@ -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',
|
||||
},
|
||||
}];
|
||||
|
Loading…
Reference in New Issue
Block a user