tablewrap 1.0.5 → 1.1.3

package/.env.example

@@ -1 +1 @@
-DOMAIN=http://vielhuber.local.vielhuber.de
+DOMAIN=http://vielhuber.vielhuber.dev

package/.github/workflows/ci.yml

@@ -0,0 +1,41 @@
+name: CI
+
+env:
+    CI: true
+
+on:
+    push:
+        tags:
+            - 'v*'
+            - '[0-9]*'
+
+jobs:
+    publish:
+        runs-on: ubuntu-latest
+
+        permissions:
+            contents: read
+            id-token: write
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v6
+
+            - name: Node
+              uses: actions/setup-node@v6
+              with:
+                  node-version-file: '.nvmrc'
+                  registry-url: 'https://registry.npmjs.org'
+                  package-manager-cache: false
+
+            - name: NPM
+              run: npm install
+
+            - name: Verify version
+              run: test "$(node -p "require('./package.json').version")" = "${GITHUB_REF_NAME#v}"
+
+            - name: Build
+              run: npm run prod --if-present
+
+            - name: Publish
+              run: npm publish

package/.nvmrc

@@ -0,0 +1 @@
+lts/*

package/README.md

@@ -1,36 +1,38 @@
-# 🖇 tablewrap 🖇
-
-tablewrap is a small javascript helper that wraps your html tables on small viewports column-wise.
-
-![demo](https://raw.githubusercontent.com/vielhuber/tablewrap/master/tablewrap.gif)
-
-## features
-
--   no modification of existing css styles needed
--   no extra markup needed
--   performant and lightweight
--   comes as an es6 module
--   cross-browser-support (ie11)
--   support for preserving the first column
-
-## installation
-
-```bash
-npm install tablewrap
-```
-
-## usage
-
-```js
-import Tablewrap from 'tablewrap';
-
-document.addEventListener('DOMContentLoaded', () => {
-    let tablewrap = new Tablewrap({
-        selector: 'table',
-        breakpoint: 700,
-        preserveFirstCol: true
-    });
-
-    tablewrap.destroy();
-});
-```
+[![build status](https://github.com/vielhuber/tablewrap/actions/workflows/ci.yml/badge.svg)](https://github.com/vielhuber/tablewrap/actions)
+
+# 🖇 tablewrap 🖇
+
+tablewrap is a small javascript helper that wraps your html tables on small viewports column-wise.
+
+![demo](https://raw.githubusercontent.com/vielhuber/tablewrap/main/tablewrap.gif)
+
+## features
+
+-   no modification of existing css styles needed
+-   no extra markup needed
+-   performant and lightweight
+-   comes as an es6 module
+-   cross-browser-support
+-   support for preserving the first column
+
+## installation
+
+```bash
+npm install tablewrap
+```
+
+## usage
+
+```js
+import Tablewrap from 'tablewrap';
+
+document.addEventListener('DOMContentLoaded', () => {
+    let tablewrap = new Tablewrap({
+        selector: 'table',
+        breakpoint: 700,
+        preserveFirstCol: true
+    });
+
+    tablewrap.destroy();
+});
+```

package/_build/_js/demo.js

@@ -1,18 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _tablewrap = _interopRequireDefault(require("./tablewrap"));
-
-document.addEventListener('DOMContentLoaded', function () {
-  var t1 = new _tablewrap.default({
-    selector: '.basic',
-    breakpoint: 500
-  });
-  var t2 = new _tablewrap.default({
-    selector: '.advanced',
-    breakpoint: 400,
-    preserveFirstCol: true
-  }); //t1.destroy();
-  //t2.destroy();
-});
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tablewrap = require("./tablewrap.js");
+//#region _js/demo.js
+document.addEventListener("DOMContentLoaded", () => {
+	new require_tablewrap.default({
+		selector: ".basic",
+		breakpoint: 500
+	});
+	new require_tablewrap.default({
+		selector: ".advanced",
+		breakpoint: 400,
+		preserveFirstCol: true
+	});
+});
+//#endregion

package/_build/_js/tablewrap.js

@@ -1,158 +1,82 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
 });
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-require("mdn-polyfills/Array.prototype.forEach");
-
-require("mdn-polyfills/NodeList.prototype.forEach");
-
-require("mdn-polyfills/Node.prototype.remove");
-
-require("mdn-polyfills/Node.prototype.after");
-
-var Tablewrap =
-/*#__PURE__*/
-function () {
-  function Tablewrap(args) {
-    (0, _classCallCheck2.default)(this, Tablewrap);
-    (0, _defineProperty2.default)(this, "args", {});
-    (0, _defineProperty2.default)(this, "tables", []);
-    (0, _defineProperty2.default)(this, "mediaQuery", null);
-    (0, _defineProperty2.default)(this, "mediaQueryBind", null);
-    this.args = args;
-    this.buildMobileDom();
-    this.addResizeListeners();
-  }
-
-  (0, _createClass2.default)(Tablewrap, [{
-    key: "buildMobileDom",
-    value: function buildMobileDom() {
-      var _this = this;
-
-      if (document.querySelector(this.args.selector) === null) {
-        return;
-      }
-
-      document.querySelectorAll(this.args.selector).forEach(function (el) {
-        var cols = el.querySelector('td').parentNode.children.length;
-        var mobileTables = [];
-
-        var _loop = function _loop(col) {
-          if ('preserveFirstCol' in _this.args && _this.args.preserveFirstCol === true && col === 1) {
-            return "continue";
-          }
-
-          var newDiv = el.cloneNode(true);
-          var toRemove = [];
-          newDiv.querySelectorAll('td').forEach(function (el2) {
-            if ('preserveFirstCol' in _this.args && _this.args.preserveFirstCol === true && _this.prevAll(el2).length !== 0 && _this.prevAll(el2).length + 1 !== col || !('preserveFirstCol' in _this.args && _this.args.preserveFirstCol === true) && _this.prevAll(el2).length + 1 !== col) {
-              toRemove.push(el2);
-            }
-          });
-          toRemove.forEach(function (toRemove__value) {
-            toRemove__value.remove();
-          });
-          mobileTables.push(newDiv);
-        };
-
-        for (var col = 1; col <= cols; col++) {
-          var _ret = _loop(col);
-
-          if (_ret === "continue") continue;
-        }
-
-        mobileTables = mobileTables.reverse();
-
-        _this.tables.push({
-          desktop: el,
-          mobile: mobileTables
-        });
-      });
-    }
-  }, {
-    key: "addResizeListeners",
-    value: function addResizeListeners() {
-      this.mediaQuery = window.matchMedia('(max-width: ' + this.args.breakpoint + 'px)');
-      this.mediaQueryBind = this.callOnResize.bind(this);
-      this.mediaQuery.addListener(this.mediaQueryBind);
-      this.callOnResize(this.mediaQuery);
-    }
-  }, {
-    key: "callOnResize",
-    value: function callOnResize(mediaQuery) {
-      if (mediaQuery.matches) {
-        this.insertMobileVersion();
-      } else {
-        this.insertDesktopVersion();
-      }
-    }
-  }, {
-    key: "insertMobileVersion",
-    value: function insertMobileVersion() {
-      this.tables.forEach(function (tables__value) {
-        if (tables__value.desktop.parentNode === null) {
-          return;
-        }
-
-        tables__value.mobile.forEach(function (mobile__value) {
-          tables__value.desktop.after(mobile__value);
-        });
-        tables__value.desktop.remove();
-      });
-    }
-  }, {
-    key: "insertDesktopVersion",
-    value: function insertDesktopVersion() {
-      this.tables.forEach(function (tables__value) {
-        if (tables__value.desktop.parentNode !== null) {
-          return;
-        }
-
-        tables__value.mobile.forEach(function (mobile__value, mobile__key) {
-          if (mobile__key === 0) {
-            mobile__value.after(tables__value.desktop);
-          }
-
-          mobile__value.remove();
-        });
-      });
-    }
-  }, {
-    key: "prevAll",
-    value: function prevAll(elem, filter) {
-      var sibs = [];
-
-      while (elem = elem.previousSibling) {
-        if (elem.nodeType === 3) {
-          continue;
-        }
-
-        if (!filter || filter(elem)) {
-          sibs.push(elem);
-        }
-      }
-
-      return sibs;
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this.insertDesktopVersion();
-      this.mediaQuery.removeListener(this.mediaQueryBind);
-    }
-  }]);
-  return Tablewrap;
-}();
-
-exports.default = Tablewrap;
+//#region _js/tablewrap.js
+var Tablewrap = class {
+	args = {};
+	tables = [];
+	mediaQuery = null;
+	mediaQueryBind = null;
+	constructor(args) {
+		this.args = args;
+		this.buildMobileDom();
+		this.addResizeListeners();
+	}
+	buildMobileDom() {
+		if (document.querySelector(this.args.selector) === null) return;
+		document.querySelectorAll(this.args.selector).forEach((el) => {
+			let cols = el.querySelector("td").parentNode.children.length;
+			let mobileTables = [];
+			for (let col = 1; col <= cols; col++) {
+				if ("preserveFirstCol" in this.args && this.args.preserveFirstCol === true && col === 1) continue;
+				let newDiv = el.cloneNode(true);
+				let toRemove = [];
+				newDiv.querySelectorAll("td").forEach((el2) => {
+					if ("preserveFirstCol" in this.args && this.args.preserveFirstCol === true && this.prevAll(el2).length !== 0 && this.prevAll(el2).length + 1 !== col || !("preserveFirstCol" in this.args && this.args.preserveFirstCol === true) && this.prevAll(el2).length + 1 !== col) toRemove.push(el2);
+				});
+				toRemove.forEach((toRemove__value) => {
+					toRemove__value.remove();
+				});
+				mobileTables.push(newDiv);
+			}
+			mobileTables = mobileTables.reverse();
+			this.tables.push({
+				desktop: el,
+				mobile: mobileTables
+			});
+		});
+	}
+	addResizeListeners() {
+		this.mediaQuery = window.matchMedia("(max-width: " + this.args.breakpoint + "px)");
+		this.mediaQueryBind = this.callOnResize.bind(this);
+		this.mediaQuery.addListener(this.mediaQueryBind);
+		this.callOnResize(this.mediaQuery);
+	}
+	callOnResize(mediaQuery) {
+		if (mediaQuery.matches) this.insertMobileVersion();
+		else this.insertDesktopVersion();
+	}
+	insertMobileVersion() {
+		this.tables.forEach((tables__value) => {
+			if (tables__value.desktop.parentNode === null) return;
+			tables__value.mobile.forEach((mobile__value) => {
+				tables__value.desktop.after(mobile__value);
+			});
+			tables__value.desktop.remove();
+		});
+	}
+	insertDesktopVersion() {
+		this.tables.forEach((tables__value) => {
+			if (tables__value.desktop.parentNode !== null) return;
+			tables__value.mobile.forEach((mobile__value, mobile__key) => {
+				if (mobile__key === 0) mobile__value.after(tables__value.desktop);
+				mobile__value.remove();
+			});
+		});
+	}
+	prevAll(elem, filter) {
+		let sibs = [];
+		while (elem = elem.previousSibling) {
+			if (elem.nodeType === 3) continue;
+			if (!filter || filter(elem)) sibs.push(elem);
+		}
+		return sibs;
+	}
+	destroy() {
+		this.insertDesktopVersion();
+		this.mediaQuery.removeListener(this.mediaQueryBind);
+	}
+};
+//#endregion
+exports.default = Tablewrap;

package/_html/index.html

@@ -1,17 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
     <head>
         <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1"
-        />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
         <title>tablewrap</title>
-        <link
-            rel="stylesheet"
-            href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"
-        />
         <style>
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
             td {
                 padding: 10px 5px;
                 border: 1px solid #000;

package/_js/tablewrap.js

@@ -1,8 +1,3 @@
-import 'mdn-polyfills/Array.prototype.forEach';
-import 'mdn-polyfills/NodeList.prototype.forEach';
-import 'mdn-polyfills/Node.prototype.remove';
-import 'mdn-polyfills/Node.prototype.after';
-
 export default class Tablewrap {
     args = {};
     tables = [];

package/package.json

@@ -1,53 +1,43 @@
 {
     "scripts": {
-        "js:browserify": "browserify ./_js/tablewrap.js --outfile ./_public/tablewrap.js --debug --transform babelify",
-        "js:uglify": "uglifyjs --compress --mangle --output ./_public/tablewrap.js ./_public/tablewrap.js",
-        "js:babel": "npx babel ./_js/ --out-dir ./_build/_js/",
-        "js:demo:browserify": "browserify ./_js/demo.js --outfile ./_public/demo.js --debug --transform babelify",
-        "js": "npm-run-all --sequential js:browserify js:uglify js:babel js:demo:browserify",
-        "js:dev": "npm-run-all --sequential js:browserify js:babel js:demo:browserify",
-        "html": "html-minifier --collapse-whitespace --output ./_public/index.html ./_html/index.html",
-        "html:dev": "html-minifier --output ./_public/index.html ./_html/index.html",
-        "browsersync": "from-env cross-var browser-sync start --reload-debounce 3000 --proxy %DOMAIN --files \"./_public/*.js\"",
-        "watch:js": "onchange ./_js/*.js ./_js/**/*.js --initial --wait --delay 500 --await-write-finish -- onerror \"npm run js:dev --silent\" --title \"watch:js\" --message \"build failed\" --sound mute",
-        "watch:html": "onchange ./_html/*.html ./_html/**/*.html --initial --wait --delay 500 --await-write-finish -- onerror \"npm run html:dev --silent\" --title \"watch:html\" --message \"build failed\" --sound mute",
-        "build": "npm-run-all --parallel js html",
-        "dev": "npm-run-all --parallel watch:* browsersync"
+        "js:vite": "vite build --logLevel error --mode dist",
+        "js:minify": "terser --compress --mangle --comments false --output ./_public/tablewrap.js ./_public/tablewrap.js",
+        "js:package": "vite build --logLevel error --mode package",
+        "js:demo:vite": "vite build --logLevel error --mode demo",
+        "js": "npm-run-all --sequential js:vite js:minify js:package js:demo:vite",
+        "js:dev": "npm-run-all --sequential js:vite js:package js:demo:vite",
+        "html": "html-minifier-next --collapse-whitespace --output ./_public/index.html ./_html/index.html",
+        "html:dev": "html-minifier-next --output ./_public/index.html ./_html/index.html",
+        "watch:js": "onchange ./_js/*.js ./_js/**/*.js --initial --poll 250 --delay 250 --await-write-finish 500 -- onerror \"npm run js:dev --silent\" --title \"watch:js\" --message \"build failed\" --sound mute",
+        "watch:html": "onchange ./_html/*.html ./_html/**/*.html --initial --poll 250 --delay 250 --await-write-finish 500 -- onerror \"npm run html:dev --silent\" --title \"watch:html\" --message \"build failed\" --sound mute",
+        "prod": "npm-run-all --parallel js html",
+        "dev": "npm-run-all --parallel watch:*"
     },
     "devDependencies": {
-        "@babel/cli": "^7.2.3",
-        "@babel/core": "^7.3.4",
-        "@babel/plugin-proposal-class-properties": "^7.3.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.2.0",
-        "@babel/plugin-transform-runtime": "^7.3.4",
-        "@babel/polyfill": "^7.2.5",
-        "@babel/preset-env": "^7.3.4",
-        "@babel/runtime": "^7.3.4",
-        "babelify": "^10.0.0",
-        "browser-sync": "^2.26.3",
-        "browserify": "^16.2.3",
-        "cli-error-notifier": "^2.1.0",
-        "cross-var": "^1.1.0",
-        "eslint": "^5.14.1",
-        "from-env": "^1.1.2",
-        "html-minifier": "^4.0.0",
-        "mdn-polyfills": "^5.16.0",
-        "node-sass": "^4.11.0",
+        "cli-error-notifier": "^3.0.2",
+        "eslint": "^10.5.0",
+        "html-minifier-next": "^7.0.0",
         "npm-run-all": "^4.1.5",
-        "onchange": "^5.2.0",
-        "postcss-cli": "^6.1.2",
-        "postcss-url": "^8.0.0",
-        "uglify": "^0.1.5"
+        "onchange": "^7.1.0",
+        "postcss-cli": "^11.0.1",
+        "postcss-url": "^10.1.4",
+        "terser": "^5.48.0",
+        "vite": "^8.0.16"
+    },
+    "overrides": {
+        "@babel/core": "^7.29.7",
+        "shell-quote": "^1.8.4",
+        "uuid": "^11.1.1",
+        "ws": "^8.21.0"
     },
     "name": "tablewrap",
-    "version": "1.0.5",
+    "version": "1.1.3",
     "description": "",
     "main": "_build/_js/tablewrap.js",
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com/vielhuber/tablewrap.git"
+    },
     "author": "",
-    "license": "ISC",
-    "browserslist": [
-        "> 0.25%",
-        "not dead"
-    ]
+    "license": "ISC"
 }

package/vite.config.js

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    if (mode === 'dist') {
+        return {
+            build: {
+                outDir: '_public',
+                rollupOptions: {
+                    input: './_js/tablewrap.js',
+                    output: {
+                        format: 'iife',
+                        entryFileNames: 'tablewrap.js',
+                    },
+                },
+                sourcemap: false,
+                minify: false,
+                emptyOutDir: false,
+            },
+        };
+    }
+    if (mode === 'demo') {
+        return {
+            build: {
+                outDir: '_public',
+                rollupOptions: {
+                    input: './_js/demo.js',
+                    output: {
+                        format: 'iife',
+                        entryFileNames: 'demo.js',
+                    },
+                },
+                sourcemap: false,
+                minify: false,
+                emptyOutDir: false,
+            },
+        };
+    }
+    if (mode === 'package') {
+        return {
+            build: {
+                outDir: '_build/_js',
+                lib: {
+                    entry: {
+                        tablewrap: './_js/tablewrap.js',
+                        demo: './_js/demo.js',
+                    },
+                    formats: ['cjs'],
+                    fileName: (format, entryName) => entryName + '.js',
+                },
+                rollupOptions: {
+                    output: {
+                        exports: 'named',
+                    },
+                },
+                sourcemap: false,
+                minify: false,
+                emptyOutDir: false,
+            },
+        };
+    }
+});

package/.babelrc

@@ -1,15 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "shippedProposals": true
-            }
-        ]
-    ],
-    "plugins": [
-        "@babel/plugin-transform-runtime",
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-optional-chaining"
-    ]
-}