TheSadMidDeveloper Posts

TheSadMidDeveloper

•Created by TheSadMidDeveloper on 10/6/2024 in #help

Add provider component to context

Hi, is this an anti-pattern in Fresh?

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

export default function App({ Component, SomeProvider }: PageProps) {
  return (
    <html>
      <SomeProvider>
        <Component />
      </SomeProvider>
    </html>
  );
}

Basically SomeProvider is attached to the ctx via middleware. Use-case is if you want to add server props coming from state. So instead of doing something like:

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

import { SomeProvider } from 'your-library'

export default function App({ Component, state }: PageProps) {
  return (
    <html>
      <SomeProvider serverProp1={state.serverProp1} serverProp2={state.serverProp2}>
        <Component />
      </SomeProvider>
    </html>
  );
}

It improves DX since user-land wont have to do this anymore. Will it be unique to each request? And if yes, how would you update PageProps type?

8 replies

DDeno

•Created by TheSadMidDeveloper on 10/1/2024 in #help

Redirecting inside a page in Fresh 2.0

Is returning a redirect response like this not working in Fresh 2.0 anymore?

import { define } from '../utils.ts';

export default define.page(function Page({ state }) {
  if (!state.isLoggedIn) {
    return new Response('', {
      status: 307,
      headers: { Location: '/sign-in' },
    });
  }

  return (
    <div style={{ display: 'flex' }}>
      I am logged in
    </div>
  );
});

import { define } from '../utils.ts';

export default define.page(function Page({ state }) {
  if (!state.isLoggedIn) {
    return new Response('', {
      status: 307,
      headers: { Location: '/sign-in' },
    });
  }

  return (
    <div style={{ display: 'flex' }}>
      I am logged in
    </div>
  );
});

Also, ctx.redirect is undefined so it's likely not implemented yet I believe?

3 replies

DDeno

•Created by TheSadMidDeveloper on 9/30/2024 in #help

How to load islands in Fresh 2.0 plugins?

Im doing this one but looks like it's not working

import * as allIslands from './islands/mod.ts' // named export components

export function somePlugin<T>(
  app: App<T>,
  options: SomeOptions = {}
) {
  app.use(someMiddleware(options))

  const islandsUrl = new URL('./islands/mod.ts', import.meta.url);
  for (const key of Object.keys(allIslands)) {
    app.island(islandsUrl, key, allIslands[key])
  }
}

import * as allIslands from './islands/mod.ts' // named export components

export function somePlugin<T>(
  app: App<T>,
  options: SomeOptions = {}
) {
  app.use(someMiddleware(options))

  const islandsUrl = new URL('./islands/mod.ts', import.meta.url);
  for (const key of Object.keys(allIslands)) {
    app.island(islandsUrl, key, allIslands[key])
  }
}

15 replies