preactjs / preact-iso Goto Github PK

When using a shadow DOM (such as with web components), the router ignores click events from a tags within shadow DOMs. (I believe it is due to this line.)
This is due to event retargeting.
I have encountered this issue with Material Web Components HREF buttons.

From what I have read, you can get the original element (in the shadow dom) from Event.composedPath(), as long as the shadow DOM was created in open mode. (the MWC buttons are.)

This leads to the entire app reloading when you click a link within a shadow DOM, instead of the router changing pages.

Hi, I'm receiving errors like:

src/app.tsx:47:13 - error TS2322: Type 'Element' is not assignable to type 'VNode<{}>[]'.

47             <Route path='/' component={Home} />
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/preact-iso/src/router.d.ts:9:2
    9  children?: VNode[];
       ~~~~~~~~
    The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { onRouteChange?: ((url: string) => void) | undefined; onLoadEnd?: ((url: string) => void) | undefined; onLoadStart?: ((url: string) => void) | undefined; children?: VNode<...>[] | undefined; }'

src/app.tsx:47:13 - error TS2322: Type 'Element' is not assignable to type 'VNode<{}>[]'.

47             <Route path='/' component={Home} />
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/preact-iso/src/router.d.ts:9:2
    9  children?: VNode[];
       ~~~~~~~~
    The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { onRouteChange?: ((url: string) => void) | undefined; onLoadEnd?: ((url: string) => void) | undefined; onLoadStart?: ((url: string) => void) | undefined; children?: VNode<...>[] | undefined; }'

I've search for something similar and stumble upon these:

• preactjs/preact#2748;
• preactjs/preact#1566;

I tried:

• adding FunctionalComponent type to the constant (not as return type);
• add "paths" and "baseUrl": preactjs/preact#2748 (comment);
• look through the documentation about TypeScript: https://preactjs.com/guide/v10/typescript;

I'm using this template: https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-preact-ts

Nothing has changed, except that I installed react-iso and tried to copy the last router example: Nested Routing.

BTW, in this example, the <ErrorBoundary> from "Profile" component is missing "/".

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And my package.json:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "node server",
    "build": "npm run build:client && npm run build:server",
    "build:client": "vite build --ssrManifest --outDir dist/client",
    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
    "generate": "vite build --outDir src/static && npm run build:server && node prerender.js",
    "preview": "cross-env NODE_ENV=production node server"
  },
  "dependencies": {
    "preact": "^10.19.3",
    "preact-iso": "^2.3.2",
    "preact-render-to-string": "^6.3.1"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.6.0",
    "@types/express": "^4.17.21",
    "@types/node": "^20.9.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "express": "^4.18.2",
    "sirv": "^2.0.3",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }
}

Hi,

I am looking for a documentation / example in order to do SSR + selective / partial rendering using Bun + Typescript + Preact + Preact-ISO + multi pages app.

I managed to do both SSR and non pre-rendered components but I don't manage to do both at the same time.

More explicitly, I would like to have 2 builds from the same application + components:

• One to generate one static HTML file per page and add a container for the menu in the Menu component if built for SSR (e.g. <div id="menu-app"><!-- pre rendered menu --></div>)
• One to generate a commonJS (or an ESM module) extension which will be loaded from my static files and generate the menu dynamically and display new links if the user is authenticated for example).

I found a few things, but nothing helpful for a multi page app using Preact-ISO.

I would really appreciate any help 🙇‍♂️

There is the Bun command to initiate the project:

bun create preact <name of app>

I have a more complex routing scenario, where I want to do a programmatic redirect without adding an entry to the history stack.

Normally this is possible with history.replaceState, however the location.route doesn't support this.

Something like this would be ideal:

const location = useLocation();
location.route('/some/path', { replace: true });

Thanks.

When using Vue Router or React Router, it's possible to navigate back to the previous page. However, the current useLocation().route() method only adds to the browser's navigation history, which can lead to incorrect behavior when users utilize the browser's own navigation tools.

For example:

1. useLocation().route('/edit') // go to edit page
2. useLocation().route('/') // go back

Expected routing history:

['/']

Actual routing history:

['/', '/edit', '/']

When the user clicks the browser's back button, they are taken back to the edit page, which is unexpected.

Perhaps it could be similar to the navigate function in react-router-dom, which supports passing in a number, like -1. ref: https://reactrouter.com/en/main/hooks/use-navigate

<Router>
    {['/', '/foo'].map((r) => (
        <Route path={r} component={Example} />
    ))}
    <Route path="/bar" component={Example} />
</Router>

This should be valid but the expression returns the following error:

Type 'Element[]' is missing the following properties from type 'VNode<{}>': type, props, key(2739)

(Weirdly enough, without the additional <Route>, no error is returned at all)

Route returns a VNode, not quite sure how in the world that becomes an Element[]. Expanding the children type to be a union of VNode[] | JSXInternal.Element[] allows for some invalid children that will break routing, so that's seemingly a no-go.

Not quite sure what the correct type is meant to be here.