sergiodxa

import type { Remix } from "@remix-run/dom";
import { press } from "@remix-run/events/press";

function Component(this: Remix.Handle) {
  let isMounted = false;
  let renderCount = 0;

  // Runs once after first render (setup phase)
  this.queueTask(() => {
    isMounted = true;

sergiodxa

import { hydrated, type Remix } from "@remix-run/dom";
import { press } from "@remix-run/events/press";
import {
  QueryClient,
  QueriesObserver,
  type QueryObserverOptions,
} from "@tanstack/query-core";

type Todo = {
  userId: number;

sergiodxa

import type { Remix } from "@remix-run/dom";
import { press } from "@remix-run/events/press";

import { state } from "./state";

export function Counter(this: Remix.Handle, { initial }: { initial?: number }) {
  let [count, setCount] = state(this, initial ?? 0);

  return () => (
    <button type="button" on={[press(() => setCount((c) => c + 1))]}>

sergiodxa

import { index, prefix, route } from "@react-router/dev/routes";
import { camelize, pluralize, singularize } from "inflected";

function createCrud(base = "./views") {
	/**
	 * Create a CRUD route configuration.
	 * @param name The name of the resource. It will be pluralized for the path.
	 * @param options The options for the crud.
	 * @param options.member Extra routes to add to each member.
	 * @param options.collection Extra routes to add to the collection.

sergiodxa

// use JSX with el instead of React.createElement
/** @jsx createElement */

const Children = {
  only(children) {
    if (children.length > 1 || children.length === 0) {
      throw new Error('The children must have only one element');
    }
    return children[0];
  }

sergiodxa

import { renderToStream } from "@react-pdf/renderer";
import ReactDOMServer from "react-dom/server";
import { EntryContext, Headers, RemixServer, Request, Response } from "remix";
import PDF, { loader } from "./pdfs/my-pdf.server";

async function handlePDFRequest(request: Request, headers: Headers) {
  // get the data for the PDF
  let response = await loader({ request, context: {}, params: {} });
  // if it's a response return it, this means we redirected
  if (response instanceof Response) return response;

sergiodxa

import React from "react";

const FeatureFlags = React.createContext(null);

export function FeatureProvider({ features = null, children }) {
  if (features === null || typeof features !== "object") {
    throw new TypeError("The features prop must be an object or an array.");
  }
  return (
    <FeatureFlags.Provider value={features}>{children}</FeatureFlags.Provider>

sergiodxa

function asyncThread(fn, ...args) {
  if (!window.Worker) throw Promise.reject(
    new ReferenceError(`WebWorkers aren't available.`)
  );
  
  const fnWorker = `
  self.onmessage = function(message) {
    (${fn.toString()})
      .apply(null, message.data)
      .then(result => self.postMessage(result));

sergiodxa

import Auth0 from "@auth/core/providers/auth0";

import { RemixAuth } from "~/services/auth"
import { sessionStorage } from "~/services/session.server";

export let { loader, action } = RemixAuth({
  sessionStorage: sessionStorage, // this does nothing yet
  secret: process.env.AUTH_SECRET ?? "s3cr3t",
  providers: [
    Auth0({

sergiodxa

Persist user inputs after form submit in Remix

This tutorial will show you how to persist user inputs after form submit in Remix.

Prerequisites

• Remix installed

Steps