Truong Hoang Dung revskill10

## recursive-rsc-stream-inline.ts
import * as React from "react";
// @ts-ignore
import * as ReactDOM from "#react-dom-server-implementation";
// @ts-ignore
import * as ReactDOMClient from "#react-server-dom-client-implementation";

export async function fetch(
	request: Request,
	{
		browserEntry,

## frontmatter.js
// helps us in parsing the frontmatter from text content
const matter = require('gray-matter')
// helps us safely stringigy the frontmatter as a json object
const stringifyObject = require('stringify-object')
// helps us in getting the reading time for a given text
const readingTime = require('reading-time')

// please make sure you have installed these dependencies
// before proceeding further, or remove the require statements
// that you don't use

## jsx-dom.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">

## WhyReact.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                revskill10
                / WhyReact.md
            
            
              Created
              August 15, 2023 16:52
                — forked from sebmarkbage/WhyReact.md
            
              
                Why is React doing this?
              
          
    I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.
I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.
"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

  
## gist:a50840e1f4228c8bdfa37935ab9000d5
import type { ZodType, z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { getValidatedFormData as getValidatedFormDataPrimitive, useRemixForm as useForm, UseRemixFormOptions } from "remix-hook-form";

interface UseRemixFormZodOptions<T extends ZodType, U extends FromZodType<T>> extends UseRemixFormOptions<U> {
  schema: T;
}

export type FromZodType<T extends ZodType> = z.infer<T>;

## page.tsx
import { Markdown } from "@/app/components/markdown";
import { getComments, getPost } from "@/lib/db";
import { Suspense } from "react";

export default async function PostPage({
  params,
}: {
  params: { postId: string };
}) {
  let post = await getPost(params.postId);

## combine-provider.tsx
import { ComponentProps, FC, Fragment } from "react";

export interface ProvidersProps {
  children: React.ReactNode;
}

export type ProviderWithProps = [FC<ProvidersProps>, Object];

/**
 * Function that combines all the context providers into a single one.

## Infrastructure.js
let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

## genpath.mjs
import fs from 'fs';
import path from 'path';

function getCompName(filePath) {
    const fileName = filePath.split('.')[0]
const componentName = fileName.replace(/\[|\]/g, '')
  .split('/')
  .filter(part => part !== 'routes')
  .map(part => part.charAt(0).toUpperCase() + part.slice(1))
  .join('');

## translations.ts
type Path<T, Key extends keyof any = keyof T> = Key extends keyof T
  ? T[Key] extends object
    ? T[Key] extends infer R
      ? `${Key & string}.${Path<R, keyof R>}` | `${Key & string}`
      : never
    : `${Key & string}`
  : never;

type Paths<T> = Path<T> extends string ? Path<T> : never;
function translation<T, P extends Paths<T>>(
	import * as React from "react";
	// @ts-ignore
	import * as ReactDOM from "#react-dom-server-implementation";
	// @ts-ignore
	import * as ReactDOMClient from "#react-server-dom-client-implementation";

	export async function fetch(
	request: Request,
	{
	browserEntry,
	// helps us in parsing the frontmatter from text content
	const matter = require('gray-matter')
	// helps us safely stringigy the frontmatter as a json object
	const stringifyObject = require('stringify-object')
	// helps us in getting the reading time for a given text
	const readingTime = require('reading-time')

	// please make sure you have installed these dependencies
	// before proceeding further, or remove the require statements
	// that you don't use
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="module">
	import type { ZodType, z } from "zod";
	import { zodResolver } from "@hookform/resolvers/zod";
	import { getValidatedFormData as getValidatedFormDataPrimitive, useRemixForm as useForm, UseRemixFormOptions } from "remix-hook-form";

	interface UseRemixFormZodOptions<T extends ZodType, U extends FromZodType<T>> extends UseRemixFormOptions<U> {
	schema: T;
	}

	export type FromZodType<T extends ZodType> = z.infer<T>;
	import { Markdown } from "@/app/components/markdown";
	import { getComments, getPost } from "@/lib/db";
	import { Suspense } from "react";

	export default async function PostPage({
	params,
	}: {
	params: { postId: string };
	}) {
	let post = await getPost(params.postId);
	import { ComponentProps, FC, Fragment } from "react";

	export interface ProvidersProps {
	children: React.ReactNode;
	}

	export type ProviderWithProps = [FC<ProvidersProps>, Object];

	/**
	* Function that combines all the context providers into a single one.
	let cache = new Map();
	let pending = new Map();

	function fetchTextSync(url) {
	if (cache.has(url)) {
	return cache.get(url);
	}
	if (pending.has(url)) {
	throw pending.get(url);
	}
	import fs from 'fs';
	import path from 'path';

	function getCompName(filePath) {
	const fileName = filePath.split('.')[0]
	const componentName = fileName.replace(/\[\|\]/g, '')
	.split('/')
	.filter(part => part !== 'routes')
	.map(part => part.charAt(0).toUpperCase() + part.slice(1))
	.join('');
	type Path<T, Key extends keyof any = keyof T> = Key extends keyof T
	? T[Key] extends object
	? T[Key] extends infer R
	? `${Key & string}.${Path<R, keyof R>}` \| `${Key & string}`
	: never
	: `${Key & string}`
	: never;

	type Paths<T> = Path<T> extends string ? Path<T> : never;
	function translation<T, P extends Paths<T>>(