This is an example to demo how you generate the RSA key pair from server side(.NetCore 3.1) and pass the public key to the client(Browser) for encrypting the data that <= 245 bytes.
RSA-2048 can only support to encrypt up to 245 bytes data.
using var rsaProvider = new RSACng();
// spki is used for browser side encryption
var spki = Convert.ToBase64String(rsaProvider.ExportSubjectPublicKeyInfo());
var encodedPrivateKey = Convert.ToBase64String(rsaProvider.ExportPkcs8PrivateKey());
| "use client"; | |
| import { cache, unstable_postpone } from "react"; | |
| import { preload } from "react-dom"; | |
| const loadImage = cache((src: string) => { | |
| return new Promise<void>((resolve, reject) => { | |
| const img = new Image(); | |
| img.src = src; |
| 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"> |
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
| 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); | |
| } |