search

atellmer / dark

The lightweight and powerful UI rendering engine without dependencies and written in TypeScript💫 (Browser, Node.js, Android, iOS, Windows, Linux, macOS)
MIT License
40 stars 1 forks source link

renderToStream bootstrapScripts doesn't allow router's `lazy` to work #43

Closed Coachonko closed 2 months ago

Coachonko commented 3 months ago

renderToStream's bootstrapScripts does not mark scripts with the type="module" attribute. In the event that the browser bundle is loaded on the browser via this way, loading routes using the lazy function will not work, browsers will throw error Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

Suggested change: add bootstrapModules property to RenderToStreamOptions that accepts an array of string just like bootstrapScripts except the resulting output would be <script type="module" src="${script}" defer></script> instead of just <script src="${script}" defer></script>

Example of the issue is demonstrated here

atellmer commented 3 months ago

Ok, I will watch it soon. I need a little time to dive into the problem. However, it's also worth noting that I wouldn't recommend using document as the application's hydration point, because any browser extension will break everything due to not being represented in the Fiber tree.

Coachonko commented 3 months ago

Is there a use for bootstrapScripts when not hydrating the whole document? One could manually add the

) })

export default Page

 2. Pass `slot` not as a prop, but as a nested object in Navigation (jsx version)
```tsx
import { h, component } from '@dark-engine/core'
import { Router } from '@dark-engine/web-router'

import { routes } from '../routes/routes'
import Navigation from './Navigation'

const App = component(({ url }) => {
  return (
    <Router routes={routes} url={url}>{slot => <Navigation>{slot}</Navigation>}</Router>
  )
})

export default App
atellmer commented 3 months ago

The problem with paths can be solved by moving index.js inside the pages/ directory, or by somehow setting up Bun

1

Coachonko commented 3 months ago

Thank you for reporting this path issue, it was hidden by my incorrect usage of the slot property.

Pretty sure the issue is with Bun, I will report it to the Bun developers.

Bun developers confirmed it's a bug with Bun, a workaround was pushed to my repo.

In general, bootstrapScripts is needed in order to automatically add scripts, the paths to which may be unknown in advance and can be taken from the data of a builder, such as webpack. For example, not build.js, but build-abcd123.js.

I think I've achieved this behavior without bootstrapScripts just utilizing string interpolation in the server response. I thought that bootstrapScripts would be useful when the entire document is handled by Dark, because then string interpolation in the <head> is not as easy

atellmer commented 3 months ago

I thought that bootstrapScripts would be useful when the entire document is handled by Dark, because then string interpolation in the is not as easy

~What do you mean? Can you give an example code where it will not be easy, so that I can better understand your point?~