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",
|
"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": [
|
||||||
|
@ -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>
|
||||||
|
@ -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 () => {
|
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 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;
|
@ -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(() => {
|
@ -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',
|
||||||
|
},
|
||||||
|
}];
|
||||||
|
Loading…
Reference in New Issue
Block a user