revert JSX ext change in Snack params, it breaks the entry point

Simek · Simek · commit 710da9ef7c49 · 2025-08-28T11:10:42.000+02:00
diff --git a/docs/animations.md b/docs/animations.md
@@ -20,7 +20,7 @@ For example, a container view that fades in when it is mounted may look like thi
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer ext=jsx
+```SnackPlayer ext=js
 import React, {useEffect, useRef} from 'react';
 import {Animated, Text, View} from 'react-native';
 
diff --git a/docs/checkbox.md b/docs/checkbox.md
@@ -11,7 +11,7 @@ This is a controlled component that requires an `onValueChange` callback that up
 
 ## Example
 
-```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web&ext=jsx
+```SnackPlayer name=CheckBox%20Component%20Example&supportedPlatforms=android,web&ext=js
 import React, {useState} from 'react';
 import {CheckBox, Text, StyleSheet, View} from 'react-native';
 
diff --git a/docs/drawerlayoutandroid.md b/docs/drawerlayoutandroid.md
@@ -12,7 +12,7 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=jsx
+```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android&ext=js
 import React, {useRef, useState} from 'react';
 import {Button, DrawerLayoutAndroid, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
diff --git a/docs/easing.md b/docs/easing.md
@@ -48,7 +48,7 @@ The following helpers are used to modify other easing functions.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Easing%20Demo&ext=jsx
+```SnackPlayer name=Easing%20Demo&ext=js
 import React, {useRef} from 'react';
 import {
   Animated,
diff --git a/docs/flatlist.md b/docs/flatlist.md
@@ -25,7 +25,7 @@ If you need section support, use [`<SectionList>`](sectionlist.md).
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Simple%20FlatList%20Example&ext=jsx
+```SnackPlayer name=Simple%20FlatList%20Example&ext=js
 import React from 'react';
 import {View, FlatList, StyleSheet, Text, StatusBar} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
@@ -157,7 +157,7 @@ More complex, selectable example below.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=flatlist-selectable&ext=jsx
+```SnackPlayer name=flatlist-selectable&ext=js
 import React, {useState} from 'react';
 import {
   FlatList,
diff --git a/docs/flexbox.md b/docs/flexbox.md
@@ -68,7 +68,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-direction
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Flex%20Direction&ext=jsx
+```SnackPlayer name=Flex%20Direction&ext=js
 import React, {useState} from 'react';
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 
@@ -285,7 +285,7 @@ Layout [`direction`](layout-props#direction) specifies the direction in which ch
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Flex%20Direction&ext=jsx
+```SnackPlayer name=Flex%20Direction&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -512,7 +512,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/justify-conten
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Justify%20Content&ext=jsx
+```SnackPlayer name=Justify%20Content&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -755,7 +755,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/align-items-se
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Align%20Items&ext=jsx
+```SnackPlayer name=Align%20Items&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -988,7 +988,7 @@ export default AlignItemsLayout;
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Align%20Self&ext=jsx
+```SnackPlayer name=Align%20Self&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -1240,7 +1240,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/align-content)
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Align%20Content&ext=jsx
+```SnackPlayer name=Align%20Content&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -1481,7 +1481,7 @@ When wrapping lines, `alignContent` can be used to specify how the lines are pla
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Flex%20Wrap&ext=jsx
+```SnackPlayer name=Flex%20Wrap&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
@@ -1712,7 +1712,7 @@ You can learn more [here](https://www.yogalayout.dev/docs/styling/flex-basis-gro
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=jsx
+```SnackPlayer name=Flex%20Basis%2C%20Grow%2C%20and%20Shrink&ext=js
 import React, {useState} from 'react';
 import {View, Text, TextInput, StyleSheet} from 'react-native';
 
@@ -2085,7 +2085,7 @@ You can use `flexWrap` and `alignContent` along with `gap` to add consistent spa
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=jsx
+```SnackPlayer name=Row%20Gap%20and%20Column%20Gap&ext=js
 import React, {useState} from 'react';
 import {View, Text, StyleSheet, TextInput} from 'react-native';
 
@@ -2312,7 +2312,7 @@ Both `width` and `height` can take the following values:
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Width%20and%20Height&ext=jsx
+```SnackPlayer name=Width%20and%20Height&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
@@ -2588,7 +2588,7 @@ The `position` type of an element defines how it is positioned relative to eithe
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Position&ext=jsx
+```SnackPlayer name=Position&ext=js
 import React, {useState} from 'react';
 import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
 
diff --git a/docs/improvingux.md b/docs/improvingux.md
@@ -20,7 +20,7 @@ Check out [`TextInput` docs](textinput.md) for more configuration options.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=TextInput%20form%20example&ext=jsx
+```SnackPlayer name=TextInput%20form%20example&ext=js
 import React, {useState, useRef} from 'react';
 import {
   Alert,
@@ -215,7 +215,7 @@ Software keyboard takes almost half of the screen. If you have interactive eleme
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=KeyboardAvoidingView%20example&ext=jsx
+```SnackPlayer name=KeyboardAvoidingView%20example&ext=js
 import React, {useState, useRef} from 'react';
 import {
   Alert,
diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md
@@ -46,7 +46,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js
 import React, {useEffect} from 'react';
 import {
   Alert,
@@ -219,7 +219,7 @@ export default App;
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=InteractionManager%20Function%20Component%20Advanced%20Example&supportedPlatforms=ios,android&ext=js
 import React, {useEffect} from 'react';
 import {
   Alert,
diff --git a/docs/intro-react.md b/docs/intro-react.md
@@ -92,7 +92,7 @@ Any JavaScript expression will work between curly braces, including function cal
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Curly%20Braces&ext=jsx
+```SnackPlayer name=Curly%20Braces&ext=js
 import React from 'react';
 import {Text} from 'react-native';
 
@@ -226,7 +226,7 @@ You can put as many cats in your cafe as you like. Each `<Cat>` renders a unique
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Multiple%20Props&ext=jsx
+```SnackPlayer name=Multiple%20Props&ext=js
 import React from 'react';
 import {Text, View} from 'react-native';
 
@@ -332,7 +332,7 @@ You can add state to a component by calling [React’s `useState` Hook](https://
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=State&ext=jsx
+```SnackPlayer name=State&ext=js
 import React, {useState} from 'react';
 import {Button, Text, View} from 'react-native';
 
diff --git a/docs/layout-props.md b/docs/layout-props.md
@@ -14,7 +14,7 @@ The following example shows how different properties can affect or shape a React
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=LayoutProps%20Example&ext=jsx
+```SnackPlayer name=LayoutProps%20Example&ext=js
 import React, {useState} from 'react';
 import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
diff --git a/docs/legacy/direct-manipulation.md b/docs/legacy/direct-manipulation.md
@@ -66,7 +66,7 @@ Composite components are not backed by a native view, so you cannot call `setNat
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=jsx
+```SnackPlayer name=setNativeProps%20with%20Composite%20Components&ext=js
 import React from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
@@ -119,7 +119,7 @@ Since the `setNativeProps` method exists on any ref to a `View` component, it is
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Forwarding%20setNativeProps&ext=jsx
+```SnackPlayer name=Forwarding%20setNativeProps&ext=js
 import React from 'react';
 import {Text, TouchableOpacity, View} from 'react-native';
 
@@ -174,7 +174,7 @@ Another very common use case of `setNativeProps` is to edit the value of the Tex
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Clear%20text&ext=jsx
+```SnackPlayer name=Clear%20text&ext=js
 import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
@@ -319,7 +319,7 @@ This method can also be called with a `relativeToNativeNode` handler (instead of
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=jsx
+```SnackPlayer name=measureLayout%20example&supportedPlatforms=android,ios&ext=js
 import React, {useEffect, useRef, useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
diff --git a/docs/linking.md b/docs/linking.md
@@ -131,7 +131,7 @@ You can handle these events with `Linking.getInitialURL()` - it returns a Promis
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
 import React, {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
@@ -237,7 +237,7 @@ export default App;
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
 import React, {useCallback} from 'react';
 import {Button, Linking, StyleSheet, View} from 'react-native';
 
@@ -316,7 +316,7 @@ export default App;
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=Linking%20Example&supportedPlatforms=ios,android&ext=js
 import React, {useState, useEffect} from 'react';
 import {Linking, StyleSheet, Text, View} from 'react-native';
 
@@ -429,7 +429,7 @@ export default App;
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=jsx
+```SnackPlayer name=Linking%20Example&supportedPlatforms=android&ext=js
 import React, {useCallback} from 'react';
 import {Alert, Button, Linking, StyleSheet, View} from 'react-native';
 
diff --git a/docs/network.md b/docs/network.md
@@ -77,7 +77,7 @@ Don't forget to catch any errors that may be thrown by `fetch`, otherwise they w
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Fetch%20Example&ext=jsx
+```SnackPlayer name=Fetch%20Example&ext=js
 import React, {useEffect, useState} from 'react';
 import {ActivityIndicator, FlatList, Text, View} from 'react-native';
 
diff --git a/docs/props.md b/docs/props.md
@@ -32,7 +32,7 @@ Your own components can also use `props`. This lets you make a single component
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Props&ext=jsx
+```SnackPlayer name=Props&ext=js
 import React from 'react';
 import {Text, View} from 'react-native';
 
diff --git a/docs/segmentedcontrolios.md b/docs/segmentedcontrolios.md
@@ -13,7 +13,7 @@ The selected index can be changed on the fly by assigning the selectedIndex prop
 
 ## Example
 
-```SnackPlayer name=SegmentedControlIOS%20Example&supportedPlatforms=ios&ext=jsx
+```SnackPlayer name=SegmentedControlIOS%20Example&supportedPlatforms=ios&ext=js
 import React, {useState} from 'react';
 import {SegmentedControlIOS, StyleSheet, Text, View} from 'react-native';
 
diff --git a/docs/shadow-props.md b/docs/shadow-props.md
@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=jsx&dependencies=@react-native-community/slider
+```SnackPlayer name=Shadow%20Props&supportedPlatforms=ios&ext=js&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
diff --git a/docs/share.md b/docs/share.md
@@ -10,7 +10,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=jsx
+```SnackPlayer name=Example&supportedPlatforms=ios,android&ext=js
 import React from 'react';
 import {Alert, Share, Button} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
diff --git a/docs/state.md b/docs/state.md
@@ -14,7 +14,7 @@ For example, let's say we want to make text that blinks all the time. The text i
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=State&ext=jsx
+```SnackPlayer name=State&ext=js
 import React, {useState, useEffect} from 'react';
 import {Text, View} from 'react-native';
 
diff --git a/docs/statusbar.md b/docs/statusbar.md
@@ -14,7 +14,7 @@ It is possible to have multiple `StatusBar` components mounted at the same time.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=jsx
+```SnackPlayer name=StatusBar%20Component%20Example&supportedPlatforms=android,ios&ext=js
 import React, {useState} from 'react';
 import {
   Button,
diff --git a/docs/text-style-props.md b/docs/text-style-props.md
@@ -10,7 +10,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=jsx&dependencies=@react-native-community/slider
+```SnackPlayer name=TextStyleProps&supportedPlatforms=ios,android&ext=js&dependencies=@react-native-community/slider
 import React, {useState} from 'react';
 import {
   FlatList,
diff --git a/docs/the-new-architecture/direct-manipulation.md b/docs/the-new-architecture/direct-manipulation.md
@@ -25,7 +25,7 @@ For example, the following code demonstrates editing the input when you tap a bu
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=setNativeProps%20on%20TextInput&ext=jsx
+```SnackPlayer name=setNativeProps%20on%20TextInput&ext=js
 import React from 'react';
 import {useCallback, useRef} from 'react';
 import {
diff --git a/docs/tutorial.md b/docs/tutorial.md
@@ -66,7 +66,7 @@ Your own components can also use `props`. This lets you make a single component
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Hello%20Props&ext=jsx
+```SnackPlayer name=Hello%20Props&ext=js
 import React from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 
diff --git a/docs/virtualizedlist.md b/docs/virtualizedlist.md
diff --git a/packages/lint-examples/bin/eslint-examples-jsx.js b/packages/lint-examples/bin/eslint-examples-jsx.js
diff --git a/packages/lint-examples/src/lintExamples.js b/packages/lint-examples/src/lintExamples.js
