feat(css): 🎉 initial commit

barbajs · Feb 3, 2019 · aed8206 · aed8206
1 parent ec86612
commit aed8206
Show file tree

Hide file tree

Showing 14 changed files with 454 additions and 2 deletions.
diff --git a/packages/core/__tests__/transitions/manager.page.test.js b/packages/core/__tests__/transitions/manager.page.test.js
@@ -36,7 +36,6 @@ const nextHtml = `<html>
 </html>`;
 
 // Data
-
 let data;
 
 beforeEach(() => {

diff --git a/packages/core/src/transitions/manager.js b/packages/core/src/transitions/manager.js
@@ -44,12 +44,19 @@ export default {
 
     this.running = true;
 
+    // CSS: add appear
+    // CSS: add appear-active
     hooks.do('beforeAppear', data, t);
+    // CSS: remove appear
+    // CSS: add appear-to
+
     t.beforeAppear && t.beforeAppear(data);
     hooks.do('appear', data, t);
 
     await runAsync(t.appear)(data)
       .then(() => {
+        // CSS: remove appear-active
+        // CSS: remove appear-to
         hooks.do('afterAppear', data, t);
         t.afterAppear && t.afterAppear(data);
       })
@@ -201,6 +208,8 @@ export default {
   },
 
   doLeave(t, data) {
+    // CSS: remove leave
+    // CSS: add leave-to
     hooks.do('leave', data, t);
 
     return runAsync(t.leave)(data).then(leaveResult => leaveResult);
@@ -242,8 +251,8 @@ export default {
 
   doEnter(t, data, leaveResult) {
     // CSS: remove enter
-    hooks.do('enter', data, t);
     // CSS: add enter-to
+    hooks.do('enter', data, t);
 
     return runAsync(t.enter)(data, leaveResult);
   },

diff --git a/packages/css/.babelrc b/packages/css/.babelrc
@@ -0,0 +1,42 @@
+{
+  "env": {
+    "commonjs": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 11"]
+            }
+          }
+        ]
+      ]
+    },
+    "esm": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "modules": false
+          }
+        ]
+      ]
+    },
+    "umd": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["last 2 versions", "ie >= 11"]
+            }
+          }
+        ]
+      ]
+    },
+    "test": {
+      "presets": ["@babel/env"]
+    }
+  }
+}
diff --git a/packages/css/.npmignore b/packages/css/.npmignore
@@ -0,0 +1,9 @@
+### Custom ###
+/__mocks__
+/__tests__
+/coverage
+/src
+/report.html
+/*.md
+!/README.md
+!/CHANGELOG.md
diff --git a/packages/css/AUTHORS b/packages/css/AUTHORS
@@ -0,0 +1,2 @@
+Luigi De Rosa <lurukee@gmail.com> (http://luruke.com/)
+Thierry Michel <thmichel@gmail.com> (https://www.epic.net/)
diff --git a/packages/css/LICENSE b/packages/css/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Luigi De Rosa, Thierry Michel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/css/README.md b/packages/css/README.md
@@ -0,0 +1,19 @@
+# @barba/css
+
+[![NPM version](https://img.shields.io/npm/v/@barba/css.svg?style=flat-square)](https://www.npmjs.com/package/@barba/css)
+
+> TBD ([GitHub repo](https://github.com/barbajs/barba-next.js))
+
+## Install
+
+Using npm:
+
+```sh
+npm install --save-dev @barba/css
+```
+
+or using yarn:
+
+```sh
+yarn add @barba/css --dev
+```
diff --git a/packages/css/__tests__/css.hooks.test.js b/packages/css/__tests__/css.hooks.test.js
@@ -0,0 +1,107 @@
+/* eslint-disable no-empty-function */
+import barba from '@barba/core';
+import css from '../src';
+
+// Dom
+const wrapper = document.createElement('div');
+const container = document.createElement('div');
+
+wrapper.dataset.barba = 'wrapper';
+container.dataset.barba = 'container';
+
+document.body.appendChild(wrapper);
+document.body.appendChild(container);
+
+// Transitions
+const name = 'my-name';
+const unnamed = {
+  appear() {},
+  leave() {},
+  enter() {},
+};
+const named = {
+  ...unnamed,
+  name,
+};
+
+barba.use(css);
+barba.init({
+  transitions: [named, unnamed],
+});
+
+/**
+ * Check CSS classes
+ *
+ * @param {string} [name='barba'] default or named transition
+ * @returns {Promise} end of hooks chain
+ */
+async function checkHooks(name = 'barba') {
+  expect(wrapper.classList.contains(`${name}-appear`)).toBeTruthy();
+  expect(wrapper.classList.contains(`${name}-appear-active`)).toBeTruthy();
+  await new Promise(resolve => {
+    window.requestAnimationFrame(() => {
+      expect(wrapper.classList.contains(`${name}-appear-to`)).toBeTruthy();
+      expect(wrapper.classList.contains(`${name}-appear`)).toBeFalsy();
+      resolve();
+    });
+  });
+  barba.hooks.do('afterAppear');
+  expect(wrapper.classList.contains(`${name}-appear-active`)).toBeFalsy();
+  expect(wrapper.classList.contains(`${name}-appear-to`)).toBeFalsy();
+  // Leave
+  barba.hooks.do('beforeLeave');
+  expect(wrapper.classList.contains(`${name}-leave`)).toBeTruthy();
+  expect(wrapper.classList.contains(`${name}-leave-active`)).toBeTruthy();
+  barba.hooks.do('leave');
+  await new Promise(resolve => {
+    window.requestAnimationFrame(() => {
+      expect(wrapper.classList.contains(`${name}-leave-to`)).toBeTruthy();
+      expect(wrapper.classList.contains(`${name}-leave`)).toBeFalsy();
+      resolve();
+    });
+  });
+  barba.hooks.do('afterLeave');
+  expect(wrapper.classList.contains(`${name}-leave-to`)).toBeFalsy();
+  expect(wrapper.classList.contains(`${name}-leave-active`)).toBeFalsy();
+  // Enter
+  barba.hooks.do('beforeEnter');
+  expect(wrapper.classList.contains(`${name}-enter`)).toBeTruthy();
+  expect(wrapper.classList.contains(`${name}-enter-active`)).toBeTruthy();
+  barba.hooks.do('enter');
+  await new Promise(resolve => {
+    window.requestAnimationFrame(() => {
+      expect(wrapper.classList.contains(`${name}-enter-to`)).toBeTruthy();
+      expect(wrapper.classList.contains(`${name}-enter`)).toBeFalsy();
+      resolve();
+    });
+  });
+  barba.hooks.do('afterEnter');
+  expect(wrapper.classList.contains(`${name}-enter-to`)).toBeFalsy();
+  expect(wrapper.classList.contains(`${name}-enter-active`)).toBeFalsy();
+}
+
+it('prefixes with transition name', () => {
+  barba.hooks.do('before', {}, named);
+  expect(css._prefix).toBe(name);
+  css._prefix = null;
+  barba.hooks.do('beforeAppear', {}, named);
+  expect(css._prefix).toBe(name);
+});
+
+it('prefixes with default ', () => {
+  barba.hooks.do('before', {}, unnamed);
+  expect(css._prefix).toBe('barba');
+  css._prefix = null;
+  barba.hooks.do('beforeAppear', {}, unnamed);
+  expect(css._prefix).toBe('barba');
+});
+
+it('adds and removes default CSS classes', async () => {
+  barba.hooks.do('beforeAppear', {}, unnamed);
+  await checkHooks();
+});
+
+it('adds and removes named CSS classes', async () => {
+  barba.hooks.do('beforeAppear', {}, named);
+  await checkHooks(name);
+});
diff --git a/packages/css/__tests__/css.init.test.js b/packages/css/__tests__/css.init.test.js
@@ -0,0 +1,36 @@
+/* eslint-disable no-empty-function */
+import barba from '@barba/core';
+import css from '../src';
+import { version } from '../package.json';
+
+// Dom
+const wrapper = document.createElement('div');
+const container = document.createElement('div');
+
+wrapper.dataset.barba = 'wrapper';
+container.dataset.barba = 'container';
+
+document.body.appendChild(wrapper);
+document.body.appendChild(container);
+
+it('has defaults', () => {
+  expect(css.version).toBe(version);
+  expect(css._prefix).toBe('barba');
+  expect(css._root).toBeUndefined();
+});
+
+it('has default root', () => {
+  barba._plugins = [];
+  barba.use(css);
+  barba.init();
+  expect(css._root).toBe(barba._wrapper);
+});
+
+it('has custom root', () => {
+  barba._plugins = [];
+  barba.use(css, {
+    root: document.body,
+  });
+  barba.init();
+  expect(css._root).toBe(document.body);
+});
diff --git a/packages/css/jest.config.js b/packages/css/jest.config.js
@@ -0,0 +1,5 @@
+const jestBase = require('../../jest.config.js');
+
+module.exports = {
+  ...jestBase,
+};
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@barba/css",
+  "version": "2.0.1-next.66+1463979",
+  "description": "Barba is a ...",
+  "publishConfig": {
+    "access": "public"
+  },
+  "browser": "dist/barba-css.min.js",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "dist",
+    "lib",
+    "esm"
+  ],
+  "keywords": [
+    "barba",
+    "css"
+  ],
+  "homepage": "https://github.com/barbajs/barba-next#readme",
+  "bugs": {
+    "url": "https://github.com/barbajs/barba-next/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/barbajs/barba-next.git"
+  },
+  "scripts": {
+    "build": "npm-run-all build:commonjs build:umd build:umd:min build:esm",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
+    "build:esm": "cpx 'src/**/*.{mjs,js,json}' esm",
+    "build:esm:watch": "cpx 'src/**/*.{mjs,js,json}' esm -w",
+    "build:umd": "cross-env BABEL_ENV=umd NODE_ENV=development webpack --progress --profile",
+    "build:umd:min": "cross-env BABEL_ENV=umd NODE_ENV=production webpack --progress --profile",
+    "clear": "rimraf dist esm lib",
+    "lint": "eslint src/**",
+    "precommit": "lint-staged",
+    "test": "eslint src/** && jest --coverage",
+    "watch": "jest --colors --watch"
+  }
+}