Merge branch 'vite-build'

https://codeberg.org/kytta/shareon/pulls/5
2022-02-10 21:53:56 +01:00 · 2022-02-10 21:53:56 +01:00 · 9982e074b1
parent 6816879bbc c2e1ee5bd9
commit 9982e074b1
7 changed files with 180 additions and 109 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -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
--- a/index.html
+++ b/index.html
@ -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>
--- a/package.json
+++ b/package.json
@ -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"
    }
  ]
 }
--- a/postcss.config.js
+++ b/postcss.config.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,
+    }),
+  ],
+};
--- a/rollup.config.js
+++ b/rollup.config.js
@ -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),
-};
--- a/src/index.js
+++ b/src/index.js
@ -1,5 +1,4 @@
 import initializeShareon from "./shareon";
-import "./shareon.css";

 // TODO: update README
 const s = document.currentScript;
--- a/vite.config.js
+++ b/vite.config.js
@ -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} */`,
+      },
+    },
+  },
+});