ci: Setup canary semantic release pipeline (#177)

* footer shows current version

* prepare test publish

* v2.0.0-alpha.2

* new package

* setup lerna

* move changelog

* test semantic release

* fix: semantic release setup

* fix: circleci setup

* test if no lockfile is ok

* add missing plugin

* ci(renovate): better automerge rules

* chore: test the release

Author: stipsan

.circleci/config.yml

@@ -7,8 +7,7 @@ aliases:
       - v4-dependencies-{{ .Branch }}-
 
   - &install
-    # --frozen-lockfile ensures the build will fail if the lockfile needs to be updated
-    run: yarn --no-progress --frozen-lockfile
+    run: yarn --no-progress
 
   - &build
     run:
@@ -74,9 +73,9 @@ jobs:
       - *build
       - save-cache: *save-cache
       - add-ssh-keys:
-        fingerprints:
-          - "e1:ca:5d:f0:58:11:c7:ae:b7:ac:4a:1b:cc:3a:0d:4a"
-      - run: yarn semantic-release || true
+          fingerprints:
+            - "e1:ca:5d:f0:58:11:c7:ae:b7:ac:4a:1b:cc:3a:0d:4a"
+      - run: yarn semantic-release
 
 # Workflows enables us to run multiple jobs in parallel
 workflows:
@@ -93,4 +92,6 @@ workflows:
             - Website
           filters:
             branches:
-              only: master
+              only:
+                - master
+                - semantic-release

README.md

@@ -6,4 +6,4 @@
 This used to be just a [ponyfill](https://ponyfill.com) for `Element.scrollIntoViewIfNeeded` but is currently being rewritten to cover `Element.scrollIntoView(ScrollIntoViewOptions)` including the new `scrollMode: "if-needed"` option.
 This readme will be updated when it's ready for stable release.
 
-## [Demo](https://scroll-into-view.netlify.com)
+## [Demo](https://scroll-into-view-if-needed.netlify.com)

lerna.json

@@ -0,0 +1,6 @@
+{
+  "lerna": "2.10.2",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "independent"
+}

package.json

@@ -7,13 +7,19 @@
   "scripts": {
     "precommit": "lint-staged",
     "predeploy:website": "cd packages/scroll-into-view-if-needed && yarn build",
-    "deploy:website": "cd website && yarn deploy"
+    "deploy:website": "cd website && yarn deploy",
+    "publish:canary": "lerna publish --npm-tag=next --canary",
+    "semantic-release": "lerna exec --concurrency 1 -- npx --no-install semantic-release -e semantic-release-monorepo"
   },
   "devDependencies": {
+    "@semantic-release/git": "4.0.2",
     "husky": "0.14.3",
+    "lerna": "2.10.2",
     "lint-staged": "7.0.4",
     "prettier": "1.12.1",
-    "prettier-package-json": "1.5.1"
+    "prettier-package-json": "1.5.1",
+    "semantic-release": "15.1.7",
+    "semantic-release-monorepo": "6.0.1"
   },
   "lint-staged": {
     "*.js": [
@@ -54,6 +60,18 @@
       }
     ]
   },
+  "release": {
+    "branch": "semantic-release",
+    "prepare": [
+      "@semantic-release/npm",
+      "@semantic-release/git"
+    ],
+    "verifyConditions": [
+      "@semantic-release/npm",
+      "@semantic-release/git",
+      "@semantic-release/github"
+    ]
+  },
   "resolutions": {
     "@types/react": "*"
   }

packages/scroll-into-view-if-needed/.gitignore

@@ -3,4 +3,5 @@ es
 typings
 umd
 /*.js
-!.babelrc.js
+!.babelrc.js
+!rollup.config.js

CHANGELOG.md renamed to packages/scroll-into-view-if-needed/CHANGELOG.md

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/stipsan/scroll-into-view-if-needed.git"
   },
-  "version": "2.0.0-dev",
+  "version": "2.0.0-alpha.3",
   "main": "index.js",
   "files": [
     "auto.js",
@@ -68,6 +68,9 @@
     "smoothscroll",
     "typescript"
   ],
+  "publishConfig": {
+    "tag": "next"
+  },
   "browserify": {
     "transform": [
       "loose-envify"

packages/scroll-into-view-if-needed/package.json

@@ -0,0 +1,22 @@
+const BABEL_ENV = process.env.BABEL_ENV
+const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs'
+
+const plugins = []
+
+if (process.env.NODE_ENV === 'production') {
+  plugins.push('dev-expression')
+}
+
+module.exports = {
+  presets: [
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: building ? false : 'commonjs',
+      },
+    ],
+  ],
+  plugins: plugins,
+}

packages/smooth-scroll-into-view-if-needed/.babelrc.js

@@ -0,0 +1,7 @@
+dist
+es
+typings
+umd
+/*.js
+!.babelrc.js
+!rollup.config.js

packages/smooth-scroll-into-view-if-needed/.gitignore

@@ -0,0 +1,66 @@
+[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed) [![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed) [![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39098948-61a1e60a-4672-11e8-80a3-16f0e57e4b9d.png)
+
+This is a [ponyfill](https://ponyfill.com) for smooth scrolling `scroll-into-view-if-needed`.
+
+## [Demo](https://scroll-into-view-if-needed.netlify.com/)
+
+## Install
+
+```bash
+yarn add smooth-scroll-into-view-if-needed
+```
+
+## Usage
+
+```js
+import scrollIntoView from 'smooth-scroll-into-view-if-needed'
+const node = document.getElementById('hero')
+
+// If all you want is for all your users to have stuff smooth scroll into view
+scrollIntoView(node, { behavior: 'smooth' })
+
+// combine it with any of the other options
+scrollIntoView(node, {
+  behavior: 'smooth',
+  scrollMode: 'if-needed',
+  block: 'nearest',
+  inline: 'nearest',
+})
+
+// It returns a promise that is resolved when the animation is finished
+const sequence = async () => {
+  const slide = document.getElementById('slide-3')
+  // First smooth scroll to hero
+  await scrollIntoView(node, { behavior: 'smooth' })
+  // Then we scroll to a slide in a slideshow
+  return scrollIntoView(slide, { behavior: 'smooth' })
+}
+```
+
+### Custom scrolling transition
+
+If the default smooth scrolling ponyfill isn't the duration or easing you want, you can provide your own scrolling logic by giving `behavior` a callback.
+
+```js
+import scrollIntoView from 'smooth-scroll-into-view-if-needed'
+const node = document.getElementById('hero')
+
+scrollIntoView(node, {
+  // Your scroll actions will always be an array, even if there is nothing to scroll
+  behavior: scrollActions =>
+    // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
+    scrollActions.forEach(([el, scrollTop, scrollLeft]) => {
+      // implement the scroll anyway you want
+      el.scrollTop = scrollTop
+      el.scrollLeft = scrollLeft
+
+      // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math
+      const offsetTop = el.scrollTop - scrollTop
+      const offsetLeft = el.scrollLeft - scrollLeft
+    }),
+  // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
+})
+```
+
+## More documentation will be added (hang in there)