From 1130381779746316bb8c9d9caab41ed2753b1270 Mon Sep 17 00:00:00 2001 From: Denis Davidyuk Date: Sun, 29 Nov 2020 05:53:05 +0300 Subject: [PATCH 1/5] Create examples folder --- README.md | 4 ++-- index.html => examples/index.html | 2 +- examples/superhero-utils | 1 + package.json | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) rename index.html => examples/index.html (99%) create mode 120000 examples/superhero-utils diff --git a/README.md b/README.md index 6ae3130f..d9046fbf 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ Option | Description ``` Select the button style you like the most and adopt this code to your website's HTML. -Additional examples can be found [here](./index.html). +Additional examples can be found [here](examples/index.html). #### Screenshots @@ -73,7 +73,7 @@ Option | Description superheroUtils.ensurePaid({ url: 'https://example.com' }); ``` -Additional examples can be found [here](./index.html). +Additional examples can be found [here](examples/index.html). #### Screenshots diff --git a/index.html b/examples/index.html similarity index 99% rename from index.html rename to examples/index.html index f4089142..65259ef2 100644 --- a/index.html +++ b/examples/index.html @@ -22,7 +22,7 @@

Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.

Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.

- + + + + + + diff --git a/examples/react-webpack/src/App.js b/examples/react-webpack/src/App.js index 0caacf84..f3e0f817 100644 --- a/examples/react-webpack/src/App.js +++ b/examples/react-webpack/src/App.js @@ -1,7 +1,11 @@ +import './superhero-utils/index.css'; +import { Button as SuperheroButton } from './superhero-utils/react-without-styles.js'; + function App() { return (
- Example payload +

superhero-utils example using react, webpack

+
); } diff --git a/examples/react-webpack/src/superhero-utils b/examples/react-webpack/src/superhero-utils new file mode 120000 index 00000000..35f47bf7 --- /dev/null +++ b/examples/react-webpack/src/superhero-utils @@ -0,0 +1 @@ +../../../dist \ No newline at end of file diff --git a/examples/vue-unpkg.html b/examples/vue-unpkg.html new file mode 100644 index 00000000..1070d3d0 --- /dev/null +++ b/examples/vue-unpkg.html @@ -0,0 +1,22 @@ +
+ + + + + diff --git a/examples/vue-webpack/src/App.vue b/examples/vue-webpack/src/App.vue index 907c1eb0..76143a23 100644 --- a/examples/vue-webpack/src/App.vue +++ b/examples/vue-webpack/src/App.vue @@ -1,5 +1,17 @@ + + diff --git a/package.json b/package.json index ed64ee72..31f9fab8 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,10 @@ "webpack": "^5.9.0", "webpack-cli": "^4.2.0" }, + "optionalDependencies": { + "prop-types": "^15.7.2", + "react": "^17.0.1" + }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "npm run build && serve examples", diff --git a/src/button/index.js b/src/button/index.js index 071f974e..b3f8765e 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -20,7 +20,7 @@ const getTipAmount = async (url) => { return tips.find(u => u.url === url)?.total_amount_ae || 0; }; -const createButtonInstance = ({ size = 'icon', url = window.location.href, account, ...options }) => { +export const createButtonByDiv = (divElement, { size = 'icon', url = window.location.href, account, ...options }) => { // data-account attribute is needed claiming const genLink = (text = '') => ` { - const tipsEl = button.querySelector('.tips'); + const tipsEl = divElement.querySelector('.tips'); if (tipsEl) tipsEl.innerHTML = await getTipAmount(url); })(); - return button; + return divElement; }; export default (selectorOrElement, options = {}) => { @@ -63,7 +62,7 @@ export default (selectorOrElement, options = {}) => { : selectorOrElement; const handleElement = element => { - const instance = createButtonInstance(options); + const instance = createButtonByDiv(document.createElement('div'), options); element.replaceWith(instance); return instance; }; diff --git a/src/index.js b/src/index.js index 1e24a7a8..db690292 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,3 @@ import './global.scss'; -export { default as createButton } from './button'; +export { default as createButton, createButtonByDiv } from './button'; export { default as ensurePaid } from './paywall'; diff --git a/src/react.js b/src/react.js new file mode 100644 index 00000000..aa60466e --- /dev/null +++ b/src/react.js @@ -0,0 +1,23 @@ +export * from './index'; +import React from 'react'; +import PropTypes from 'prop-types'; +import { createButtonByDiv } from './index'; + +export class Button extends React.Component { + constructor(props) { + super(props); + this.button = React.createRef(); + this.componentDidMount = this.componentDidUpdate = () => + createButtonByDiv(this.button.current, this.props); + } + + render() { + return React.createElement('div', { ref: this.button }); + } +} + +Button.propTypes = { + size: PropTypes.oneOf(['icon', 'small', 'medium', 'large']), + url: PropTypes.string, + account: PropTypes.string, +}; diff --git a/src/vue.js b/src/vue.js new file mode 100644 index 00000000..edc0ef01 --- /dev/null +++ b/src/vue.js @@ -0,0 +1,23 @@ +export * from './index'; +import { createButtonByDiv } from './index'; + +export const Button = { + props: { + size: { + validator: value => ['icon', 'small', 'medium', 'large'].includes(value), + default: undefined, + }, + url: { type: String, default: undefined }, + account: { type: String, default: undefined }, + }, + mounted() { + this.$watch( + ({ size, url, account }) => ({ size, url, account }), + (props) => createButtonByDiv(this.$refs.button, props), + { immediate: true }, + ); + }, + render(createElement) { + return createElement('div', { ref: 'button' }); + }, +}; diff --git a/webpack.config.js b/webpack.config.js index 59debe63..909ab33a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,14 +2,29 @@ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const genConfig = (filename, { inlineCss } = {}) => ({ +const genConfig = (name, { inlineCss } = {}) => ({ output: { path: path.resolve(__dirname, 'dist'), - filename, + filename: `${name}${inlineCss ? '' : '-without-styles'}.js`, library: 'superheroUtils', libraryTarget: 'umd' }, + entry: path.resolve(__dirname, 'src', `${name}.js`), target: 'web', + externals: { + 'prop-types': { + commonjs: 'prop-types', + commonjs2: 'prop-types', + amd: 'prop-types', + root: 'PropTypes', + }, + react: { + commonjs: 'react', + commonjs2: 'react', + amd: 'react', + root: 'React', + }, + }, module: { rules: [ { @@ -38,6 +53,8 @@ const genConfig = (filename, { inlineCss } = {}) => ({ }); module.exports = [ - genConfig('index-without-styles.js'), - genConfig('index.js', { inlineCss: true }), + genConfig('index'), + genConfig('index', { inlineCss: true }), + genConfig('react'), + genConfig('vue'), ]; From a2aa92578e3683c92ae0c45312405e66a7bda2eb Mon Sep 17 00:00:00 2001 From: Denis Davidyuk Date: Wed, 2 Dec 2020 11:10:55 +0300 Subject: [PATCH 4/5] Build examples on start --- README.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1e6799d4..ce0a83a6 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,8 @@ You need to install [Node.js](https://nodejs.org/) firstly. ```sh $ npm install +$ npm install --prefix examples/react-webpack +$ npm install --prefix examples/vue-webpack $ npm start ``` diff --git a/package.json b/package.json index 31f9fab8..1ca91c23 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "npm run build && serve examples", + "start": "npm run build && npm run build:examples && serve examples", "build": "webpack", "build:examples": "npm run --prefix examples/react-webpack build && npm run --prefix examples/vue-webpack build", "watch": "webpack --watch" From 21a99f61737dfb24d87d03cc1d0eba48bfb00f13 Mon Sep 17 00:00:00 2001 From: Denis Davidyuk Date: Wed, 2 Dec 2020 13:18:55 +0300 Subject: [PATCH 5/5] Fix grammar in README.md Co-authored-by: Yury Shapkarin --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ce0a83a6..8abcc3b4 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ You can import and process styles manually by importing `dist/index.css` and all, and write your own instead. ### React and Vue versions -By default `dist/index.js` is imported, instead of this, you can import a specific +By default `dist/index.js` is imported, instead of it, you can import a specific version for React or Vue by importing `dist/react-without-styles.js` or `dist/vue-without-styles.js` accordingly. The framework-specific version contains all features available in the default one plus specific for particular framework wrappers.