fix(js): update ts config for hippy-react-demo

driver/js/examples/hippy-react-demo/app.d.ts

@@ -0,0 +1,2 @@
+declare module '*.jpg';
+declare module '*.png';

driver/js/examples/hippy-react-demo/package.json

@@ -31,6 +31,7 @@
     "animated-scroll-to": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^9.1.2",
     "react-router": "~5.1.2",
     "react-router-dom": "~5.1.2",
     "regenerator-runtime": "^0.13.5",
@@ -48,11 +49,16 @@
     "@babel/polyfill": "^7.12.0",
     "@babel/preset-env": "^7.12.0",
     "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.24.7",
     "@hippy/debug-server-next": "latest",
     "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
     "@hippy/hippy-hmr-plugin": "^0.1.0",
     "@hippy/hippy-react-refresh-webpack-plugin": "^0.5.5",
     "@hippy/rejection-tracking-polyfill": "^1.0.0",
+    "@types/hippy__react": "^2.13.4",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-loader": "^8.1.0",
     "bezier-easing": "^2.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.android.js

@@ -47,14 +47,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(jsx?)$/,
+        test: /\.((j|t)sx?)$/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               sourceType: 'unambiguous',
               presets: [
                 '@babel/preset-react',
+                '@babel/preset-typescript',
                 [
                   '@babel/preset-env',
                   {
@@ -90,7 +91,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     // if node_modules path listed below is not your repo directory, change it.
     modules: [path.resolve(__dirname, '../node_modules')],
     alias: (() => {

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.dev.js

@@ -67,7 +67,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(jsx?)$/,
+        test: /\.((j|t)sx?)$/,
         exclude: /@hippy\/hippy-react-devtools-plugin/,
         use: [
           {
@@ -76,6 +76,7 @@ module.exports = {
               sourceType: 'unambiguous',
               presets: [
                 '@babel/preset-react',
+                '@babel/preset-typescript',
                 [
                   '@babel/preset-env',
                   {
@@ -117,7 +118,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     modules: [path.resolve(__dirname, '../node_modules')],
     alias: (() => {
       const aliases = {};

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.ios.js

@@ -47,14 +47,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(jsx?)$/,
+        test: /\.((j|t)sx?)$/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               sourceType: 'unambiguous',
               presets: [
                 '@babel/preset-react',
+                '@babel/preset-typescript',
                 [
                   '@babel/preset-env',
                   {
@@ -90,7 +91,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     // if node_modules path listed below is not your repo directory, change it.
     modules: [path.resolve(__dirname, '../node_modules')],
     alias: (() => {

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.dev.js

@@ -42,14 +42,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(jsx?)$/,
+        test: /\.((j|t)sx?)$/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               sourceType: 'unambiguous',
               presets: [
                 '@babel/preset-react',
+                '@babel/preset-typescript',
                 [
                   '@babel/preset-env',
                   {
@@ -87,7 +88,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     modules: [path.resolve(__dirname, '../node_modules')],
     alias: (() => {
       const aliases = {

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web.js

@@ -34,14 +34,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(jsx?)$/,
+        test: /\.((j|t)sx?)$/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               sourceType: 'unambiguous',
               presets: [
                 '@babel/preset-react',
+                '@babel/preset-typescript',
                 [
                   '@babel/preset-env',
                   {
@@ -78,7 +79,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     modules: [path.resolve(__dirname, '../node_modules')],
     alias: (() => {
       const aliases = {

driver/js/examples/hippy-react-demo/src/app.jsx

@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import {
   ConsoleModule,
 } from '@hippy/react';
-import HomeEntry from './pages/entry';
-import ContainerView from './shared/ContainerView';
+import { View, Text } from '@hippy/react';
 
 export default class App extends Component {
   componentDidMount() {
@@ -12,9 +11,9 @@ export default class App extends Component {
 
   render() {
     return (
-      <ContainerView>
-        <HomeEntry />
-      </ContainerView>
+      <View style={{ backgroundColor: '#f0f0f0f0', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text style={{ fontSize: 24, color: '#0f0f0f' }}>Hello World!</Text>
+      </View>
     );
   }
 }

driver/js/examples/hippy-react-demo/src/pages/allowTs.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  View,
+} from '@hippy/react';
+import png from './back-icon.png';
+
+interface AllowTsProps {
+  test: string;
+}
+
+const AllowTs: React.FC<AllowTsProps> = ({ test }) => {
+  return (
+    <View>
+      AllowTs
+      <img src={png} />
+    </View>
+  );
+}
+export default connect()(AllowTs);

driver/js/examples/hippy-react-demo/src/pages/entry.jsx

@@ -7,6 +7,7 @@ import { View } from '@hippy/react';
 import routes from '../routes';
 import Header from '../shared/Header';
 import Gallery from './gallery';
+import AllowTs from "./allowTs";
 
 const ALL_ROUTES = [{
   path: '/Gallery',
@@ -16,6 +17,7 @@ const ALL_ROUTES = [{
 
 export const Entry = () => (
   <View style={{ flex: 1 }}>
+    <AllowTs test='1' />
     <MemoryRouter initialEntries={['/Gallery']}>
       {
         ALL_ROUTES.map((item) => {

driver/js/examples/hippy-react-demo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "dom"],
+    "declaration": true,
+    "rootDir": ".",
+    "baseUrl": "./",
+    "outDir": "dist",
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false
+  },
+  "include": ["src/*", "app.d.ts"],
+  "exclude": ["node_modules", "dist", "**/dist", "**/node_modules"]
+}