printer-notifications/node_modules/svelte-hmr/runtime/svelte-native/proxy-adapter-native.js
2023-11-13 16:10:04 -05:00

342 lines
11 KiB
JavaScript

/* global document */
import { adapter as ProxyAdapterDom } from '../proxy-adapter-dom'
import { patchShowModal, getModalData } from './patch-page-show-modal'
patchShowModal()
// Svelte Native support
// =====================
//
// Rerendering Svelte Native page proves challenging...
//
// In NativeScript, pages are the top level component. They are normally
// introduced into NativeScript's runtime by its `navigate` function. This
// is how Svelte Natives handles it: it renders the Page component to a
// dummy fragment, and "navigate" to the page element thus created.
//
// As long as modifications only impact child components of the page, then
// we can keep the existing page and replace its content for HMR.
//
// However, if the page component itself is modified (including its system
// title bar), things get hairy...
//
// Apparently, the sole way of introducing a new page in a NS application is
// to navigate to it (no way to just replace it in its parent "element", for
// example). This is how it is done in NS's own "core" HMR.
//
// NOTE The last paragraph has not really been confirmed with NS6.
//
// Unfortunately the API they're using to do that is not public... Its various
// parts remain exposed though (but documented as private), so this exploratory
// work now relies on it. It might be fragile...
//
// The problem is that there is no public API that can navigate to a page and
// replace (like location.replace) the current history entry. Actually there
// is an active issue at NS asking for that. Incidentally, members of
// NativeScript-Vue have commented on the issue to weight in for it -- they
// probably face some similar challenge.
//
// https://github.com/NativeScript/NativeScript/issues/6283
const getNavTransition = ({ transition }) => {
if (typeof transition === 'string') {
transition = { name: transition }
}
return transition ? { animated: true, transition } : { animated: false }
}
// copied from TNS FrameBase.replacePage
//
// it is not public but there is a comment in there indicating it is for
// HMR (probably their own core HMR though)
//
// NOTE this "worked" in TNS 5, but not anymore in TNS 6: updated version bellow
//
// eslint-disable-next-line no-unused-vars
const replacePage_tns5 = (frame, newPageElement, hotOptions) => {
const currentBackstackEntry = frame._currentEntry
frame.navigationType = 2
frame.performNavigation({
isBackNavigation: false,
entry: {
resolvedPage: newPageElement.nativeView,
//
// entry: currentBackstackEntry.entry,
entry: Object.assign(
currentBackstackEntry.entry,
getNavTransition(hotOptions)
),
navDepth: currentBackstackEntry.navDepth,
fragmentTag: currentBackstackEntry.fragmentTag,
frameId: currentBackstackEntry.frameId,
},
})
}
// Updated for TNS v6
//
// https://github.com/NativeScript/NativeScript/blob/6.1.1/tns-core-modules/ui/frame/frame-common.ts#L656
const replacePage = (frame, newPageElement) => {
const currentBackstackEntry = frame._currentEntry
const newPage = newPageElement.nativeView
const newBackstackEntry = {
entry: currentBackstackEntry.entry,
resolvedPage: newPage,
navDepth: currentBackstackEntry.navDepth,
fragmentTag: currentBackstackEntry.fragmentTag,
frameId: currentBackstackEntry.frameId,
}
const navigationContext = {
entry: newBackstackEntry,
isBackNavigation: false,
navigationType: 2 /* NavigationType replace */,
}
frame._navigationQueue.push(navigationContext)
frame._processNextNavigationEntry()
}
export const adapter = class ProxyAdapterNative extends ProxyAdapterDom {
constructor(instance) {
super(instance)
this.nativePageElement = null
this.originalNativeView = null
this.navigatedFromHandler = null
this.relayNativeNavigatedFrom = this.relayNativeNavigatedFrom.bind(this)
}
dispose() {
super.dispose()
this.releaseNativePageElement()
}
releaseNativePageElement() {
if (this.nativePageElement) {
// native cleaning will happen when navigating back from the page
this.nativePageElement = null
}
}
// svelte-native uses navigateFrom event + e.isBackNavigation to know
// when to $destroy the component -- but we don't want our proxy instance
// destroyed when we renavigate to the same page for navigation purposes!
interceptPageNavigation(pageElement) {
const originalNativeView = pageElement.nativeView
const { on } = originalNativeView
const ownOn = originalNativeView.hasOwnProperty('on')
// tricks svelte-native into giving us its handler
originalNativeView.on = function(type, handler) {
if (type === 'navigatedFrom') {
this.navigatedFromHandler = handler
if (ownOn) {
originalNativeView.on = on
} else {
delete originalNativeView.on
}
} else {
//some other handler wireup, we will just pass it on.
if (on) {
on(type, handler)
}
}
}
}
afterMount(target, anchor) {
// nativePageElement needs to be updated each time (only for page
// components, native component that are not pages follow normal flow)
//
// TODO quid of components that are initially a page, but then have the
// <page> tag removed while running? or the opposite?
//
// insertionPoint needs to be updated _only when the target changes_ --
// i.e. when the component is mount, i.e. (in svelte3) when the component
// is _created_, and svelte3 doesn't allow it to move afterward -- that
// is, insertionPoint only needs to be created once when the component is
// first mounted.
//
// TODO is it really true that components' elements cannot move in the
// DOM? what about keyed list?
//
const isNativePage =
(target.tagName === 'fragment' || target.tagName === 'frame') &&
target.firstChild &&
target.firstChild.tagName == 'page'
if (isNativePage) {
const nativePageElement = target.firstChild
this.interceptPageNavigation(nativePageElement)
this.nativePageElement = nativePageElement
} else {
// try to protect against components changing from page to no-page
// or vice versa -- see DEBUG 1 above. NOT TESTED so prolly not working
this.nativePageElement = null
super.afterMount(target, anchor)
}
}
rerender() {
const { nativePageElement } = this
if (nativePageElement) {
this.rerenderNative()
} else {
super.rerender()
}
}
rerenderNative() {
const { nativePageElement: oldPageElement } = this
const nativeView = oldPageElement.nativeView
const frame = nativeView.frame
if (frame) {
return this.rerenderPage(frame, nativeView)
}
const modalParent = nativeView._modalParent // FIXME private API
if (modalParent) {
return this.rerenderModal(modalParent, nativeView)
}
// wtf? hopefully a race condition with a destroyed component, so
// we have nothing more to do here
//
// for once, it happens when hot reloading dev deps, like this file
//
}
rerenderPage(frame, previousPageView) {
const isCurrentPage = frame.currentPage === previousPageView
if (isCurrentPage) {
const {
instance: { hotOptions },
} = this
const newPageElement = this.createPage()
if (!newPageElement) {
throw new Error('Failed to create updated page')
}
const isFirstPage = !frame.canGoBack()
if (isFirstPage) {
// NOTE not so sure of bellow with the new NS6 method for replace
//
// The "replacePage" strategy does not work on the first page
// of the stack.
//
// Resulting bug:
// - launch
// - change first page => HMR
// - navigate to other page
// - back
// => actual: back to OS
// => expected: back to page 1
//
// Fortunately, we can overwrite history in this case.
//
const nativeView = newPageElement.nativeView
frame.navigate(
Object.assign(
{},
{
create: () => nativeView,
clearHistory: true,
},
getNavTransition(hotOptions)
)
)
} else {
replacePage(frame, newPageElement, hotOptions)
}
} else {
const backEntry = frame.backStack.find(
({ resolvedPage: page }) => page === previousPageView
)
if (!backEntry) {
// well... looks like we didn't make it to history after all
return
}
// replace existing nativeView
const newPageElement = this.createPage()
if (newPageElement) {
backEntry.resolvedPage = newPageElement.nativeView
} else {
throw new Error('Failed to create updated page')
}
}
}
// modalParent is the page on which showModal(...) was called
// oldPageElement is the modal content, that we're actually trying to reload
rerenderModal(modalParent, modalView) {
const modalData = getModalData(modalView)
modalData.closeCallback = () => {
const nativePageElement = this.createPage()
if (!nativePageElement) {
throw new Error('Failed to created updated modal page')
}
const { nativeView } = nativePageElement
const { originalOptions } = modalData
// Options will get monkey patched again, the only work left for us
// is to try to reduce visual disturbances.
//
// FIXME Even that proves too much unfortunately... Apparently TNS
// does not respect the `animated` option in this context:
// https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_base_.showmodaloptions#animated
//
const options = Object.assign({}, originalOptions, { animated: false })
modalParent.showModal(nativeView, options)
}
modalView.closeModal()
}
createPage() {
const {
instance: { refreshComponent },
} = this
const { nativePageElement, relayNativeNavigatedFrom } = this
const oldNativeView = nativePageElement.nativeView
// rerender
const target = document.createElement('fragment')
// not using conservative for now, since there's nothing in place here to
// leverage it (yet?) -- and it might be easier to miss breakages in native
// only code paths
refreshComponent(target, null)
// this.nativePageElement is updated in afterMount, triggered by proxy / hooks
const newPageElement = this.nativePageElement
// update event proxy
oldNativeView.off('navigatedFrom', relayNativeNavigatedFrom)
nativePageElement.nativeView.on('navigatedFrom', relayNativeNavigatedFrom)
return newPageElement
}
relayNativeNavigatedFrom({ isBackNavigation }) {
const { originalNativeView, navigatedFromHandler } = this
if (!isBackNavigation) {
return
}
if (originalNativeView) {
const { off } = originalNativeView
const ownOff = originalNativeView.hasOwnProperty('off')
originalNativeView.off = function() {
this.navigatedFromHandler = null
if (ownOff) {
originalNativeView.off = off
} else {
delete originalNativeView.off
}
}
}
if (navigatedFromHandler) {
return navigatedFromHandler.apply(this, arguments)
}
}
renderError(err /* , target, anchor */) {
// TODO fallback on TNS error handler for now... at least our error
// is more informative
throw err
}
}