Skip to content

Commit 02475c7

Browse files
axyzaxyz
authored
Merge branch 'main' into fix/double-font-scaling
2 parents 2611f48 + 620e5ae commit 02475c7

83 files changed

Lines changed: 1493 additions & 878 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.flowconfig‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
[version]
2-
0.270.0
2+
0.307.1
33

44
[ignore]
55
.*/malformed_package_json/.*
66
<PROJECT_ROOT>/.*/__tests__/.*
77

88
[include]
99

10+
[declarations]
11+
.*/node_modules/.*
12+
1013
[options]
1114
casting_syntax=as
1215
component_syntax=true
1316
module.name_mapper='^react-strict-dom$' -> '<PROJECT_ROOT>/packages/react-strict-dom/dist/native/index.js.flow'
1417
module.system.node.resolve_dirname=flow_modules
1518
module.system.node.resolve_dirname=node_modules
1619
react.runtime=automatic
17-
suppress_type=$FlowIssue
18-
suppress_type=$FlowFixMe
20+
21+
experimental.ts_utility_syntax=true
22+
experimental.deprecated_utilities='$ReadOnlyArray' -> '<PROJECT_ROOT>/'
23+
experimental.deprecated_utilities='$NonMaybeType' -> '<PROJECT_ROOT>/'
24+
experimental.deprecated_utilities='$ReadOnly' -> '<PROJECT_ROOT>/'
25+
experimental.deprecated_utilities='mixed' -> '<PROJECT_ROOT>/'
26+
experimental.deprecated_utilities='$ReadOnlyMap' -> '<PROJECT_ROOT>/'
27+
experimental.deprecated_utilities='$ReadOnlySet' -> '<PROJECT_ROOT>/'
28+
experimental.deprecated_utilities='$Keys' -> '<PROJECT_ROOT>/'
29+
experimental.deprecated_utilities='$Values' -> '<PROJECT_ROOT>/'
30+
experimental.deprecated_colon_extends=<PROJECT_ROOT>/
1931

2032
[strict]
2133
nonstrict-import

‎apps/platform-tests/src/components/App.js‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ScrollView } from 'react-native';
1212
import { css, html } from 'react-strict-dom';
1313
import { tokens, themeColors, systemColors } from './tokens.css.js';
1414

15-
type ExampleBlockProps = $ReadOnly<{
15+
type ExampleBlockProps = Readonly<{
1616
title: string,
1717
children: React.Node
1818
}>;
@@ -71,24 +71,30 @@ const themedStyles = css.create({
7171

7272
function ThemeExample() {
7373
return (
74+
// $FlowFixMe[incompatible-type]
7475
<html.div style={themedStyles.container}>
7576
{/* default theme */}
77+
{/* $FlowFixMe[incompatible-type] */}
7678
<html.div style={themedStyles.square} />
7779
{/* redblue theme */}
7880
<html.div style={redBlueTheme}>
81+
{/* $FlowFixMe[incompatible-type] */}
7982
<html.div style={themedStyles.square} />
8083
</html.div>
8184
{/* purpleyellow theme */}
8285
<html.div style={purpleYellowTheme}>
86+
{/* $FlowFixMe[incompatible-type] */}
8387
<html.div style={themedStyles.square} />
8488
</html.div>
8589
{/* greenpink theme */}
8690
<html.div style={greenPinkTheme}>
91+
{/* $FlowFixMe[incompatible-type] */}
8792
<html.div style={themedStyles.square} />
8893
</html.div>
8994
{/* nested theme */}
9095
<html.div style={redBlueTheme}>
9196
<html.div style={greenPinkTheme}>
97+
{/* $FlowFixMe[incompatible-type] */}
9298
<html.div style={themedStyles.square} />
9399
</html.div>
94100
</html.div>
@@ -152,6 +158,7 @@ function Shell(): React.MixedElement {
152158
<html.div>dfadsafdsfadsf inside div (kind of) works</html.div>
153159
<html.span>
154160
span inside div inside span...
161+
{/* $FlowFixMe[incompatible-type] */}
155162
<html.div style={styles.textAncestorTest}>
156163
<html.span>works</html.span>
157164
</html.div>
@@ -212,6 +219,7 @@ function Shell(): React.MixedElement {
212219
console.log(e.type, e);
213220
}}
214221
src="http://placehold.jp/150x150.png"
222+
// $FlowFixMe[incompatible-type]
215223
style={styles.objContain}
216224
width={150}
217225
/>
@@ -290,8 +298,11 @@ function Shell(): React.MixedElement {
290298

291299
{/* flex row undoes block layout emulation and correct flex child layout */}
292300
<html.p>display:flex defaults and children</html.p>
301+
{/* $FlowFixMe[incompatible-type] */}
293302
<html.div style={styles.row}>
303+
{/* $FlowFixMe[incompatible-type] */}
294304
<html.div style={[styles.square, styles.w1000]} />
305+
{/* $FlowFixMe[incompatible-type] */}
295306
<html.div style={[styles.square, styles.blueSquare]}>
296307
<html.div style={styles.whiteBox}>
297308
<html.p>Back to block</html.p>
@@ -303,6 +314,7 @@ function Shell(): React.MixedElement {
303314

304315
<html.p>display:block resets flex properties</html.p>
305316
{/* display block undoes row layout and emulates block again */}
317+
{/* $FlowFixMe[incompatible-type] */}
306318
<html.div style={[styles.row, styles.blockW300]}>
307319
<html.div style={styles.square} />
308320
<html.div style={[styles.square, styles.bgBlue]} />
@@ -328,31 +340,40 @@ function Shell(): React.MixedElement {
328340
{/* logical styles emulation */}
329341
<ExampleBlock title="CSS Logical">
330342
<html.div>
343+
{/* $FlowFixMe[incompatible-type] */}
331344
<html.div style={styles.logicalPadding} />
345+
{/* $FlowFixMe[incompatible-type] */}
332346
<html.div style={styles.logicalMargin} />
347+
{/* $FlowFixMe[incompatible-type] */}
333348
<html.div style={styles.logicalBorder} />
334349
</html.div>
335350
</ExampleBlock>
336351

337352
{/* CSS positioning (static by default) */}
338353
<ExampleBlock title="CSS Position">
354+
{/* $FlowFixMe[incompatible-type] */}
339355
<html.div style={[styles.p50, styles.relative]}>
340356
<html.div style={styles.p50}>
357+
{/* $FlowFixMe[incompatible-type] */}
341358
<html.div style={[styles.square, styles.absTopLeft]} />
342359
</html.div>
360+
{/* $FlowFixMe[incompatible-type] */}
343361
<html.div style={[styles.relative, styles.p50]}>
362+
{/* $FlowFixMe[incompatible-type] */}
344363
<html.div style={[styles.square, styles.absTopLeft]} />
345364
</html.div>
346365
</html.div>
347366
</ExampleBlock>
348367

349368
{/* CSS text */}
350369
<ExampleBlock title="CSS Text styles">
370+
{/* $FlowFixMe[incompatible-type] */}
351371
<html.div style={styles.lineHeightUnitless}>
352372
<html.span style={styles.text}>
353373
<html.span style={styles.text}>test</html.span> (unitless)
354374
</html.span>
355375
</html.div>
376+
{/* $FlowFixMe[incompatible-type] */}
356377
<html.div style={styles.lineHeightEm}>
357378
<html.span style={styles.text}>test (em)</html.span>
358379
</html.div>
@@ -462,6 +483,7 @@ function Shell(): React.MixedElement {
462483
</html.button>
463484
<html.p>Transform + Opacity</html.p>
464485
<html.div
486+
// $FlowFixMe[incompatible-type]
465487
style={[
466488
styles.square,
467489
styles.transitionAll,
@@ -478,9 +500,13 @@ function Shell(): React.MixedElement {
478500

479501
{/* visibility */}
480502
<ExampleBlock title="CSS Visibility">
503+
{/* $FlowFixMe[incompatible-type] */}
481504
<html.div style={styles.flex}>
505+
{/* $FlowFixMe[incompatible-type] */}
482506
<html.div style={[styles.square, styles.visibilityCollapse]} />
507+
{/* $FlowFixMe[incompatible-type] */}
483508
<html.div style={[styles.square, styles.visibilityHidden]} />
509+
{/* $FlowFixMe[incompatible-type] */}
484510
<html.div style={[styles.square, styles.visibilityVisible]} />
485511
</html.div>
486512
</ExampleBlock>
@@ -491,7 +517,7 @@ function Shell(): React.MixedElement {
491517
<html.div style={styles.square} />
492518
<html.input
493519
placeholder="input type:text"
494-
// $FlowFixMe
520+
// $FlowFixMe[incompatible-type]
495521
style={styles.input}
496522
type="text"
497523
/>
@@ -511,7 +537,7 @@ function Shell(): React.MixedElement {
511537
<html.div style={styles.square} />
512538
<html.input
513539
placeholder="input type:text"
514-
// $FlowFixMe
540+
// $FlowFixMe[incompatible-type]
515541
style={styles.input}
516542
type="text"
517543
/>
@@ -523,7 +549,7 @@ function Shell(): React.MixedElement {
523549
<html.div style={styles.square} />
524550
<html.input
525551
placeholder="input type:text"
526-
// $FlowFixMe
552+
// $FlowFixMe[incompatible-type]
527553
style={styles.input}
528554
type="text"
529555
/>
@@ -535,6 +561,7 @@ function Shell(): React.MixedElement {
535561

536562
{/* hover */}
537563
<ExampleBlock title="CSS :hover, :focus, :active">
564+
{/* $FlowFixMe[incompatible-type] */}
538565
<html.textarea style={styles.pseudoStates} />
539566
</ExampleBlock>
540567

@@ -581,7 +608,9 @@ function Shell(): React.MixedElement {
581608
style={[styles.h100, styles.dynamicBg(clickData.color)]}
582609
>
583610
<html.span style={styles.bgWhite}>{clickData.text}</html.span>
611+
{/* $FlowFixMe[incompatible-type] */}
584612
<html.div style={styles.flex}>
613+
{/* $FlowFixMe[incompatible-type] */}
585614
<html.div style={[styles.flex, styles.flexGrow]}>
586615
<html.div>
587616
<html.span>
@@ -604,6 +633,7 @@ function Shell(): React.MixedElement {
604633
</html.span>
605634
</html.div>
606635
</html.div>
636+
{/* $FlowFixMe[incompatible-type] */}
607637
<html.div style={[styles.flex, styles.flexGrow]}>
608638
<html.div>
609639
<html.span>button: {clickEventData.button}</html.span>
@@ -624,6 +654,7 @@ function Shell(): React.MixedElement {
624654
setImageLoadText(`${e.type}: loaded`);
625655
}}
626656
src="http://placehold.jp/150x150.png"
657+
// $FlowFixMe[incompatible-type]
627658
style={styles.objContain}
628659
width={150}
629660
/>
@@ -634,6 +665,7 @@ function Shell(): React.MixedElement {
634665
setImageErrorText(`${e.type}: errored`);
635666
}}
636667
src="http://error"
668+
// $FlowFixMe[incompatible-type]
637669
style={styles.objContain}
638670
width={150}
639671
/>

‎apps/platform-tests/src/components/tokens.css.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { StyleVars } from 'react-strict-dom';
1212
import { css } from 'react-strict-dom';
1313

1414
export const tokens: StyleVars<
15-
$ReadOnly<{
15+
Readonly<{
1616
squareColor: string,
1717
textColor: string,
1818
inputColor: string,
@@ -29,7 +29,7 @@ export const tokens: StyleVars<
2929
});
3030

3131
export const themeColors: StyleVars<
32-
$ReadOnly<{
32+
Readonly<{
3333
primary100: string,
3434
primary200: string
3535
}>
@@ -39,7 +39,7 @@ export const themeColors: StyleVars<
3939
});
4040

4141
export const systemColors: StyleVars<
42-
$ReadOnly<{
42+
Readonly<{
4343
squareColor: string,
4444
outlineColor: string
4545
}>

0 commit comments

Comments
 (0)