Update build script to generate flow and TS types

Close #36

.flowconfig

@@ -4,15 +4,14 @@
 [ignore]
 .*/malformed_package_json/.*
 <PROJECT_ROOT>/.*/__tests__/.*
-<PROJECT_ROOT>/packages/react-strict-dom/dist/dom.www.js.flow
 
 [include]
 
 [libs]
 flow-typed
 
 [options]
-module.name_mapper='^react-strict-dom$' -> '<PROJECT_ROOT>/packages/react-strict-dom/dist/native.js.flow'
+module.name_mapper='^react-strict-dom$' -> '<PROJECT_ROOT>/packages/react-strict-dom/dist/native/index.js.flow'
 module.system.node.resolve_dirname=flow_modules
 module.system.node.resolve_dirname=node_modules
 suppress_type=$FlowIssue

.github/workflows/performance.yml

@@ -11,5 +11,5 @@ jobs:
       with:
         name: "runtime library"
         build-script: "build"
-        pattern: "./packages/react-strict-dom/dist/{dom.js,native.js,runtime.js}"
+        pattern: "./packages/react-strict-dom/dist/{dom/index.js,dom/runtime.js,native/index.js}"
         repo-token: "${{ secrets.GITHUB_TOKEN }}"

README.md

@@ -1,6 +1,6 @@
 # react-strict-dom dev
 
-[![Action status](https://github.com/facebook/react-strict-dom/workflows/tests/badge.svg)](https://github.com/facebook/react-strict-dom/actions)
+[![Action status](https://github.com/facebook/react-strict-dom/actions/workflows/tests.yml/badge.svg)](https://github.com/facebook/react-strict-dom/actions/workflows/tests.yml)
 
 Development monorepo for "React Strict DOM".
 

configs/rollup.config.js

@@ -126,7 +126,10 @@ const webConfigs = [
     external: ['react', 'react-dom', '@stylexjs/stylex'],
     input: require.resolve('../packages/react-strict-dom/src/dom/index.js'),
     output: {
-      file: path.join(__dirname, '../packages/react-strict-dom/dist/dom.js'),
+      file: path.join(
+        __dirname,
+        '../packages/react-strict-dom/dist/dom/index.js'
+      ),
       format: 'es'
     },
     plugins: [...ossPlugins]
@@ -138,7 +141,7 @@ const webConfigs = [
     output: {
       file: path.join(
         __dirname,
-        '../packages/react-strict-dom/dist/runtime.js'
+        '../packages/react-strict-dom/dist/dom/runtime.js'
       ),
       format: 'es'
     },
@@ -168,7 +171,10 @@ const nativeConfigs = [
     external: ['react', 'react-native', '@stylexjs/stylex'],
     input: require.resolve('../packages/react-strict-dom/src/native/index.js'),
     output: {
-      file: path.join(__dirname, '../packages/react-strict-dom/dist/native.js'),
+      file: path.join(
+        __dirname,
+        '../packages/react-strict-dom/dist/native/index.js'
+      ),
       format: 'es'
     },
     plugins: [...nativePlugins, ...ossPlugins]

packages/react-strict-dom/README.md

@@ -2,9 +2,9 @@
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react-strict-dom/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react-strict-dom.svg?style=flat)](https://www.npmjs.com/package/react-strict-dom)
 
-![web (prod)](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/runtime.js?label=web%20(prod)&compression=brotli)
-![web (dev)](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/dom.js?label=web%20(dev)&compression=brotli)
-![native](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/native.js?label=native&compression=brotli)
+![web (prod)](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/dom/runtime.js?label=web%20(prod)&compression=brotli)
+![web (dev)](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/dom/index.js?label=web%20(dev)&compression=brotli)
+![native](https://img.badgesize.io/https:/www.unpkg.com/react-strict-dom@latest/dist/native/index.js?label=native&compression=brotli)
 
 **React Strict DOM** (RSD) is an experimental integration of [React DOM](https://react.dev/) and [StyleX](https://stylexjs.com/) that aims to improve and standardize the development of styled React components for web and native. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at Meta ship features faster, to more platforms, with fewer engineers.
 

packages/react-strict-dom/babel.js

@@ -8,7 +8,7 @@ const { addNamed, addNamespace } = require('@babel/helper-module-imports');
 
 module.exports = function ({ types: t }) {
   const packageName = 'react-strict-dom';
-  const packageRuntime = 'react-strict-dom/dist/runtime';
+  const packageRuntime = 'react-strict-dom/dist/dom/runtime';
   const findImportDeclaration = (body, sourceValue) =>
     body.filter(
       (node) =>

packages/react-strict-dom/package.json

@@ -2,16 +2,16 @@
   "name": "react-strict-dom",
   "version": "0.0.2",
   "description": "React Strict DOM",
-  "main": "./dist/dom.js",
-  "module": "./dist/dom.js",
-  "react-native": "./dist/native.js",
+  "main": "./dist/dom/index.js",
+  "module": "./dist/dom/index.js",
+  "react-native": "./dist/native/index.js",
   "sideEffects": false,
   "files": [
     "*",
     "!**/__tests__"
   ],
   "scripts": {
-    "prebuild": "npm run clean && node ../../scripts/generate-libdef/generateLibdef.js",
+    "prebuild": "npm run clean && gen-types -i src/ -o dist",
     "build": "rollup --config ../../configs/rollup.config.js",
     "clean": "del-cli \"./dist/*\"",
     "dev": "npm run build -- --watch"

packages/react-strict-dom/src/dom/index.js

@@ -10,7 +10,8 @@
 import * as html from './html';
 import * as css from '@stylexjs/stylex';
 import { ThemeProvider } from './modules/ThemeContext';
+import { typeof ThemeProvider as TThemeProvider } from './modules/ThemeContext';
 
-const contexts = { ThemeProvider };
+const contexts = { ThemeProvider: (ThemeProvider: TThemeProvider) };
 
 export { contexts, css, html };

packages/react-strict-dom/src/dom/runtime.js

@@ -123,47 +123,47 @@ const textarea: StrictReactDOMPropsStyle = [
 const ul: StrictReactDOMPropsStyle = styles.block;
 
 export const defaultStyles = {
-  a,
-  article,
-  aside,
-  b,
-  bdi,
-  bdo,
-  blockquote,
-  br,
-  button,
-  code,
-  div,
-  em,
-  fieldset,
-  footer,
-  form,
-  h1: heading,
-  h2: heading,
-  h3: heading,
-  h4: heading,
-  h5: heading,
-  h6: heading,
-  header,
-  hr,
-  i,
-  img,
-  input,
-  label,
-  li,
-  main,
-  nav,
-  ol,
-  optgroup,
-  option,
-  p,
-  pre,
-  section,
-  select,
-  span,
-  strong,
-  sub,
-  sup,
-  textarea,
-  ul
+  a: (a: typeof a),
+  article: (article: typeof article),
+  aside: (aside: typeof aside),
+  b: (b: typeof b),
+  bdi: (bdi: typeof bdi),
+  bdo: (bdo: typeof bdo),
+  blockquote: (blockquote: typeof blockquote),
+  br: (br: typeof br),
+  button: (button: typeof button),
+  code: (code: typeof code),
+  div: (div: typeof div),
+  em: (em: typeof em),
+  fieldset: (fieldset: typeof fieldset),
+  footer: (footer: typeof footer),
+  form: (form: typeof form),
+  h1: (heading: typeof heading),
+  h2: (heading: typeof heading),
+  h3: (heading: typeof heading),
+  h4: (heading: typeof heading),
+  h5: (heading: typeof heading),
+  h6: (heading: typeof heading),
+  header: (header: typeof header),
+  hr: (hr: typeof hr),
+  i: (i: typeof i),
+  img: (img: typeof img),
+  input: (input: typeof input),
+  label: (label: typeof label),
+  li: (li: typeof li),
+  main: (main: typeof main),
+  nav: (nav: typeof nav),
+  ol: (ol: typeof ol),
+  optgroup: (optgroup: typeof optgroup),
+  option: (option: typeof option),
+  p: (p: typeof p),
+  pre: (pre: typeof pre),
+  section: (section: typeof section),
+  select: (select: typeof select),
+  span: (span: typeof span),
+  strong: (strong: typeof strong),
+  sub: (sub: typeof sub),
+  sup: (sup: typeof sup),
+  textarea: (textarea: typeof textarea),
+  ul: (ul: typeof ul)
 };

packages/react-strict-dom/src/native/index.js

@@ -7,10 +7,16 @@
  * @flow
  */
 
+import typeof * as TStyleX from '@stylexjs/stylex';
+
 import * as html from './html';
-import * as css from './stylex';
+import * as cssRaw from './stylex';
 import { ThemeProvider } from './modules/ThemeContext';
+import { typeof ThemeProvider as TThemeProvider } from './modules/ThemeContext';
+
+const contexts = { ThemeProvider: (ThemeProvider: TThemeProvider) };
 
-const contexts = { ThemeProvider };
+// Export using StyleX types as the shim has divergent types internally.
+const css: TStyleX = (cssRaw: $FlowFixMe);
 
 export { contexts, css, html };

packages/react-strict-dom/src/native/modules/flattenStyle.js

@@ -12,7 +12,7 @@ import type { Style, Styles } from '../../types/styles';
 // TODO: optimize
 export function flattenStyle(
   style: ?Styles | Style | Array<Styles | Style>
-): ?Style {
+): ?{ ...Style } {
   if (style === null || typeof style !== 'object') {
     return undefined;
   }

packages/react-strict-dom/src/native/stylex/index.js

@@ -19,7 +19,7 @@ import { CSSLengthUnitValue } from './CSSLengthUnitValue';
 import { CSSMediaQuery } from './CSSMediaQuery';
 import { errorMsg, warnMsg } from '../../shared/errorMsg';
 import { fixContentBox } from './fixContentBox';
-import { flattenStyle } from './flattenStyle';
+import { flattenStyle } from './flattenStyleXStyles';
 import { parseShadow } from './parseShadow';
 import { parseTimeValue } from './parseTimeValue';