@phun-ky/speccer 3.5.2 → 4.2.1

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
+
+## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)
+
+
+### Features
+
+* Use CSS variables ([21c3eb3](https://github.com/phun-ky/speccer/commit/21c3eb3f173ee96b0bf452bae44f76155fcf3cdf))
+
+## [4.1.0](https://github.com/phun-ky/speccer/compare/v4.0.0...v4.1.0) (2022-02-22)
+
+### Features
+
+- Add release script ([4cb72cb](https://github.com/phun-ky/speccer/commit/4cb72cbea7dd1d6bcb8f1102384b14eecaa9eef0))

package/README.md

@@ -15,10 +15,10 @@ See demo here: https://codepen.io/phun-ky/pen/xaOrYX
 Either import and run the required functions:
 
 ```javascript
-import { anatomy, speccer, activateOnResize } from '@phun-ky/speccer/src/index.js';
+import { speccer } from '@phun-ky/speccer/src/index.js';
 
 // do stuff
-anatomy();
+speccer();
 ```
 
 Or place these `script` and `link` tags in your web page:
@@ -30,8 +30,6 @@ Or place these `script` and `link` tags in your web page:
 
 And then follow the steps below to display the specifications you want :)
 
-**_NOTE_** The activateOnResize function is using a throttled event for the [Window: resize event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event), this might give you some issues in an SPA.
-
 If you use React, you can use an effect like this:
 
 ```javascript
@@ -48,14 +46,12 @@ const Component = () => {
     import('@phun-ky/speccer/src/index.js').then(speccerScript => {
       console.info('[@phun-ky/speccer]: Activated speccer ');
 
-      const { anatomy, speccer } = speccerScript;
-      anatomy();
+      const { speccer } = speccerScript;
       speccer();
 
-      speccerEventFunc = debounce(function() {
+      speccerEventFunc = debounce(function () {
         console.info('[@phun-ky/speccer]: Event resize triggered');
         speccer();
-        anatomy();
       }, 300);
 
       window.addEventListener('resize', speccerEventFunc);
@@ -132,12 +128,12 @@ If you want to control speccer a bit more, you have some options. Apply one of t
 <script src="../speccer.js" data-<manual|instant|dom|lazy></script>
 ```
 
-| Tag            | Description                                                                            |
-| -------------- | -------------------------------------------------------------------------------------- |
-| `data-manual`  | Makes `window.speccer` and `window.anatomy` available to be used when you feel like it |
-| `data-instant` | fires off `anatomy()` and `speccer` right away                                         |
-| `data-dom`     | Waits for `DOMContentLoaded`                                                           |
-| `data-lazy`    | Lazy loads `anatomy()` and `speccer()` per specced element                             |
+| Tag            | Description                                                         |
+| -------------- | ------------------------------------------------------------------- |
+| `data-manual`  | Makes `window.speccer()` available to be used when you feel like it |
+| `data-instant` | fires off `speccer()` right away                                    |
+| `data-dom`     | Waits for `DOMContentLoaded`                                        |
+| `data-lazy`    | Lazy loads `speccer()` per specced element                          |
 
 If no attribute is applied, it will default to `data-dom`, as in, it will initialize when `DOMContentLoaded` is fired.
 
@@ -146,43 +142,19 @@ If no attribute is applied, it will default to `data-dom`, as in, it will initia
 If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
 
 ```javascript
-import { specElement, measureElement, dissectElement } from '@phun-ky/speccer';
+import * as Dissect from '@phun-ky/speccer/src/dissect.js';
 
-let specElementObserver = new IntersectionObserver((entries, observer) => {
-  entries.forEach(entry => {
-    if (entry.intersectionRatio > 0) {
-      specElement(entry.target);
-      observer.unobserve(entry.target);
-    }
-  });
-});
-document.querySelectorAll('[data-speccer],[data-speccer] *:not(td)').forEach(el => {
-  specElementObserver.observe(el);
-});
-let measureElementObserver = new IntersectionObserver((entries, observer) => {
-  entries.forEach(entry => {
-    if (entry.intersectionRatio > 0) {
-      measureElement(entry.target);
-      observer.unobserve(entry.target);
-    }
-  });
-});
-document.querySelectorAll('[data-speccer-measure]').forEach(el => {
-  measureElementObserver.observe(el);
-});
 let dissectElementObserver = new IntersectionObserver((entries, observer) => {
   entries.forEach(entry => {
     const targets = entry.target.querySelectorAll('[data-anatomy]');
     if (entry.intersectionRatio > 0) {
-      targets.forEach(dissectElement);
+      targets.forEach(Dissect.element);
       observer.unobserve(entry.target);
     }
   });
 });
 
-const observeAnatomySections = section => {
-  dissectElementObserver.observe(section);
-};
-
-document.querySelectorAll('[data-anatomy-section]').forEach(observeAnatomySections);
+document.querySelectorAll('[data-anatomy-section]').forEach(el => {
+  dissectElementObserver.observe(el);
+});
 ```

package/package.json

@@ -1,15 +1,29 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "3.5.2",
-  "description": "A script to show specifications on html elements in your styleguide",
+  "version": "4.2.1",
+  "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rimraf ./dist && webpack --mode production",
-    "commit": "npx git-cz"
+    "rollup": "rollup -c",
+    "rollup:dev": "npm run clean && rollup -c -w",
+    "clean": "rm -rf ./speccer.css ./speccer.min.css ./speccer.js",
+    "build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
+    "styles": "npm run stylus && npm run postcss",
+    "stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
+    "postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o  speccer.min.css",
+    "dev": "node ./scripts/server.js",
+    "commit": "npx git-cz",
+    "release": "npx standard-version"
+  },
+  "standard-version": {
+    "scripts": {
+      "prerelease": "npm run build",
+      "posttag": "git push --follow-tags origin master && npm publish"
+    }
   },
   "repository": {
     "type": "git",
@@ -20,7 +34,22 @@
     "css",
     "javascript",
     "spec",
-    "inspect"
+    "inspect",
+    "annotation",
+    "annotate",
+    "pin",
+    "specifications",
+    "anatomy",
+    "dissection",
+    "dissect",
+    "documentation",
+    "information",
+    "specification",
+    "specs",
+    "html-elements",
+    "inspect",
+    "spacing",
+    "speccer"
   ],
   "author": "Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>",
   "license": "MIT",
@@ -29,32 +58,41 @@
   },
   "homepage": "https://github.com/phun-ky/speccer#readme",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-async-to-generator": "^7.8.3",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/register": "^7.9.0",
-    "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^1.0.1",
-    "cssnano": "^4.1.10",
-    "eslint": "^4.19.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-loader": "^2.2.1",
-    "mini-css-extract-plugin": "^0.4.5",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.19.1",
-    "rimraf": "^2.7.1",
-    "style-loader": "^0.23.1",
-    "stylint": "^1.5.9",
-    "stylint-loader": "^1.0.0",
-    "stylus": "^0.54.7",
-    "stylus-loader": "^3.0.2",
-    "uglify-js": "^3.8.1",
-    "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11"
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-export-default-from": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.12.17",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/register": "^7.12.13",
+    "@babel/runtime": "^7.12.18",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@testing-library/dom": "^7.29.4",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/user-event": "^12.7.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "browser-sync": "^2.27.7",
+    "cssnano": "^5.0.4",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jest": "^24.4.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^26.6.3",
+    "postcss": "^8.3.0",
+    "postcss-cli": "^8.3.1",
+    "prettier": "^2.4.1",
+    "prettier-eslint": "^13.0.0",
+    "regenerator-runtime": "^0.13.7",
+    "rollup": "^2.39.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "stylus": "^0.56.0"
+  },
+  "dependencies": {
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }