picobel - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CONTRIBUTING.md

@@ -7,6 +7,22 @@ # Contribute
 
-## Code Style
+## Dev dependencies
 
+Once you've forked the repo, run `npm install` to install the development dependencies. I'm trying to keep the build chain as short as possible, so there's not too much to be installed:
+
+* `babel-cli` and `babel-preset-env` are there to transpile the raw ES6 from [`/esm/picobel.js`](https://github.com/tomhazledine/picobel/blob/master/esm/picobel.js) into the ES5-compatible versions.
+* `node-sass` is there to compile the SCSS in [`/scss/`](https://github.com/tomhazledine/picobel/blob/master/scss) into vanilla CSS.
+* Once the regular SCSS has been compiled, it gets run through `autoprefixer` (using `postcss-cli`) to make sure the necessary browser prefixes are added to the raw CSS.
+* To compile the ES6/UMD modules, I've added `webpack` (and `webpack-cli` and `babel-loader`).
+* The test suite is run using `jest`.
+
+## Editing the JS
+
+The canonical source code lives with the [`/src`](https://github.com/tomhazledine/picobel/blob/master/src) directory. This is where you should make any changes to the JavaScript code.
+
 Wherever possible I've tried to keep all functions as ["pure"](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976) as possible: given the same arguments, they should always return the same result, without any side effects. I'm a recent convert to the world of "functional" programming, so accept that I might not always get it right - if you can suggest any improvements, I'll be more than happy to hear them 👍.
 
+### Modules
+
+The code is written using ES6 (UMD) module syntax (e.g. `import VARIABLE from 'PACKAGE_NAME';`).
+
 As far as code organization goes, I've batched functions into roughly-similar groups, and put those groups into their own modules. The groups take the form of objects, that can then be imported into the main app. For example:
@@ -29,20 +45,6 @@
 
-## Dev dependencies
+There are several modules in this project:
 
-Once you've forked the repo, run `npm install` to install the development dependencies. I'm trying to keep the build chain as short as possible, so there's not too much to be installed:
-
-* `babel-cli` and `babel-preset-env` are there to transpile the raw ES6 from [`/esm/picobel.js`](https://github.com/tomhazledine/picobel/blob/master/esm/picobel.js) into the ES5-compatible versions.
-* `node-sass` is there to compile the SCSS in [`/scss/`](https://github.com/tomhazledine/picobel/blob/master/scss) into vanilla CSS.
-* Once the regular SCSS has been compiled, it gets run through `autoprefixer` (using `postcss-cli`) to make sure the necessary browser prefixes are added to the raw CSS.
-
-## Editing the JS
-
-The canonical source code lives with the [`/src`](https://github.com/tomhazledine/picobel/blob/master/src) directory. This is where you should make any changes to the JavaScript code.
-
-### Modules
-
-The code is written using ES6 module syntax (e.g. `import VARIABLE from 'PACKAGE_NAME';`).
-
 * `helpers.js`: contains simple helper function: string manipulation, etc.
-* `Picobel.js`: the master function - this is what is called when `Picobel();` is used in your code. This modules pulls all the other modules together. It also contains the functions that require the `state` variable (created by Picobel to manage multiple audio elements on the same page).
+* `Picobel.js`: the master function - this is what is called when `Picobel();` is used in your code. This module pulls all the other modules together. It also contains the functions that require the `state` variable (created by Picobel to manage multiple audio elements on the same page).
 * `PicobelData.js`: these functions handle the data we need to run Picobel (e.g. getting info on audio elements within a page, etc.).
@@ -52,2 +54,4 @@ * `PicobelMarkup.js`: these functions handle creating the markup that Picobel replaces native `<audio>` elements with.
 
+Once you've finished making changes, run `npm run build` to generate the UMD and CommonJS versions (which will appear in `/esm/picobel.js` and `/cjs/picobel.js` respectively).
+
 ### Tests
@@ -57,4 +61,2 @@
 
-Once you've finished, run `npm run build` to generate the UMD and CommonJS versions (which will appear in `/esm/picobel.js` and `/cjs/picobel.js` respectively).
-
 ## Editing the CSS
@@ -61,0 +63,0 @@

demo/index.js

@@ -1,15 +0,10 @@
-import Picobel from '../esm/Picobel';
-// import helpers from '../esm/helpers';
-// import 'picobel/css/player.default.css';
+import Picobel from "../build/picobel.js";
 
-// console.log('file loaded');
-let picobel_instance = Picobel({ theme: 'skeleton' });
-
-console.log(picobel_instance.state);
-
-// let slider = helpers.buildSlider('progress', 0, 100, 50);
-// console.dir(slider.children[3]);
-
-// let nodes = picobel_instance.findAudio(document);
-// console.log(nodes);
-// console.log(picobel_instance.state);
+Picobel();
+// Picobel({ theme: "default" });
+// Picobel({ theme: "skeleton" });
+// Picobel({ theme: "bbc" });
+// Picobel({ theme: "eatenbymonsters" });
+// Picobel({ theme: "itunes" });
+// Picobel({ theme: "pitchfork" });
+// Picobel({ theme: "soundcloud" });

demo/package.json

 {
-  "name": "picobel-demo",
-  "version": "1.0.0",
-  "description": "Demo page for Picobel",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode production --watch"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "webpack": "^4.9.1",
-    "webpack-cli": "^2.1.4"
-  }
+    "name": "picobel-demo",
+    "version": "1.0.0",
+    "description": "Demo page for Picobel",
+    "type": "module"
 }

package.json

 {
-  "name": "picobel",
-  "version": "2.0.1",
-  "description": "Convert html audio tags into styleable markup.",
-  "main": "./cjs/picobel.js",
-  "module": "./esm/picobel.js",
-  "scripts": {
-    "test": "jest --verbose",
-    "build": "webpack --mode production && npm run styles && npm run common",
-    "common": "babel esm --out-dir cjs",
-    "prepublishOnly": "npm run build",
-    "styles": "npm run sass && npm run autoprefix",
-    "sass": "node-sass --output-style expanded -o css scss",
-    "autoprefix": "postcss css/*.css --use autoprefixer -d css",
-    "legacy": "uglifyjs picobel.legacy.js -o picobel.legacy.min.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/tomhazledine/picobel.git"
-  },
-  "author": "Tom Hazledine <[e-mail]> (https://tomhazledine.com)",
-  "license": "GPL-3.0",
-  "homepage": "https://github.com/tomhazledine/picobel#readme",
-  "bugs": {
-    "url": "https://github.com/tomhazledine/picobel/issues"
-  },
-  "devDependencies": {
-    "autoprefixer": "^8.5.1",
-    "babel-cli": "^6.26.0",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "jest": "^23.0.1",
-    "node-sass": "^4.9.0",
-    "postcss-cli": "^5.0.0",
-    "uglify-js": "^3.3.28",
-    "webpack": "^4.12.0",
-    "webpack-cli": "^3.0.3"
-  },
-  "babel": {
-    "presets": [
-      [
-        "env",
-        {
-          "targets": {
-            "browsers": [
-              "last 2 versions",
-              "safari >= 7"
-            ]
-          }
-        }
-      ]
-    ]
-  }
+    "name": "picobel",
+    "version": "2.1.0",
+    "description": "Convert html audio tags into styleable markup.",
+    "main": "./build/picobel.js",
+    "type": "module",
+    "scripts": {
+        "test": "jest --verbose",
+        "build": "node build.js",
+        "demo.build": "node build.js && node demo/build.js",
+        "prepublish": "npm run build",
+        "prepublishOnly": "npm run build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/tomhazledine/picobel.git"
+    },
+    "author": "Tom Hazledine <[e-mail]> (https://tomhazledine.com)",
+    "license": "GPL-3.0",
+    "homepage": "https://github.com/tomhazledine/picobel#readme",
+    "bugs": {
+        "url": "https://github.com/tomhazledine/picobel/issues"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.23.7",
+        "@babel/preset-env": "^7.23.7",
+        "babel-jest": "^29.7.0",
+        "esbuild": "^0.18.6",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0"
+    }
 }

README.md

@@ -1,7 +0,5 @@
-<p align="center"><a href="https://audio.tomhazledine.com" target="_blank"><img width="200"src="https://audio.tomhazledine.com/assets/images/heroLogo.png"></a></p>
+<p align="center"><a href="https://audio.tomhazledine.com" target="_blank"><img width="200"src="https://github.com/tomhazledine/picobel/blob/main/images/heroLogo.png"></a></p>
 
 <h1 align="center">Picobel.js</h1>
 
-<p align="center" markdown="1"><a href="https://travis-ci.org/tomhazledine/picobel"><img src="https://travis-ci.org/tomhazledine/picobel.svg?branch=master" alt="Build Status"></a></p>
-
 Picobel.js (pronounced _peek-o-bell_, as in _decibel_) is a lightweight dependency-free Javascript tool that converts html audio tags into styleable markup.
@@ -8,0 +6,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-45.45%

Number of package files

67

increased by17.54%

Is type module

Yes

Worsened metrics

Total package byte prevSize

815044

decreased by-16.42%

Lines of code

5263

decreased by-19.67%

Number of lines in readme file

190

decreased by-1.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes