fix: Publish under @angular-skyhook/* scope

Author: cormacrelf

CHANGELOG.md

@@ -1,3 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+<a name="1.0.10"></a>
+## [1.0.10](https://github.com/cormacrelf/angular-skyhook/compare/v1.0.9...v1.0.10) (2018-09-01)
+
+
+### Bug Fixes
+
+* simplify yarn add suggestion ([a6e0023](https://github.com/cormacrelf/angular-skyhook/commit/a6e0023))
+* **package:** shouldn't ever have supported Angular 5, without rxjs 6. Bump both peerdeps to 6, + tslib. ([734d66e](https://github.com/cormacrelf/angular-skyhook/commit/734d66e))
+* **package:** switch to scoped packages, i.e. [@angular-skyhook](https://github.com/skyhook)/core ([874723a](https://github.com/cormacrelf/angular-skyhook/commit/874723a))
+* **package:** update react-dnd-touch-backend to version 0.5.1 ([244e71c](https://github.com/cormacrelf/angular-skyhook/commit/244e71c)), closes [#11](https://github.com/cormacrelf/angular-skyhook/issues/11)
+
+
+
+
+
 <a name="1.0.9"></a>
 ## [1.0.9](https://github.com/cormacrelf/angular-skyhook/compare/v1.0.8...v1.0.9) (2018-07-04)
 

README.md

@@ -1,8 +1,8 @@
 [![Build Status](https://travis-ci.org/cormacrelf/angular-skyhook.svg?branch=master)](https://travis-ci.org/cormacrelf/angular-skyhook) 
-[![npm](https://img.shields.io/npm/v/angular-skyhook.svg)](https://www.npmjs.com/package/angular-skyhook)
+[![npm](https://img.shields.io/npm/v/@angular-skyhook/core.svg)](https://www.npmjs.com/package/@angular-skyhook/core)
 [![Documentation coverage](https://cormacrelf.github.io/angular-skyhook/images/coverage-badge.svg)](https://cormacrelf.github.io/angular-skyhook/coverage.html)
 
-# angular-skyhook
+# `@angular-skyhook`
 
 `react-dnd`-style drag and drop for Angular, built on
 [`dnd-core`](https://github.com/react-dnd/react-dnd).

build-docs.sh

@@ -1,7 +1,5 @@
 #!/bin/bash
 
-pkg="angular-skyhook"
-
 usage () {
   echo "usage: $0 [--serve] [--serve-only] [--no-examples] [--port <default is 8080>]"
 }
@@ -21,6 +19,7 @@ serve() {
 SERVE=0
 SERVE_ONLY=0
 PORT=8080
+NO_EXAMPLES=0
 
 if [ -n "$TRAVIS" ]; then
     SERVE=0
@@ -46,6 +45,9 @@ else
             --serve-only)
                 SERVE_ONLY=1
                 ;;
+            --no-examples)
+                NO_EXAMPLES=1
+                ;;
             --port)
                 PORT=$2
                 shift
@@ -66,12 +68,13 @@ fi
 
 DIR=$(dirname "$0")
 output="$DIR/out-docs"
-skyhook="$DIR/packages/angular-skyhook"
-multi_backend="$DIR/packages/angular-skyhook-multi-backend"
+core="$DIR/packages/core"
+sortable="$DIR/packages/sortable"
+multi_backend="$DIR/packages/multi-backend"
 examples="$DIR/packages/examples"
 
 EXAMPLES_TASK="local-docs"
-if [ $TRAVIS == "true" ]; then
+if [ "$TRAVIS" == "true" ]; then
   EXAMPLES_TASK="gh-pages"
 fi
 
@@ -90,24 +93,30 @@ build() {
     set -euxo pipefail
 
     rm -rf out-docs
-    rm -rf "$skyhook/documentation"
+    rm -rf "$core/documentation"
 
-    (cd "$skyhook" && yarn run docs)
+    (cd "$core" && yarn run docs)
 
     # move main docs into output
-    (mv "$skyhook/documentation" "$output")
+    (mv "$core/documentation" "$output")
+
+    # build sortable docs
+    (cd "$sortable" && yarn run docs)
+
+    # move multi-backend into output
+    (mv "$sortable/documentation" "$output/sortable")
 
     # build multi-backend docs
-    (cd $multi_backend && yarn run docs)
+    (cd "$multi_backend" && yarn run docs)
 
     # move multi-backend into output
-    (mv "$multi_backend/documentation" "$output/angular-skyhook-multi-backend")
+    (mv "$multi_backend/documentation" "$output/multi-backend")
 
     # build examples
-    (cd "$examples" && yarn run $EXAMPLES_TASK)
+    [ $NO_EXAMPLES -ne 1 ] && (cd "$examples" && yarn run $EXAMPLES_TASK)
 
     # move examples into output
-    (mv "$examples/dist/examples" "$output/examples")
+    [ $NO_EXAMPLES -ne 1 ] && (mv "$examples/dist/examples" "$output/examples")
 
     : "built successfully"
 }

docs/Connecting-to-DOM.md

@@ -15,30 +15,40 @@ a drag. Use `DragSourceDirective` to do this. It's as simple as:
 ```
 ```typescript
 source = this.dnd.dragSource("DRAGME", {
-  beginDrag: () => ({}),
-  // ...
-})
-// ...
+  beginDrag: () => ({ name: 'Jones McFly' }),
+  // other DragSourceSpec methods
+});
+// constructor, unsubscribe, etc
 ```
 
+Then, investigate using
+[DragSourceSpec](../../interfaces/DragSourceSpec.html)
+to customise the behaviour.
+
 ### Making a DOM element into a drop target
 
 This means your element will react to items being hovered or dropped within its
 bounding rectangle.
 
 ```html
-<div [dragSource]="source">
-  drag me
+<div [dropTarget]="target">
+  drop on me
 </div>
 ```
 ```typescript
-source = this.dnd.dragSource("DRAGME", {
-  beginDrag: () => ({}),
-  // ...
+target = this.dnd.dropTarget("DRAGME", {
+    drop: monitor => {
+        console.log('dropped an item:', monitor.getItem()); // => { name: 'Jones McFly' }
+    }
 })
-// ...
+// constructor, unsubscribe, etc
 ```
 
+Then, investigate using
+[DropTargetSpec](../../interfaces/DropTargetSpec.html)
+to customise the behaviour.
+
+
 ## Drag previews
 
 __This is a feature unique to the HTML5 backend.__ If you are using another

docs/Creating-Connections.md

@@ -95,7 +95,7 @@ You can create an RxJS `Subscription` object in your component, and call
 on each of the `SkyhookDndService` methods which will do this for you.
 
 ```typescript
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 // ...
 

docs/Guide.md

@@ -1,4 +1,4 @@
-When using `angular-skyhook`, you follow this general pattern:
+When using `@angular-skyhook`, you follow this general pattern:
 
 1. Create a connection and specify its behaviour: [Creating Connections](guide/1.-creating-connections.html)
 2. Use directives or methods to connect it to real DOM elements:

docs/Monitoring-State.md

@@ -2,21 +2,53 @@
 
 ## How to change your template depending on the drag state
 
-1. Take any connection object, like `DragSource`
+1. Take any connection object, like `DropTarget`
 2. Call `.listen()` with a function that returns what information you want to
    monitor
 3. Save the resulting Observable to an instance variable in your component
 4. Use the observable via the `| async` pipe to render alternate content in
    your template.
 
+For example:
+
+```html
+<div [dropTarget]="target"
+    class="cat-target"
+    [class.cat-target--hovering]="hovering$ | async">
+    drop cats here
+</div>
+```
+
+```scss
+.cat-target { background: #eee; }
+.cat-target--hovering { background: lightgoldenrodyellow; }
+```
+
+```typescript
+target = this.dnd.dropTarget("CAT", {
+    drop: monitor => {
+        console.log('dropped a cat');
+    }
+});
+
+// this is a very useful combination on a drop target,
+// which expresses 'hovering over' + ('same type' + 'DropTargetSpec.canDrop returned true')
+// you almost always want to use the combination rather than isOver on its own
+hovering$ = this.target.listen(m => m.isOver() && m.canDrop());
+```
+
+## What can you listen to?
+
 Each type of connection gets a different set of information available on the
-monitor. They are laid out in the three interfaces in this module:
+monitor. They are laid out in these interfaces:
 
 - [DragSourceMonitor](../../interfaces/DragSourceMonitor.html)
 - [DropTargetMonitor](../../interfaces/DropTargetMonitor.html)
 - [DragLayerMonitor](../../interfaces/DragLayerMonitor.html)
 - All three derive from [MonitorBase](../../interfaces/MonitorBase.html)
 
+## Optimisation
+
 Note that all three monitors have very rapidly-changing information available on
 them, such as the current viewport-mouse offset. The `.listen()` functions will
 optimise component updates for you. You **don't** want to:
@@ -25,6 +57,19 @@ optimise component updates for you. You **don't** want to:
 2. Subscribe to the entire monitor object. It will only fire once, and then
    never again, because the monitor object itself is the same each time.
 
+The implementation of `listen()` includes an implementation of RxJS'
+`distinctUntilChanged` that also optimises for JS Objects with the same keys
+but different values. The following two examples fire exactly as often:
+
+```typescript
+isDraggingPlain$ = this.source.listen(m => m.isDragging());
+isDraggingObj$   = this.source.listen(m => ({ isDragging: m.isDragging() }));
+```
+
+This is helpful if you have a lot of properties to listen to and wish to
+reduce the number of `| async` pipes in your code, or if you want to copy
+some `react-dnd` code.
+
 ## Making decisions in the Spec based on current drag state
 
 The other place you get access to a monitor is in the callbacks in each Spec.

docs/Quickstart.md

@@ -1,17 +1,17 @@
 ## Installation
 
 ```sh
-yarn add angular-skyhook react-dnd-html5-backend
+yarn add @angular-skyhook/core react-dnd-html5-backend
 ```
 
-You might consider `angular-skyhook-multi-backend` instead of the HTML5
+You might consider `@angular-skyhook/multi-backend` instead of the HTML5
 backend, because it allows adding touch support as well.
 
 Then import `SkyhookDndModule` and provide the backend:
 
 
 ```typescript
-import { SkyhookDndModule } from 'angular-skyhook';
+import { SkyhookDndModule } from "@angular-skyhook/core";
 import { default as HTML5Backend } from 'react-dnd-html5-backend'
 
 @NgModule({
@@ -79,12 +79,12 @@ can let the browser render drag previews, when using a backend based on click
 or touch events, on mobile you have to render them yourself.
 
 A good way to solve both problems at once is using
-[`angular-skyhook-multi-backend`][skyhook-multi]. It is based on the original
+[`@angular-skyhook/multi-backend`][skyhook-multi]. It is based on the original
 [dnd-multi-backend][dnd-multi-backend], which was designed to seamlessly switch
 between an HTML5 and a [touch backend][touch-backend] when it noticed different
-kinds of interaction. The Skyhook version includes a preview component.
+kinds of interaction. The `@angular-skyhook` version includes a preview component.
 
-[skyhook-multi]: ../angular-skyhook-multi-backend/
+[skyhook-multi]: ../@angular-skyhook/multi-backend/
 Note also that you will need to use an exported function
 to provide the backend, to retain AOT compatibility, if it requires assembly.
 `MultiBackend`, for example, can be used like so:

docs/Translating-React-Code.md

@@ -7,7 +7,7 @@ documentation](http://react-dnd.github.io/react-dnd/docs-overview.html). In the
 interest of making them useful or at least understandable, this library presents
 a fairly similar API to the original. There are, of course, some differences
 mandated by the style and limitations of React and Angular. We will illustrate
-this with the `react-dnd` `DragSource` compared to `angular-skyhook`
+this with the `react-dnd` `DragSource` compared to `@angular-skyhook`'s
 `SkyhookDndService.dragSource()`. Here are the [original API
 docs](http://react-dnd.github.io/react-dnd/docs-drag-source.html) on
 `DragSource`; the following is a small but complete example for a quick
@@ -173,7 +173,7 @@ asynchronous drag operations start. Angular doesn't have a way for arbitrary
 objects to listen to `ngOnChanges()`, so we have to do it manually.
 
 You can supply a default type, or `null`, and update it in later as the
-`@Input()` property is populated. If you supply `null`, `angular-skyhook` will
+`@Input()` property is populated. If you supply `null`, `@angular-skyhook` will
 defer connecting the DOM and the subscription to the `monitor` until this is
 done. See `DragSource.setType` for more information.
 

docs/Tutorial.md

@@ -270,7 +270,7 @@ value to any new subscribers. This is exactly what we want.
 
 ```typescript
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject } from 'rxjs';
 import { Coord } from './coord';
 
 @Injectable()
@@ -346,7 +346,7 @@ position. You can store the `currentPosition` by subscribing internally to
 
 ```typescript
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject } from 'rxjs';
 import { Coord } from './coord';
 
 @Injectable()
@@ -446,7 +446,7 @@ Here's all four in one go:
 
 ```typescript
 import { Component } from '@angular/core';
-import { SkyhookDndService } from 'angular-skyhook';
+import { SkyhookDndService } from "@angular-skyhook/core";
 import { ItemTypes } from './constants';
 
 @Component({
@@ -506,7 +506,7 @@ isDragging$ = this.knightSource.listen(monitor => monitor.isDragging());
 
 Now, the knight on the board will be a bit transparent when you've picked it up.
 You could set it to `opacity: 0`, but in chess, players like to know where the
-piece came from. `angular-skyhook` makes no assumptions about how to render
+piece came from. `@angular-skyhook` makes no assumptions about how to render
 any elements, so you can always customise their appearance at any stage of the
 drag and drop process.
 
@@ -569,7 +569,7 @@ to that wrapper `div`. It's very similar to the drag source.
 
 ```typescript
 import { Component, Input  } from "@angular/core";
-import { SkyhookDndService } from 'angular-skyhook';
+import { SkyhookDndService } from "@angular-skyhook/core";
 import { ItemTypes } from "./constants";
 
 @Component({
@@ -717,7 +717,7 @@ Here's what it looks like:
 ![Visual guides and a horse preview image](../media/guides-nohorse.png)
 
 Lastly, we're going to customize the drag preview (that little knight that
-follows the mouse around). `angular-skyhook` has some very powerful ways to
+follows the mouse around). `@angular-skyhook` has some very powerful ways to
 customize this, but we're going to use a simple image. It's quite simple:
 
 1. Create an [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)