@bubblydoo/angular-react - npm Package Compare versions

Comparing version 0.2.0-beta.0 to 0.2.0-beta.1

esm2020/lib/templates/use-angular-template-ref.mjs

lib/templates/use-angular-template-ref.d.ts

lib/templates/angular-template-outlet.d.ts

		@@ -7,5 +7,5 @@ import { type NgModuleRef, type TemplateRef } from '@angular/core';
		export declare function AngularTemplateOutlet({ tmpl, tmplContext }: Props): JSX.Element;
		export declare const fromTemplateRef: (tmpl: TemplateRef<any>, tmplContext: Record<string, any> \| undefined, moduleRef: NgModuleRef<any>) => JSX.Element;
		export declare const useFromTemplateRefWithModule: (moduleRef: NgModuleRef<any>) => (tmpl: TemplateRef<any>, tmplContext?: Record<string, any>) => JSX.Element;
		export declare const useFromTemplateRef: () => (tmpl: TemplateRef<any>, tmplContext?: Record<string, any>) => JSX.Element;
		export declare const useFromAngularTemplateRefWithModule: (moduleRef: NgModuleRef<any>) => (tmpl: TemplateRef<any>, tmplContext?: Record<string, any>) => JSX.Element;
		export declare const useFromAngularTemplateRefFn: () => (tmpl: TemplateRef<any>, tmplContext?: Record<string, any>) => JSX.Element;
		export declare function useFromAngularTemplateRef<C extends Record<string, any>>(templateRef: TemplateRef<C>): (tmplContext: C) => JSX.Element;
		export {};

package.json

		{
		"name": "@bubblydoo/angular-react",
		"version": "0.2.0-beta.0",
		"version": "0.2.0-beta.1",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "author": "Hans Otto Wirtz <hansottowirtz@gmail.com>",

public-api.d.ts

		@@ -13,3 +13,3 @@ export * from './lib/angular-react.service';
		export * from "./lib/templates/template-outlet.component";
		export * from "./lib/templates/use-angular-template";
		export * from "./lib/templates/use-angular-template-ref";
		export { AngularWrapper, AngularWrapperWithModule, useInjected, useObservable };

README.md

		@@ -159,2 +159,75 @@ # React in Angular and Angular in React

		### Using templates

		#### `useAngularTemplateRef`: to convert a React component into a `TemplateRef`

		```tsx
		import { useAngularTemplateRef } from "@bubblydoo/angular-react";

		@Component({
		selector: 'message',
		template: `
		<div>
		<ng-template [ngTemplateOutlet]="tmpl" [ngTemplateOutletContext]="{ message }"></ng-template>
		</div>
		`
		})
		class MessageComponent {
		@Input() tmpl: TemplateRef<{ message: string }>;
		@Input() message: string;
		}

		function Text(props: { message: string }) {
		return <>{props.message}</>
		}

		function Message(props: { message: string }) {
		const tmpl = useAngularTemplateRef(Text);

		const inputs = useMemo(() => ({
		message: props.message,
		tmpl
		}), [props.message, tmpl]);

		return <AngularWrapper component={MessageComponent} inputs={inputs} />
		}
		```

		#### `useFromAngularTemplateRef`: to convert a `TemplateRef` into a React component

		```tsx
		function Message(props: {
		message: string;
		tmpl: TemplateRef<{ message: string }>;
		}) {
		const Template = useFromAngularTemplateRef(props.tmpl);

		return <Template message={props.message.toUpperCase()} />;
		}

		@Component({
		selector: "outer",
		template: `
		<ng-template #tmpl let-message="message">{{ message }}</ng-template>
		<div>
		<react-wrapper
		[component]="Message"
		[props]="{ tmpl, message }"
		></react-wrapper>
		</div>
		`,
		})
		class MessageComponent {
		Message = Message;

		@Input() message!: string;
		}
		```

		### Context Bridging

		If you're using `react-wrapper`, all context is lost by default. You can solve this in two ways:
		- Put all context on `angularReactService.wrappers` (see above). This is not ideal, because there can only be one global context.
		- Use `useContextBridge` from `its-fine` and wrap all React components in a `<ContextBridge>`.

		## Developing
		@@ -189,3 +262,3 @@

		You might want to use a file resolution if you run into NG0203 errors.
		You might want to use resolutions or overrides if you run into NG0203 errors.

		@@ -198,5 +271,4 @@ ```json


		## Further reading

		See this blog post for the motivation and more details: [Transitioning from Angular to React, without starting from scratch](https://dev.to/bubblydoo/transitioning-from-angular-to-react-without-starting-from-scratch-j66)

esm2020/lib/templates/use-angular-template.mjs

lib/templates/use-angular-template.d.ts

esm2020/lib/angular-react.module.mjs