chaance

Given the following structure:

| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css

chaance

Given the following structure:

| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css

chaance

function CarouselExample() {
  // data we might use to render the carousel. This is just a generic example,
  // data could come from anywhere. For us it comes from Replo component data.
  const products = useProductsQuery({ limit: 10 });
  const matchesMobile = useMatchMedia(MOBILE_MQ);
  const matchesTablet = useMatchMedia(TABLET_MQ);

  const [activeSlide, setActiveSlide] = React.useState(0);
  const slides = products.length;

chaance

import { redirect, type LoaderArgs } from "@remix-run/node";

export async function removeTrailingSlashes(request: Request) {
  let url = new URL(request.url);
  if (url.pathname.endsWith("/") && url.pathname !== "/") {
    throw redirect(url.pathname.slice(0, -1) + url.search);
  }
}

export async function loader({ request }: LoaderArgs) {

chaance

/**
 * ------------------------------------------------------------------------------
 * IMPORTANT UPDATE:
 * This is *not* a complete implementation and I do not suggest using it!. This
 * was primarily an experiment to determine whether or not a decent blocking
 * hook could be implemented in userland, and the answer we came up with is NO.
 *
 * Luckily we added `usePrompt` (behind an `unstable_` flag) back to React Router
 * a few versions ago! It's not documented [and I'm no longer on the team, so I
 * probably won't try to do anything about that], but you can see it in source.

chaance

import * as React from "react";
import { useNavigation, type Navigation } from "@remix-run/react";

export function useTransition(): Transition {
  let navigation = useNavigation();

  return React.useMemo(
    () => convertNavigationToTransition(navigation),
    [navigation]
  );

chaance

import type { LoaderArgs } from "@remix-run/node";
import { json } from "@remix-run/node";

import {
  getSocialImageUrl,
  getImageContentType,
} from "~/utils.server";

export async function loader({ request }: LoaderArgs) {
  let requestUrl = new URL(request.url);

chaance

Changesets GitHub Review (2022/10/31)

General questions/notes

• Question: is it a problem for you all to have lots of old/stale open issues lingering around? I personally find that distracting if things aren't actionable, but if that's not a problem for you feel free to ignore some of this.
• There are lots of good ideas and feature requests, but I'm curious if you all have discussed priorities for new features or a future version.
• There are some open issues marked "good first issue" that seem pretty simple I might try and tackle. No question here, just a note!

Easy to close issues

chaance

import { useState, useEffect } from "react";
import blogs from "./blogs";
import "./App.css";

// Task:
//  - Update the `useBlogPosts` hook to "fetch" blog posts using the
//    `getBlogPosts` function. It should return blog posts (if we have them), an
//    error (if it exists) and the loading state.
//  - Update the `Blog` component to render each blog post once they have been
//    fetched. Make sure you handle error cases if the fetch fails or if we

chaance

Remix styling roadmap

Up to this point, Remix has taken a hands-off approach to styling with anything other than plain CSS. This made sense in the beginning because we took a very different approach to CSS than most other component-driven frameworks. We want users to actually understand how CSS actually makes it to the page, and following the path of other frameworks means introducing some magic that obscures that.

That being said, it's not a viable strategy long-term to stay agnostic about