Nikita Karamov
commit
9982e074b1
|
|
@ -23,6 +23,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
|
||||||
- **BREAKING:** default version of the package doesn't auto-initialize buttons
|
- **BREAKING:** default version of the package doesn't auto-initialize buttons
|
||||||
- remove mixins, defining the code/styles directly in the files
|
- remove mixins, defining the code/styles directly in the files
|
||||||
|
- use [Vite](https://vitejs.dev/) for building, reducing the devDependencies
|
||||||
|
tree and build times drastically
|
||||||
|
- **BREAKING:** newly built files offer worse browser support
|
||||||
- change code style to [Prettier](https://prettier.io/)
|
- change code style to [Prettier](https://prettier.io/)
|
||||||
|
|
||||||
### Removed
|
### Removed
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Shareon Demo Page</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shareon.specimen {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./src/shareon.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h1>Shareon Demo Page</h1>
|
||||||
|
<section>
|
||||||
|
<h2><code><a></code></h2>
|
||||||
|
<div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="linkedin"></a>
|
||||||
|
<a class="mastodon"></a>
|
||||||
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
<a class="odnoklassniki"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="pocket"></a>
|
||||||
|
<a class="reddit"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="viber"></a>
|
||||||
|
<a class="vkontakte"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2><code><button></code></h2>
|
||||||
|
<div class="shareon">
|
||||||
|
<button class="facebook"></button>
|
||||||
|
<button class="linkedin"></button>
|
||||||
|
<button class="mastodon"></button>
|
||||||
|
<button class="messenger" data-fb-app-id="3619024578167617"></button>
|
||||||
|
<button class="odnoklassniki"></button>
|
||||||
|
<button class="pinterest"></button>
|
||||||
|
<button class="pocket"></button>
|
||||||
|
<button class="reddit"></button>
|
||||||
|
<button class="telegram"></button>
|
||||||
|
<button class="twitter"></button>
|
||||||
|
<button class="viber"></button>
|
||||||
|
<button class="vkontakte"></button>
|
||||||
|
<button class="whatsapp"></button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2><code><a></code> with custom params</h2>
|
||||||
|
<div
|
||||||
|
class="shareon"
|
||||||
|
data-title="shareon demo page test"
|
||||||
|
data-url="https://demo.shareon.js.org"
|
||||||
|
data-text="hey check this out"
|
||||||
|
>
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="linkedin"></a>
|
||||||
|
<a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a>
|
||||||
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
<a class="odnoklassniki"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="pocket"></a>
|
||||||
|
<a class="reddit"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter" data-via="nickkaramoff"></a>
|
||||||
|
<a class="viber"></a>
|
||||||
|
<a class="vkontakte"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Specimen</h2>
|
||||||
|
<div class="shareon specimen">
|
||||||
|
<a class="facebook">Share</a>
|
||||||
|
<a class="linkedin"></a>
|
||||||
|
<a class="mastodon">Toot</a>
|
||||||
|
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||||||
|
<a class="odnoklassniki"></a>
|
||||||
|
<a class="pinterest">Pin</a>
|
||||||
|
<br />
|
||||||
|
<a class="pocket"></a>
|
||||||
|
<a class="reddit"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="viber"></a>
|
||||||
|
<a class="vkontakte">Отправить</a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import initializeShareon from "./src/shareon.js";
|
||||||
|
initializeShareon();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
package.json
33
package.json
|
|
@ -21,32 +21,32 @@
|
||||||
"email": "me@kytta.dev",
|
"email": "me@kytta.dev",
|
||||||
"url": "https://www.kytta.dev"
|
"url": "https://www.kytta.dev"
|
||||||
},
|
},
|
||||||
"main": "./dist/shareon.cjs",
|
"main": "./dist/shareon.umd.js",
|
||||||
"module": "./dist/shareon.mjs",
|
"unpkg": "./dist/shareon.iife.js",
|
||||||
"unpkg": "./dist/shareon.min.js",
|
"jsdelivr": "./dist/shareon.iife.js",
|
||||||
|
"module": "./dist/shareon.es.js",
|
||||||
"exports": {
|
"exports": {
|
||||||
"require": "./dist/shareon.cjs",
|
".": {
|
||||||
"import": "./dist/shareon.mjs"
|
"import": "./dist/shareon.es.js",
|
||||||
|
"require": "./dist/shareon.umd.js"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"dist"
|
"dist"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "rollup --config",
|
"build": "pnpm run build:js && pnpm run build:css",
|
||||||
"build:dev": "cross-env NODE_ENV=development rollup --config",
|
"build:js": "vite build",
|
||||||
"dev": "cross-env NODE_ENV=development rollup --config --watch",
|
"build:css": "postcss src/shareon.css -o dist/shareon.min.css --map",
|
||||||
|
"dev": "vite",
|
||||||
"lint": "prettier --check . && eslint src/*.js",
|
"lint": "prettier --check . && eslint src/*.js",
|
||||||
"size": "size-limit",
|
"size": "size-limit",
|
||||||
"test": "pnpm run lint && pnpm run build && pnpm run size",
|
"test": "pnpm run lint && pnpm run build && pnpm run size",
|
||||||
"postversion": "pnpm run build"
|
"postversion": "pnpm run build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-buble": "^0.21.3",
|
|
||||||
"@rollup/plugin-strip": "^2.1.0",
|
|
||||||
"@size-limit/preset-small-lib": "^7.0.5",
|
"@size-limit/preset-small-lib": "^7.0.5",
|
||||||
"autoprefixer": "^10.4.2",
|
"autoprefixer": "^10.4.2",
|
||||||
"browserslist": "^4.19.1",
|
|
||||||
"cross-env": "^7.0.3",
|
|
||||||
"cssnano": "^5.0.16",
|
"cssnano": "^5.0.16",
|
||||||
"eslint": "^8.8.0",
|
"eslint": "^8.8.0",
|
||||||
"eslint-config-airbnb-base": "^15.0.0",
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
|
@ -55,12 +55,11 @@
|
||||||
"postcss": "^8.4.6",
|
"postcss": "^8.4.6",
|
||||||
"postcss-banner": "^4.0.1",
|
"postcss-banner": "^4.0.1",
|
||||||
"postcss-calc": "^8.2.3",
|
"postcss-calc": "^8.2.3",
|
||||||
|
"postcss-cli": "^9.1.0",
|
||||||
"postcss-css-variables": "^0.18.0",
|
"postcss-css-variables": "^0.18.0",
|
||||||
"prettier": "^2.5.1",
|
"prettier": "^2.5.1",
|
||||||
"rollup": "^2.67.0",
|
"size-limit": "^7.0.5",
|
||||||
"rollup-plugin-postcss": "^4.0.2",
|
"vite": "^2.8.0"
|
||||||
"rollup-plugin-terser": "^7.0.2",
|
|
||||||
"size-limit": "^7.0.5"
|
|
||||||
},
|
},
|
||||||
"size-limit": [
|
"size-limit": [
|
||||||
{
|
{
|
||||||
|
|
@ -69,7 +68,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"limit": "1 KB",
|
"limit": "1 KB",
|
||||||
"path": "./dist/shareon.mjs"
|
"path": "./dist/shareon.es.js"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
const pkg = require("./package.json");
|
||||||
|
const bannerText = `${pkg.name} v${pkg.version}`;
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
map: {
|
||||||
|
inline: false,
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require("postcss-css-variables"),
|
||||||
|
require("postcss-calc"),
|
||||||
|
require("cssnano")({
|
||||||
|
preset: "default",
|
||||||
|
}),
|
||||||
|
require("autoprefixer"),
|
||||||
|
require("postcss-banner")({
|
||||||
|
banner: bannerText,
|
||||||
|
important: true,
|
||||||
|
inline: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
import { join, resolve } from "path";
|
|
||||||
|
|
||||||
import buble from "@rollup/plugin-buble";
|
|
||||||
import strip from "@rollup/plugin-strip";
|
|
||||||
import postcss from "rollup-plugin-postcss";
|
|
||||||
import { terser } from "rollup-plugin-terser";
|
|
||||||
|
|
||||||
const autoprefixer = require("autoprefixer");
|
|
||||||
const banner = require("postcss-banner");
|
|
||||||
const calc = require("postcss-calc");
|
|
||||||
const cssnano = require("cssnano");
|
|
||||||
const cssVariables = require("postcss-css-variables");
|
|
||||||
|
|
||||||
const pkg = require("./package.json");
|
|
||||||
|
|
||||||
const isDev =
|
|
||||||
process.env.ROLLUP_WATCH || process.env.NODE_ENV === "development";
|
|
||||||
const outputDir = resolve(".", "dist");
|
|
||||||
const bannerText = `${pkg.name} v${pkg.version}`;
|
|
||||||
|
|
||||||
const postcssPlugins = [cssVariables, calc];
|
|
||||||
|
|
||||||
if (!isDev) {
|
|
||||||
postcssPlugins.push(
|
|
||||||
cssnano({
|
|
||||||
preset: "default",
|
|
||||||
}),
|
|
||||||
autoprefixer(),
|
|
||||||
banner({
|
|
||||||
banner: bannerText,
|
|
||||||
important: true,
|
|
||||||
inline: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getPlugins = (css) => [
|
|
||||||
css &&
|
|
||||||
postcss({
|
|
||||||
extract: resolve(join(outputDir, "shareon.min.css")),
|
|
||||||
plugins: postcssPlugins,
|
|
||||||
}),
|
|
||||||
!isDev &&
|
|
||||||
strip({
|
|
||||||
debugger: true,
|
|
||||||
include: ["**/*.js"],
|
|
||||||
functions: ["console.log", "console.debug", "assert.*"],
|
|
||||||
sourceMap: false,
|
|
||||||
}),
|
|
||||||
!isDev &&
|
|
||||||
buble({
|
|
||||||
transforms: {
|
|
||||||
modules: false,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
const getOutput = (baseDir) => {
|
|
||||||
const defaultParameters = {
|
|
||||||
name: pkg.name,
|
|
||||||
exports: "default",
|
|
||||||
};
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
...defaultParameters,
|
|
||||||
format: "iife",
|
|
||||||
file: join(baseDir, `${pkg.name}${isDev ? "" : ".min"}.js`),
|
|
||||||
plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })],
|
|
||||||
banner: `/*! ${bannerText} */`,
|
|
||||||
},
|
|
||||||
!isDev && {
|
|
||||||
...defaultParameters,
|
|
||||||
format: "cjs",
|
|
||||||
file: join(baseDir, `${pkg.name}.cjs`),
|
|
||||||
banner: `/*! ${bannerText} */`,
|
|
||||||
},
|
|
||||||
!isDev && {
|
|
||||||
...defaultParameters,
|
|
||||||
format: "esm",
|
|
||||||
file: join(baseDir, `${pkg.name}.mjs`),
|
|
||||||
banner: `/*! ${bannerText} */`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
input: join(__dirname, "src", "index.js"),
|
|
||||||
output: getOutput(outputDir),
|
|
||||||
plugins: getPlugins(true),
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import initializeShareon from "./shareon";
|
import initializeShareon from "./shareon";
|
||||||
import "./shareon.css";
|
|
||||||
|
|
||||||
// TODO: update README
|
// TODO: update README
|
||||||
const s = document.currentScript;
|
const s = document.currentScript;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import * as path from "path";
|
||||||
|
import pkg from "./package.json";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
esbuild: {
|
||||||
|
minify: true,
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
target: "esnext",
|
||||||
|
minify: "terser",
|
||||||
|
lib: {
|
||||||
|
entry: path.resolve("./src/index.js"),
|
||||||
|
name: "Shareon",
|
||||||
|
formats: ["es", "umd", "iife"],
|
||||||
|
},
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
banner: `/*! ${pkg.name} v${pkg.version} */`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue