Migrate to Vite #5

Manually merged
kytta merged 8 commits from vite-build into main 5 months ago
  1. 3
      CHANGELOG.md
  2. 116
      index.html
  3. 33
      package.json
  4. 21
      postcss.config.js
  5. 91
      rollup.config.js
  6. 1
      src/index.js
  7. 24
      vite.config.js

@ -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
- 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/)
### 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>&lt;a&gt;</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>&lt;button&gt;</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>&lt;a&gt;</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>

@ -21,32 +21,32 @@
"email": "me@kytta.dev",
"url": "https://www.kytta.dev"
},
"main": "./dist/shareon.cjs",
"module": "./dist/shareon.mjs",
"unpkg": "./dist/shareon.min.js",
"main": "./dist/shareon.umd.js",
"unpkg": "./dist/shareon.iife.js",
"jsdelivr": "./dist/shareon.iife.js",
"module": "./dist/shareon.es.js",
"exports": {
"require": "./dist/shareon.cjs",
"import": "./dist/shareon.mjs"
".": {
"import": "./dist/shareon.es.js",
"require": "./dist/shareon.umd.js"
}
},
"files": [
"dist"
],
"scripts": {
"build": "rollup --config",
"build:dev": "cross-env NODE_ENV=development rollup --config",
"dev": "cross-env NODE_ENV=development rollup --config --watch",
"build": "pnpm run build:js && pnpm run build:css",
"build:js": "vite build",
"build:css": "postcss src/shareon.css -o dist/shareon.min.css --map",
"dev": "vite",
"lint": "prettier --check . && eslint src/*.js",
"size": "size-limit",
"test": "pnpm run lint && pnpm run build && pnpm run size",
"postversion": "pnpm run build"
},
"devDependencies": {
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-strip": "^2.1.0",
"@size-limit/preset-small-lib": "^7.0.5",
"autoprefixer": "^10.4.2",
"browserslist": "^4.19.1",
"cross-env": "^7.0.3",
"cssnano": "^5.0.16",
"eslint": "^8.8.0",
"eslint-config-airbnb-base": "^15.0.0",
@ -55,12 +55,11 @@
"postcss": "^8.4.6",
"postcss-banner": "^4.0.1",
"postcss-calc": "^8.2.3",
"postcss-cli": "^9.1.0",
"postcss-css-variables": "^0.18.0",
"prettier": "^2.5.1",
"rollup": "^2.67.0",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"size-limit": "^7.0.5"
"size-limit": "^7.0.5",
"vite": "^2.8.0"
},
"size-limit": [
{
@ -69,7 +68,7 @@
},
{
"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 "./shareon.css";
// TODO: update README
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…
Cancel
Save