feat(react): Next.js Support #445

christian-bromann · 2024-07-03T00:59:51Z

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally for affected output targets
Tests (npm test) were run locally and passed
Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

The current React output target can only be used on the client side. There is no support for server side rendered content, e.g. within a Next.js environment

What is the new behavior?

This patch enhances the React output target to support server side rendering.

Does this introduce a breaking change?

Yes
No

Other information

This is work in progress.

christian-bromann · 2024-07-10T22:01:20Z

PR with additional documentation can be found in ionic-team/stencil-site#1458

packages/example-project/component-library/stencil.config.ts

tanner-reits

LGTM. This is a good one to get some people testing before we merge all the way back to main, which I think is the plan anyway

mayerraphael · 2024-07-12T09:12:11Z

@christian-bromann @tanner-reits We would happily test the new output target on very large NextJS project. Do you have a dev version we could use?

christian-bromann · 2024-07-12T14:50:46Z

We would happily test the new output target on very large NextJS project. Do you have a dev version we could use?

That's awesome! I will share a dev version once I got ionic-team/stencil#5892 embedded in this.

laurencefass · 2024-07-12T17:41:01Z

great news! do you have any further info on what exactly Next JS support looks like. Im currently using a Provider pattern so though I render all Ionic components on the client (with 'use client').

Regarding There is no support for server side rendered content, e.g. within a Next.js environment its not strictly the case, using an IonApp provider one can prepare content using RSC and pass it to Ionic client components, so technically there is already some support.

I am able to load the context through the root layout so benefit from everything Next JS app router has to offer. Borrowed the pattern from Redux (which works really well with Ionic components and Next JS and yay im controlling my mobile app state with Redux Toolkit) .

I guess some components will have to be rendered on the client i.e. those with interactivity. I anticipate thats quite a lot of components. I also anticipate that the list of components that can be rendered server side will be well defined and limited. Is there a discussion on this which can be used as the foundation for docs later on, or at least to manage expectations during testing now?

christian-bromann · 2024-07-12T21:37:14Z

do you have any further info on what exactly Next JS support looks like. Im currently using a Provider pattern so though I render all Ionic components on the client (with 'use client').

With this patch the react output target will allow you to create a Next.js framework wrapper which enables the usage of Stencil components within Next.js applications including support for SSR, so that you can use Stencil components also on the server side.

Is there a discussion on this which can be used as the foundation for docs later on, or at least to manage expectations during testing now?

I think this PR thread is the best for posting comments and providing feedback on this development.

@mayerraphael I've just created this dev build: @stencil/[email protected] that you can use for testing. Note that I am still working on some render issues, e.g. Stencil seems to render scoped components twice for a short period until it reconciles properly. Also there is a hydration error being thrown when using scoped components. I am looking into that now. Let me know if you find anything else. Appreciated your support!

mayerraphael · 2024-07-15T12:10:05Z

@christian-bromann Thanks for the dev Version. We have problems getting it running.

Dist Custom Elements dir

We had to add a dir to the dist-custom-elements output target options otherwise the wrong import paths have been generated.

{
      type: 'dist-custom-elements',
      dir: 'dist/components', // added
},

It looks like Stencil uses dist/components as default and the Output Target uses /components as default, see: https://github.com/ionic-team/stencil-ds-output-targets/blob/next/packages/react-output-target/src/react-output-target/react-output-target.ts#L34

Event with underscore got broken

Events that had an underscore prefix got broken inside the generated components.ts file.

But this may be on our side. We removed those prefixes.

Server render errors

next dev crashes with the following error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

 185283 | Bo.renderToStaticNodeStream = Lo.renderToStaticNodeStream;
 185284 | Bo.renderToReadableStream = ql.renderToReadableStream;
