Merge pull request #13 from ccinelli/feature/cc/portal

Adding portal

package.json

@@ -1,25 +1,26 @@
 {
   "devDependencies": {
-    "@commitlint/cli": "^8.0.0",
-    "@commitlint/config-conventional": "^8.0.0",
-    "@commitlint/config-lerna-scopes": "^8.0.0",
-    "@marko/testing-library": "^1.0.5",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@commitlint/config-lerna-scopes": "^8.2.0",
+    "@marko/testing-library": "^1.1.2",
     "chai": "^4.2.0",
     "chai-dom": "^1.8.1",
-    "cheerio": "^1.0.0-rc.2",
-    "codecov": "^3.5.0",
-    "cross-env": "^5.2.0",
-    "husky": "^3.0.0",
+    "cheerio": "^1.0.0-rc.3",
+    "chromedriver": "^78.0.1",
+    "codecov": "^3.6.1",
+    "cross-env": "^5.2.1",
+    "husky": "^3.0.9",
     "lasso": "^3.3.0",
-    "lasso-marko": "^2.4.7",
-    "lerna": "^3.15.0",
-    "lint-staged": "^9.0.2",
-    "marko": "^4.18.8",
-    "marko-cli": "^7.0.6",
-    "mocha": "^6.1.4",
+    "lasso-marko": "^2.4.8",
+    "lerna": "^3.18.4",
+    "lint-staged": "^9.4.3",
+    "marko": "^4.18.24",
+    "marko-cli": "^7.0.25",
+    "mocha": "^6.2.2",
     "nyc": "^14.1.1",
-    "prettier": "^1.18.2",
-    "sinon": "^7.3.2",
+    "prettier": "^1.19.1",
+    "sinon": "^7.5.0",
     "sinon-chai": "^3.3.0"
   },
   "lint-staged": {

tags/portal/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+
+### Features
+
+* **portal:** Adding portal component ([b27e61a](https://github.com/marko-js/tags/commit/b27e61a))

tags/portal/README.md

@@ -0,0 +1,57 @@
+<h1 align="center">
+  <!-- Logo -->
+  <br/>
+  @marko-tags/portal
+	<br/>
+
+  <!-- Stability -->
+  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
+    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
+  </a>
+  <!-- NPM Version -->
+  <a href="https://npmjs.org/package/@marko-tags/portal">
+    <img src="https://img.shields.io/npm/v/@marko-tags/portal.svg" alt="NPM Version"/>
+  </a>
+  <!-- Downloads -->
+  <a href="https://npmjs.org/package/@marko-tags/portal">
+    <img src="https://img.shields.io/npm/dm/@marko-tags/portal.svg" alt="Downloads"/>
+  </a>
+</h1>
+
+A Portal Component for Marko.js
+
+Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+
+A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually “break out” of its container. For example, dialogs and tooltips.
+
+# Installation
+
+```console
+npm install @marko-tags/portal
+```
+
+# Example
+
+By default, the portal renders into `document.body`:
+
+```marko
+<portal>
+   ...content here...
+</portal>
+```
+
+You can set a custom target container using a DOM id:
+
+```marko
+<portal target="some-id">
+   ...content here...
+</portal>
+```
+
+Or by passing a DOM Node:
+
+```marko
+<portal target=someNode>
+   ...content here...
+</portal>
+```

tags/portal/index.marko

@@ -0,0 +1,37 @@
+import targetTemplate from './target'
+
+class {
+    onMount() {
+        this.target = this.getTarget(this.input.target);
+        this.component = targetTemplate
+            .renderSync(this.input)
+            .appendTo(this.target)
+            .getComponent();
+    }
+    onInput(newInput) {
+        let component = this.component;
+        if (component) {
+            let target = this.getTarget(newInput.target);
+
+            if (target !== this.target) {
+                component.els.forEach(el => target.appendChild(el));
+                this.target = target;
+            }
+
+            component.input = newInput;
+        }
+    }
+    getTarget(target) {
+        if (typeof target === "string") {
+            target = document.getElementById(target);
+        }
+        return target || document.body;
+    }
+    onDestroy() {
+        this.component.destroy();
+    }
+}
+
+<span style={
+    display: "none"
+}/>

tags/portal/marko.json

@@ -0,0 +1,8 @@
+{
+  "<portal>": {
+    "template": "./index.marko",
+    "attributes": {
+      "target": "expression"
+    }
+  }
+}

tags/portal/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@marko-tags/portal",
+  "description": "A Portal Component for Marko.js. A typical use case for portals is in dialogs, 'hovercards', and tooltips.",
+  "version": "1.0.0",
+  "bugs": "https://github.com/marko-js/tags/issues/new?template=Bug_report.md",
+  "files": [
+    "index.marko",
+    "target.marko",
+    "marko.json"
+  ],
+  "homepage": "https://github.com/marko-js/tags/tree/master/tags/portal",
+  "keywords": [
+    "marko",
+    "markojs",
+    "portal",
+    "dialog",
+    "body",
+    "overflow",
+    "z-index"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "marko": "^4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marko-js/tags"
+  }
+}

tags/portal/target.marko

@@ -0,0 +1 @@
+<include(input.renderBody)/>