fix: add app.tsx assets to page event in dev env

[katywings]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• infrastructure changes
• Other... Please describe:

What is the current behavior?

During development app.css is only loaded in the browser via javascript, resulting in a flash of unstyled content.

What is the new behavior?

app.tsx is registered for asset collection in the pageEvent on the server. This way app.css and other potential css assets of app.tsx are added to the document head, during server side rendering.

Open Question

I am not 100% happy with the inlined src/app.tsx, do we have a proper way to access the path to app.tsx?

Other information

How it currently looks in a browser with disabled js:

How it should look:

owser with disabled js:

Credits

@nksaraf helped me to find the proper place to debug the issue 🙏.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1a48c63

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[edivados]

Can't reproduce with vinxi 0.3.10 but with vinxi 0.3.11 the issue is there.

With 0.3.10 app.css and dev-overlay/styles.css are present here.

solid-start/packages/start/src/server/pageEvent.ts

Line 32 in 2d75d5f

...(await clientManifest.inputs[clientManifest.handler]!.assets()),

I guess this is because of nksaraf/vinxi@04b3ff7 causing start's client/index.jsx to not be processed anymore. I lack insight here... may be intended by vinxi and should now be solved in start.

---

I am not 100% happy with the inlined src/app.tsx, do we have a proper way to access the path to app.tsx?

src directory (appRoot) is user configurable and jsx extension is also possible.

Suggestions:

Define global constant replacements

solid-start/packages/start/config/index.js

Lines 135 to 139 in 2d75d5f

	define: {
	"import.meta.env.START_ISLANDS": JSON.stringify(start.experimental.islands),
	"import.meta.env.SSR": JSON.stringify(true),
	"import.meta.env.START_SSR": JSON.stringify(start.ssr),
	"import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),

...(import.meta.env.DEV ? await clientManifest.inputs[import.meta.env.START_SOME_NAME]!.assets(): []),

Throw it on the ssr router's vite config (this is maybe bad... not sure about vite build mode here)

config("user", {
     ...userConfig,
     start: {
         someName: ""
     }

...(import.meta.env.DEV ? await clientManifest.inputs[serverManifest.dev.server.config.start.someName]!.assets(): []),

[katywings]

@nksaraf What do you think about @edivados suggestions?

[nksaraf]

Yeah this suggestion makes sense. The compile time/build time can provide the necessary paths and the runtime can use that.