AlemTuzlak

// Your app load context function that generates the remix context object
const generateAppLoadContext = async (c: Context, build: ServerBuild) => {
  // example with i18n
  const locale = i18next.getLocale(c);
  const t = await i18next.getFixedT(c);

  return {
    appVersion: "v1.0",
    lang: locale,
    t, 

rphlmr

import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
import {
  ClientActionFunctionArgs,
  ClientLoaderFunctionArgs,
  useFetcher,
  useLoaderData,
} from '@remix-run/react';
import { enqueueActions, fromPromise, setup } from 'xstate';
import { useActor } from '@xstate/react';
import { useEffect, useRef } from 'react';

OliverJAsh

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

knowler

Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.

Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

1. Install your font:

   npm install --save @fontsource/montserrat

wesbos

// put this in a file where your service worker used to live, like yourdomain.com/service-worker.js. You can find out this path in the SW dev tools of your browser

self.addEventListener('install', (e) => {
  console.log('[Service Worker] Installing Service Worker ...', e);
  self.skipWaiting();
});

self.addEventListener('activate', (e) => {
  console.log('[ServiceWorker] Activate');
  self.registration

jacob-ebey

import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";

chaance

/**
 * @typedef {Object} ClassifyProps
 * @property {React.ElementType} [as] - Element to render
 * @property {import('clsx').ClassValue} [className] - Composable classnames passed to clsx
 */

/**
 * @param {ClassifyProps} props
 */
function Classify({ as: El = "div", ...props }) {

flybayer

// ----------------------------------------------------------------------
// Smart wrapper around Next.js <Link>
//
// This is to improve the default handling of Next.js dynamic links which
// requires both `href` and `as` props.
// This improvement enables the following usage:
//
// <Link page="/users/[id]" params={{ id: user.id }}>{user.name}</Link>
//
// <Link page="/blog/[...slug]" params={{ slug: ['coffee', 'frenchpress'] }}>View Here</Link>

ryanflorence

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

• Accessible
• Composable
• Stylable

jmporchet

import React from 'react';
import { render, fireEvent } from 'react-native-testing-library';
import { _EditPlanDetails as EditPlanDetails } from '../Settings/EditPlanDetails';

// Scrollviews are bugged in the current Expo/RN release and won't render in tests https://github.com/expo/expo/issues/2806#issuecomment-465373231
jest.mock('ScrollView', () => require.requireMock('ScrollViewMock'));

describe('EditPlanDetails', () => {
  const props = {
    subscription: {