bubblydoo / angular-react Goto Github PK

import * as React from "react"
import { NgModuleRef } from "@angular/core"
import {
	AngularWrapper,
	AngularWrapperWithModule
} from "@bubblydoo/angular-react"
import { suspend } from "suspend-react"

import { AngularInjectorContext } from "./lazyAngularContextProvider"

export function SuspendingLazyAngularWrapperWithPromises({
	moduleRefPromise,
	componentPromise,
	serverFallback,
	...props
}: {
	moduleRefPromise: Promise<NgModuleRef<any> | "IS_SERVER">
	componentPromise: Promise<any>
	serverFallback: any
} & Omit<Parameters<typeof AngularWrapper>[0], "component">) {
	const injector = React.useContext(AngularInjectorContext)

	const [moduleRef, component] = suspend(
		(moduleRefPromise, componentPromise) =>
			Promise.all([moduleRefPromise, componentPromise]),
		[moduleRefPromise, componentPromise]
	)

	const [loaded, setLoaded] = React.useState(false)
	React.useEffect(() => setLoaded(true), [])

	if (!loaded || moduleRef === "IS_SERVER") return serverFallback

	return (
		<AngularWrapperWithModule
			component={component}
			moduleRef={moduleRef}
			injector={injector ?? moduleRef.injector}
			{...props}
		/>
	)
}

import * as React from "react"
import type { Injector, NgModuleRef } from "@angular/core"

export const LazyAngularModuleContext =
	React.createContext<() => Promise<NgModuleRef<any> | "IS_SERVER">>(null)

export const AngularInjectorContext = React.createContext<Injector | null>(null)

export default function LazyAngularModuleContextProvider(props: {
	children: any
	moduleRefLoader: () => Promise<NgModuleRef<any> | "IS_SERVER">
	injector?: Injector
}) {
	const moduleRefPromiseRef = React.useRef<Promise<
		NgModuleRef<any> | "IS_SERVER"
	> | null>(null)

	const moduleRefLoader = props.moduleRefLoader

	const cachedModuleRefLoader = React.useCallback(() => {
		if (moduleRefPromiseRef.current) return moduleRefPromiseRef.current
		const newModuleRefPromise = moduleRefLoader()
		moduleRefPromiseRef.current = newModuleRefPromise
		return newModuleRefPromise
	}, [moduleRefLoader])

	return (
		<LazyAngularModuleContext.Provider value={cachedModuleRefLoader}>
			<AngularInjectorContext.Provider value={props.injector ?? null}>
				{props.children}
			</AngularInjectorContext.Provider>
		</LazyAngularModuleContext.Provider>
	)
}

	const componentLoader = React.useCallback(
		() => import("primeng/button").then((m) => m.Button),
		[]
	)
	return (
			<LazyAngularWrapper
				fallback={<h1>Loading...</h1>}
				componentLoader={componentLoader}
				inputs={{ label: "Click me!" }}
			/>
	)

import "../globals.css"
import "@angular/compiler"

import configureZonejs from "../components/AngularWrapper/configureZoneJs"
import LazyAngularModuleContextProvider from "../components/AngularWrapper/lazyAngularContextProvider"
import loadAngularModule from "../components/AngularWrapper/loadAngularModule"

typeof document !== "undefined" && configureZonejs()

const moduleRefLoader = () => {
	if (typeof document === "undefined") return Promise.resolve("IS_SERVER")
	return import("primeng/button")
		.then((m) => m.ButtonModule)
		.then((m) => loadAngularModule(m))
}

export default function App({ Component, pageProps }) {
	return (
		<LazyAngularModuleContextProvider moduleRefLoader={moduleRefLoader}>
			<Component {...pageProps} />
		</LazyAngularModuleContextProvider>
	)
}