Tree-Shaking

.eslintrc.js → .eslintrc.cjs

@@ -7,13 +7,17 @@ module.exports = {
   env: {
     browser: true
   },
+  plugins: [
+    'tree-shaking'
+  ],
   extends: [
     'standard'
   ],
   rules: {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-this-before-super': 'off',
     'no-unused-vars': 'off',
+    'tree-shaking/no-side-effects-in-initialization': 2,
     'space-before-function-paren': 'off'
   },
   globals: {

README.md

@@ -10,17 +10,62 @@ Front-end animation plugin for uncreative developers.
 luge is made to be fast and easy to use. Most of the things happen under the hood so you just have to include the files to start using it:
 
     <link rel="stylesheet" href="/path/to/luge.css">
-    <script src="/path/to/luge.js"></script>
+    <script src="/path/to/luge.umd.js"></script>
 
-luge is also available as a npm package:
+Note that the CSS file is only needed if you plan to use the built-in animations (reveals or transitions).
+
+If you want to use tree shaking to import only the functionalities you need and lighten the output build,  luge is also available as a npm package:
 
 ```npm install @waaark/luge```
 
-Then:
+Then import what you need:
 
-```import luge from '@waaark/luge'```
+```
+// Import core and plugins
+import {
+  Preloader,
+  Reveal,
+  Transition,
+  ScrollAnimation,
+  SmoothScroll,
+  Cursor,
+  Intersection,
+  LottiePlayer,
+  MouseAnimation,
+  Parallax,
+  Browser,
+  Luge
+} from './luge'
 
-Note that the CSS file is only needed if you plan to use the built-in animations (reveals or transitions).
+// Create luge instance
+const luge = new Luge()
+
+// Add only the plugin you need
+luge.addPlugin('preloader', Preloader)
+luge.addPlugin('reveal', Reveal)
+luge.addPlugin('transition', Transition)
+luge.addPlugin('scroll', ScrollAnimation)
+luge.addPlugin('smooth', SmoothScroll)
+luge.addPlugin('cursor', Cursor)
+luge.addPlugin('intersection', Intersection)
+luge.addPlugin('lottie', LottiePlayer)
+luge.addPlugin('mouse', MouseAnimation)
+luge.addPlugin('parallax', Parallax)
+luge.addPlugin('browser', Browser)
+
+// Configure the settings
+luge.settings({
+  cursor: {
+    disabled: luge.browser.some(['tablet', 'mobile'])
+  },
+  smooth: {
+    disabled: luge.browser.some(['tablet', 'mobile']) || luge.browser.satisfies({ safari: '<=12' })
+  }
+})
+
+// And init
+luge.init()
+```
 
 That's it.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waaark/luge",
-  "version": "0.6.17-beta.2",
+  "version": "1.0.0-rc.1",
   "description": "Front-end animation plugin for uncreative developers",
   "author": "Antoine Wodniack <hello@wodniack.dev> (https://wodniack.dev)",
   "homepage": "https://luge.cool",
@@ -16,40 +16,42 @@
   "files": [
     "/dist/*"
   ],
-  "main": "./dist/js/luge.esm.js",
+  "sideEffects": false,
+  "type": "module",
+  "source": "src/js/luge.js",
+  "exports": {
+    "require": "./dist/js/luge.cjs",
+    "default": "./dist/js/luge.modern.js"
+  },
+  "main": "./dist/js/luge.cjs",
+  "module": "./dist/js/luge.module.js",
+  "unpkg": "./dist/js/luge.umd.js",
   "scripts": {
-    "dev": "gulp dev --gulpfile build/gulpfile.js",
-    "build": "gulp --gulpfile build/gulpfile.js"
+    "build": "run-p build:*",
+    "build:pkg": "microbundle --format modern,esm,cjs --define VERSION=$npm_package_version",
+    "build:umd": "microbundle -i src/js/luge.umd.js --o ./dist/luge.umd.js --format umd --define VERSION=$npm_package_version",
+    "build:scss": "run-s scss:build scss:postcss",
+    "dev": "run-p dev:*",
+    "dev:js": "microbundle watch --define VERSION=$npm_package_version",
+    "dev:scss": "run-s scss:build scss:watch",
+    "scss:build": "node-sass --recursive --output dist/css/ src/scss/luge.scss",
+    "scss:watch": "node-sass --watch --recursive --output dist/css/ src/scss/luge.scss",
+    "scss:postcss": "postcss -d dist/css/ dist/css/"
   },
-  "test": "exit 0",
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/eslint-parser": "^7.14.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "core-js": "^3.15.2",
-    "eslint": "^7.29.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.27.5",
+    "@babel/eslint-parser": "^7.23.9",
+    "@studio-freight/lenis": "^1.0.34",
+    "autoprefixer": "^10.4.17",
+    "bowser": "^2.11.0",
+    "eslint": "^8.56.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^8.0.0",
-    "gulp-sass": "^5.0.0",
-    "gulp-sass-glob": "^1.1.0",
-    "node-sass": "^7.0.1",
-    "rollup": "^2.52.3",
-    "rollup-plugin-terser": "^7.0.2"
-  },
-  "dependencies": {
-    "bowser": "^2.11.0",
-    "virtual-scroll": "^2.2.1",
-    "whatwg-fetch": "^3.6.2"
+    "microbundle": "^0.15.1",
+    "node-sass": "^9.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^11.0.0"
   }
 }

postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')(),
+    ],
+};

src/js/luge.js

@@ -1,99 +1,13 @@
-// Imports
-import LifeCycle from 'Core/LifeCycle'
-
-// import Polyfill from 'Core/Polyfill'
-
-import Luge from 'Core/Core'
-import Emitter from 'Core/Emitter'
-import ViewportObserver from 'Core/ViewportObserver'
-import MouseObserver from 'Core/MouseObserver'
-import ScrollObserver from 'Core/ScrollObserver'
-import Ticker from 'Core/Ticker'
-import Browser from 'Core/Browser'
-
-import Cursor from 'Plugins/Cursor'
-import Intersection from 'Plugins/Intersection'
-import LottiePlayer from 'Plugins/LottiePlayer'
-import MouseAnimation from 'Plugins/MouseAnimation'
-import Parallax from 'Plugins/Parallax'
-import Preloader from 'Plugins/Preloader'
-import Reveal from 'Plugins/Reveal'
-import ScrollAnimation from 'Plugins/ScrollAnimation'
-import SmoothScroll from 'Plugins/SmoothScroll'
-import Transition from 'Plugins/Transition'
-
-const browser = Browser.bowser
-
-Luge.setSettings({
-  cursor: {
-    disabled: browser.some(['tablet', 'mobile'])
-  },
-  smooth: {
-    disabled: browser.some(['tablet', 'mobile']) || browser.satisfies({ safari: '<=12' })
-  }
-})
-
-// Public methods
-const luge = {
-  browser,
-  cursor: {},
-  emitter: {
-    emit: Emitter.emit.bind(Emitter),
-    off: Emitter.off.bind(Emitter),
-    on: Emitter.on.bind(Emitter),
-    once: Emitter.once.bind(Emitter)
-  },
-  viewportobserver: {
-    add: ViewportObserver.add.bind(ViewportObserver),
-    remove: ViewportObserver.remove.bind(ViewportObserver)
-  },
-  lifecycle: {
-    add: LifeCycle.add.bind(LifeCycle),
-    refresh: LifeCycle.cycle.bind(LifeCycle, 'refresh'),
-    remove: LifeCycle.remove.bind(LifeCycle),
-    debug: LifeCycle.enableDebug.bind(LifeCycle)
-  },
-  lottie: {
-    deferInit: LottiePlayer.deferInit.bind(LottiePlayer)
-  },
-  mouseobserver: {
-    add: MouseObserver.add.bind(MouseObserver),
-    remove: MouseObserver.remove.bind(MouseObserver)
-  },
-  preloader: {
-    add: Preloader.add.bind(Preloader)
-  },
-  reveal: {
-    add: Reveal.add.bind(Reveal)
-  },
-  scrollobserver: {
-    add: ScrollObserver.add.bind(ScrollObserver),
-    remove: ScrollObserver.remove.bind(ScrollObserver)
-  },
-  ticker: {
-    add: Ticker.add.bind(Ticker),
-    nextTick: Ticker.nextTick.bind(Ticker),
-    remove: Ticker.remove.bind(Ticker),
-    tick: Ticker.tick.bind(Ticker)
-  },
-  transition: {
-    add: Transition.add.bind(Transition)
-  },
-  settings: Luge.setSettings.bind(Luge)
-}
-
-// luge.lifecycle.debug()
-
-window.luge = luge
-
-export default luge
-
-// Site init on DOM ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', LifeCycle.cycle.bind(LifeCycle, 'load'), { once: true })
-} else {
-  Ticker.nextTick(() => {
-    LifeCycle.cycle('load')
-  },
-  null)
-}
+export { default as Plugin } from './luge/core/Plugin'
+export { default as Preloader } from './luge/plugins/Preloader'
+export { default as Reveal } from './luge/plugins/Reveal'
+export { default as Transition } from './luge/plugins/Transition'
+export { default as ScrollAnimation } from './luge/plugins/ScrollAnimation'
+export { default as SmoothScroll } from './luge/plugins/SmoothScroll'
+export { default as Cursor } from './luge/plugins/Cursor'
+export { default as Intersection } from './luge/plugins/Intersection'
+export { default as LottiePlayer } from './luge/plugins/LottiePlayer'
+export { default as MouseAnimation } from './luge/plugins/MouseAnimation'
+export { default as Parallax } from './luge/plugins/Parallax'
+export { default as Browser } from './luge/plugins/Browser'
+export { default as Luge } from './luge/core'