> 185285 | const gs = (fe) => async ({ children: _, ...q }) => {
        |                             ^
 185286 |   if (q.__resolveTagName)
 185287 |     return fe.tagName;
 185288 |   if (!("process" in globalThis))
⨯ ..\frameworks\react\dist\cjs\index-0cc8d842.js (185285:29) @ eval
⨯ unhandledRejection: TypeError: Cannot destructure property 'children' of 'undefined' as it is undefined.

next build && next start crashes with

Error occurred prerendering page "/portal-layout". Read more: https://nextjs.org/docs/messages/prerender-error

Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D for the full message or use the non-minified dev 
environment for full errors and additional helpful warnings.

https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20Promise%5D

I will keep looking if i find out what exactly is happening.

Edit: It seems to be the createComponentForServerSideRendering method and the anonymous async method it returns.

If i debug, the type passed into the React render method is an unresolved Promise.

christian-bromann · 2024-07-15T17:21:00Z

It looks like Stencil uses dist/components as default and the Output Target uses /components as default

Good catch, fixed.

Events that had an underscore prefix got broken inside the generated components.ts file.

I will take a look at that.

Server render errors

I pushed a potential fix in this new dev version: 0.0.1-dev.11721063914.1cb11145, mind taking another stab at it? It also includes a fix for the default path.

mayerraphael · 2024-07-16T05:22:40Z

@christian-bromann Unfortunately it still occurs.

Here are more details:

 npx next dev
  ▲ Next.js 14.2.4
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1001ms
 ⚠ Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
 ○ Compiling / ...
 ✓ Compiled / in 2.2s (644 modules)
 GET /_next/static/webpack/db2d32ca0963fe62.webpack.hot-update.json 404 in 2331ms
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
Promise { <pending> }
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6181:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderHostElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3) 
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderChildrenArray (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6213:7)
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
Promise { <pending> }
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6181:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderHostElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3) 
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderChildrenArray (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6213:7)
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
Promise { <pending> }
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6181:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderHostElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3) 
    at renderElement (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)     
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6261:12)       
    at renderChildrenArray (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6213:7)
    at renderNodeDestructiveImpl (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (C:\dev\Liebherr.PatternLibrary\examples\nextjs-example\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
:14)
{
  '$$typeof': Symbol(react.element),
  type: 'patternlib-button',
  key: null,
  ref: null,
  props: {
    label: 'Hello',
...

Added some logging at the bottom of renderNodeDestructiveImpl inside react-dom-server.browser.development.js. The logs are printed on the server.

console.log(node); prints: Promise { <pending> }

node.then(x => console.log(x.type())); prints after the first couple of errors, as seen above:

{
  '$$typeof': Symbol(react.element),
  type: 'patternlib-button',
  key: null,
  ref: null,
  props: {
    label: 'Hello',
    ...

The node only resolves because of my node.then() call, Otherwise it will forever be an unawaited Promise.

This is what the node looks like to React

{
  '$$typeof': Symbol(react.element),
  type: [AsyncFunction (anonymous)],
  key: null,
  ref: null,
  props: { label: 'Hello' },
  _owner: null,
  _store: {}
}

React components can't be async, can they?

Here is what the home page looks like:

{
  '$$typeof': Symbol(react.element),
  type: [Function: Home],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {}
}

The demo page was reduced to

export default function Home(): JSX.Element {
  return (
    <main>
      <PatternlibButton label="Hello" />
    </main>
  );
}

Edit:

I get the same error if i use a NextJS page/React component and add async to it:

export default async function Home(): Promise<JSX.Element> {
  return (
    <main>
      Test
    </main>
  );
}

The problem is here:

stencil-ds-output-targets/packages/react-output-target/src/react/ssr.tsx

Line 26 in cb11145

return (async ({ children, ...props }: React.PropsWithChildren<{}>) => {

laurencefass · 2024-07-16T07:27:11Z

I dont really understand whats happening here. As a Next developer just wanting to use Ionic components in my app, my (possibly oversimplistic?) expectation is to know what Ionic components I can render on the server and which are client only. There seems to be a lot more going on here at a lower level of abstraction. Is the outcome of this being able to render (some?) Ionic components on the server?

christian-bromann · 2024-07-16T15:24:36Z

@mayerraphael did you check with the latest dev version? 0.0.1-dev.11721063914.1cb11145 has a patch that resolves all async children.

Is the outcome of this being able to render (some?) Ionic components on the server?

Yes.

laurencefass · 2024-07-16T18:40:09Z

Is the outcome of this being able to render (some?) Ionic components on the server?

Yes.

So... a finite (documented?) set of layout only Ionic server (isomorphic?) components?

christian-bromann · 2024-07-16T18:57:13Z

Well there are many other projects that use this React Output Target for component libraries that have interest in this, e.g. see some of the reference links in ionic-team/stencil#5831. Even if a component is for layout only, the DX is much better if it can also be used on the server side.

mayerraphael · 2024-07-17T06:01:41Z

@mayerraphael did you check with the latest dev version? 0.0.1-dev.11721063914.1cb11145 has a patch that resolves all async children.

It seems to only work with the new AppRouter of NextJS, not with the PageRouter.
The AppRouter allows async functional components, the PageRouter does not.

As everything is async i guess there is no chance for PageRouter support. The PageRouter is not recommended anymore with Next 14+, but it is also not deprecated, see https://nextjs.org/docs/pages

Please put that it is only compatible with the AppRouter into your documentation or i guess you might get some bug tickets :)

I've updated my repository with two NextJS examples, one using PageRouter and one with the AppRouter. There you can replicate the PageRouter problem.

https://github.com/mayerraphael/stencil-dsd-ssr-playground

Thanks for your good work @christian-bromann

mayerraphael · 2024-07-17T08:46:44Z

@christian-bromann Summary of our current issues:

GlobalScripts execution missing

Now the React components internally call defineCustomElement (dist-custom-elements). But we also have global scripts which ran with defineCustomElements() (loader) before. As async function components only work on the server, also with AppRouter in NextJS, there is no way to run await defineCustomElements() (which executes the globalScript specified in the stencil config) before components initialize. (or is there?) Breaking some of our components which rely on some global state.

It would be best the user could disable the internal defineCustomElement call and we can still use the lazy loading way as dist-custom-element also breaks the expected order of initialization (child component initializes before parent component).

globalScript is part of the loader.js and executed with defineCustomElements():

Breaking change

It's not possible to run the new React Output Target with the old renderToString and NextJS PageRouter anymore (see why in my previous comment).

Just updating to the new React Output Target would break our existing project (NextJS PageRouter with custom server.js calling hydrate.renderToString()).

I guess this change here should be backwards compatible:

Allow user to specify if dist-custom-element or loader (like before, default) is used
Allow user to specify if renderToString is called internally or called by the user on the html (like before, default)
- This is an opt-out of the new SSR concept. The client component is used on the server, like before.
globalScript must be run or exported so it can be run by the user (not required if loader is used).

This is definitly a step in the right direction, but currently i think it would break many existing React projects. The new concept should either be a flag in the reactOutputTarget options or a completly independend package.
The manual way (calling hydrate.renderToString) should still work.

Output Target Version

Is there a reason why the latest stable react-output-target is 0.5.3 from a year ago and newer dev version are available (like the one we test now) but never made it to stable?

The interface of reactOutputTarget options has a breaking change (proxyfiles removed, componentCorePackage removed).

christian-bromann · 2024-07-17T15:45:07Z

First off, thanks a lot @mayerraphael for all the feedback!

Please put that it is only compatible with the AppRouter into your documentation or i guess you might get some bug tickets :)

Yes, for now we will only support AppRouter as Stencils serialization function is async and I assume it would require larger efforts to support a sync version of that.

GlobalScripts execution missing

I am not sure if global scripts should be part of the hydration process. It is hard to say as I don't have too much knowledge about what people do in the globalscripts but I believe it is mostly setting up the browser environment which is not needed on the server side. For example there is no need to call defineCustomElements when server side rendering the component as the hydrate module already has all components registered.

I personally would not recommend the use of global scripts at all as they can potentially block the app from being rendered and slow down your app load performance.

But we also have global scripts which ran with defineCustomElements() (loader) before.

This way this is meant to be used is: the React output target creates a component.ts files which basically wraps all Stencil components into a React component which you can import and use in other React components, e.g. via <MyComponent />. You only need to call defineCustomElements when you want to use the raw web components, e.g. via <my-component></my-component>. The point of the React output target is to make this all simpler and use the React wrapper.

It's not possible to run the new React Output Target with the old renderToString and NextJS PageRouter anymore (see why in my previous comment).

I am not sure how you've used the React Output Target before but I believe it always has been this way that it would generate wrapper files. The current stable version of the React output target doesn't use renderToString at all. So I am not quite sure what you mean by this.

Allow user to specify if dist-custom-element or loader (like before, default) is used

You still can do that. In your stencil.config.ts you can define dist, dist-custom-element and the React Output Target and get artifacts for all of them. This will not change with the new version of this package.

Allow user to specify if renderToString is called internally or called by the user on the html (like before, default)

This is an opt-out of the new SSR concept. The client component is used on the server, like before.

Note that this new feature is mainly to be used for meta frameworks such as Next or Remix (haven't tested on that one yet). You can still run your own hydration process using renderToString manually, nothing has changed here (except that we have shipped updates to Stencil which now properly renders shadow components as declarative shadow DOM.

globalScript must be run or exported so it can be run by the user (not required if loader is used).

Not sure if I understand this issue. Do you have a concrete use case?

The new concept should either be a flag in the reactOutputTarget options or a completly independend package.
The manual way (calling hydrate.renderToString) should still work.

The SSR support for the React Output Target is behind a flag (hydrateModule). You are always able to manually render a component using renderToString as this is a Stencil feature and has not much to do with the React Output Target.

Is there a reason why the latest stable react-output-target is 0.5.3 from a year ago and newer dev version are available (like the one we test now) but never made it to stable?

There hasn't been any updates for quite some time. Just recently we have updated the React Output Target which we are still testing internally including this new feature.

sean-perkins

Great work! I don't see anything that is blocking.

I have one question on the compatibility with environments.

sean-perkins · 2024-08-26T18:26:15Z

packages/react-output-target/src/react-output-target/create-component-wrappers.ts

 }: {
  stencilPackageName: string;
  components: ComponentCompilerMeta[];
  customElementsDir: string;
  outDir: string;
  esModules?: boolean;
-  experimentalUseClient?: boolean;


Will older environments be able to parse (or skip) the use client; directive annotation in JS files?

Can you specify what you mean by that? Afaik use client; is a Next.js primitive and can be omitted in all other environments. This patch only emits use client when components are generated with a hydrate module, suggesting that the user wants enable SSR within Next.js applications. We have to evaluate support for other React frameworks, as this is currently only tested with Next.js.

Ahh I see, the use client; was moved to only be generated as part of the Next.js component wrappers. The config option was replaced with the hydrate module.

This makes sense - I don't have concerns 👍

smorrisods · 2024-09-26T17:19:32Z

packages/react-output-target/README.md

+
 | `customElementsDir`     | The directory where the custom elements are saved. This value is automatically detected from the Stencil configuration file for the `dist-custom-elements` output target. If you are working in an environment that uses absolute paths, consider setting this value manually. |
+
+| `hydrateModule`         | For server side rendering support, provide the package for importing the [Stencil Hydrate module](https://stenciljs.com/docs/hydrate-app#hydrate-app), e.g. `my-package/hydrate`. This will generate two files: a `component.server.ts` which defines all component wrappers and a `components.ts` that re-exports these components for importing in your application. |


Sorry to be late to the party but these additions to the table aren't included in it due to the extra new lines between them and the existing table.

@smorrisods thanks for pointing this out, mind raising a PR?

I'd be happy to!

Upon further investigation it looks like it has already been fixed in commit 75c6cce! No further PRs needed 🙂.

christian-bromann force-pushed the cb/nextjs branch from 661ae44 to cbceabb Compare July 3, 2024 01:03

christian-bromann changed the base branch from main to next July 3, 2024 01:08

christian-bromann force-pushed the cb/nextjs branch from cbceabb to f3a59a8 Compare July 3, 2024 01:21

This was referenced Jul 3, 2024

feat: Next.js Support ionic-team/stencil#5831

Open

Add first class support to @ionic/react for Next JS SSR + Partial page pre-rendering ionic-team/ionic-framework#29690

Open

christian-bromann marked this pull request as ready for review July 9, 2024 23:24

christian-bromann requested review from a team as code owners July 9, 2024 23:24

christian-bromann requested review from gnbm and tanner-reits and removed request for a team July 9, 2024 23:24

sean-perkins reviewed Jul 11, 2024

View reviewed changes

packages/example-project/component-library/stencil.config.ts Outdated Show resolved Hide resolved

tanner-reits approved these changes Jul 11, 2024

View reviewed changes

danielleroux mentioned this pull request Jul 12, 2024

ix.siemens.com with Next JS siemens/ix#1385

Open

2 tasks

christian-bromann mentioned this pull request Jul 16, 2024

feat(react): migrate to new React Output Target with Next.js support ionic-team/ionic-framework#29715

Draft

2 tasks

christian-bromann added 21 commits August 26, 2024 11:49

more improvements on light dom rendering

49ee9c0

remove duplicate hydrate ot

fd81738

remove style prop

7d4d7b8

fail if outdir is not set

2d31629

import hydration script and ssr runtime only within the server component

dbafadd

validate hydrate output target to be set if hydrateModule option is set

23b1659

improve implementation

48dff06

separate files for server and client components

d06fb5d

properly create server and client side components

31afc30

don't parse children

9663e57

use own runtime

4dc783c

validate that external runtime is set to 'true'

1ef2008

adjust test

d9ab5b6

update Stencil dev build

20ea6cc

recognise that externalRuntime default is true

3a463d2

bring back light DOM rendering for better hydration results

f7d88e9

revert light dom approach

9fbc202

minor formatting

f14121d

update stencil

99c2fc3

explicitly type component exports

85edd55

unit test tweak

1d2791a

christian-bromann force-pushed the cb/nextjs branch from df8c997 to 1d2791a Compare August 26, 2024 17:55

fix build

5e4a31f

sean-perkins approved these changes Aug 26, 2024

View reviewed changes

christian-bromann mentioned this pull request Aug 26, 2024

chore(react): bump package version #463

Merged

14 tasks

christian-bromann added 2 commits August 27, 2024 08:57

use latest Stencil release

f5ae554

fix test

6ae26e5

christian-bromann merged commit 399fe25 into main Aug 27, 2024
3 checks passed

christian-bromann deleted the cb/nextjs branch August 27, 2024 16:16

smorrisods reviewed Sep 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): Next.js Support #445

feat(react): Next.js Support #445

christian-bromann commented Jul 3, 2024 •

edited

Loading

christian-bromann commented Jul 10, 2024

tanner-reits left a comment

mayerraphael commented Jul 12, 2024

christian-bromann commented Jul 12, 2024

laurencefass commented Jul 12, 2024 •

edited

Loading

christian-bromann commented Jul 12, 2024 •

edited

Loading

mayerraphael commented Jul 15, 2024 •

edited

Loading

christian-bromann commented Jul 15, 2024

mayerraphael commented Jul 16, 2024 •

edited

Loading

laurencefass commented Jul 16, 2024

christian-bromann commented Jul 16, 2024

laurencefass commented Jul 16, 2024

christian-bromann commented Jul 16, 2024

mayerraphael commented Jul 17, 2024 •

edited

Loading

mayerraphael commented Jul 17, 2024 •

edited

Loading

christian-bromann commented Jul 17, 2024

sean-perkins left a comment

sean-perkins Aug 26, 2024

christian-bromann Aug 26, 2024

sean-perkins Aug 27, 2024

smorrisods Sep 26, 2024

christian-bromann Sep 26, 2024

smorrisods Sep 26, 2024

smorrisods Sep 26, 2024


		\| `customElementsDir` \| The directory where the custom elements are saved. This value is automatically detected from the Stencil configuration file for the `dist-custom-elements` output target. If you are working in an environment that uses absolute paths, consider setting this value manually. \|

		\| `hydrateModule` \| For server side rendering support, provide the package for importing the [Stencil Hydrate module](https://stenciljs.com/docs/hydrate-app#hydrate-app), e.g. `my-package/hydrate`. This will generate two files: a `component.server.ts` which defines all component wrappers and a `components.ts` that re-exports these components for importing in your application. \|

feat(react): Next.js Support #445

feat(react): Next.js Support #445

Conversation

christian-bromann commented Jul 3, 2024 • edited Loading

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

christian-bromann commented Jul 10, 2024

tanner-reits left a comment

Choose a reason for hiding this comment

mayerraphael commented Jul 12, 2024

christian-bromann commented Jul 12, 2024

laurencefass commented Jul 12, 2024 • edited Loading

christian-bromann commented Jul 12, 2024 • edited Loading

mayerraphael commented Jul 15, 2024 • edited Loading

Dist Custom Elements dir

Event with underscore got broken

Server render errors

christian-bromann commented Jul 15, 2024

mayerraphael commented Jul 16, 2024 • edited Loading

Edit:

laurencefass commented Jul 16, 2024

christian-bromann commented Jul 16, 2024

laurencefass commented Jul 16, 2024

christian-bromann commented Jul 16, 2024

mayerraphael commented Jul 17, 2024 • edited Loading

mayerraphael commented Jul 17, 2024 • edited Loading

GlobalScripts execution missing

Breaking change

Output Target Version

christian-bromann commented Jul 17, 2024

sean-perkins left a comment

Choose a reason for hiding this comment

sean-perkins Aug 26, 2024

Choose a reason for hiding this comment

christian-bromann Aug 26, 2024

Choose a reason for hiding this comment

sean-perkins Aug 27, 2024

Choose a reason for hiding this comment

smorrisods Sep 26, 2024

Choose a reason for hiding this comment

christian-bromann Sep 26, 2024

Choose a reason for hiding this comment

smorrisods Sep 26, 2024

Choose a reason for hiding this comment

smorrisods Sep 26, 2024

Choose a reason for hiding this comment

christian-bromann commented Jul 3, 2024 •

edited

Loading

laurencefass commented Jul 12, 2024 •

edited

Loading

christian-bromann commented Jul 12, 2024 •

edited

Loading

mayerraphael commented Jul 15, 2024 •

edited

Loading

mayerraphael commented Jul 16, 2024 •

edited

Loading

mayerraphael commented Jul 17, 2024 •

edited

Loading

mayerraphael commented Jul 17, 2024 •

edited

Loading