react Architecture Docs
Home / File/ Page.js — react Source File

Page.js — react Source File

Architecture documentation for Page.js, a javascript file in the react codebase. 8 imports, 1 dependents.

File javascript BabelCompiler Entrypoint 8 imports 1 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  ef975ced_d6a7_b295_dbfc_38e701d92f78["Page.js"]
  4b747fe5_c4c8_5191_f40d_84115cfe4dbd["SwipeRecognizer.js"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 4b747fe5_c4c8_5191_f40d_84115cfe4dbd
  51ca97f2_30b8_8bb8_5a8e_c9f0d7f90432["SwipeRecognizer"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 51ca97f2_30b8_8bb8_5a8e_c9f0d7f90432
  8c1013ac_c635_07f0_bc74_8b92a824e5f0["Page.css"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 8c1013ac_c635_07f0_bc74_8b92a824e5f0
  9bd727a3_4203_abe8_fa8c_0cb9a59d2881["Transitions.module.css"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 9bd727a3_4203_abe8_fa8c_0cb9a59d2881
  0b935850_668f_6cc3_49c5_79c9d8654554["NestedReveal.js"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 0b935850_668f_6cc3_49c5_79c9d8654554
  fb46da95_679f_1012_2211_651fe33a2cef["NestedReveal"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> fb46da95_679f_1012_2211_651fe33a2cef
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  4d0c4ccc_5970_e7f9_458f_15f0290099b1["react-dom"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 4d0c4ccc_5970_e7f9_458f_15f0290099b1
  d17ad6e6_5117_524c_98d3_e7c0244faa6b["App.js"]
  d17ad6e6_5117_524c_98d3_e7c0244faa6b --> ef975ced_d6a7_b295_dbfc_38e701d92f78
  style ef975ced_d6a7_b295_dbfc_38e701d92f78 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React, {
  addTransitionType,
  ViewTransition,
  Activity,
  useLayoutEffect,
  useEffect,
  useInsertionEffect,
  useState,
  useId,
  useOptimistic,
  startTransition,
  Suspense,
} from 'react';

import {createPortal} from 'react-dom';

import SwipeRecognizer from './SwipeRecognizer.js';

import './Page.css';

import transitions from './Transitions.module.css';
import NestedReveal from './NestedReveal.js';

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const a = (
  <div key="a">
    <ViewTransition>
      <div>a</div>
    </ViewTransition>
  </div>
);

const b = (
  <div key="b">
    <ViewTransition>
      <div>b</div>
    </ViewTransition>
  </div>
);

function Component() {
  // Test inserting fonts with style tags using useInsertionEffect. This is not recommended but
  // used to test that gestures etc works with useInsertionEffect so that stylesheet based
  // libraries can be properly supported.
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .roboto-font {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 100;
        font-style: normal;
        font-variation-settings:
          "wdth" 100;
      }
    `;
    document.head.appendChild(style);
// ... (268 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does Page.js do?
Page.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in Page.js?
Page.js defines 5 function(s): Component, Id, Page, Suspend, sleep.
What does Page.js depend on?
Page.js imports 8 module(s): NestedReveal, NestedReveal.js, Page.css, SwipeRecognizer, SwipeRecognizer.js, Transitions.module.css, react, react-dom.
What files import Page.js?
Page.js is imported by 1 file(s): App.js.
Where is Page.js in the architecture?
Page.js is located at fixtures/view-transition/src/components/Page.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/view-transition/src/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free