Merge pull request #14 from NickKaramoff/feature/default-export

Export the `shareon` function
pull/16/head
Nikita Karamov 2020-07-26 14:44:10 +02:00 committed by GitHub
commit 8ccc88d99a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 166 additions and 56 deletions

View File

@ -18,8 +18,8 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
Include the link to shareon's JS and CSS in your website: Include the link to shareon's JS and CSS in your website:
```html ```html
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
``` ```
or install it via NPM use it in a JS file that you will bundle: or install it via NPM use it in a JS file that you will bundle:
@ -31,7 +31,48 @@ yarn add shareon
``` ```
```js ```js
require('shareon'); const shareon = require('shareon');
// or
import shareon from 'shareon';
```
## Initialization
By default, shareon will initialize every button after page load. It also
exports the `shareon` function, that will let you repopulate your buttons with
updated information (for example, if you changed the page title):
```js
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
```
If you want to postpone the initialization, you can import the `noinit`-version
of the package. You'll need to manually call the `shareon` function when you
want the buttons to be initialized:
```html
<!-- notice the 'noinit' section of the url for JS -->
<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/noinit/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
<script type="text/javascript">
// do something important
shareon();
</script>
```
or, if you're using Node:
```js
const shareon = require('shareon/dist/noinit/shareon');
// or
import shareon from 'shareon/dist/noinit/shareon';
// do something important
shareon();
``` ```
## Usage ## Usage

View File

@ -103,14 +103,60 @@
Include the link to shareon's JS and CSS in your website: Include the link to shareon's JS and CSS in your website:
</p> </p>
<pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" <pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt; rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" &lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;</code></pre> type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<p>or install it via NPM use it in a JS file that you will later bundle:</p> <p>or install it via NPM and use it in a JS file that you will later bundle:</p>
<pre><code>require('shareon');</code></pre> <pre><code>const shareon = require('shareon');</code></pre>
<pre><code>import 'shareon';</code></pre> <pre><code>import shareon from 'shareon';</code></pre>
</article>
<article>
<h2>
<a id="initialization" href="#initialization" aria-hidden="true"></a>
Initialization
</h2>
<p>
By default, shareon will initialize every button after page load.
It also exports the <code>shareon</code> function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
</p>
<pre><code>// shareon auto-initializes
window.title = "Cool new window title";
shareon();</code></pre>
<p>
If you want to postpone the initialization, you can import the
<code>noinit</code>-version of the package. You'll need to
manually call the <code>shareon</code> function when you want the
buttons to be initialized:
</p>
<pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script type="text/javascript"&gt;
// do something important
shareon();
&lt;/script&gt;</code></pre>
<p>
or, if you're using Node:
</p>
<pre><code>const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
shareon();</code></pre>
</article> </article>
<article> <article>
@ -225,7 +271,7 @@
</p> </p>
</footer> </footer>
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
</body> </body>
</html> </html>

View File

@ -1,6 +1,6 @@
{ {
"name": "shareon", "name": "shareon",
"version": "1.2.1", "version": "1.3.0-6",
"description": "Lightweight, stylish and ethical share buttons for popular social networks", "description": "Lightweight, stylish and ethical share buttons for popular social networks",
"license": "MIT", "license": "MIT",
"homepage": "https://shareon.js.org", "homepage": "https://shareon.js.org",

View File

@ -10,18 +10,18 @@ const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development'
const pkg = require('./package.json'); const pkg = require('./package.json');
const inputFile = './src/index.ts';
const outputDir = isDev ? './dev/' : './dist/'; const outputDir = isDev ? './dev/' : './dist/';
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`; const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
/* /**
* PLUGINS * Plugins to build the project
*
* @type {Plugin[]}
*/ */
const plugins = [
const plugins = []; typescript(),
];
plugins.push(typescript());
if (!isDev) { if (!isDev) {
plugins.push(strip({ plugins.push(strip({
@ -52,43 +52,57 @@ plugins.push(postcss({
], ],
})); }));
/* /**
* OUTPUTS * @typedef {import('rollup').OutputOptions} OutputOptions
*/ */
const output = []; /**
*
* @param {string} baseDir base directory for the output files
* @return {OutputOptions[]} array of outputs
*/
const getOutputs = (baseDir) => {
const result = [];
if (isDev) { if (isDev) {
output.push({ result.push({
name: pkg.name, name: pkg.name,
format: 'iife', format: 'iife',
file: `${outputDir}${pkg.name}.js`, file: `${baseDir}${pkg.name}.js`,
}); });
} else { } else {
output.push({ result.push({
name: pkg.name, name: pkg.name,
format: 'cjs', format: 'cjs',
file: `${outputDir}${pkg.name}.cjs`, file: `${baseDir}${pkg.name}.cjs`,
}); });
output.push({ result.push({
name: pkg.name, name: pkg.name,
format: 'esm', format: 'esm',
file: `${outputDir}${pkg.name}.mjs`, file: `${baseDir}${pkg.name}.mjs`,
}); });
output.push({ result.push({
name: pkg.name, name: pkg.name,
format: 'iife', format: 'iife',
file: `${outputDir}${pkg.name}.min.js`, file: `${baseDir}${pkg.name}.min.js`,
plugins: [terser({ output: { comments: false } })], plugins: [terser({ output: { comments: false } })],
}); });
} }
/* return result;
* EXPORT
*/
export default {
input: inputFile,
output,
plugins,
}; };
const config = [
{
input: './src/autoinit.ts',
output: getOutputs(`${outputDir}`),
plugins,
},
{
input: './src/shareon.ts',
output: getOutputs(`${outputDir}noinit/`),
plugins: plugins.slice(0, -1),
},
];
export default config;

9
src/autoinit.ts Normal file
View File

@ -0,0 +1,9 @@
import './style.scss';
import initializeShareon from './shareon';
window.onload = () => {
initializeShareon();
};
export default initializeShareon;

View File

@ -1,5 +1,3 @@
import './style.scss';
interface PublishPreset { interface PublishPreset {
url: string, url: string,
title: string, title: string,
@ -44,7 +42,7 @@ function initShareonChild(child: HTMLElement, preset: PublishPreset) {
} }
} }
window.onload = () => { const initializeShareon = () : void => {
const shareonContainers = document.getElementsByClassName('shareon'); const shareonContainers = document.getElementsByClassName('shareon');
for (let i = 0; i < shareonContainers.length; i += 1) { for (let i = 0; i < shareonContainers.length; i += 1) {
@ -70,3 +68,5 @@ window.onload = () => {
} }
} }
}; };
export default initializeShareon;