fix some teleportal typos in comments, tests and documentation. (alpi…

…nejs#2432)

packages/alpinejs/src/directives/x-teleport.js

@@ -6,8 +6,8 @@ import { addScopeToNode } from "../scope"
 directive('teleport', (el, { expression }, { cleanup }) => {
     let target = document.querySelector(expression)
     let clone = el.content.cloneNode(true).firstElementChild
-    
-    // Add reference to element on <template x-portal, and visa versa.
+
+    // Add reference to element on <template x-teleport, and visa versa.
     el._x_teleport = clone
     clone._x_teleportBack = el
 
@@ -16,7 +16,7 @@ directive('teleport', (el, { expression }, { cleanup }) => {
         el._x_forwardEvents.forEach(eventName => {
             clone.addEventListener(eventName, e => {
                 e.stopPropagation()
-                
+
                 el.dispatchEvent(new e.constructor(e.type, e))
             })
         })

packages/alpinejs/src/lifecycle.js

@@ -49,17 +49,17 @@ export function closestRoot(el, includeInitSelectors = false) {
         const selectors = includeInitSelectors ? allSelectors() : rootSelectors()
 
         if (selectors.some(selector => element.matches(selector))) return true
-    }) 
+    })
 }
 
 export function findClosest(el, callback) {
     if (! el) return
 
     if (callback(el)) return el
 
-    // Support crawling up portals.
+    // Support crawling up teleports.
     if (el._x_teleportBack) el = el._x_teleportBack
-    
+
     if (! el.parentElement) return
 
     return findClosest(el.parentElement, callback)

packages/docs/src/en/directives/teleport.md

@@ -61,11 +61,11 @@ Notice how when toggling the modal, the actual modal contents show up AFTER the
 <a name="forwarding-events"></a>
 ## Forwarding events
 
-Alpine tries it's best to make the experience of telporting seemless. Anything you would normally do in a template, you should be able to do inside an `x-teleport` template. Teleported content can access the normal Alpine scope of the component as well as other features like `$refs`, `$root`, etc...
+Alpine tries it's best to make the experience of teleporting seamless. Anything you would normally do in a template, you should be able to do inside an `x-teleport` template. Teleported content can access the normal Alpine scope of the component as well as other features like `$refs`, `$root`, etc...
 
 However, native DOM events have no concept of teleportation, so if, for example, you trigger a "click" event from inside a teleported element, that event will bubble up the DOM tree as it normally would.
 
-To make this experience more seemless, you can "forward" events by simply registering event listeners on the `<template x-teleport...>` element itself like so:
+To make this experience more seamless, you can "forward" events by simply registering event listeners on the `<template x-teleport...>` element itself like so:
 
 ```alpine
 <div x-data="{ open: false }">

tests/cypress/integration/directives/x-teleport.spec.js

@@ -84,7 +84,7 @@ test('removing teleport source removes teleported target',
     },
 )
 
-test('$refs inside telport can be accessed outside',
+test('$refs inside teleport can be accessed outside',
     [html`
         <div x-data="{ count: 1 }" id="a">
             <button @click="$refs.count.remove()">Remove</button>
@@ -119,7 +119,7 @@ test('$root is accessed outside teleport',
     },
 )
 
-test('$id honors x-id outside telport',
+test('$id honors x-id outside teleport',
     [html`
         <div x-data="{ count: 1 }" id="a" x-id="['foo']">
             <h1 x-text="$id('foo')"></h1>

tests/cypress/integration/plugins/morph.spec.js

@@ -13,7 +13,7 @@ test('can morph components and preserve Alpine state',
         get('span').should(haveText('bar'))
         get('button').click()
         get('span').should(haveText('baz'))
-        
+
         get('div').then(([el]) => window.Alpine.morph(el, toHtml))
 
         get('span').should(haveText('baz'))
@@ -35,7 +35,7 @@ test('morphing target uses outer Alpine scope',
         get('span').should(haveText('bar'))
         get('button').click()
         get('span').should(haveText('baz'))
-        
+
         get('div').then(([el]) => window.Alpine.morph(el, toHtml))
 
         get('span').should(haveText('baz'))
@@ -58,7 +58,7 @@ test('can morph with HTML change and preserve Alpine state',
         get('button').should(haveText('Change Foo'))
 
         get('div').then(([el]) => window.Alpine.morph(el, toHtml))
-        
+
         get('span').should(haveText('baz'))
         get('button').should(haveText('Changed Foo'))
     },
@@ -87,13 +87,13 @@ test('morphing an element with multiple nested Alpine components preserves scope
         get('h1').should(haveText('law'))
 
         get('div').then(([el]) => window.Alpine.morph(el, toHtml))
-        
+
         get('span').should(haveText('baz'))
         get('h1').should(haveText('law'))
     },
 )
 
-test('can morph portals',
+test('can morph teleports',
     [html`
         <div x-data="{ count: 1 }" id="a">
             <button @click="count++">Inc</button>
@@ -126,7 +126,7 @@ test('can morph portals',
         get('button').click()
         get('h1').should(haveText('2'))
         get('h2').should(haveText('hey'))
-        
+
         get('div#a').then(([el]) => window.Alpine.morph(el, toHtml))
 
         get('h1').should(haveText('2'))