React Strict DOM (RSD)

React Strict DOM provides a built-in way to create and use styles, variables, and themes using a strict subset of CSS capabilities defined in JavaScript. This approach ensures that styling requires only local knowledge within a component, facilitating cross-platform development.

Key API functions include:

• css.create: For creating style objects.
• css.createTheme: For defining themes.
• css.defineVars: For defining CSS variables.
• css.firstThatWorks: For fallback styling logic.

React Strict DOM provides a specialized CSS API for creating styles, themes, and managing variables. Key capabilities include:

• Creating styles with css.create.
• Managing themes with css.createTheme.
• Defining constants with css.defineConsts.
• Defining variables with css.defineVars.
• Using fallback values with css.firstThatWorks.

React Strict DOM utilizes a subset of standardized Web Platform APIs known as the Minimum Common Web Platform API. This subset defines a minimum set of capabilities common to both browser and non-browser JavaScript-based runtime environments, specifically targeting support in React Native and Hermes.

Note that globalThis APIs are treated as independent of multi-window concerns for user interfaces. For window-specific details, refer to the window API documentation.

React Strict DOM provides a set of html components that map to standard web elements while maintaining strictness across platforms.

Available components include:

• html.a (Anchor)
• html.button (Button)
• html.img (Image)
• html.input (Input)
• html.label (Label)
• html.li (List Item)
• html.optgroup (Option Group)
• html.option (Option)
• html.select (Select)
• html.textarea (Textarea)

Common components and props are available via html.*.

React Strict DOM provides interfaces for interacting with the environment and managing compatibility:

• Common Web API: Access to standard web APIs.
• compat: Utilities for handling platform compatibility.
• document: Access to the document object.
• window: Access to the window object.

To optimize builds and enable static CSS extraction for the web, create a babelLoader.config.js file. This configuration uses the react-strict-dom/babel-preset. Note that you should use babelLoader.config.js instead of babel.config.js when using Next.js.

const dev = process.env.NODE_ENV !== 'production'

const config = {
  parserOpts: {
    plugins: ['typescript', 'jsx'],
  },
  presets: [
    [
      'react-strict-dom/babel-preset',
      {
        debug: dev,
        dev,
        platform: 'web',
        rootDir: process.cwd(),
      },
    ],
  ],
};

export default config;

React Strict DOM uses platform-specific extensions (e.g., *.web.js). To ensure Next.js correctly resolves these for web builds and avoids loading native implementations, add the .web extensions to the resolveExtensions (Turbopack) and resolve.extensions (Webpack) configurations in next.config.js.

const webOnlyExtensions = ['.web.js', '.web.jsx', '.web.ts', '.web.tsx'];

const nextConfig: NextConfig = {
  // ...
  turbopack: {
    // ...
    resolveExtensions: [ ...webOnlyExtensions, ".tsx", ".ts", ".jsx", ".js", ".mjs", ".json"],
  },
  webpack: (config, { webpack }) => {
    // ...
    config.resolve.extensions = [ ...webOnlyExtensions, ...config.resolve.extensions];
    return config;
  },
};

If a pull request (patch) needs to be modified locally before merging, you can check it out into a new branch using the PR number. Replace <PR_NUMBER> with the actual number of the Pull Request.

git fetch origin pull/<PR_NUMBER>/head:pr-<PR_NUMBER>
git checkout pr-<PR_NUMBER>

To visually test patches, use the platform-tests app (an Expo app in the apps directory).

1. Build and watch react-strict-dom for changes:

   npm run dev -w react-strict-dom

2. In a separate process, start the platform tests:

   npm run dev -w platform-tests

3. Follow Expo instructions in the terminal to load the app in a browser, simulator, or on a physical device via Expo Go.